diff --git a/src/home/FifthSection/index.jsx b/src/home/FifthSection/index.jsx
index d7220a0bc..d80402a75 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 48bda1e79..4a8de6dd1 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 1d1bbf793..38314bfed 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 293cbc567..ca3eabe44 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 000000000..df9e83eb0
--- /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 000000000..10a700689
--- /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 cdcd715ac..aba808eb5 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 5c96410f7..9046dd570 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">