修改首页动效果，图片名字

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: "<p>统筹管理员能看到不？</p>",   //详情
+    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: "<p>统筹管理员能看到不？</p>",   //详情
+    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: "<p>统筹管理员能看到不？</p>",   //详情
+    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 (
     <React.Fragment>
       <div className={`homepage-main fifth-main clearfix ${fifth ? 'active' : ''}`}>
         <div className="circle-wave">
           <ul className="icon-circle">
-            <li>
+            {
-              <i className="iconfont icon-zhishitupu"></i>
+              taskCategoryArr.map((item, i) => {
-              <span>知识图谱</span>
+                return (<li key={item.id}>
-            </li>
+                  <i className={`iconfont icon-${item.icon}`}></i>
-            <li><i className="iconfont icon-jisuanji1"></i>
+                  <span>{item.name}</span>
-              <span>计算机</span>
+                </li>)
-            </li>
+              })
-            <li><i className="iconfont icon-dianzi1"></i>
+            }
-              <span>电子</span>
-            </li>
-            <li><i className="iconfont icon-junshililun1"></i>
-              <span>军事理论</span>
-            </li>
-            <li><i className="iconfont icon-ruanjiangongcheng1"></i>
-              <span>软件工程</span>
-            </li>
-            <li><i className="iconfont icon-yixue1"></i>
-              <span>医学</span>
-            </li>
-            <li><i className="iconfont icon-tongxin1"></i>
-              <span>通信</span>
-            </li>
-            <li><i className="iconfont icon-zhengcefagui1"></i>
-              <span>政策法规</span>
-            </li>
-            <li><i className="iconfont icon-dashuju"></i>
-              <span>大数据</span>
-            </li>
-            <li><i className="iconfont icon-rengongzhineng"></i>
-              <span>人工智能</span>
-            </li>
           </ul>
 
           <div className="circleBox">
@@ -51,7 +127,7 @@ function FifthSection({ fifth }) {
             <div className="circle4"></div>
             <div className="circle5">
               <div className="circle-center">
-                创客空间领域
+                创客空间
               </div>
             </div>
           </div>
@@ -67,7 +143,35 @@ function FifthSection({ fifth }) {
             defaultActiveKey={['1']}
             expandIconPosition="right"
           >
-            <Panel header="多样化目标识别及网络化协同控制仿真验证模块开发" key="1">
+            {
+              taskArr.map((item, i) => {
+                return (
+                  <Panel header={item.name} key={i + 1 + ''}>
+                    <p className="collapse-des">{item.name}</p>
+                    <div className="collapse-content">
+                      <p className="collapse-content-item">
+                        <i className="iconfont icon-quxiaoguanzhu"></i>
+                        <span >{taskModeNameArr[item.taskModeId]}</span>
+                        <span className="collapse-content-money">¥ {item.bounty}</span>
+                      </p>
+
+                      <p className="collapse-content-item">
+                        <i className="iconfont icon-quxiaoguanzhu"></i>
+                        <span >发布时间</span>
+                        <span className="collapse-content-time">{moment(item.publishedAt || item.createdAt).format('YYYY-MM-DD')}</span>
+                      </p>
+
+                      <p className="collapse-content-item">
+                        <i className="iconfont icon-quxiaoguanzhu"></i>
+                        <span >截止时间</span>
+                        <span className="collapse-content-time">{getSomeDayAfter(item.publishedAt || item.createdAt, item.collectingDays)}</span>
+                      </p>
+                    </div>
+                  </Panel>
+                )
+              })
+            }
+            {/* <Panel header="多样化目标识别及网络化协同控制仿真验证模块开发" key="1">
               <p className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
               <div className="collapse-content">
                 <p className="collapse-content-item">
@@ -89,6 +193,7 @@ function FifthSection({ fifth }) {
                 </p>
               </div>
             </Panel>
+
             <Panel header="开源项目群体智能学习数据集征集" key="2">
               <p className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
               <div className="collapse-content">
@@ -132,7 +237,7 @@ function FifthSection({ fifth }) {
                   <span className="collapse-content-time">2021-06-20</span>
                 </p>
               </div>
-            </Panel>
+            </Panel> */}
           </Collapse>
         </div>
 

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;
 

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 circle from '../img/circle.png';
-import code from '../img/code.png';
+import circle from '../img/1-circle.png';
-import glass from '../img/glass.png';
+import code1 from '../img/1-code.png';
-import logo from '../img/logo.png';
+import codeBed from '../img/1-code-bed.png';
-import pillar from '../img/pillar.png';
+import glass from '../img/1-glass.png';
-import text1 from '../img/text1.png';
+import logo from '../img/1-logo.png';
-import text2 from '../img/text2.png';
+import box1 from '../img/1-box1.png';
-import text3 from '../img/text3.png';
+import box2 from '../img/1-box2.png';
-import text4 from '../img/text4.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 (
     <div className={`grid-picture ${first ? "active" : ""}`}>
       <div className="homepage-main website-content">
@@ -30,16 +55,27 @@ function FirstSection({ first }) {
           <Button className="website-more homepage-btn" type="primary">了解详情</Button>
         </div>
 
-        <div className="play-img">
+        <div className={`play-img ${circulation}`}>
-          <img className="play-glass" src={glass}></img>
-          <img className="play-circle" src={circle}></img>
-          <img className="play-code" src={code}></img>
-          <img className="play-pillar" src={pillar}></img>
-          <img className="play-logo" src={logo}></img>
-          <img className="play-text1" src={text1}></img>
-          <img className="play-text2" src={text2}></img>
           <img className="play-text3" src={text3}></img>
           <img className="play-text4" src={text4}></img>
+          <img className="play-logo" src={logo}></img>
+          <img id="playGlass" className="play-glass" src={glass}></img>
+          
+          <img className="play-code-bed" src={codeBed}></img>
+          <img className="play-code1" src={code1}></img>
+
+          <img className="play-circle" src={circle}></img>
+          <div className="play-circle-circle1"></div>
+          <div className="play-circle-circle2"></div>
+          <div className="play-circle-circle3"></div>
+          
+          <img className="play-box4" src={box4}></img>
+          <img className="play-box3" src={box3}></img>
+          <img className="play-box2" src={box2}></img>
+          <img className="play-box1" src={box1}></img>
+          <img className="play-text1" src={text1}></img>
+          <img className="play-text2" src={text2}></img>
+
         </div>
       </div>
 
@@ -55,8 +91,8 @@ function FirstSection({ first }) {
             <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
 
           {/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
-          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.5)" />
+          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
-          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
+          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
           <use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
         </g>
       </svg>

src/home/FirstSection/index.scss

@@ -1,23 +1,24 @@
 .home-first-section {
-    height: 90vh;
+  height: 90vh;
-    min-height: 650px;
+  min-height: 650px;
-    background: linear-gradient(
+  background: linear-gradient(
-      #1a2358 0%,
+    #1a2358 0%,
-      #12277b 33%,
+    #12277b 33%,
-      #0c2d8f 67%,
+    #0c2d8f 67%,
-      #002a89 100%
+    #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 {
+    .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
-      animation: pillar 0.75s 1 forwards;
+      animation: circle-before 0.75s 1 forwards;
     }
-    .play-code {
+    // .play-pillar {
-      animation: code 0.75s 1 forwards;
+    //   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;
+      // }
     }
   }
 
@@ -186,8 +299,6 @@
     }
   }
 
-  
-  
   @keyframes glass {
     0% {
       opacity: 0;
@@ -202,23 +313,101 @@
   }
 
   @keyframes logo {
-    10% {
+    0% {
-      opacity: 0;
+      opacity: 1;
-      top: 33%;
+      top: 23%;
-      transform: rotateY(0deg);
+      // transform: scale(.5);
+      // transform: rotateY(0deg);
     }
     50% {
       opacity: 1;
       top: 12%;
-      transform: rotateY(360deg);
+      // transform: scale(1.2);
+      // transform: rotateY(360deg);
     }
-    90% {
+    100% {
-      opacity: 0;
+      opacity: 1;
-      top: 33%;
+      top: 23%;
-      transform: rotateY(360deg);
+      // 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;
@@ -230,85 +419,356 @@
     }
   }
 
-  @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%;
     }
-  }
+    80% {
-  
+      opacity: 1;
-  @keyframes text2-show {
+      width: 262px;
-    from {
+      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;
     }
-  }
+    80% {
-  
+      opacity: 1;
-  @keyframes text4-show {
+      right: 8%;
-    from {
+      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%;
+    }
+  }
+
+  @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%;
+    }
   }
 }

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 logoLine from '../img/4-logo.png';
-import task from '../img/task.png';
+import task from '../img/4-task.png';
-import codeManage from '../img/codeManage.png';
+import codeManage from '../img/4-codeManage.png';
-import versionManage from '../img/versionManage.png';
+import versionManage from '../img/4-versionManage.png';
-import editorInline from '../img/editorInline.png';
+import editorInline from '../img/4-editorInline.png';
-import teamwork from '../img/teamwork.png';
+import teamwork from '../img/4-teamwork.png';
 import './index.scss';
 
 const code = [
   { str: <span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span> },
   { str: <span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb7</span> },
   { str: <span>Status:Image is up to date for appleboy/drone-ssh:latest</span> },
-  { str: <span><span className='code-green'>======CMD======</span></span> },
+  { str: <span><span className='code-green'>echo ====开始部署=======</span></span> },
   // { str: <span><span className='code-green'>echo ====暂停容器开始======= </span></span> },
   { str: <span><span className='code-red'>docker</span> rm -f mo-test</span> },
   { str: <span><span className='code-red'>docker</span> rmi mo-test:1.0</span> },
   // { str: <span><span className='code-blue'>cd</span> /opt/demo</span> },
-  { str: <span><span className='code-green'>echo ====开始部署=======</span></span> },
   { str: <span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span> },
   { str: <span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span> },
-  { str: <span><span className='code-green'>echo ====部署成功======</span></span> },
+  { str: <span><span className='code-green'>echo ====部署成功=======</span></span> },
+  { str: <span className="code-input"><span className='code-blue'>~/opt/Users/demo/app/static/</span><span className="animation-is-typing"></span></span> },
   // { str: <span><span className='code-green'>======END======</span></span> },
 ]
 
@@ -42,38 +42,42 @@ function FourthSection({ fourth }) {
           </div>
           <div className="code-box-action code-box-code">
             <div className="hadoopCode">
-              <li key={0}>
+              <ul className="code-content">
-                <pre  >
+                <li key={0}>
-                  <span className="codenum">1</span>
+                  <pre  >
-                  <span>
+                    <span className="codenum">1</span>
-                    <span className='word-item code-blue' style={{ animationDelay: '2.7s' }}>c</span>
+                    <span className="">
-                    <span className='word-item code-blue' style={{ animationDelay: '2.8s' }}>d </span>
+                      <span className='word-item code-blue' style={{ animationDelay: '2.4s' }}> ~/</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3s' }}> /o</span>
+                      <span className='word-item code-blue' style={{ animationDelay: '2.5s' }}>c</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.1s' }}>pt</span>
+                      <span className='word-item code-blue' style={{ animationDelay: '2.6s' }}>d</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.2s' }}>/Us</span>
+                      <span className="code-input js-type-letters animation-is-typing" style={{ animationDelay: '2.6s' }}></span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.3s' }}>ers</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.3s' }}> /opt</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.44s' }}>/de</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.4s' }}>/Us</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.6s' }}>mo</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.5s' }}>ers</span>
-                    <span className='word-item code-green' style={{ animationDelay: '3.9s' }}>/app</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.6s' }}>/de</span>
-                    <span className='word-item code-green' style={{ animationDelay: '4.1s' }}>/sta</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.7s' }}>mo</span>
-                    <span className='word-item code-green' style={{ animationDelay: '4.2s' }}>tic</span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.8s' }}>/app</span>
-                  </span>
+                      <span className='word-item code-green' style={{ animationDelay: '3.9s' }}>/sta</span>
-                </pre>
+                      <span className='word-item code-green' style={{ animationDelay: '4.0s' }}>tic</span>
-              </li>
+                      <span className="code-input js-type-letters animation-is-typing" style={{ animationDelay: '4.0s' }}></span>
-              {
+                    </span>
-                code.map((i, k) => {
+                  </pre>
-                  return (
+                </li>
-                    <li key={k + 1}><pre className="word-item" style={{ animationDelay: `${k * 0.2 + 4.2}s` }}><span className="codenum">{k + 2}</span>{i.str}</pre></li>
+                {
-                  )
+                  code.map((i, k) => {
-                })
+                    return (
-              }
+                      <li key={k + 1}><pre className="word-item" style={{ animationDelay: `${k * 0.2 + 4.5}s` }}><span className="codenum">{k + 2}</span>{i.str}</pre></li>
+                    )
+                  })
+                }
+              </ul>
             </div>
           </div>
           <img src={logoLine}></img>
         </div>
       </div>
 
-      <div className={fourth ?"fourth-projects activeCode":"fourth-projects"}>
+      <div className={fourth ? "fourth-projects activeCode" : "fourth-projects"}>
 
         <div className="project-item">
           <div className="fourth-item-img">

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/4-map.png) no-repeat;
-  background: url(../img/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){
+  .project-item:nth-child(2) {
-    margin-top:80px;
+    margin-top: 80px;
-    border-color: #DF0757;
+    border-color: #df0757;
-    .fourth-item-circle{
+    .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){
+  .project-item:nth-child(3) {
-    margin-top:160px;
+    margin-top: 160px;
-    border-color: #00FFA4;
+    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){
+  .project-item:nth-child(4) {
-    margin-top:140px;
+    margin-top: 140px;
-    border-color: #8B5FF0;
+    border-color: #8b5ff0;
-    .fourth-item-circle{
+    .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{
+    &.fourth-projects {
-      animation: taskPicture 1s 1 1.5s forwards;
+      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);
     }
   }
-  
 }

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 (
-    // <div className="home-second-section">
     <React.Fragment>
-
       <h2 className="homePage-blue-tit">社区动态</h2>
       <h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
       <Line />
@@ -57,49 +90,21 @@ function SecondSection({ second }) {
 
         <div className="home-second-section-slide">
           <Slider {...setting}>
-            <div className="news-slide-item" key={1}>
+            {
-              <div className="slide-title">
+              sliderData.map((item, i) => {
-                <span className="order-num">1</span>
+                return (
-                <h3>加快推进</h3>
+                  <div className="news-slide-item" key={i}>
-                <span className="slide-tag">热点资讯</span>
+                    <div className="slide-title">
-              </div>
+                      <span className="order-num">{i+1}</span>
-              <p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.</p>
+                      <h3 className="slide-title-content ellipsis-1">{item.title}</h3>
-              <span className="news-time">2021-09-13</span>
+                      <span className={`slide-tag slide-tag-${item.type}`}>{item.tag}</span>
-              <i className="iconfont icon-a-shuangyinhao12x"></i>
+                    </div>
-            </div>
+                    <p className="ellipsis-2">{item.content}</p>
-
+                    <span className="news-time">{item.time}</span>
-            <div className="news-slide-item" key={2}>
+                  </div>
-              <div className="slide-title">
+                )
-                <span className="order-num">2</span>
+              })
-                <h3>加快推进</h3>
+            }
-                <span className="slide-tag slide-tag-red">热点资讯</span>
-              </div>
-              <p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
-              <span className="news-time">2021-09-15</span>
-              <i className="iconfont icon-a-shuangyinhao12x"></i>
-            </div>
-
-            <div className="news-slide-item" key={3}>
-              <div className="slide-title">
-                <span className="order-num">3</span>
-                <h3>加快推进国防科技创新</h3>
-                <span className="slide-tag slide-tag-yellow">热点资讯</span>
-              </div>
-              <p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出</p>
-              <span className="news-time">2021-09-12</span>
-              <i className="iconfont icon-a-shuangyinhao12x"></i>
-            </div>
-
-            <div className="news-slide-item" key={4}>
-              <div className="slide-title">
-                <span className="order-num">4</span>
-                <h3>加快推进国防科技创新</h3>
-                <span className="slide-tag slide-tag-red">热点资讯</span>
-              </div>
-              <p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
-              <span className="news-time">2021-09-15</span>
-              <i className="iconfont icon-a-shuangyinhao12x"></i>
-            </div>
           </Slider>
         </div>
       </div>
@@ -115,7 +120,6 @@ function SecondSection({ second }) {
           <use xlinkHref="#wave-path" x="50" y="9" fill="#041670" />
         </g>
       </svg>
-      {/* </div> */}
     </React.Fragment>
 
   )

src/home/SecondSection/index.scss

@@ -97,23 +97,23 @@
     border: 1px solid #fff;
     border-radius: 6px;
 
-    & > .iconfont {
+    // & > .iconfont {
-      float: right;
+    //   float: right;
-      font-size: 25px !important;
+    //   font-size: 25px !important;
-      color: rgb(239, 122, 48);
+    //   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;
     }

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 (
     <div className="homepage-main seventh-main">

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;
+      bottom: 130px;
-      right: 290px;
+      right: 330px;
     }
   }
 

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 (
     <div className="grid-picture">

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 (
     <div className="ball-background">
       <h2 className="third-tit">数据统计总览</h2>
       <Line />
       <div className="homepage-main third-main ">
-      {/* <div className={`third-main ${third?'third-active':''}`}> */}
         <div className="circle-item">
           <div className="circle-item-box">
             <div className="circle-item-num">
               <CountUp 
                 {...countUpProps}
-               end={23191}
+               end={statisticsNum.clickCount}
                />
             </div>
           </div>
@@ -31,7 +39,7 @@ function ThirdSection({third}) {
         <div className="circle-item">
           <div className="circle-item-box">
             <div className="circle-item-num">
-              <CountUp {...countUpProps} end={4493}/>
+              <CountUp {...countUpProps} end={statisticsNum.userCount}/>
             </div>
           </div>
           <h4 >平台用户数</h4>
@@ -40,7 +48,7 @@ function ThirdSection({third}) {
         <div className="circle-item">
           <div className="circle-item-box">
             <div className="circle-item-num">
-              <CountUp {...countUpProps} end={1526} />
+              <CountUp {...countUpProps} end={statisticsNum.projectCount} />
             </div>
           </div>
           <h4 >开源项目托管数</h4>
@@ -49,7 +57,7 @@ function ThirdSection({third}) {
         <div className="circle-item">
           <div className="circle-item-box">
             <div className="circle-item-num">
-              <CountUp {...countUpProps} end={2391} />
+              <CountUp {...countUpProps} end={statisticsNum.taskCount} />
             </div>
           </div>
           <h4 >创客任务发布数</h4>
@@ -58,7 +66,7 @@ function ThirdSection({third}) {
         <div className="circle-item">
           <div className="circle-item-box">
             <div className="circle-item-num">
-              <CountUp {...countUpProps} end={526}/>
+              <CountUp {...countUpProps} end={statisticsNum.postCount}/>
             </div>
           </div>
           <h4 >论坛发帖数量</h4>

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;

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("thirdSection:" + thirdSection);
+    // console.log("thirdSection:" + thirdSection);
-    console.log("fourthSection:" + fourthSection);
+    // console.log("fourthSection:" + fourthSection);
-    console.log("fifthSection:" + fifthSection);
+    // console.log("fifthSection:" + fifthSection);
-    console.log("sixthSection:" + sixthSection);
+    // console.log("sixthSection:" + sixthSection);
-    console.log("seventhSection:" + seventhSection);
+    // console.log("seventhSection:" + seventhSection);
-    console.log("top:" + top);
+    // 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) {