合并平台首页、项目首页功能分支，并处理代码冲突

public/css/edu-purge.css

@@ -1268,11 +1268,17 @@ a.shixun-task-btn {
 
 
 /*-----------实训配置、评测脚本-------------*/
+@font-face {
+  font-family: "iconfont"; /* Project id 2340181 */
+  src: url('iconfont.woff2?t=1631773579834') format('woff2'),
+       url('iconfont.woff?t=1631773579834') format('woff'),
+       url('iconfont.ttf?t=1631773579834') format('truetype');
+}
 html body {
   font-size: 14px;
   line-height: 2.0;
   background: #fafafa;
-  font-family: "Microsoft YaHei", "SimSun";
+  font-family: "iconfont";
   color: #05101a;
   height: 100%;
   position: relative;
@@ -6708,10 +6714,13 @@ p{
   right: 0px;
   top:4px;
   color: #999;
+<<<<<<< HEAD
+=======
 }
 .ant-input, .ant-input .ant-input-suffix{
   background-color: #fff!important;
 }
 .has-error .ant-input{
   background-color: #FEF1F0!important;
+>>>>>>> pre_develop
 }

src/App.js

@@ -10,7 +10,7 @@ import {
 import axios from 'axios';
 import LoginDialog from './modules/login/LoginDialog';
 import 'babel-polyfill';
-import Loading from './Loading'
+import Loading from './Loading';
 
 import Loadable from 'react-loadable';
 import marked from './common/marked';
@@ -97,6 +97,10 @@ const ProjectIndex = Loadable({
 	loading: Loading,
 });
 
+const Home = Loadable({
+  loader: () => import('./home/Index'),
+  loading: Loading,
+})
 // const CreateMerge = Loadable({
 //   loader: () => import('./forge/Merge/NewMerge'),
 //   loading: Loading,
@@ -360,34 +364,28 @@ class App extends Component {
 							{/* 判断为用户/组织，并进入对应页面 */}
 							{
 								pathType === 'User' ?
-									<Route exact path="/:username"
+								<Route exact path="/:username"
-										render={
+									render={
-											(props) => {
+										(props) => {
-												return (<InfosIndex {...this.props} {...this.state} />)
+											return (<InfosIndex {...this.props} {...this.state} />)
-											}
 										}
-									/> : pathType === 'Organization' ? <Route path={"/:OIdentifier"}
+									}
-										render={
+								/> : pathType === 'Organization' ? <Route path={"/:OIdentifier"}
-											(props) => {
+									render={
-												return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
+										(props) => {
-											}
+											return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
-										}>
+										}
-									</Route> : pathType === '404' ? <Route component={Shixunnopage} />:
+									}>
-										<Route exact path="/"
+								</Route> : pathType === '404' ? <Route component={Shixunnopage} />:
-											render={
+									""
-												(props) => (
-													personal && personal.length > 0 ?
-														<InfosIndex {...this.props} {...props} />
-														:
-														<ProjectIndex {...this.props} {...props} />
-												)
-											}
-										/>
-								// <Route path="/" component={Loading} />
-								// <Route path="/" component={Shixunnopage} /> 
 							}
-
+							<Route exact path="/"
-
+								render={
+									(props) => (
+										<Home {...props} {...this.props} {...this.state}/>
+									)
+								}
+							/>
 
 							{/* 个人主页 */}
 							<Route path="/:username"

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/forge/Head/Footer.jsx

@@ -18,49 +18,43 @@ function Footer(){
   }
 
   return(
-    <div>
+      value && showhtml(value)
-      <div style={{height:"483px"}}></div>
+        // {/* <div className="footEdition"> 
-      <div className="newFooter edu-txt-center">
+        //   <div className="footContent">
-        {value && showhtml(value)}
+        //     <ul className="center">
-        {/* <div className="footerInfos">
+        //       <img src={""} alt="Gitlink（确实开源）" height="29px"/>
-          <ul>
+        //       <p>（确实开源）</p>
-            <li>社区</li>
+        //     </ul>
-            <li><a href={`/`} target="_blank">网站首页</a></li>
+        //     <ul>
-            <li><a href={`https://www.trustie.net/agreement`} target="_blank">服务协议</a></li>
+        //       <li className="thehead">社区</li>
-            <li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
+        //       <li><a href="/">网站首页</a></li>
-            <li><a href={`https://forum.trustie.net/`} target="_blank">问吧交流</a></li>
+        //       <li><a href="https://forum.trustie.net/forums/1168/detail">帮助中心</a></li>
-            <li><a href={`https://www.trustie.net/cooperation`} target="_blank">合作伙伴</a></li>
+        //       <li><a href="https://forum.trustie.net/">论坛交流</a></li>
-          </ul>
+        //       <li><a href="https://www.trustie.net/cooperation">合作伙伴</a></li>
-          <ul>
+        //     </ul>
-            <li>支持与服务</li>
+        //     <ul>
-            <li><a href={`https://forgeplus.trustie.net/docs/api`} target="_blank">API文档</a></li>
+        //       <li className="thehead">支持与服务</li>
-            <li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
+        //       <li><a href="https://forgeplus.trustie.net/docs/api">API文档</a></li>
-            <li><a href={`https://git-scm.com`} target="_blank">Git常用命令</a></li>
+        //       <li><a href="https://git-scm.com">Git常用命令</a></li>
-            <li><a href={`https://forum.trustie.net/forums/3080/detail`} target="_blank">DevOps使用文档</a></li>
+        //       <li><a href="https://forum.trustie.net/forums/3080/detail">DevOps使用文档</a></li>
-            <li><a href={`https://forgeplus.trustie.net/projects/jasder/forgeplus/tree/master/CHANGELOG.md`} target="_blank">日志更新</a></li>
+        //       <li><a href='https://www.trustie.net/agreement'>服务协议</a></li>
-          </ul>
+        //     </ul>
-          <ul>
+        //     <ul>
-            <li>合作伙伴</li>
+        //       <li className="thehead">加入我们</li>
-            <li><a href={`http://www.sei.pku.edu.cn`} target="_blank">北京大学</a></li>
+        //       <li className="theline">
-            <li><a href={`http://scse.buaa.edu.cn`} target="_blank">北京航空航天大学</a></li>
+        //         <div className="mr50">
-            <li><a href={`https://www.nju.edu.cn`} target="_blank">南京大学</a></li>
+        //           <li>公众号</li>
-            <li><a href={`https://www.xtu.edu.cn`} target="_blank">湘潭大学</a></li>
+        //           <img src={"Img"} alt="公众号"/>
-            <li><a href={`http://www.iscas.ac.cn`} target="_blank">ISCAS</a></li>
+        //         </div>
-            <li><a href={`https://www.ucloud.cn`} target="_blank">UCloud优刻得</a></li>
+        //         <div>
-            <li><a href={`http://www.inforbus.com`} target="_blank">中创软件</a></li>
+        //           <li>QQ群</li>
-            <li><a href={`https://www.inspur.com`} target="_blank">浪潮集团</a></li>
+        //           <img src={"qqImg"} alt="QQ群"/>
-            <li><a href={`http://www.copu.org.cn`} target="_blank">中国开源软件推进联盟</a></li>
+        //         </div>
-            <li><a href={`https://www.sjtu.edu.cn`} target="_blank">上海交通大学</a></li>
+        //       </li>
-          </ul>
+        //     </ul>
-          <ul>
+        //   </div>
-            <li>合作伙伴</li>
+        //   <p className="copyrightDesc">©Copyright 2007～2021 国防科技大学Gitlink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
-            <li><span>热线：</span></li>
+        // </div>  */}
-            <li><span>QQ群：1071514693</span></li>
-          </ul>
-        </div>
-        <p className="footerCopy">© Copyright 2007~2021 国防科技大学Trustie团队 & IntelliDE <a href="https://beian.miit.gov.cn">湘ICP备 17009477号</a></p> */}
-      </div>
-    </div>
   )
 }
 export default Footer;

src/forge/Head/header.scss

@@ -262,4 +262,77 @@
 
 .text-center{
   text-align: center;
+}
+
+.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: 3px;
+          }
+        }
+      }
+    }
+  }
+  .copyrightDesc{
+    font-size: 12px;
+    font-weight: 400;
+    color: #BDC2D1;
+    line-height: 28px;
+    padding:15px 0px;
+    text-align: center;
+    background-color: #1B212C;
+  }
 }

src/forge/Index.js

@@ -65,12 +65,6 @@ class Index extends Component {
               <ProjectNew {...this.props} {...props} />
             )}
           ></Route>
-          {/* <Route
-            path="/:owner/:projectsId"
-            render={(props) => (
-              <ProjectDetail {...this.props} {...props} />
-            )}
-          ></Route> */}
           <Route
             path="/explore/all"
             render={(props) => (
@@ -84,12 +78,6 @@ class Index extends Component {
               <ProjectHome {...this.props} {...props} />
             )}
           ></Route>
-          <Route
-            path="/"
-            render={(props) => (
-              <ProjectHome {...this.props} {...props} />
-            )}
-          ></Route>
         </Switch>
       </div>
     );
@@ -101,10 +89,3 @@ export default withRouter(
     parentSelector: ".newMain",
   })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index))))
 );
-
-// export default withRouter(
-//   ImageLayerOfCommentHOC({
-//     imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
-//     parentSelector: ".newMain",
-//   })(Index)
-// );

src/forge/Main/CoderRootBranch.js

@@ -73,7 +73,6 @@ export default ((props)=>{
       <Menu.Item key={'1'}><a href={tar_url}>TAR.GZ</a></Menu.Item>
     </Menu>
   )
-
   return(
     <React.Fragment>
       <div className="main">

src/forge/Team/Group/GroupForm.jsx

@@ -157,6 +157,17 @@ export default Form.create()(
       setAuth(params.target.value)
     }
 
+    function checkname(rule, value, callback){
+      if(!value){
+        callback();
+      }
+      if(value && !value.match(/^[a-zA-Z][a-zA-Z\d]{3,14}$/)){
+        callback("只能使用英文字母和数字，以字母开头，长度为4到15个字符");
+      }
+      callback();
+    }
+
+
     function checkname(rule, value, callback){
       if(!value){
         callback();

src/forge/Version/version.js

@@ -0,0 +1,122 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import { Spin } from 'antd';
+import NoneData from '../Nodata';
+import './version.css';
+import axios from 'axios';
+import RenderHtml from '../../components/render-html';
+
+/**
+ * issue_chosen:下拉的筛选列表,
+ * data:列表接口返回的所有数据,
+ * issues:列表数组,
+ * isSpin:加载中,
+ */
+class version extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      issue_chosen: undefined,
+      data: undefined,
+      releases:undefined,
+      issues: undefined,
+      isSpin: true,
+      search: undefined,
+      search_count: undefined,
+    }
+  }
+
+  componentDidMount = () => {
+    this.getIssueList();
+  }
+  // 获取列表数据
+  getIssueList = () => {
+    const { projectsId, owner } = this.props.match.params;
+    const url = `/${owner}/${projectsId}/releases.json`;
+    axios.get(url).then((result) => {
+      if (result) {
+        this.setState({
+          data: result.data,
+          releases:result.data.releases,
+          issues: result.data.issues,
+          isSpin: false
+        })
+      }
+    }).catch((error) => {
+      console.log(error);
+    })
+  }
+
+  // 显示版本描述
+  showBody=(key,flag)=>{
+    let { releases } = this.state;
+    releases[key].bodyshow = !flag;
+    this.setState({
+      releases
+    })
+  }
+
+  renderList = (releases) => {
+    const { projectsId , owner } = this.props.match.params;
+    if (releases && releases.length > 0) {
+      return (
+        releases.map((item, key) => {
+          return (
+            <div className="versionInfo" key={key}>
+              <span className="versionInfo_left">
+                <span className={`${item.draft === "稳定" ?"versionTag green":"versionTag yellow"}`}>{item.draft}</span>
+                <span className="mt10">{item.created_at}</span>
+                <span className="color-grey-8">
+                  <i className="iconfont icon-biaoqian3 mr3 font-14"></i>
+                  {item.tag_name}
+                </span>
+              </span>
+              <div className="versionInfo_right">
+                <span className="versionName">
+                  <span className="task-hide">{item.name}</span>
+                  <Link to={`/projects/${owner}/${projectsId}/releases/${item.version_id}/update`} className="color-blue ml3 font-12">（编辑）</Link>
+                </span>
+                <span className="color-grey-3">
+                  <i className={`${item.bodyshow ? "iconfont icon-sanjiaoxing-down color-grey-8 mr3 font-14":"iconfont icon-triangle color-grey-8 mr3 font-14"}`} onClick={()=>this.showBody(key,item.bodyshow)}></i>
+                  {item.user_name}:<span className="color-grey-8">发布了这个版本，并在发布后提交给{item.target_commitish}</span>
+                </span>
+                {
+                  item.bodyshow && <RenderHtml className="break_word_comments imageLayerParent" value={item.body} url={this.props.history.location}/>
+                }
+                <RenderHtml />
+                <p className="mt10 pl3">
+                  <a href={item.tarball_url} style={{color:"#4CC1DA"}} className="mr30"><i className="iconfont icon-TAR font-18 mr5"></i>TAR</a>
+                  <a href={item.zipball_url} style={{color:"#28BD6C"}}><i className="iconfont icon-ZIP font-18 mr5"></i>ZIP</a>
+                </p>
+              </div>
+            </div>
+          )
+        })
+      )
+    } else if (releases && releases.length === 0) {
+      return ( <NoneData _html="暂时还没有相关数据!" /> )
+    }
+  }
+
+  render() {
+    const { projectsId ,owner } = this.props.match.params;
+    const { data , releases , isSpin } = this.state
+
+    return (
+      <div className="main" style={{padding:"0px"}}>
+        <div className="topWrapper" style={{padding:"15px 20px"}}>
+          <span className="font-18 color-grey-3">版本发布</span>
+          {
+            data && data.user_permission ?
+              <Link to={`/projects/${owner}/${projectsId}/releases/new`} className="topWrapper_btn_new">+ 发布新版</Link>
+              : ''
+          }
+        </div>
+        <div className="releasesVersion">
+          <Spin spinning={isSpin}><div>{this.renderList(releases)}</div></Spin>
+        </div>
+      </div>
+    )
+  }
+}
+export default version;

src/forge/users/Infos.js

@@ -123,6 +123,8 @@ class Infos extends Component {
     });
     const { current_user } = this.props;
     const { username } = this.props.match.params;
+    const { pathname } = this.props.location;
+    const { notice } = this.state;
 
     let url = `/users/${username || (current_user && current_user.login)}.json`;
     axios.get(url).then((result) => {

src/forge/users/Team.jsx

@@ -48,7 +48,6 @@ function Team(props){
     </Menu>
   )
 
-
   return(
     <div>
       <div className="headerbox">

src/home/FifthEdition.jsx

@@ -0,0 +1,137 @@
+import React , { useEffect } from 'react';
+import Beijing from './Img/unit/beijing.png';
+import SHJT from './Img/unit/SHJT.png';
+import DD from './Img/unit/DD.png';
+import HW from './Img/unit/HW.png';
+import ML from './Img/unit/ML.png';
+import QH from './Img/unit/QH.png';
+import QZ from './Img/unit/QZ.png';
+import TX from './Img/unit/TX.png';
+import XH from './Img/unit/XH.png';
+import XJY from './Img/unit/XJY.png';
+import ZC from './Img/unit/ZC.png';
+import GFKJ from './Img/unit/GFKJ.png';
+import BJHKHT from './Img/unit/BJHKHT.png';
+import ISCAS from './Img/unit/ISCAS.png';
+import NJDX from './Img/unit/NJDX.png';
+import CEC from './Img/unit/CEC.png';
+import KYRJLM from './Img/unit/KYRJLM.png';
+import WXYJY from './Img/unit/WXYJY.png';
+import HSKY from './Img/unit/HSKY.png';
+import LSLM from './Img/unit/LSLM.png';
+import TG from './Img/unit/TG.png';
+import LC from './Img/unit/LC.png';
+import YKD from './Img/unit/YKD.png';
+
+const list = [
+  {image_url:GFKJ, name:"国防科技大学",src:"https://www.nudt.edu.cn/"},
+  {image_url:TG, name:"头歌",src:"https://www.educoder.net/"},
+  {image_url:XJY, name:"长沙先进技术研究院",src:"https://www.hnjmrh.gov.cn/newweb/service/detail/305/"},
+  {image_url:Beijing, name:"北京大学",src:"https://www.pku.edu.cn/"},
+  {image_url:BJHKHT, name:"北京航空航天",src:"https://www.buaa.edu.cn/"},
+  {image_url:ISCAS, name:"ISCAS",src:"http://www.iscas.ac.cn/"},
+  {image_url:NJDX, name:"南京大学",src:"https://www.nju.edu.cn/"},
+  {image_url:DD, name:"滴滴",src:"https://www.didiglobal.com/"},
+  {image_url:CEC, name:"CEC",src:"https://www.cec.com.cn/"},
+  {image_url:HW, name:"华为",src:"https://www.huawei.com/"},
+  {image_url:ML, name:"木兰开源社区",src:"https://www.mulanos.cn/"},
+  {image_url:TX, name:"腾讯",src:"https://www.tencent.com/zh-cn"},
+  {image_url:KYRJLM, name:"中国开源软件推进联盟",src:"http://www.copu.org.cn/"},
+  {image_url:XH, name:"中国计算机学会",src:"https://www.ccf.org.cn/"},
+  {image_url:QZ, name:"openi启智",src:"https://www.openi.org.cn/"},
+  {image_url:HSKY, name:"红山开源",src:"https://osredm.com/"},
+  {image_url:LSLM, name:"绿色产业联盟",src:"https://www.opengcc.org/"},
+  {image_url:ZC, name:"中创软件",src:"http://www.cvicse.com/"},
+  {image_url:LC, name:"浪潮",src:"https://cloud.inspur.com/"},
+  {image_url:YKD, name:"ucloud",src:"https://www.ucloud.cn/"}
+]
+// const settings = {
+//   dots: false,
+//   infinite: true,
+//   slidesToShow: 6,
+//   slidesToScroll: 1,
+//   autoplay: true,
+//   speed: 2000,
+//   autoplaySpeed: 2000,
+//   cssEase: "linear",
+//   rows:2,
+//   arrows:false
+// };
+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"}>
+      <div style={{width:370*list.length+"px"}}>
+        <ul className="fifthList" id="box1" style={{width:(370*list.length)/2+"px"}}>
+          {
+            list && list.map((i,k)=>{
+              return(
+                <li><a href={i.src}><img src={i.image_url} alt={i.name}/></a></li>
+              )
+            })
+          }
+        </ul>
+        {list.length > 10 && 
+          <ul className="fifthList" id="box2" style={{width:(370*list.length)/2+"px"}}>
+          {
+            list && list.map((i,k)=>{
+              return(
+                <li><a href={i.src}><img src={i.image_url} alt={i.name}/></a></li>
+              )
+            })
+          }
+          </ul>
+        }
+      </div>
+      {/* <Slider {...settings} className="footSlider">
+        {
+          list && list.map((i,k)=>{
+            return(
+              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+            )
+          })
+        }
+        {list.length > 10 && list && list.map((i,k)=>{
+            return(
+              <li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
+            )
+          })
+        }
+      </Slider> */}
+    </div>
+  )
+}
+export default FifthEdition;

src/home/Footnav.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Img from './Img/gitlink.png';
+import qqImg from './Img/qq.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 href="/">网站首页</a></li>
+          {/* 关于我们 */}
+          <li><a href="https://forum.trustie.net/forums/1168/detail">帮助中心</a></li>
+          <li><a href="https://forum.trustie.net/">论坛交流</a></li>
+          <li><a href="https://www.trustie.net/cooperation">合作伙伴</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">支持与服务</li>
+          <li><a href="https://forgeplus.trustie.net/docs/api">API文档</a></li>
+          <li><a href="https://git-scm.com">Git常用命令</a></li>
+          <li><a href="https://forum.trustie.net/forums/3080/detail">DevOps使用文档</a></li>
+          <li><a href='https://www.trustie.net/agreement'>服务协议</a></li>
+        </ul>
+        <ul>
+          <li className="thehead">加入我们</li>
+          <li className="theline">
+            {/* <div className="mr50">
+              <li>公众号</li>
+              <img src={qqImg} alt="公众号"/>
+            </div> */}
+            <div>
+              <li>QQ群</li>
+              <div className="imgCon">
+                <img src={qqImg} alt="QQ群"/>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <p className="copyrightDesc">©Copyright 2007～2021 国防科技大学GitLink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
+    </div>
+  )
+}
+export default Footnav;

src/home/Headnav.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './Index.scss';
+// import gitlink from './Img/gitlink.png';
+import { getImageUrl } from 'educoder';
+
+function HeadNav({showLoginDialog,mygetHelmetapi}) {
+  const register = mygetHelmetapi && mygetHelmetapi.common && mygetHelmetapi.common.register;
+  const navbar = mygetHelmetapi && mygetHelmetapi.navbar;
+  return(
+    <div className="headNav">
+      <div className="headNavDiv">
+        <ul className="headlist">
+          <li><img src={getImageUrl(`/${mygetHelmetapi && mygetHelmetapi.nav_logo_url}`)} alt="gitlink" height="37px" style={{marginRight:"15px"}}/></li>
+          {
+            navbar && navbar.length>0&&
+            navbar.map((i,k)=>{
+              return(
+                <li style={{display:i.hidden?"none":"block"}}><a href={i.link}>{i.name}</a></li>
+              )
+            })
+          }
+        </ul>
+        <div>
+          <a className="color-white" onClick={showLoginDialog}>登录</a>
+          <a className="regBtn" href={register}>注册</a>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default HeadNav;

src/home/Index.jsx

@@ -0,0 +1,128 @@
+import React , { useEffect , useState } from 'react';
+import "./Index.scss";
+import HeadNav from './Headnav';
+import TopEdition from './TopEdition';
+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-3.png';
+import F44 from './Img/4-4.png';
+import SecondEdition from './SecondEdition';
+import FifthEdition from './FifthEdition';
+import Footnav from './Footnav';
+import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
+
+function Index(props) {
+  const [ value , setValue ] = useState("");
+  const [ flag , setFlag ] = useState(true);
+  const [ isRender , setIsRender ] = useState(false);
+  const [ isloginCancel , setIsloginCancel ] = useState(false);  
+  const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;
+
+  useEffect(()=>{
+    window.addEventListener("scroll",scrollListener);
+  },[])
+
+  function scrollListener(event) {
+    let third = document.getElementById("thirdContent").offsetTop;
+    let top = document.documentElement.scrollTop + 60;
+    if(top>= third)
+    {
+      setFlag(false)
+    }else{
+      setFlag(true)
+    }
+  }
+
+  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">
+        <HeadNav {...props}/>
+        <TopEdition register={register}/>
+        <ul className="topEditionUl">
+          <a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
+            <li>
+              CCF开源发展委员会首批执行委员名单发布
+            </li>
+          </a>
+          <a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
+            <li>
+              平台精选仓库：Gitlink/Gitlink
+            </li>
+          </a>
+          <a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
+            <li>
+              OpenHarmony系统介绍及赛题说明
+            </li>
+          </a>
+        </ul>
+      </div>
+
+      <div className="secondEdition">
+        <p className="theTitle">Gitlink，新一代开源创新服务平台</p>
+        {
+          flag &&
+          <Anchor>
+            <li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
+            <li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
+            <li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
+            <li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
+            <li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
+          </Anchor>
+        }
+        <SecondEdition {...props} setValue={setValue}/>
+      </div>
+      <div id="thirdContent">
+        <ThirdEdition />
+      </div>
+
+      <div className="forthEdition">
+        <p className="theTitle">加入Gitlink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
+        <a className="qulikyreg" href={register}>快速注册</a>
+        <ul className="forthUl">
+          <li>
+            <img src={F41} alt="" width={"100px"}/>
+            <span className="forthtitle">发现</span>
+            <span className="forthsubtitle">探索丰富优质的开发资源</span>
+          </li>
+          <li>
+            <img src={F42} alt="" width={"101px"}/>
+            <span className="forthtitle">加入</span>
+            <span className="forthsubtitle">寻找志同道合的协作伙伴</span>
+          </li>
+          <li>
+            <img src={F43} alt="" width={"104px"}/>
+            <span className="forthtitle">合作</span>
+            <span className="forthsubtitle">开启开放共享的协同之旅</span>
+          </li>
+          <li>
+            <img src={F44} alt="" width={"87px"}/>
+            <span className="forthtitle">贡献</span>
+            <span className="forthsubtitle">书写开源创新的精彩成就</span>
+          </li>
+        </ul>
+      </div>
+
+      <div className="fifthEdition">
+        <p className="title">开源生态</p>
+        <p className="subtitle">Gitlink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
+        <FifthEdition />
+      </div>
+      <Footnav />
+    </div>
+  )
+}
+export default TPMIndexHOC(Index);

src/home/SecondEdition.jsx

@@ -0,0 +1,210 @@
+import React , { useEffect , useState } from 'react';
+import Img1 from './Img/2-2-1.png';
+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 ImgM4 from './Img/2-6-1.png';
+import Codeafter from './Img/codeafter.png';
+import './code.scss';
+
+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>}
+]
+const codes=[
+  {str:<span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span>},
+  {str:<span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb751f1f22fe416057d3e2a6302f7b1f7011b17010973cb6bbdd9f</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-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'>======END======</span></span>},
+]
+
+function SecondEdition({setValue}) {
+  useEffect(()=>{
+    window.addEventListener('scroll', handleScroll);
+  },[])
+
+  const [ hadoop , setHadoop ] = 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);
+    }else{
+      setHadoop(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/4);
+    if(a>0 || a<-b){
+      return false;
+    }else{
+      return true;
+    }
+  }
+  return(
+    <div className="secondEditionContent">
+      <div className="hadoop" id="hadoop">
+        <div className="hadoopCon">
+          <div className="descBox">
+            <p className="desc1">分布式协作开发</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.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
+                )
+              })
+            }
+            <img src={Codeafter} alt="运行结果" className={"activeImg"}/>
+          </div>
+        </div>
+        <p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
+      </div>
+      <div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
+        <div className={"oneStopContent"}>
+          <div className={"osLeftMain"}>
+            <img src={Img1} alt="" width="520px" className="osleftPosi"/>
+            <img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
+            <img src={Img2} alt="" width="653px" className="osleftPosi1"/>
+            <img src={Img3} alt="" width="367px" className="osleftPosi2"/>
+          </div>
+          <div className="osRightMain">
+            <p className="osRightTitle">一站式过程管理</p>
+            <p>提供<span>易修（Issue）、里程碑、通知提醒、标签归档</span>等多样化任务管理工具，支持各类开发任务的发布、指派与跟踪；</p>
+            <p>同时提供<span>在线Wiki文档、组织多粒度管理</span>等功能，为您搭建一站式的项目过程管理环境；</p>
+            <p><span>让您的团队协作更高效、过程更透明！</span></p>
+          </div>
+        </div>
+        <img src={Imgring} alt="" height="83px" className="imgring"/>
+      </div>
+      <div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
+        <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"/>
+            <div style={{marginBottom:'74px',marginTop:"25px",position:"relative"}}>
+              <img src={ImgS2} alt="" width="520px"/>
+              {/* <div className="highCodes">
+                {
+                  codes.map((i,k)=>{
+                    return(
+                      <li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
+                    )
+                  })
+                }
+              </div> */}
+            </div>
+            <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"} style={{opacity:multidimensional?"1":"0.3"}}>
+        <div style={{height:"168px"}}></div>
+        <div className={multidimensional ? "activeCode":""} id="multidimensional">
+          <div className={"multidimensinalhalf"}>
+            <div>
+              <p className="halfTitle">多维度用户画像</p>
+              <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数<br/>据，</span>搭建多维度用户画像评估系统；</p>
+            </div>
+            <div style={{width:"820px",marginLeft:"34px"}}>
+              <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>
+    </div>
+  )
+}
+export default SecondEdition

src/home/ThirdEdition.jsx

@@ -0,0 +1,176 @@
+import React,{ useState , useEffect , useMemo } from 'react';
+import T311 from './Img/3-1-1.png';
+import T312 from './Img/3-1-2.png';
+import T321 from './Img/3-2-1.png';
+import T322 from './Img/3-2-2.png';
+import T331 from './Img/3-3-1.png';
+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';
+
+const list1 = [
+  {name:"CCF开源发展委员会首批执行委员名单发布",src:"https://forum.trustie.net/forums/4666/detail",count:32,time:"2021-09-22"},
+  {name:"Gitlink项目协同开发模块使用说明及问题反馈",src:"https://forum.trustie.net/forums/4665/detail",count:4,time:"2021-09-22"},
+  {name:"MindSpore框架介绍及赛题说明",src:"https://forum.trustie.net/forums/4664/detail",count:3,time:"2021-09-22"},
+  {name:"OpenHarmony系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4663/detail",count:4,time:"2021-09-22"},
+  {name:"openGauss系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4662/detail",count:5,time:"2021-09-22"},
+]
+const list2 = [
+  {name:"Gitlink/Gitlink",src:"https://forgeplus.trustie.net/Gitlink/forgeplus",count:304},
+  {name:"泛在操作系统实验室/矽璓工业物联操作系统XiUOS",src:"https://forgeplus.trustie.net/xuos/xiuos",count:50},
+  {name:"华为技术有限公司/openGauss-operator",src:"https://forgeplus.trustie.net/Huawei_Technology/openGauss-operator",count:100},
+  {name:"开放原子开源基金会/BitXHub",src:"https://forgeplus.trustie.net/openatom_foundation/bitxhub",count:40},
+  {name:"华为技术有限公司/openEuler-datenlord",src:"https://forgeplus.trustie.net/Huawei_Technology/openEuler-datenlord",count:98},
+]
+const list3 = [
+  {name:"Gitlink平台DevOps模块使用说明",src:"https://forum.trustie.net/forums/4682/detail",count:10,time:"2021-09-23"},
+  {name:"Gitlink如何将临时分支push到远端对应的新分支？",src:"https://forum.trustie.net/forums/4705/detail",count:8,time:"2021-09-23"},
+  {name:"了解什么是 DevOps？",src:"https://forum.trustie.net/forums/4704/detail",count:4,time:"2021-09-23"},
+  {name:"EduCoder平台简介",src:"https://forum.trustie.net/forums/4701/detail",count:26,time:"2021-09-23"},
+  {name:"Webhooks指南",src:"https://forum.trustie.net/forums/4683/detail",count:3,time:"2021-09-23"},
+]
+const list4 = [
+  {name:"小学生都能读懂的网络协议之:WebSocket",src:"https://forum.trustie.net/forums/4708/detail",count:4,time:"2021-09-23"},
+  {name:"容器神话 Docker 是如何一分为二的",src:"https://forum.trustie.net/forums/4707/detail",count:5,time:"2021-09-23"},
+  {name:"一文揭示，DevOps与企业数字化究竟有何联系？",src:"https://forum.trustie.net/forums/4706/detail",count:3,time:"2021-09-23"},
+  {name:"GitHub上最流行的10000个Java都使用了哪些库？",src:"https://forum.trustie.net/forums/4703/detail",count:8,time:"2021-09-23"},
+  {name:"如何正确下载CentOS各个版本镜像",src:"https://forum.trustie.net/forums/4684/detail",count:2,time:"2021-09-23"},
+]
+
+function ThirdEdition() {
+  const [ active , setActive ] = useState(1);
+  const [ flag , setFlag ] = useState(true);
+  
+  const doubleFlag = useMemo(()=>{
+    return flag;
+  },[flag])
+
+  useEffect(()=>{
+    let box = document.getElementById('thirdUl');
+    var myTimer = setTimeout(intervalActive, 2500);
+    box.onmouseover = () => {
+      clearTimeout(myTimer);
+      setFlag(false);
+    }
+    box.onmouseleave = () => {
+      myTimer = setTimeout(intervalActive, 2500);
+      setFlag(true);
+    }
+  },[active,flag])
+
+  function intervalActive() {
+    if(doubleFlag){
+      if(active < 4){
+        let i = active + 1;
+        setActive(i);
+      }else{
+        setActive(1);
+      }
+    }
+  }
+
+  return(
+    <div className="thirdEdition">
+      <p className="title">开发者的家园</p>
+      <p className="subtitle">一个实现100%开源，产学研联合面向软件创新的开源社区</p>
+      <div id="thirdUl">
+        <ul className="thirdUl">
+          <li className={active===1?"active":""}onClick={()=>{setFlag(false);setActive(1)}}>
+            <div className="hoverli1">
+              <img src={T311} alt="" width="38px" style={{top:"8px",left:"10px"}}/>
+              <img src={T312} alt="" width="34px"/>
+            </div>
+            <span>平台动态</span>
+          </li>
+          <li className={active===2?"active":""}onClick={()=>{setFlag(false);setActive(2)}}>
+            <div className="hoverli2">
+              <img src={T321} alt="" width="32px" style={{left:"8px"}}/>
+              <img src={T322} alt="" width="26px" style={{top:"8px"}}/>
+            </div>
+            <span>优秀仓库</span>
+          </li>
+          <li className={active===3?"active":""}onClick={()=>{setFlag(false);setActive(3)}}>
+            <div className="hoverli3">
+              <img src={T331} alt="" width="33px" style={{right:"3px",top:"8px"}}/>
+              <img src={T332} alt="" width="29px" style={{top:"8px"}}/>
+            </div>
+            <span>精选文章</span>
+          </li>
+          <li className={active===4?"active":""}onClick={()=>{setFlag(false);setActive(4)}}>
+            <div className="hoverli4">
+              <img src={T341} alt="" width="42px"/>
+              <img src={T342} alt="" width="26px" style={{top:"11px",left:"7px"}}/>
+            </div>
+            <span>经验分享</span>
+          </li>
+        </ul>
+        <div className="thirdLists">
+        <img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
+        <div className="listbox">
+          <p className="listTitle">
+            {active === 1 ? "Gitlink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" 
+            : active===2 ? "Gitlink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
+            :active===3 ? "Gitlink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" 
+            :"Gitlink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
+          </p>
+          {
+            active === 1&&
+            list1.map((i,k)=>{
+              return(
+                <li>
+                  <a href={i.src} target="_blank">{i.name}</a>
+                  <span><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
+                  <span>{i.time}</span>
+                </li>
+              )
+            })
+          }
+          {
+            active === 2&&
+            list2.map((i,k)=>{
+              return(
+                <li>
+                  <a href={i.src} target="_blank">{i.name}</a>
+                  <span><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
+                  {/* {i.time} */}
+                </li>
+              )
+            })
+          }
+          {
+            active === 3&&
+            list3.map((i,k)=>{
+              return(
+                <li>
+                  <a href={i.src} target="_blank">{i.name}</a>
+                  <span><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
+                  <span>{i.time}</span>
+                </li>
+              )
+            })
+          }
+          {
+            active === 4&&
+            list4.map((i,k)=>{
+              return(
+                <li>
+                  <a href={i.src} target="_blank">{i.name}</a>
+                  <span><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.count}</span>
+                  <span>{i.time}</span>
+                </li>
+              )
+            })
+          }
+        </div>
+      </div>
+      </div>
+    </div>
+  )
+}
+export default ThirdEdition;

src/home/TopEdition.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Slider from 'react-slick';
+let setting={
+  dots:true,
+  infinite: true,
+  speed: 2000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover:true,
+  autoplaySpeed:5000,
+  pauseOnFocus:true,
+  autoplay:true,
+  arrows:true,
+  prevArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangzuojiantou"></i></button>,
+  nextArrow:<button type='button' class='slick-prev slick-arrow'><i className="iconfont icon-xiangyoujiantou"></i></button>
+}
+function TopEdition({register}) {
+  return(
+    <Slider {...setting}>
+      <div className="regform1"></div>
+      <div className="regform2"></div>
+      <div className="regform3">
+      </div>
+      <div className="regform4">
+        <p className="regPrg"><a href={register}>注册</a></p>
+      </div>
+    </Slider>
+  )
+}
+export default TopEdition;

src/home/code.scss

@@ -0,0 +1,79 @@
+.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;
+  &>img{
+    position: absolute;
+    right: -50px;
+    bottom: -50px;
+    width: 805px;
+    border-radius: 4px;
+    opacity: 0;
+    z-index: 1;
+  }
+  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;
+  word-break: break-all;
+  overflow: initial ;
+  .codenum{
+    display: inline-block;
+    width: 15px;
+    text-align: left;
+    margin-right: 15px;
+  }
+  .code-green{
+    color: #00FA30;
+  }
+  .code-red{
+    color: #FF5058;
+  }
+  .code-blue{
+    color: #05CFC8;
+  }
+}
+.highCodes{
+  position: absolute;
+  top:0px;
+  right:0px;
+  width: 50%;
+  height: 100%;
+  padding:40px 30px;
+  color: #E1E1E1;
+}
+.activeCode{
+  .word-item{
+    animation: show .2s 1 forwards;
+  }
+  &>img.activeImg{
+    right: 0px;
+    bottom: -20px;
+    opacity: 1;
+    width: 705px;
+    transition: 1s;
+    transition-delay: 3s;
+  }
+}
+.word-item {
+  opacity: 0;
+}
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}