gitlink首页-第一版

src/forge/Component/Component.scss

@@ -363,7 +363,7 @@ li.ant-menu-item{
       color: #333;
       height: 34px;
       line-height: 34px;
-      margin-bottom: 10px;
+      margin-bottom: 10px!important;
       a{
         display: block;
         overflow: hidden;

src/home/FifthEdition.jsx

@@ -0,0 +1,80 @@
+import React , { useEffect } from 'react';
+import Beijing from './Img/unit/beijing.png';
+import { Link } from 'react-router-dom';
+
+const list = [
+  {image_url:Beijing, name:"111",src:""},
+  {image_url:Beijing, name:"111",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"111",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"111",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"222",src:""},
+  {image_url:Beijing, name:"222",src:""},
+]
+
+function FifthEdition() {
+
+  useEffect(()=>{
+    if(list.length>10){
+      Init();
+    }
+  },[])
+
+  function Init() {
+    let box = document.getElementById('scrollBox1');
+    scrollUp();
+    var myTimer = setInterval(scrollUp, 10);
+    // 鼠标移入container 元素上 清除定时器 停止滚动
+    box.onmouseover = () => {
+      clearInterval(myTimer);
+    }
+    // 鼠标移出container 元素上 继续滚动
+    // 60表示每隔60毫秒向上滚动一次
+    box.onmouseout = () => {
+      myTimer = setInterval(scrollUp, 10);
+    }
+  }
+
+  function scrollUp() {
+    let box = document.getElementById('scrollBox1');
+    if(box){
+      let con1 = document.getElementById('box1');
+      if (box.scrollLeft >= con1.clientWidth) {
+        box.scrollLeft = 0;
+      } else {
+        box.scrollLeft++;
+      }
+    }
+  }
+
+  return(
+    <div id={"scrollBox1"}>
+      <ul className="fifthList" id="box1">
+        {
+          list && list.map((i,k)=>{
+            return(
+              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+            )
+          })
+        }
+      </ul>
+      {list.length > 10 && 
+        <ul className="fifthList" id="box2">
+        {
+          list && list.map((i,k)=>{
+            return(
+              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+            )
+          })
+        }
+        </ul>
+      }
+    </div>
+  )
+}
+export default FifthEdition;

src/home/Footnav.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Img from './Img/gitlink.png'
+
+function Footnav() {
+  return(
+    <div className="footEdition">
+      <div className="footContent">
+        <ul className="center">
+          <img src={Img} alt="Gitlink（确实开源）" height="29px"/>
+          <p>（确实开源）</p>
+        </ul>
+        <ul>
+          <li className="thehead">社区</li>
+          <li><a>网站首页</a></li>
+          <li><a>帮助中心</a></li>
+          <li><a>论坛交流</a></li>
+          <li><a>合作伙伴</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">支持与服务</li>
+          <li><a>API文档</a></li>
+          <li><a>Git常用命令</a></li>
+          <li><a>DevOps使用文档</a></li>
+          <li><a>服务协议</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">加入我们</li>
+          <li className="theline">
+            <div className="mr50">
+              <li>公众号</li>
+              <img src={Img} alt="公众号"/>
+            </div>
+            <div>
+              <li>qq群</li>
+              <img src={Img} alt="qq群"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <p className="copyrightDesc">©Copyright 2007～2021 国防科技大学Gitlink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
+    </div>
+  )
+}
+export default Footnav;

src/home/Headnav.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import './Index.scss';
+import gitlink from './Img/gitlink.png';
+import { Link } from 'react-router-dom';
 
 function HeadNav() {
   return(
     <div className="headNav">
       <div className="headNavDiv">
         <ul className="headlist">
-          <li>协同开发</li>
+          <li><img src={gitlink} alt="gitlink" height="37px" style={{marginRight:"15px"}}/></li>
-          <li>教学实践</li>
+          <li><Link to={`/explore`}>协同开发</Link></li>
-          <li>论坛交流</li>
+          <li><a href="https://forum.trustie.net/forums/4701/detail">教学实践</a></li>
-          <li>关于我们</li>
+          <li><a href="https://forum.trustie.net/forums">论坛交流</a></li>
+          <li><a href="https://forgeplus.trustie.net/Gitlink/forgeplus/about">关于我们</a></li>
         </ul>
         <div>
           <a className="color-white">登录</a>

src/home/Index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React , { useEffect , useState } from 'react';
 import "./Index.scss";
 import HeadNav from './Headnav';
 import TopEdition from './TopEdition';
@@ -6,12 +6,27 @@ import ThirdEdition from './ThirdEdition';
 import { Anchor } from 'antd';
 import F41 from './Img/4-1.png';
 import F42 from './Img/4-2.png';
-import F43 from './Img/4-1.png';
+import F43 from './Img/4-3.png';
-import F44 from './Img/4-2.png';
+import F44 from './Img/4-4.png';
 import SecondEdition from './SecondEdition';
+import FifthEdition from './FifthEdition';
+import Footnav from './Footnav';
 
 
 function Index(props) {
+  const [ value , setValue ] = useState("");
+
+  function changeActive(params) {
+    if(params){
+      setValue(params);
+      let h = params.split("#")[1];
+      let t = document.getElementById(h).offsetTop;
+      document.documentElement.scrollTop = t-100;
+    }else{
+      setValue("");
+    }
+  }
+
   return(
     <div className="homePage">
       <div className="topEdition">
@@ -36,13 +51,13 @@ function Index(props) {
       <div className="secondEdition">
         <p className="theTitle">Gitlink，新一代开源创新服务平台</p>
         <Anchor>
-          <li className="active"><a>分布式协作开发</a></li>
+          <li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
-          <li><a>一站式过程管理</a></li>
+          <li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
-          <li><a>高效流水线运维</a></li>
+          <li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
-          <li><a>多层次代码分析</a></li>
+          <li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
-          <li><a>多维度用户画像</a></li>
+          <li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
         </Anchor>
-        <SecondEdition />
+        <SecondEdition {...props} setValue={setValue}/>
       </div>
 
       <ThirdEdition />
@@ -77,7 +92,9 @@ function Index(props) {
       <div className="fifthEdition">
         <p className="title">开源生态</p>
         <p className="subtitle">Gitlink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
+        <FifthEdition />
       </div>
+      <Footnav />
     </div>
   )
 }

src/home/Index.scss

@@ -1,7 +1,7 @@
 
 body{
   overflow: auto!important;
-  background-color: #fff;
+  background-color: #fff!important;
 }
 .homePage{
   background-color: #fff;
@@ -29,9 +29,12 @@ body{
       .headlist{
         display: flex;
         font-weight: 400;
-        margin-left: 30px;
         li{
-          margin-right: 38px;
+          margin-right: 35px;
+          font-size: 16px;
+          a{
+            color: #FFFFFF!important;
+          }
         }
       }
       .regBtn{
@@ -65,6 +68,10 @@ body{
           background-size:cover;
         }
         .regform3{
+          background:url('./Img/banner3.png') no-repeat center center;
+          background-size:cover;
+        }
+        .regform4{
           background:url('./Img/banner4.png') no-repeat center center;
           background-size:cover;
         }
@@ -164,9 +171,13 @@ body{
     text-align: center;
     margin: 42px 0px 30px!important;
   }
+  .ant-affix{
+    background-color: #fff;
+  }
   .ant-anchor-wrapper{
     width: 1200px;
     margin:0px auto;
+    padding-left: 0px;
     .ant-anchor{
       display: flex;
       align-items: center;
@@ -208,7 +219,10 @@ body{
       background-size:cover;
       min-height: 753px;
       padding:50px 56px;
-      display: flex;
+      .hadoopCon{
+        display: flex;
+        width: 100%;
+      }
       .descBox{
         max-width: 352px;
         word-break: break-all;
@@ -239,9 +253,23 @@ body{
           margin-top: 70px;
         }
       }
+      
+      .hadoopdesc{
+        color: #FFFFFF;
+        background: -webkit-linear-gradient(112deg, #FF8B75 0%, #DD2476 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 18px;
+        line-height: 25px;
+        font-weight: 500;
+        text-align: center;
+        margin-top: 40px;
+      }
     }
     .oneStop{
       text-align: center;
+      opacity: 0.3;
+      transition: 2s;
       .oneStopContent{
         display: flex;
         .osLeftMain{
@@ -250,15 +278,6 @@ body{
           align-items: flex-start;
           position: relative;
           margin-bottom: 182px;
-          .osleftPosi1,.osleftPosi2{
-            position: absolute;
-            right:10px;
-            top:102px;
-          }
-          .osleftPosi2{
-            top:217px;
-            right:20px;
-          }
         }
         .osRightMain{
           margin-left: 22px;
@@ -287,29 +306,279 @@ body{
           }
         }
       }
+      .osleftPosi,.imgring{
+        transition: 3s;
+        opacity: 0;
+      }
+      .osleftPosi1,.osleftPosi2{
+        position: absolute;
+        right:-200px;
+        top:102px;
+        transition: 2s;
+        opacity: 0;
+        z-index: 1;
+      }
+      .osleftPosi2{
+        top:317px;
+        right:10px;
+        transition: 2.5s;
+        z-index: 2;
+      }
+      &.activeCode{
+        opacity: 1;
+        .osleftPosi,.osleftPosi1,.osleftPosi2{
+          opacity: 1;
+        }
+        .osleftPosi1{
+          right:10px;
+        }
+        .osleftPosi2{
+          top:217px;
+        }
+        .imgring{
+          opacity: 1;
+        }
+      }
     }
     .highDevops{
       text-align: center;
+      &.activeCode{
+        .highDoContent img{
+          opacity: 1;
+          &.highImg1{
+            left:10px;
+          }
+          &.highImg2{
+            right:10px;
+          }
+        }
+      }
       .highDoTitle{
-        display: inline-block;
-        height: 90px;
-        line-height: 90px;
-        padding: 0px 66px;
-        font-size: 36px;
-        font-weight: 600;
-        color: #FFFFFF;
-        background: -webkit-linear-gradient(112deg, #D57CA0 0%, #4877F3 51%, #20C3EF 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
         position: relative;
+        padding:2px;
+        width: 384px;
+        height: 90px;
+        margin:7px auto 0px;
+        border-radius: 10px;
+        span{
+          position: absolute;
+          z-index: 3;
+          width: 380px;
+          height: 86px;
+          line-height: 86px;
+          border-radius: 10px;
+          left: 2px;
+          top:2px;
+          display: inline-block;
+          font-size: 36px;
+          font-weight: 600;
+          background: -webkit-linear-gradient(1deg, #D57CA0 12%, #4877F3 57%, #20C3EF 76%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent; 
+        }
+        &::before{
+          position: absolute;
+          z-index: 2;
+          width: 380px;
+          height: 86px;
+          line-height: 86px;
+          background-color: #fff;
+          border-radius: 10px;
+          content: "";
+          top:2px;
+          left: 2px;
+        }
         &::after{
           position: absolute;
-          top: -3px; bottom: -3px;
+          content: "";
-          left: -3px; right: -3px;
+          width: 100%;
-          background: linear-gradient(135deg,#000781, #23b7cb);
+          height: 100%;
-          border-radius: 30px;
+          top:0px;
-          content: '';
+          left: 0px;
-          z-index: -1;
+          border-radius: 10px;
+          background: -webkit-linear-gradient(1deg, #D57CA0 12%, #4877F3 57%, #20C3EF 76%);
+          z-index: 1;
+        }
+      }
+      .highDoSubtitle{
+        color: #637497;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 36px;
+        width: 878px;
+        margin:30px auto 28px;
+        text-align: center;
+        span{
+          color: #1F1E1E;
+        }
+      }
+      .highDoContent{
+        background:url('./Img/2-3bg.png') no-repeat center center;
+        background-size:cover;
+        height: 920px;
+        padding:20px 0px 114px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &>div{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        img{
+          opacity: 0;
+          transition: 2.4s;
+        }
+        .highImg1,.highImg2{
+          position: absolute;
+          transition: 3s;
+        }
+        .highImg1{
+          top:126px;
+          left:-100px;
+        }
+        .highImg2{
+          top:63px;
+          right:-100px;
+        }
+        .highDoBottondesc{
+          font-size: 18px;
+          font-weight: 500;
+          color: #000000;
+          line-height: 39px
+        }
+      }
+    }
+    .multipleAnalyse{
+      background:url('./Img/2-4bg.png') no-repeat center center;
+      background-size:cover;
+      height: 710px;
+      padding-left: 58px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      opacity: 0.3;
+      transition: 2s;
+      &.activeCode{
+        opacity: 1;
+        .maContent{
+          transform: rotateY(360deg);
+        }
+      }
+      .title{
+        display: inline-block;
+        font-size: 36px;
+        font-weight: 600;
+        margin-bottom: 26px;
+        background: -webkit-linear-gradient(1deg, #6D66FF 12%, #C148FF 57%, #F59F77 76%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent; 
+        line-height: 50px;
+        margin-top: 20px;
+      }
+      .maContent{
+        height: 400px;
+        width: 763px;
+        background:url('./Img/2-4-1.png') no-repeat;
+        background-size:100% 100%;
+        margin:26px 0px;
+        transition: 3s;
+      }
+      .desc{
+        text-align: center;
+        max-width: 869px;
+        line-height: 30px;
+        color:#69DAF5 ;
+        font-weight: 400;
+        font-size: 18px;
+      }
+    }
+    .multidimensional{
+      background:url('./Img/2-5bg.png') no-repeat center center;
+      background-size:cover;
+      height: 1139px;
+      padding:268px 0px 0px;
+      display: flex;
+      flex-direction: column;
+      opacity: 0.3;
+      transition: 1s;
+      .multidimensinalhalf{
+        display: flex;
+        align-items: center;
+        position: relative;
+        height: 447px;
+        img{
+          position: absolute;
+          left: 0px;
+          bottom: -20px;
+          opacity: 0;
+          transition: 3s;
+        }
+        .halfTitle{
+          height: 50px;
+          font-size: 36px;
+          font-weight: 600;
+          color: #FFFFFF;
+          line-height: 50px;
+          background: -webkit-linear-gradient(112deg, #D57CA0 0%, #4877F3 51%, #20C3EF 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin-bottom: 70px!important;
+        }
+        .halfsubTitle{
+          font-size: 18px;
+          font-weight: 500;
+          line-height: 36px;
+          color: #1E1E1E;
+          span{
+            color: #637497;
+          }
+        }
+      }
+      &.activeCode{
+        opacity: 1;
+        .multidimensinalPart{
+          img{
+            left: 0px;
+            opacity: 1;
+          }
+        }
+        .multidimensinalhalf{
+          img{
+            left: 380px;
+            opacity: 1;
+          }
+        }
+      }
+    }
+    .multidimensinalPart{
+      display: flex;
+      align-items: center;
+      margin-top: 50px;
+      position: relative;
+      height: 396px;
+      transition: 4s;
+      img{
+        position: absolute;
+        left: 620px;
+        bottom: -20px;
+        opacity: 0;
+        transition: 3s;
+      }
+      p{
+        max-width: 345px;
+        text-align: left;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 32px;
+        color: #1E1E1E;
+        span{
+          color: #637497;
+        }
+        &:first-child{
+          margin-bottom: 55px!important;
         }
       }
     }
@@ -455,8 +724,8 @@ body{
     color: #fff!important;
     background-color: #466AFF;
     border-radius: 6px;
-    margin-bottom: 80px;
     font-size: 18px;
+    margin-bottom: 80px;
   }
   .forthUl{
     display: flex;
@@ -509,4 +778,111 @@ body{
     margin-top: 13px;
     margin-bottom: 54px;
   }
+  #scrollBox1{
+    max-height: 300px;
+    overflow: hidden;
+    margin: 35px 0px 0px;
+    display: flex;
+    width: 100%;
+  }
+  ul.fifthList{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 300px;
+    li{
+      border-bottom: none;
+      width: 300px;
+      height: 120px;
+      margin:15px 20px!important;
+      background: linear-gradient(180deg, #F1F7FF 0%, #F7FAFF 53%, #FFFFFF 100%);
+      box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      border: 2px solid #FFFFFF;
+      a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+      img{
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+    
+  }
+}
+.footEdition{
+  background-color: #171B23;
+  .footContent{
+    display: flex;
+    align-items: flex-start;
+    padding:86px 0px;
+    justify-content: space-around;
+    width: 1200px;
+    margin:0px auto;
+    ul{
+      min-width: 120px;
+      text-align: left;
+      margin-right: 80px;
+      &.center{
+        text-align: center;
+      }
+      &>p{
+        height: 22px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 22px;
+      }
+      &>img{
+        width: 100px;
+        height: 100%;
+        margin-bottom: 30px;
+        margin-top: 25px;
+        border-radius: 10px;
+      }
+      li{
+        height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #BDC2D1;
+        margin-bottom: 15px!important;
+        a{
+          color: #BDC2D1!important;
+          &:hover{
+            text-decoration: underline;
+          }
+        }
+        &.thehead{
+          height: 25px;
+          font-size: 18px;
+          font-weight: 600;
+          color: #FFFFFF;
+          line-height: 25px;
+          margin-bottom: 20px!important;
+        }
+        &.theline{
+          display: flex;
+          img{
+            width: 80px;
+            height: 80px;
+            border-radius: 10px;
+          }
+        }
+      }
+    }
+  }
+  .copyrightDesc{
+    font-size: 12px;
+    font-weight: 400;
+    color: #BDC2D1;
+    line-height: 28px;
+    padding:15px 0px;
+    text-align: center;
+    background-color: #1B212C;
+  }
 }

src/home/SecondEdition.jsx

@@ -4,21 +4,129 @@ import ImgHead from './Img/2-2-head.png';
 import Img2 from './Img/2-2-2.png';
 import Img3 from './Img/2-2-3.png';
 import Imgring from './Img/2-2-ring.png';
+import ImgS1 from './Img/2-3-1.png';
+import ImgS2 from './Img/2-3-2.png';
+import ImgS3 from './Img/2-3-3.png';
+import ImgS4 from './Img/2-3-4.png';
+import ImgM2 from './Img/2-6-2.png';
+import ImgM1 from './Img/2-5-1.png';
+import ImgM3 from './Img/2-5-2.png';
+import ImgM4 from './Img/2-6-1.png';
+import Codeafter from './Img/codeafter.png';
+import './code.scss';
+import { useEffect } from 'react';
+import { useState } from 'react';
 
-function SecondEdition(params) {
+const code=[
+  {str:<span><span className='code-green'>git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span>},
+  {str:<span><span className='code-red'>git push</span> -u origin master</span>},
+  {str:<span><span className='code-green'>git branch</span> dev</span>},
+  {str:<span><span className='code-blue'>git checkout</span> dev</span>},
+  {str:<span><span className='code-green'>git add</span> .</span>},
+  {str:<span><span className='code-red'>git commit</span> -m "xxx"</span>},
+  {str:<span><span className='code-red'>git push</span> origin dev</span>},
+  {str:<span><span className='code-blue'>git checkout</span> master</span>},
+  {str:<span><span className='code-green'>git pull</span> origin master</span>},
+  {str:<span><span className='code-green'>git merge</span> dev</span>},
+  {str:<span><span className='code-red'>git push</span> origin master</span>}
+]
+
+function SecondEdition({setValue}) {
+  useEffect(()=>{
+    window.addEventListener('scroll', handleScroll);
+  },[])
+
+  const [ hadoop , setHadoop ] = useState(false);
+  const [ hadoopImg , setHadoopImg ] = useState(false);
+  const [ highDevops , setHighDevops ] = useState(false);
+  const [ multipleAnalyse , setMultipleAnalyse ] = useState(false);
+  const [ multidimensional , setMultidimensional ] = useState(false);
+
+  const [ oneStop , setOneStop ] = useState(false);
+
+  function handleScroll() {
+    let clientHeight = document.documentElement.clientHeight; //可视区域高度
+    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
+    let f = checkPosi("hadoop",clientHeight,scrollTop);
+    if(f){
+      setValue("#hadoop");
+      setHadoop(true);
+      setTimeout(function() {
+        setHadoopImg(true);
+      },2300)
+    }else{
+      setHadoop(false);
+      setHadoopImg(false);
+    }
+    let f1 = checkPosi("oneStop",clientHeight,scrollTop);
+    if(f1){
+      setValue("#oneStop");
+      setOneStop(true);
+    }else{
+      setOneStop(false);
+      setOneStop(false);
+    }
+    let f3 = checkPosi("highDevops",clientHeight,scrollTop);
+    if(f3){
+      setValue("#highDevops");
+      setHighDevops(true);
+    }else{
+      setHighDevops(false);
+      setHighDevops(false);
+    }
+    let f4 = checkPosi("multipleAnalyse",clientHeight,scrollTop);
+    if(f4){
+      setValue("#multipleAnalyse");
+      setMultipleAnalyse(true);
+    }else{
+      setMultipleAnalyse(false);
+      setMultipleAnalyse(false);
+    }
+    let f5 = checkPosi("multidimensional",clientHeight,scrollTop);
+    if(f5){
+      setValue("#multidimensional");
+      setMultidimensional(true);
+    }else{
+      setMultidimensional(false);
+      setMultidimensional(false);
+    }
+  }
+
+  function checkPosi(ele,clientHeight,scrollTop) {
+    var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
+    var b = document.getElementById(ele).clientHeight + (clientHeight/3);
+    if(a>0 || a<-b){
+      return false;
+    }else{
+      return true;
+    }
+  }
   return(
     <div className="secondEditionContent">
-      <div className="hadoop">
+      <div className="hadoop" id="hadoop">
-        <div className="descBox">
+        <div className="hadoopCon">
-          <p className="desc1">分布式协作开发</p>
+          <div className="descBox">
-          <p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
+            <p className="desc1">分布式协作开发</p>
-          <p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
+            <p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
+            <p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
+          </div>
+          <div className={hadoop ? "hadoopCode activeCode" :"hadoopCode"}>
+            {
+              code.map((i,k)=>{
+                return(
+                  <li><pre className="word-item" style={{animationDelay: `${k * 0.1 + .4}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
+                )
+              })
+            }
+            <img src={Codeafter} alt="运行结果" className={hadoopImg?"activeImg":""}/>
+          </div>
         </div>
+        <p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
       </div>
-      <div className="oneStop">
+      <div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
-        <div className="oneStopContent">
+        <div className={"oneStopContent"}>
-          <div className="osLeftMain">
+          <div className={"osLeftMain"}>
-            <img src={Img1} alt="" width="494px"/>
+            <img src={Img1} alt="" width="494px" className="osleftPosi"/>
             <img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
             <img src={Img2} alt="" width="627px" className="osleftPosi1"/>
             <img src={Img3} alt="" width="412px" className="osleftPosi2"/>
@@ -30,10 +138,51 @@ function SecondEdition(params) {
             <p><span>让您的团队协作更高效、过程更透明！</span></p>
           </div>
         </div>
-        <img src={Imgring} alt="" height="83px"/>
+        <img src={Imgring} alt="" height="83px" className="imgring"/>
       </div>
-      <div className="highDevops">
+      <div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
-        <span className="highDoTitle">高效流水线运维</span>
+        <div className="highDoTitle">
+          <span>高效流水线运维</span>
+        </div>
+        <div className="highDoSubtitle">
+          融合DevOps思想，提供轻量级的工作流引擎（Engine），
+          <span>打通编码、测试、构建、部署</span>等开发运维环节；支持
+          <span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
+        </div>
+        <div className="highDoContent">
+          <div>
+            <img src={ImgS1} alt="" width="794px"/>
+            <img src={ImgS2} alt="" width="520px" style={{marginBottom:'74px',marginTop:"25px"}}/>
+            <img src={ImgS3} alt="" width="427px" className="highImg2"/>
+            <img src={ImgS4} alt="" width="413px" className="highImg1"/>
+          </div>
+          <p className="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p>
+        </div>
+      </div>
+      <div className={multipleAnalyse ? "multipleAnalyse activeCode":"multipleAnalyse"} id="multipleAnalyse">
+        <span className="title">多层次代码分析</span>
+        <div className="maContent"></div>
+        <p className="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p>
+      </div>
+      <div className={multidimensional ? "multidimensional activeCode":"multidimensional"} id="multidimensional">
+        <div className="multidimensinalhalf">
+          <div>
+            <p className="halfTitle">多维度用户画像</p>
+            <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数<br/>据，</span>搭建多维度用户画像评估系统；</p>
+          </div>
+          <div style={{width:"820px",marginLeft:"40px"}}>
+            <img src={ImgM4} alt="" width="820px" />
+          </div>
+        </div>
+        <div className="multidimensinalPart">
+          <div style={{width:"614px",marginRight:"40px"}}>
+            <img src={ImgM2} alt="" width="614px" />
+          </div>
+          <div>
+            <p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
+            <p>让您在个人主页展示开发动态与创新能力！</p>
+          </div>
+        </div>
       </div>
     </div>
   )

src/home/ThirdEdition.jsx

@@ -8,6 +8,9 @@ import T332 from './Img/3-3-2.png';
 import T341 from './Img/3-4-1.png';
 import T342 from './Img/3-4-2.png';
 import bg3 from './Img/3-1.png';
+import bg32 from './Img/3-2.png';
+import bg33 from './Img/3-3.png';
+import bg34 from './Img/3-4.png';
 
 import './Index.scss';
 
@@ -49,7 +52,7 @@ function ThirdEdition(params) {
         </li>
       </ul>
       <div className="thirdLists">
-        <img src={bg3} alt="" width="336px"/>
+        <img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
         <div className="listbox">
           <p className="listTitle">Gitlink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏</p>
           <li>

src/home/TopEdition.jsx

@@ -7,6 +7,8 @@ function TopEdition() {
       <div className="regform1"></div>
       <div className="regform2"></div>
       <div className="regform3">
+      </div>
+      <div className="regform4">
         <p className="regPrg"><a>注册</a></p>
       </div>
      </Carousel>

src/home/code.scss

@@ -0,0 +1,64 @@
+.hadoopCode{
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
+  border-radius: 10px;
+  padding:18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+  &.activeCode{
+    &>img.activeImg{
+      right: 0px;
+      bottom: -20px;
+      opacity: 1;
+      width: 705px;
+    }
+  }
+  &>img{
+    position: absolute;
+    right: -50px;
+    bottom: -50px;
+    transition: 1s;
+    width: 805px;
+    opacity: 0;
+    border-radius: 4px;
+  }
+  li{
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 30px;
+    color: #E1E1E1;
+    pre {
+      font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+      .codenum{
+        display: inline-block;
+        width: 15px;
+        text-align: left;
+        margin-right: 15px;
+      }
+      .code-green{
+        color: #00FA30;
+      }
+      .code-red{
+        color: #FF5058;
+      }
+      .code-blue{
+        color: #05CFC8;
+      }
+    }
+  }
+}
+.activeCode .word-item {
+  opacity: 0;
+  animation: show .3s 1 forwards;
+}
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}