From e4d4375102f89af44d4bb2f7f47bb1b46e7f3b4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?= <792998983@qq.com>
Date: Wed, 17 Nov 2021 11:46:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=8A=A8=E7=94=BB=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/home/FifthSection/index.jsx   | 114 +++++++++++++++-
 src/home/FifthSection/index.scss  | 213 +++++++++++++++++++++++++++++-
 src/home/FourthSection/index.jsx  |   4 +-
 src/home/FourthSection/index.scss |   1 +
 src/home/Line/index.jsx           |  14 ++
 src/home/Line/index.scss          |  20 +++
 src/home/SecondSection/index.jsx  |   3 +-
 src/home/ThirdSection/index.jsx   |   3 +-
 8 files changed, 360 insertions(+), 12 deletions(-)
 create mode 100644 src/home/Line/index.jsx
 create mode 100644 src/home/Line/index.scss

diff --git a/src/home/FifthSection/index.jsx b/src/home/FifthSection/index.jsx
index d7220a0b..d80402a7 100644
--- a/src/home/FifthSection/index.jsx
+++ b/src/home/FifthSection/index.jsx
@@ -1,13 +1,119 @@
 import React from 'react';
+import { Collapse } from 'antd';
+import Line from '../Line';
 import './index.scss';
+const { Panel } = Collapse;
+
+const text = `
+研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。
+`;
+
 
 
 function FifthSection({ fifth }) {
+
   return (
-    <React.Fragment>
-      
-     
-    </React.Fragment>
+    <div className="fifth-main clearfix">
+      <div className="circle-wave">
+        <ul className="icon-circle">
+          <li>1</li>
+          <li>2</li>
+          <li>3</li>
+          <li>4</li>
+          <li>5</li>
+          <li>6</li>
+          <li>7</li>
+          <li>8</li>
+          <li>9</li>
+          <li>10</li>
+        </ul>
+
+        <div className="circleBox">
+          <div className="circle1"></div>
+          <div className="circle2"></div>
+          <div className="circle3"></div>
+          <div className="circle4"></div>
+          <div className="circle5">
+            <div className="circle-center">
+              创客空间领域
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="task-main">
+        <h2 className="homePage-blue-tit">创客空间</h2>
+        <h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
+        <Line />
+        <Collapse accordion defaultActiveKey={['1']}>
+          <Panel header="多样化目标识别及网络化协同控制仿真验证模块开发" key="1">
+            <p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
+            <div>
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>单人悬赏</span>
+                <span>¥ 240000</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>发布时间</span>
+                <span>2021-05-20</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>截止时间</span>
+                <span>2021-06-20</span>
+              </p>
+            </div>
+          </Panel>
+          <Panel header="开源项目群体智能学习数据集征集" key="2">
+            <p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
+            <div>
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>单人悬赏</span>
+                <span>¥ 240000</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>发布时间</span>
+                <span>2021-05-20</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>截止时间</span>
+                <span>2021-06-20</span>
+              </p>
+            </div>
+          </Panel>
+          <Panel header="机器人仿真的高效碰撞检测算法" key="3">
+            <p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
+            <div>
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>单人悬赏</span>
+                <span>¥ 240000</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>发布时间</span>
+                <span>2021-05-20</span>
+              </p>
+
+              <p>
+                <i className="iconfont icon-quxiaoguanzhu"></i>
+                <span>截止时间</span>
+                <span>2021-06-20</span>
+              </p>
+            </div>
+          </Panel>
+        </Collapse>
+      </div>
+    </div>
   )
 }
 
diff --git a/src/home/FifthSection/index.scss b/src/home/FifthSection/index.scss
index 48bda1e7..4a8de6dd 100644
--- a/src/home/FifthSection/index.scss
+++ b/src/home/FifthSection/index.scss
@@ -1,10 +1,213 @@
-
 .home-fifth-section {
-  text-align: center;
   min-height: 50vh;
-  margin-top: -10px;
 
-  .fifth-tit{
-    
+  .fifth-main {
+    display: flex;
+    width: 1200px;
+    max-width: 100%;
+    margin: 5vh auto;
+  }
+
+  .circle-wave {
+    position: relative;
+    width: 600px;
+    height: 600px;
+    flex: none;
+  }
+  // ul,li{
+  //   margin: 0;
+  //   list-style-type: none;
+  //   padding: 0;
+  // }
+  .icon-circle {
+    position: absolute;
+    left: 20px;
+    width: 560px;
+    height: 560px;
+    background-color: #fff;
+    border-radius: 50%;
+    animation: iconCircle infinite 20s linear;
+
+    li {
+      width: 70px;
+      height: 70px;
+      position: absolute;
+      background-color: red;
+      border-radius: 50%;
+      color: #fff;
+      line-height: 70px;
+      text-align: center;
+      left: 50%;
+      margin-left: -20px;
+      margin-top: -20px;
+    }
+    li:nth-of-type(2) {
+      transform: rotate(36deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(3) {
+      transform: rotate(72deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(4) {
+      transform: rotate(108deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(5) {
+      transform: rotate(144deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(6) {
+      transform: rotate(180deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(7) {
+      transform: rotate(216deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(8) {
+      transform: rotate(252deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(9) {
+      transform: rotate(288deg);
+      transform-origin: 20px 300px;
+    }
+    li:nth-of-type(10) {
+      transform: rotate(324deg);
+      transform-origin: 20px 300px;
+    }
+  }
+
+  @keyframes iconCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .circleBox {
+    position: relative;
+    width: 200px;
+    height: 560px;
+    margin: auto;
+  }
+
+  .circle1,
+  .circle2,
+  .circle3,
+  .circle4,
+  .circle5 {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    position: absolute;
+    top: 180px;
+  }
+
+  .circle5 {
+    background-color: rgba(98, 88, 252, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle-center {
+    width: 100px;
+    height: 100px;
+    padding:1em 0.5em;
+    border-radius: 50%;
+    background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
+    color: #fff;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .circle1 {
+    animation: cricle-wave 5s linear 0s infinite;
+    background-color: rgba(98, 88, 252, 0.3);
+  }
+
+  .circle2 {
+    animation: cricle-wave 5s linear 1s infinite;
+    background-color: rgba(98, 88, 252, 0.3);
+  }
+
+  .circle3 {
+    animation: cricle-wave 5s linear 2s infinite;
+    background-color: rgba(98, 88, 252, 0.3);
+  }
+
+  .circle4 {
+    animation: cricle-wave 5s linear 3s infinite;
+    background-color: rgba(98, 88, 252, 0.3);
+  }
+
+  @keyframes cricle-wave {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    10% {
+      transform: scale(1.15);
+      opacity: 0.9;
+    }
+
+    20% {
+      transform: scale(1.3);
+      opacity: 0.8;
+    }
+
+    30% {
+      transform: scale(1.45);
+      opacity: 0.7;
+    }
+
+    40% {
+      transform: scale(1.6);
+      opacity: 0.6;
+    }
+
+    50% {
+      transform: scale(1.75);
+      opacity: 0.5;
+    }
+
+    60% {
+      transform: scale(1.9);
+      opacity: 0.4;
+    }
+
+    70% {
+      transform: scale(2.05);
+      opacity: 0.3;
+    }
+
+    80% {
+      transform: scale(2.2);
+      opacity: 0.2;
+    }
+
+    90% {
+      transform: scale(2.35);
+      opacity: 0.1;
+    }
+
+    100% {
+      transform: scale(2.5);
+      opacity: 0;
+    }
+  }
+
+  .task-main {
+    margin-left: 20px;
+    .home-line {
+      text-align: left;
+    }
+  }
+  .fifth-tit {
   }
 }
diff --git a/src/home/FourthSection/index.jsx b/src/home/FourthSection/index.jsx
index 1d1bbf79..38314bfe 100644
--- a/src/home/FourthSection/index.jsx
+++ b/src/home/FourthSection/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Line from '../Line';
 import './index.scss';
 
 
@@ -7,7 +8,8 @@ function FourthSection({ fourth }) {
     <React.Fragment>
       <h2 className="homePage-blue-tit">开源项目</h2>
       <h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
-
+      <Line />
+      
 
      
     </React.Fragment>
diff --git a/src/home/FourthSection/index.scss b/src/home/FourthSection/index.scss
index 293cbc56..ca3eabe4 100644
--- a/src/home/FourthSection/index.scss
+++ b/src/home/FourthSection/index.scss
@@ -3,6 +3,7 @@
   text-align: center;
   min-height: 50vh;
   margin-top: -10px;
+  padding-top: 40px;
   // background: linear-gradient(#fff 0%, #cbdcff 100%);
   background: #fff;
 
diff --git a/src/home/Line/index.jsx b/src/home/Line/index.jsx
new file mode 100644
index 00000000..df9e83eb
--- /dev/null
+++ b/src/home/Line/index.jsx
@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import './index.scss';
+
+
+export default memo(() => {
+  return (
+    <p className="home-line">
+      <i className="yellow-line"></i>
+      <i className="brown-line"></i>
+      <i className="yellow-line"></i>
+    </p>
+  )
+})
+
diff --git a/src/home/Line/index.scss b/src/home/Line/index.scss
new file mode 100644
index 00000000..10a70068
--- /dev/null
+++ b/src/home/Line/index.scss
@@ -0,0 +1,20 @@
+.home-line {
+  text-align: center;
+  line-height: 0;
+  .yellow-line {
+    display: inline-block;
+    width: 23px;
+    height: 4px;
+    background: #ff8520;
+    border-radius: 3px;
+  }
+  .brown-line {
+    display: inline-block;
+    width: 38px;
+    height: 4px;
+    margin:0 5px;
+    background: #e67a21;
+    border-radius: 3px;
+
+  }
+}
diff --git a/src/home/SecondSection/index.jsx b/src/home/SecondSection/index.jsx
index cdcd715a..aba808eb 100644
--- a/src/home/SecondSection/index.jsx
+++ b/src/home/SecondSection/index.jsx
@@ -3,6 +3,7 @@ import { Button } from 'antd';
 import Slider from 'react-slick';
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import Line from '../Line';
 
 import './index.scss';
 
@@ -29,7 +30,7 @@ function SecondSection({ community }) {
 
       <h2 className="homePage-blue-tit">社区动态</h2>
       <h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
-
+      <Line />
       <div className="community-main">
 
         <div className={`community-left ${community ? "community-active" : ''}`}>
diff --git a/src/home/ThirdSection/index.jsx b/src/home/ThirdSection/index.jsx
index 5c96410f..9046dd57 100644
--- a/src/home/ThirdSection/index.jsx
+++ b/src/home/ThirdSection/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import CountUp from 'react-countup';
+import Line from '../Line';
 import './index.scss';
 
 const countUpProps={
@@ -12,7 +13,7 @@ function ThirdSection({third}) {
   return (
     <div className="ball-background">
       <h2 className="third-tit">数据统计总览</h2>
-
+      <Line />
       <div className="third-main ">
       {/* <div className={`third-main ${third?'third-active':''}`}> */}
         <div className="circle-item">