-
-
- - - 知识图谱 - -
- - 计算机 - -
- - 电子 - -
- - 军事理论 - -
- - 软件工程 - -
- - 医学 - -
- - 通信 - -
- - 政策法规 - -
- - 大数据 - -
- - 人工智能 - + { + taskCategoryArr.map((item, i) => { + return (
- + + {item.name} + ) + }) + }
@@ -51,7 +127,7 @@ function FifthSection({ fifth }) {
@@ -67,7 +143,35 @@ function FifthSection({ fifth }) {
defaultActiveKey={['1']}
expandIconPosition="right"
>
-
- 创客空间领域
+ 创客空间
{item.name}
+
+
+ + + {taskModeNameArr[item.taskModeId]} + ¥ {item.bounty} +
+ ++ + 发布时间 + {moment(item.publishedAt || item.createdAt).format('YYYY-MM-DD')} +
+ ++ + 截止时间 + {getSomeDayAfter(item.publishedAt || item.createdAt, item.collectingDays)} +
+研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。
@@ -89,6 +193,7 @@ function FifthSection({ fifth }) {
研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。
@@ -132,7 +237,7 @@ function FifthSection({ fifth }) {
2021-06-20
-
@@ -30,16 +55,27 @@ function FirstSection({ first }) {
-
- 
- 
- 
- 
- 
- 
- 
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
+
@@ -55,8 +91,8 @@ function FirstSection({ first }) {
*/}
{/* */}
-
-
+
+
diff --git a/src/home/FirstSection/index.scss b/src/home/FirstSection/index.scss
index b96b23dc2..5138c469c 100644
--- a/src/home/FirstSection/index.scss
+++ b/src/home/FirstSection/index.scss
@@ -1,23 +1,24 @@
.home-first-section {
- height: 90vh;
- min-height: 650px;
- background: linear-gradient(
- #1a2358 0%,
- #12277b 33%,
- #0c2d8f 67%,
- #002a89 100%
- );
+ height: 90vh;
+ min-height: 650px;
+ background: linear-gradient(
+ #1a2358 0%,
+ #12277b 33%,
+ #0c2d8f 67%,
+ #002a89 100%
+ );
.grid-picture {
position: relative;
height: 100%;
background: url(../img/grid.png) no-repeat;
background-size: 100% auto;
- .waves{
+ .waves {
position: absolute;
left: 0;
right: 0;
bottom: 0;
+ height: 10vh;
}
}
@@ -25,7 +26,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- height: 82vh;
+ height: 80vh;
min-height: 600px;
}
@@ -55,13 +56,11 @@
opacity: 0.8;
}
- .website-more{
+ .website-more {
margin: 0;
}
}
-
-
.play-img {
display: flex;
flex: none;
@@ -83,10 +82,25 @@
.play-circle {
position: absolute;
width: 165px;
+ height: 160px;
right: 18%;
+ bottom: -5.5%;
z-index: 2;
// animation: circle 0.75s 1 forwards;
}
+
+ .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 {
+ position: absolute;
+ width: 85px;
+ height: 53px;
+ right: 24.1%;
+ bottom: 9%;
+ z-index: 2;
+ border: 1px solid rgb(73, 169, 241);
+ // border: 1px solid rgb(49, 82, 237);
+ border-radius: 50%;
+ }
+
.play-pillar {
position: absolute;
left: -11%;
@@ -94,20 +108,64 @@
width: 230px;
// animation: pillar 0.75s 1 forwards;
}
- .play-code {
+ .play-box1 {
+ position: absolute;
+ left: -7%;
+ bottom: 30%;
+ width: 57px;
+ // animation: box1 0.75s 1 forwards;
+ }
+ .play-box2 {
+ position: absolute;
+ left: -1%;
+ bottom: 34%;
+ width: 57px;
+ // animation: box2 0.75s 1 forwards;
+ }
+ .play-box3 {
+ position: absolute;
+ left: 5%;
+ bottom: 38%;
+ width: 57px;
+ // animation: box3 0.75s 1 forwards;
+ }
+ .play-box4 {
+ position: absolute;
+ left: 11%;
+ bottom: 42%;
+ width: 57px;
+ // animation: box4 0.75s 1 forwards;
+ }
+
+ // .play-code {
+ // position: absolute;
+ // right: -4%;
+ // top: 18%;
+ // width: 211px;
+ // z-index: 1;
+ // }
+ .play-code1 {
+ position: absolute;
+ right: 1%;
+ top: 33%;
+ width: 128px;
+ z-index: 1;
+ }
+ .play-code-bed {
position: absolute;
right: -4%;
- top: 18%;
+ top: 44%;
width: 211px;
z-index: 1;
- // animation: code 0.75s 1 forwards;
+ opacity: 1;
}
.play-logo {
position: absolute;
top: 25%;
width: 87px;
- // animation: logo 1.5s 0.5s infinite;
z-index: 10;
+ color: #fff;
+ font-size: 40px;
}
.play-text1 {
position: absolute;
@@ -115,7 +173,6 @@
// right: 5%;
// width: 262px;
// bottom: 11%;
- // animation: text1-show 0.5s 1 0.5s forwards;
}
.play-text2 {
position: absolute;
@@ -123,55 +180,111 @@
// bottom: 10%;
// left: 6%;
// width: 262px;
- // animation: text2-show 0.5s 1 0.5s forwards;
}
.play-text3 {
position: absolute;
// right: 6%;
// top: -4%;
// width: 227px;
- // animation: text3-show 0.5s 1 0.5s forwards;
}
.play-text4 {
position: absolute;
// top: 7%;
// left: 18%;
// width: 206px;
- // animation: text4-show 0.5s 1 0.5s forwards;
}
}
-
- .active{
+ .active {
.website {
animation: website 0.75s 1 forwards;
}
- .play-glass{
+ .play-glass {
animation: glass 0.75s 1 forwards;
}
.play-circle {
animation: circle 0.75s 1 forwards;
}
- .play-pillar {
- animation: pillar 0.75s 1 forwards;
+ .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
+ animation: circle-before 0.75s 1 forwards;
}
- .play-code {
- animation: code 0.75s 1 forwards;
+ // .play-pillar {
+ // animation: pillar 0.75s 1 forwards;
+ // }
+ .play-box1 {
+ animation: box1 0.75s 1 forwards;
+ }
+ .play-box2 {
+ animation: box2 0.75s 1 forwards;
+ }
+ .play-box3 {
+ animation: box3 0.75s 1 forwards;
+ }
+ .play-box4 {
+ animation: box4 0.75s 1 forwards;
+ }
+ // .play-code {
+ // animation: code 0.75s 1 forwards;
+ // }
+ .play-code1 {
+ animation: code1 0.75s 1 forwards;
+ }
+ .play-code-bed {
+ animation: codeBed 0.75s 1 forwards;
}
.play-logo {
- animation: logo 1.5s 0.5s infinite;
+ animation: logo 6s 0.5s infinite; //linear
}
.play-text1 {
- animation: text1-show 0.5s 1 0.5s forwards;
+ // animation: text1-show 0.5s 1 0.5s forwards;
+ animation: text1-show 6s 0.5s infinite;
}
.play-text2 {
- animation: text2-show 0.5s 1 0.5s forwards;
+ animation: text2-show 6s 0.5s infinite;
}
.play-text3 {
- animation: text3-show 0.5s 1 0.5s forwards;
+ animation: text3-show 6s 0.5s infinite;
}
.play-text4 {
- animation: text4-show 0.5s 1 0.5s forwards;
+ animation: text4-show 6s 0.5s infinite;
+ }
+
+ .circulation {
+ .play-code1 {
+ animation: code1-circulation 6s infinite;
+ }
+
+ .play-box1 {
+ animation: box1-circulation 2s infinite;
+ }
+
+ .play-box2 {
+ animation: box2-circulation 2s infinite;
+ }
+
+ .play-box3 {
+ animation: box3-circulation 2s infinite;
+ }
+
+ .play-box4 {
+ animation: box4-circulation 2s infinite;
+ }
+
+ .play-circle-circle1{
+ animation: circle-circle 6s 0.25s infinite;
+ }
+ .play-circle-circle2{
+ animation: circle-circle 6s 2.25s infinite;
+ }
+ .play-circle-circle3{
+ animation: circle-circle 6s 4.25s infinite;
+ }
+ // .play-circle-circle4{
+ // animation: circle-circle 6s 4.5s infinite;
+ // }
+ // .play-circle-circle5{
+ // animation: circle-circle 6s 6s infinite;
+ // }
}
}
@@ -185,9 +298,7 @@
opacity: 1;
}
}
-
-
-
+
@keyframes glass {
0% {
opacity: 0;
@@ -200,25 +311,103 @@
top: 0;
}
}
-
+
@keyframes logo {
- 10% {
- opacity: 0;
- top: 33%;
- transform: rotateY(0deg);
+ 0% {
+ opacity: 1;
+ top: 23%;
+ // transform: scale(.5);
+ // transform: rotateY(0deg);
}
50% {
opacity: 1;
top: 12%;
- transform: rotateY(360deg);
+ // transform: scale(1.2);
+ // transform: rotateY(360deg);
}
- 90% {
- opacity: 0;
- top: 33%;
- transform: rotateY(360deg);
+ 100% {
+ opacity: 1;
+ top: 23%;
+ // transform: scale(.5);
+ // transform: rotateY(360deg);
}
}
-
+
+ // logo动效方案一
+ // @keyframes logo {
+ // 10% {
+ // opacity: 0;
+ // top: 33%;
+ // transform: rotateY(0deg);
+ // }
+ // 50% {
+ // opacity: 1;
+ // top: 12%;
+ // transform: rotateY(360deg);
+ // }
+ // 90% {
+ // opacity: 0;
+ // top: 33%;
+ // transform: rotateY(360deg);
+ // }
+ // }
+
+ // logo动效方案二
+ // @keyframes logo {
+ // 15% {
+ // opacity: 0;
+ // top: 33%;
+ // // transform: rotate(0deg);
+ // }
+ // 40% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateX(0deg);
+ // }
+ // 60% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateX(360deg);
+ // }
+ // 85% {
+ // opacity: 0;
+ // top: 40%;
+ // // transform: rotateY(360deg);
+ // }
+ // }
+
+ // logo动效方案三
+ // @keyframes logo {
+ // 0% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateY(0deg);
+ // }
+
+ // 25% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateY(90deg);
+ // }
+ // 50% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateY(180deg);
+ // }
+
+ // 75% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateY(270deg);
+ // }
+
+ // 100% {
+ // opacity: 1;
+ // top: 10%;
+ // transform: rotateY(360deg);
+ // }
+ // }
+
@keyframes circle {
0% {
opacity: 0;
@@ -229,86 +418,357 @@
bottom: -5.5%;
}
}
-
- @keyframes pillar {
+
+ @keyframes circle-before {
0% {
opacity: 0;
- top: 47%;
+ bottom: -1%;
}
100% {
opacity: 1;
- top: 38%;
+ bottom: 9%;
}
}
-
- @keyframes code {
+
+ // @keyframes pillar {
+ // 0% {
+ // opacity: 0;
+ // top: 47%;
+ // }
+ // 100% {
+ // opacity: 1;
+ // top: 38%;
+ // }
+ // }
+
+ @keyframes box1 {
0% {
opacity: 0;
- top: 40%;
+ bottom: 20%;
}
100% {
+ opacity: 1;
+ bottom: 30%;
+ }
+ }
+
+ @keyframes box2 {
+ 0% {
+ opacity: 0;
+ bottom: 24%;
+ }
+ 100% {
+ opacity: 1;
+ bottom: 34%;
+ }
+ }
+
+ @keyframes box3 {
+ 0% {
+ opacity: 0;
+ bottom: 28%;
+ }
+ 100% {
+ opacity: 1;
+ bottom: 38%;
+ }
+ }
+
+ @keyframes box4 {
+ 0% {
+ opacity: 0;
+ bottom: 32%;
+ }
+ 100% {
+ opacity: 1;
+ bottom: 42%;
+ }
+ }
+
+ @keyframes box1-circulation {
+ 0% {
+ opacity: 1;
+ height: 60px;
+ }
+ 48% {
+ height: 65px;
+ }
+ 52% {
+ height: 65px;
+ }
+ 100% {
+ height: 60px;
+ opacity: 1;
+ }
+ }
+
+ @keyframes box2-circulation {
+ 0% {
+ height: 96px;
+ opacity: 1;
+ }
+ 48% {
+ height: 90px;
+ }
+ 52% {
+ height: 90px;
+ }
+ 100% {
+ height: 96px;
+ opacity: 1;
+ }
+ }
+
+ @keyframes box3-circulation {
+ 0% {
+ height: 128px;
+ opacity: 1;
+ }
+ 48% {
+ height: 135px;
+ }
+ 52% {
+ height: 135px;
+ }
+ 100% {
+ height: 128px;
+ opacity: 1;
+ }
+ }
+
+ @keyframes box4-circulation {
+ 0% {
+ height: 113px;
+ opacity: 1;
+ }
+ 48% {
+ height: 108px;
+ }
+ 52% {
+ height: 108px;
+ }
+ 100% {
+ height: 113px;
+ opacity: 1;
+ }
+ }
+
+ // @keyframes code {
+ // 0% {
+ // opacity: 0;
+ // top: 40%;
+ // }
+ // 100% {
+ // opacity: 1;
+ // top: 30%;
+ // }
+ // }
+
+ @keyframes code1 {
+ 0% {
+ opacity: 0;
+ top: 43%;
+ }
+ 100% {
+ opacity: 1;
+ top: 33%;
+ }
+ }
+
+ @keyframes code1-circulation {
+ 0% {
+ opacity: 1;
+ top: 33%;
+ }
+ 50% {
opacity: 1;
top: 30%;
}
+ 100% {
+ opacity: 1;
+ top: 33%;
+ }
}
-
+
+ @keyframes codeBed {
+ 0% {
+ opacity: 0;
+ top: 54%;
+ }
+ 100% {
+ opacity: 1;
+ top: 44%;
+ }
+ }
+
@keyframes text1-show {
- from {
+ 5% {
opacity: 0;
width: 0;
bottom: 36%;
right: 60%;
}
- to {
+ 20% {
opacity: 1;
width: 262px;
bottom: 12%;
left: 55%;
}
- }
-
- @keyframes text2-show {
- from {
+ 80% {
+ opacity: 1;
+ width: 262px;
+ bottom: 12%;
+ left: 55%;
+ }
+ 100% {
opacity: 0;
width: 0;
bottom: 36%;
right: 60%;
}
- to {
+ }
+
+ @keyframes text2-show {
+ 5% {
+ opacity: 0;
+ width: 0;
+ bottom: 36%;
+ right: 60%;
+ }
+ 20% {
opacity: 1;
width: 262px;
bottom: 10%;
right: 56%;
}
+ 80% {
+ opacity: 1;
+ width: 262px;
+ bottom: 10%;
+ right: 56%;
+ }
+ 100% {
+ opacity: 0;
+ width: 0;
+ bottom: 36%;
+ right: 60%;
+ }
}
-
+
@keyframes text3-show {
- from {
+ 5% {
opacity: 0;
width: 0;
right: 36%;
top: 50%;
}
- to {
+ 20% {
opacity: 1;
right: 8%;
top: 6%;
width: 227px;
}
- }
-
- @keyframes text4-show {
- from {
+ 80% {
+ opacity: 1;
+ right: 8%;
+ top: 6%;
+ width: 227px;
+ }
+ 100% {
opacity: 0;
width: 0;
right: 36%;
top: 50%;
}
- to {
+ }
+
+ @keyframes text4-show {
+ 5% {
+ opacity: 0;
+ width: 0;
+ right: 50%;
+ top: 50%;
+ }
+ 20% {
opacity: 1;
top: 14%;
right: 55%;
width: 206px;
}
+ 80% {
+ opacity: 1;
+ top: 14%;
+ right: 55%;
+ width: 206px;
+ }
+ 100% {
+ opacity: 0;
+ width: 0;
+ right: 50%;
+ top: 50%;
+ }
}
-}
\ No newline at end of file
+
+ @keyframes circle-circle {
+ // 0% {
+ // transform: scale(1);
+ // opacity: 1;
+ // bottom: 9%;
+ // }
+
+ // 20% {
+ // transform: scale(1.1);
+ // opacity: 0.75;
+ // bottom: 9.25%;
+ // }
+
+ // 40% {
+ // transform: scale(1.25);
+ // opacity: 0.5;
+ // bottom: 9.6%;
+ // }
+
+ // 60% {
+ // transform: scale(1.45);
+ // opacity: 0.35;
+ // bottom: 10.1%;
+ // }
+
+ // 80% {
+ // transform: scale(1.7);
+ // opacity: 0.2;
+ // bottom: 10.6%;
+ // }
+
+ // 100% {
+ // transform: scale(2);
+ // opacity: 0;
+ // bottom: 11.5%;
+ // }
+
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ bottom: 9%;
+ }
+
+ 33% {
+ transform: scale(1.2);
+ opacity: 0.7;
+ bottom: 9.5%;
+ }
+
+
+ 67% {
+ transform: scale(1.5);
+ opacity: 0.35;
+ bottom: 10.2%;
+ }
+
+ 100% {
+ transform: scale(2);
+ opacity: 0;
+ bottom: 11.5%;
+ }
+ }
+}
diff --git a/src/home/FourthSection/index.jsx b/src/home/FourthSection/index.jsx
index da2ad83df..17c820fda 100644
--- a/src/home/FourthSection/index.jsx
+++ b/src/home/FourthSection/index.jsx
@@ -1,27 +1,27 @@
import React, { memo } from 'react';
import { Button } from 'antd';
import Line from '../Line';
-import logoLine from '../img/logoLine.png';
-import task from '../img/task.png';
-import codeManage from '../img/codeManage.png';
-import versionManage from '../img/versionManage.png';
-import editorInline from '../img/editorInline.png';
-import teamwork from '../img/teamwork.png';
+import logoLine from '../img/4-logo.png';
+import task from '../img/4-task.png';
+import codeManage from '../img/4-codeManage.png';
+import versionManage from '../img/4-versionManage.png';
+import editorInline from '../img/4-editorInline.png';
+import teamwork from '../img/4-teamwork.png';
import './index.scss';
const code = [
{ str: latest: Pulling from appleboy/drone-ssh },
{ str: Digest:sha256:095ca4ceafcb7 },
{ str: Status:Image is up to date for appleboy/drone-ssh:latest },
- { str: ======CMD====== },
+ { str: echo ====开始部署======= },
// { str: echo ====暂停容器开始======= },
{ str: docker rm -f mo-test },
{ str: docker rmi mo-test:1.0 },
// { str: cd /opt/demo },
- { str: echo ====开始部署======= },
{ str: docker build -t mo-test:1.0 . },
{ str: docker run -d -p 8080:8080 --name mo-test mo-test:1.0 },
- { str: echo ====部署成功====== },
+ { str: echo ====部署成功======= },
+ { str: ~/opt/Users/demo/app/static/ },
// { str: ======END====== },
]
@@ -42,44 +42,48 @@ function FourthSection({ fourth }) {
-
-
- {
- code.map((i, k) => {
- return (
-
- 1 - - c - d - /o - pt - /Us - ers - /de - mo - /app - /sta - tic - --
{k + 2}{i.str}-
+
-
+
+ 1 + + ~/ + c + d + + /opt + /Us + ers + /de + mo + /app + /sta + tic + + +
+
+ {
+ code.map((i, k) => {
+ return (
+ {k + 2}{i.str}
+ )
+ })
+ }
+
+
-
+
@@ -88,7 +92,7 @@ function FourthSection({ fourth }) {
-
+
代码托管
免费提供海量代码仓储
版本管理
记录和维护软件演化全过程
@@ -97,7 +101,7 @@ function FourthSection({ fourth }) {在线编辑
轻量级修改和提交
@@ -106,7 +110,7 @@ function FourthSection({ fourth }) {质量追踪
代码安全和质量管控
diff --git a/src/home/FourthSection/index.scss b/src/home/FourthSection/index.scss index 7ce99075a..34ab2b09d 100644 --- a/src/home/FourthSection/index.scss +++ b/src/home/FourthSection/index.scss @@ -2,8 +2,7 @@ text-align: center; min-height: 45vh; padding: 30px 0 20px 0; - // background: linear-gradient(#fff 0%, #cbdcff 100%); - background: url(../img/map.png) no-repeat; + background: url(../img/4-map.png) no-repeat; .fourth-main { margin: 20px auto; @@ -87,9 +86,29 @@ color: #05cfc8; } } + .code-input{ + position: relative; + } + .animation-is-typing::before { + position: absolute; + top: 0; + right: -0.8em; + bottom: 0; + display: block; + height: 100%; + margin-top: auto; + margin-bottom: auto; + font-size: 1em; + line-height: 1em; + content: "▊"; + } .word-item { opacity: 0; } + .js-type-letters{ + opacity: 0; + } + .fourth-projects { position: relative; @@ -162,36 +181,36 @@ } } - .project-item:nth-child(2){ - margin-top:80px; - border-color: #DF0757; - .fourth-item-circle{ + .project-item:nth-child(2) { + margin-top: 80px; + border-color: #df0757; + .fourth-item-circle { animation: turnCircle2 infinite 10s linear; } .fourth-item-circle::before, .fourth-item-circle::after { - background: linear-gradient(-45deg, #DF0757 0, #ffa38d 100%); + background: linear-gradient(-45deg, #df0757 0, #ffa38d 100%); } } - .project-item:nth-child(3){ - margin-top:160px; - border-color: #00FFA4; + .project-item:nth-child(3) { + margin-top: 160px; + border-color: #00ffa4; .fourth-item-circle::before, .fourth-item-circle::after { - background: linear-gradient(-45deg, #00FFA4 0, #f2FFA4 100%); + background: linear-gradient(-45deg, #00ffa4 0, #f2ffa4 100%); } } - .project-item:nth-child(4){ - margin-top:140px; - border-color: #8B5FF0; - .fourth-item-circle{ + .project-item:nth-child(4) { + margin-top: 140px; + border-color: #8b5ff0; + .fourth-item-circle { animation: turnCircle2 infinite 10s linear; } .fourth-item-circle::before, .fourth-item-circle::after { - background: linear-gradient(-45deg, #8B5FF0 0, #fe86ff 100%); + background: linear-gradient(-45deg, #8b5ff0 0, #fe86ff 100%); } } @@ -200,17 +219,64 @@ animation: taskPicture 1s 1 forwards; } .code-box-code { - animation: taskCode 1s 1 .75s forwards; + animation: taskCode 1s 1 0.75s forwards; } + .hadoopCode .code-content { + margin: 0; + animation: showBackgroud 16s 2s infinite; + } + + .animation-is-typing::before { + animation: BlinkingCursor .8s infinite; + } + + .js-type-letters{ + animation: BlinkingCursor-1 16s infinite; + } + .word-item { - animation: show 0.2s 1 forwards; + animation: show 16s infinite; } - &.fourth-projects{ - animation: taskPicture 1s 1 1.5s forwards; + &.fourth-projects { + animation: taskPicture 1s 1 1s forwards; } } @keyframes show { + 0% { + opacity: 0; + } + 1% { + opacity: 1; + } + 70% { + opacity: 1; + } + 71% { + opacity: 0; + } + 100% { + opacity: 0; + } + } + + @keyframes BlinkingCursor-1 { + 0% { + opacity: 0; + } + 2% { + opacity: 1; + } + 4% { + opacity: 0; + } + 100% { + opacity: 0; + } + + } + + @keyframes BlinkingCursor { 0% { opacity: 0; } @@ -219,6 +285,21 @@ } } + @keyframes showBackgroud { + 0% { + opacity: 1; + } + 71% { + opacity: 1; + } + 72% { + opacity: 0; + } + 100% { + opacity: 0; + } + } + @keyframes taskPicture { 0% { opacity: 0; @@ -240,8 +321,6 @@ } } - - @keyframes turnCircle { 0% { transform: rotate(0deg); @@ -259,5 +338,4 @@ transform: rotate(270deg); } } - } diff --git a/src/home/SecondSection/index.jsx b/src/home/SecondSection/index.jsx index cd175a4e6..97587e85f 100644 --- a/src/home/SecondSection/index.jsx +++ b/src/home/SecondSection/index.jsx @@ -23,11 +23,44 @@ let setting = { vertical: true, } +const sliderData = [ + { + id: 1, + type: 1, + tag: '热点资讯', + title: "数字化转型要重视开源", + content: "习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.", + time: "2021-09-13", + }, + { + id: 2, + type: 1, + tag: '热点资讯', + title: "数字化转型要重视开源数字化转型要重视开源数字化转型要重视开源", + content: "习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源,加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出", + time: "2021-09-13", + }, + { + id: 3, + type: 2, + tag: '红山书籍', + title: "数字化转型要重视开源数字化转型要重视开源数字化转型要重视开源", + content: "习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.", + time: "2021-09-13", + }, + { + id: 4, + type: 3, + tag: '热点资讯', + title: "数字化转型要重视开源", + content: "习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.", + time: "2021-09-13", + } +] + function SecondSection({ second }) { return ( - //社区动态
社区动态副标题社区动态副标题社区动态副标题
-
-
-
- 1
-
- 加快推进
- 热点资讯 -习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.
- 2021-09-13 - -
-
-
-
- 2
-
- 加快推进
- 热点资讯 -加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.
- 2021-09-15 - -
-
-
-
- 3
-
- 加快推进国防科技创新
- 热点资讯 -习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出
- 2021-09-12 - -
-
+ {
+ sliderData.map((item, i) => {
+ return (
+
- 4
-
- 加快推进国防科技创新
- 热点资讯 -加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.
- 2021-09-15 - -
+
+ )
+ })
+ }
+ {i+1}
+
+ {item.title}
+ {item.tag} +{item.content}
+ {item.time} +