diff --git a/src/home/FifthSection/index.jsx b/src/home/FifthSection/index.jsx index 70150aeb..4fee6b12 100644 --- a/src/home/FifthSection/index.jsx +++ b/src/home/FifthSection/index.jsx @@ -1,47 +1,123 @@ -import React, { memo } from 'react'; +import React, { memo, useState, useEffect } from 'react'; import { Collapse, Button } from 'antd'; +import moment from 'moment'; import Line from '../Line'; +import { getTaskCategory } from '../../military/task/api'; +import { taskModeIdArr } from '../../military/task/static'; + import './index.scss'; const { Panel } = Collapse; +const taskModeNameArr = []; +for (const item of taskModeIdArr) { + taskModeNameArr[item.dicItemCode] = item.dicItemName; +} + + + + +let taskArrMock = [ + { + id: 447, + name: "研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。", + taskModeId: 1, //悬赏模式 + bounty: 1.0, //赏金 + description: "

统筹管理员能看到不？

", //详情 + createdAt: "2021-11-10 17:42:38", //创建时间 + publishedAt: "2021-11-10 17:43:41", //发布时间 + collectingDays: 30, //成果提交天数 + }, + { + id: 448, + name: "研发配置要求验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。", + taskModeId: 2, //悬赏模式 + bounty: 100.0, //赏金 + description: "

统筹管理员能看到不？

", //详情 + createdAt: "2021-11-10 17:42:38", + publishedAt: "2021-11-11 17:43:41", + collectingDays: 30, + }, + { + id: 449, + name: "研发配置要求为包含网络", + taskModeId: 3, //悬赏模式 + bounty: 10000.0, //赏金 + description: "

统筹管理员能看到不？

", //详情 + createdAt: "2021-11-10 17:42:38", + publishedAt: "2021-11-12 17:43:41", + collectingDays: 30, + } +] + +function getSomeDayAfter(initailDate, nDay) { + return moment(new Date(initailDate).setDate(new Date(initailDate).getDate() + nDay)).format('YYYY-MM-DD'); +} function FifthSection({ fifth }) { + + const [taskCategoryArr, setTaskCategoryArr] = useState([]); + const [taskArr, serTaskArr] = useState(taskArrMock); + + // 获取分类数据 + useEffect(() => { + getTaskCategory().then(data => { + if (data) { + for (const item of data) { + switch (item.name) { + case "军事理论": + item.icon = "junshililun1"; + break; + case "政策法规": + item.icon = "zhengcefagui1"; + break; + case "医学": + item.icon = "yixue1"; + break; + case "电子": + item.icon = "dianzi1"; + break; + case "通信": + item.icon = "tongxin1"; + break; + case "计算机科学": + item.icon = "jisuanji1"; + item.name = "计算机"; + break; + case "软件工程": + item.icon = "ruanjiangongcheng1"; + break; + case "人工智能": + item.icon = "rengongzhineng"; + break; + case "知识图谱": + item.icon = "zhishitupu"; + break; + case "大数据": + item.icon = "dashuju"; + break; + default: + item.icon = "dianzi1"; + } + } + setTaskCategoryArr(data.slice(0, 10)); + } + }); + }, []); + + return (
    -
  • - - 知识图谱 -
    • -
  • - 计算机 -
    • -
  • - 电子 -
    • -
  • - 军事理论 -
    • -
  • - 软件工程 -
    • -
  • - 医学 -
    • -
  • - 通信 -
    • -
  • - 政策法规 -
    • -
  • - 大数据 -
    • -
  • - 人工智能 -
    • + { + 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" > - + { + taskArr.map((item, i) => { + return ( + +

{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

- + */}
diff --git a/src/home/FifthSection/index.scss b/src/home/FifthSection/index.scss index b3848ad5..1a034804 100644 --- a/src/home/FifthSection/index.scss +++ b/src/home/FifthSection/index.scss @@ -1,3 +1,17 @@ + +$blue1:#254dea; +$red1 : #e33230; +$blue2 : #0766fb; +$red2:#f02c66; +$purple:#6038ff; +$red3:#f85e55; +$redPurple:#c13cff; +$green : #2cb840; +$bluePurple:#5744f6; +$orange : #e9862e; + +$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple; + .home-fifth-section { min-height: 50vh; @@ -282,12 +296,13 @@ .circle-center { width: 100px; height: 100px; - padding: 1em 0.5em; + padding: 1em 1.25em; border-radius: 50%; background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%); color: #fff; text-align: center; - font-size: 18px; + font-size: 20px; + line-height: 1.4; } .circle1 { @@ -371,7 +386,7 @@ margin-left: 40px; .home-line { text-align: left; - margin-bottom: 20px !important; + margin-bottom: 25px !important; } } @@ -380,7 +395,7 @@ background: inherit; .ant-collapse-item { border: 0; - margin-bottom: 30px; + margin-bottom: 15px; } .ant-collapse-item:last-child, .ant-collapse-item:last-child > .ant-collapse-header { @@ -396,7 +411,13 @@ color: #0a1255; letter-spacing: 0; font-weight: 500; - padding: 27px 36px; + padding: 27px 45px 27px 36px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + max-width: 560px; .ant-collapse-arrow { display: inline-flex; @@ -447,7 +468,6 @@ } .collapse-content { padding: 12px; - width: 336px; background: #f5f7fa; border-radius: 4px; diff --git a/src/home/FirstSection/index.jsx b/src/home/FirstSection/index.jsx index 6229331e..4153d628 100644 --- a/src/home/FirstSection/index.jsx +++ b/src/home/FirstSection/index.jsx @@ -1,18 +1,43 @@ -import React, { memo } from 'react'; +import React, { memo, useEffect, useState } from 'react'; import { Button } from 'antd'; import './index.scss'; -import circle from '../img/circle.png'; -import code from '../img/code.png'; -import glass from '../img/glass.png'; -import logo from '../img/logo.png'; -import pillar from '../img/pillar.png'; -import text1 from '../img/text1.png'; -import text2 from '../img/text2.png'; -import text3 from '../img/text3.png'; -import text4 from '../img/text4.png'; +// import circle from '../img/circle.png'; +import circle from '../img/1-circle.png'; +import code1 from '../img/1-code.png'; +import codeBed from '../img/1-code-bed.png'; +import glass from '../img/1-glass.png'; +import logo from '../img/1-logo.png'; +import box1 from '../img/1-box1.png'; +import box2 from '../img/1-box2.png'; +import box3 from '../img/1-box3.png'; +import box4 from '../img/1-box4.png'; + +import text1 from '../img/1-text1.png'; +import text2 from '../img/1-text2.png'; +import text3 from '../img/1-text3.png'; +import text4 from '../img/1-text4.png'; function FirstSection({ first }) { + + const [circulation, setCirculation] = useState(''); + + useEffect(() => { + const playGlass = document.getElementById("playGlass"); + playGlass.addEventListener("webkitAnimationEnd", () => { + setCirculation('circulation'); + }); + return () => { + setCirculation(''); + playGlass.removeEventListener("webkitAnimationEnd"); + }; + }, []); + + useEffect(() => { + setCirculation(''); + }, [first]); + + return (
@@ -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 b96b23dc..5138c469 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 da2ad83d..17c820fd 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 }) {
-
  • - 
    -                  1
-                  
-                    c
-                    d 
-                     /o
-                    pt
-                    /Us
-                    ers
-                    /de
-                    mo
-                    /app
-                    /sta
-                    tic
-                  
-
    -
    • - { - code.map((i, k) => { - return ( - 
  • {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 7ce99075..34ab2b09 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 cd175a4e..97587e85 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 ( - //
    -

    社区动态

    社区动态副标题社区动态副标题社区动态副标题

    @@ -57,49 +90,21 @@ function SecondSection({ second }) {
    -
    -
    - 1 -

    加快推进

    - 热点资讯 -
    -

    习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.

    - 2021-09-13 - -
    - -
    -
    - 2 -

    加快推进

    - 热点资讯 -
    -

    加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.

    - 2021-09-15 - -
    - -
    -
    - 3 -

    加快推进国防科技创新

    - 热点资讯 -
    -

    习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出

    - 2021-09-12 - -
    - -
    -
    - 4 -

    加快推进国防科技创新

    - 热点资讯 -
    -

    加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.

    - 2021-09-15 - -
    + { + sliderData.map((item, i) => { + return ( +
    +
    + {i+1} +

    {item.title}

    + {item.tag} +
    +

    {item.content}

    + {item.time} +
    + ) + }) + }
    @@ -115,7 +120,6 @@ function SecondSection({ second }) { - {/* */}     ) diff --git a/src/home/SecondSection/index.scss b/src/home/SecondSection/index.scss index 91ce46c5..85880cdb 100644 --- a/src/home/SecondSection/index.scss +++ b/src/home/SecondSection/index.scss @@ -97,23 +97,23 @@ border: 1px solid #fff; border-radius: 6px; - & > .iconfont { - float: right; - font-size: 25px !important; - color: rgb(239, 122, 48); - } + // & > .iconfont { + // float: right; + // font-size: 25px !important; + // color: rgb(239, 122, 48); + // } .slide-title { display: flex; align-items: center; } - h3 { + .slide-title-content { color: #000870; font-size: 18px; - margin-bottom: 0 !important; flex: auto; } .order-num { + flex: none; display: inline-block; margin-right: 1em; color: #fff; @@ -131,27 +131,33 @@ text-align: center; } - .news-time { - font-size: 15px; - font-weight: 400; - color: #3c476e; - } - .slide-tag { + flex: none; color: #fff; padding: 3px 13px; background: #586dff; border-radius: 3px; } - .slide-tag-red { + .slide-tag-1{ + background: #586dff; + } + + .slide-tag-2 { background: #e53939; } - .slide-tag-yellow { + .slide-tag-3 { background: #ff7300; } + + .news-time { + font-size: 15px; + font-weight: 400; + color: #3c476e; + } + p { color: #3c476e; } diff --git a/src/home/SeventhSection/index.jsx b/src/home/SeventhSection/index.jsx index f15f4a5b..e8080856 100644 --- a/src/home/SeventhSection/index.jsx +++ b/src/home/SeventhSection/index.jsx @@ -29,6 +29,32 @@ let setting = { arrows: false, } +const personArr=[ + { + id:1, + name:"opersou", + head:"/img/head.png", + title:"Linux基金会发布《2021开源职业报告》提出新的方案，促进人才成长合作发展", + content:"新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。", + }, + { + id:2, + name:"zhaojing", + head:"/img/head.png", + title:"Linux基金会发布《2021开源职业报告》提出新的方案，促进人才成长合作发展", + content:"新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。", + }, + { + id:3, + name:"ligang", + head:"/img/head.png", + title:"Linux基金会发布《2021开源职业报告》提出新的方案，促进人才成长合作发展", + content:"新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。", + } + + +] + function SeventhSection() { return (
    diff --git a/src/home/SeventhSection/index.scss b/src/home/SeventhSection/index.scss index e10d8d0f..29a2ba26 100644 --- a/src/home/SeventhSection/index.scss +++ b/src/home/SeventhSection/index.scss @@ -46,7 +46,7 @@ animation: zoomin 2.1s infinite alternate; } .client:nth-child(6) { - right: 220px; + right: 150px; bottom: 10px; animation: zoomin 1.6s infinite alternate; } @@ -62,8 +62,8 @@ transform: rotateY(180deg); } .end-icon { - bottom: 145px; - right: 290px; + bottom: 130px; + right: 330px; } } diff --git a/src/home/SixthSection/index.jsx b/src/home/SixthSection/index.jsx index 3911a6d3..d410990e 100644 --- a/src/home/SixthSection/index.jsx +++ b/src/home/SixthSection/index.jsx @@ -16,6 +16,28 @@ import pillar3 from '../img/6-pillar3.png'; import './index.scss'; + +const completeArr=[{ + id:1, + name:"CCKS 2021", + timeStart:"2021.05.17", + timeEnd:"2021.07.20", + describe:"本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步", +},{ + id:2, + name:"CCKS 2021111", + timeStart:"2021.05.17", + timeEnd:"2021.07.20", + describe:"本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步", +},{ + id:3, + name:"CCKS 20211111", + timeStart:"2021.05.17", + timeEnd:"2021.07.20", + describe:"本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步", +}]; + + function SixthSection({ sixth }) { return (
    diff --git a/src/home/ThirdSection/index.jsx b/src/home/ThirdSection/index.jsx index 3d8d6d7e..dc022c23 100644 --- a/src/home/ThirdSection/index.jsx +++ b/src/home/ThirdSection/index.jsx @@ -9,19 +9,27 @@ const countUpProps={ duration:2 }; +// 数据统计总量 +const statisticsNum={ + clickCount:23191, + userCount:4493, + projectCount:1526, + taskCount:666, + postCount:2000, +}; + function ThirdSection({third}) { return (

    数据统计总览

    - {/*
    */}
    @@ -31,7 +39,7 @@ function ThirdSection({third}) {
    - +

    平台用户数

    @@ -40,7 +48,7 @@ function ThirdSection({third}) {
    - +

    开源项目托管数

    @@ -49,7 +57,7 @@ function ThirdSection({third}) {
    - +

    创客任务发布数

    @@ -58,7 +66,7 @@ function ThirdSection({third}) {
    - +

    论坛发帖数量

    diff --git a/src/home/ThirdSection/index.scss b/src/home/ThirdSection/index.scss index 29bda577..70d68771 100644 --- a/src/home/ThirdSection/index.scss +++ b/src/home/ThirdSection/index.scss @@ -7,7 +7,7 @@ text-align: center; .ball-background{ - background: url(../img/ballBg.png) no-repeat; + background: url(../img/3-ballBg.png) no-repeat; background-size: 100% 100%; } .third-tit { @@ -20,7 +20,6 @@ display: flex; justify-content: space-around; max-width: 100%; - // min-height: 35vh; margin: 10vh auto; } @@ -69,7 +68,7 @@ left: -8px; top: -8px; content: ""; - background-image: url(../img/dashCircle.png); + background-image: url(../img/3-dashCircle.png); width: 110%; height: 110%; background-position: center center; diff --git a/src/home/img/1-box1.png b/src/home/img/1-box1.png new file mode 100644 index 00000000..bcae1fea Binary files /dev/null and b/src/home/img/1-box1.png differ diff --git a/src/home/img/1-box2.png b/src/home/img/1-box2.png new file mode 100644 index 00000000..94439d6e Binary files /dev/null and b/src/home/img/1-box2.png differ diff --git a/src/home/img/1-box3.png b/src/home/img/1-box3.png new file mode 100644 index 00000000..7c1fae8e Binary files /dev/null and b/src/home/img/1-box3.png differ diff --git a/src/home/img/1-box4.png b/src/home/img/1-box4.png new file mode 100644 index 00000000..fde3fec9 Binary files /dev/null and b/src/home/img/1-box4.png differ diff --git a/src/home/img/1-circle.png b/src/home/img/1-circle.png new file mode 100644 index 00000000..0b3d2f5f Binary files /dev/null and b/src/home/img/1-circle.png differ diff --git a/src/home/img/1-code-bed.png b/src/home/img/1-code-bed.png new file mode 100644 index 00000000..2609442d Binary files /dev/null and b/src/home/img/1-code-bed.png differ diff --git a/src/home/img/1-code.png b/src/home/img/1-code.png new file mode 100644 index 00000000..398a2c59 Binary files /dev/null and b/src/home/img/1-code.png differ diff --git a/src/home/img/glass.png b/src/home/img/1-glass.png similarity index 100% rename from src/home/img/glass.png rename to src/home/img/1-glass.png diff --git a/src/home/img/logo.png b/src/home/img/1-logo.png similarity index 100% rename from src/home/img/logo.png rename to src/home/img/1-logo.png diff --git a/src/home/img/text1.png b/src/home/img/1-text1.png similarity index 100% rename from src/home/img/text1.png rename to src/home/img/1-text1.png diff --git a/src/home/img/text2.png b/src/home/img/1-text2.png similarity index 100% rename from src/home/img/text2.png rename to src/home/img/1-text2.png diff --git a/src/home/img/text3.png b/src/home/img/1-text3.png similarity index 100% rename from src/home/img/text3.png rename to src/home/img/1-text3.png diff --git a/src/home/img/text4.png b/src/home/img/1-text4.png similarity index 100% rename from src/home/img/text4.png rename to src/home/img/1-text4.png diff --git a/src/home/img/ballBg.png b/src/home/img/3-ballBg.png similarity index 100% rename from src/home/img/ballBg.png rename to src/home/img/3-ballBg.png diff --git a/src/home/img/dashCircle.png b/src/home/img/3-dashCircle.png similarity index 100% rename from src/home/img/dashCircle.png rename to src/home/img/3-dashCircle.png diff --git a/src/home/img/codeManage.png b/src/home/img/4-codeManage.png similarity index 100% rename from src/home/img/codeManage.png rename to src/home/img/4-codeManage.png diff --git a/src/home/img/editorInline.png b/src/home/img/4-editorInline.png similarity index 100% rename from src/home/img/editorInline.png rename to src/home/img/4-editorInline.png diff --git a/src/home/img/logoLine.png b/src/home/img/4-logo.png similarity index 100% rename from src/home/img/logoLine.png rename to src/home/img/4-logo.png diff --git a/src/home/img/map.png b/src/home/img/4-map.png similarity index 100% rename from src/home/img/map.png rename to src/home/img/4-map.png diff --git a/src/home/img/task.png b/src/home/img/4-task.png similarity index 100% rename from src/home/img/task.png rename to src/home/img/4-task.png diff --git a/src/home/img/teamwork.png b/src/home/img/4-teamwork.png similarity index 100% rename from src/home/img/teamwork.png rename to src/home/img/4-teamwork.png diff --git a/src/home/img/versionManage.png b/src/home/img/4-versionManage.png similarity index 100% rename from src/home/img/versionManage.png rename to src/home/img/4-versionManage.png diff --git a/src/home/img/gridbak.png b/src/home/img/gridbak.png deleted file mode 100755 index 905bd4b4..00000000 Binary files a/src/home/img/gridbak.png and /dev/null differ diff --git a/src/home/index.jsx b/src/home/index.jsx index b32e6230..be4eda34 100644 --- a/src/home/index.jsx +++ b/src/home/index.jsx @@ -29,8 +29,6 @@ function HomePage(props) { const [sixth, setSixth] = useState(false); - - function scrollListener() { let clientHeight = document.body.clientHeight; let secondSection = document.querySelector(".home-second-section").offsetTop; @@ -42,13 +40,13 @@ function HomePage(props) { let top = document.documentElement.scrollTop; - console.log("thirdSection:" + thirdSection); - console.log("thirdSection:" + thirdSection); - console.log("fourthSection:" + fourthSection); - console.log("fifthSection:" + fifthSection); - console.log("sixthSection:" + sixthSection); - console.log("seventhSection:" + seventhSection); - console.log("top:" + top); + // console.log("thirdSection:" + thirdSection); + // console.log("thirdSection:" + thirdSection); + // console.log("fourthSection:" + fourthSection); + // console.log("fifthSection:" + fifthSection); + // console.log("sixthSection:" + sixthSection); + // console.log("seventhSection:" + seventhSection); + // console.log("top:" + top); // 第一个动效 if (top >= clientHeight - 300) { @@ -90,7 +88,7 @@ function HomePage(props) { } // 第六个动效 - if (top >= sixthSection - 400 && top < seventhSection - 100) { + if (top >= sixthSection - 600 && top < seventhSection - 100) { setSixth(true); } if (top < fifthSection || top > seventhSection - 100) {