数据绑定

src/App.js

@@ -322,6 +322,13 @@ class App extends Component {
 							{/* 查询 */}
 							<Route path="/search" component={Search} />
 
+							<Route exact path="/explore/all"
+								render={
+									(props) => (
+											<ProjectIndex {...this.props} {...props} />
+									)
+								}
+							/>
 							<Route exact path="/explore"
 								render={
 									(props) => (

src/forge/Head/Footer.jsx

@@ -19,7 +19,7 @@ function Footer(){
 
   return(
     <div>
-      <div style={{height:"543px"}}></div>
+      <div style={{height:"483px"}}></div>
       <div className="newFooter edu-txt-center">
         {value && showhtml(value)}
         {/* <div className="footerInfos">

src/forge/Index.js

@@ -71,12 +71,6 @@ class Index extends Component {
               <ProjectDetail {...this.props} {...props} />
             )}
           ></Route> */}
-          <Route
-            path="/explore"
-            render={(props) => (
-              <ProjectHome {...this.props} {...props} />
-            )}
-          ></Route>
           <Route
             path="/explore/all"
             render={(props) => (
@@ -84,6 +78,12 @@ class Index extends Component {
             )}
           ></Route>
 
+          <Route
+            path="/explore"
+            render={(props) => (
+              <ProjectHome {...this.props} {...props} />
+            )}
+          ></Route>
           <Route
             path="/"
             render={(props) => (

src/forge/Main/CoderDepot.jsx

@@ -138,7 +138,7 @@ function CoderDepot(props){
       if(result && result.data){
         const release = {
           "list":result.data.releases,
-          "total_count":result.data.releases.length
+          "total_count":result.data.releases && result.data.releases.length
         }
         setReleaseVersions(release);
       }

src/forge/Main/projecthome/Index.jsx

@@ -1,11 +1,125 @@
-import React from 'react';
+import React , { useEffect , useState } from 'react';
 import './Index.scss';
 import SubBanner from './SubBanner';
+import SubUnitBanner from './SubUnitBanner';
+import Icon from '../img/index/icon.png';
+import { Link } from 'react-router-dom';
+import { Spin } from 'antd';
+import SubList from './SubList';
+import more from '../img/index/more.png';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';
+import Nodata from '../../Nodata';
 
-function Index(props) {
+const LIMIT = 20;
+function Index() {
+
+  const [ cateList , setCateList ] = useState(undefined);
+  const [ projectsList , setProjectsList ] = useState(undefined);
+  const [ cateID, setCateID ] = useState(undefined);
+  const [ isSpin, setIsSpin ] = useState(true);
+
+  useEffect(()=>{
+    getCate();
+  },[])
+
+  useEffect(()=>{
+    setIsSpin(true);
+    getProject();
+  },[cateID])
+  
+  function getCate() {
+    const url = `/project_categories/pinned_index.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setCateList(result.data.project_categories);
+      }
+    }).catch(error=>{})
+  }
+
+  function getProject() {
+    const url = `/projects.json`;
+    axios.get(url,{
+      params:{
+        pinned:"d",
+        category_id:cateID,
+        limit:LIMIT
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setProjectsList(result.data.projects);
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+  
   return(
     <div>
       <SubBanner />
+      <SubUnitBanner />
+      <div className="dataPanel">
+        <div className="left">
+          <ul className="leftTypes">
+            <a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
+            {
+              cateList && cateList.length>0?
+                cateList.map((i,k)=>{
+                  return(
+                    <a className={cateID === i.id ?"active":""} onClick={()=>setCateID(i.id)}><img src={i.logo_url || Icon} alt="" /><span>{i.name}</span></a>
+                  )
+                })
+              :""
+            }
+          </ul>
+          <div className="leftLists">
+            <div className="leftTitles">
+              <span>开源项目</span>
+              <Link to={`/explore/all`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
+            </div>
+            <Spin spinning={isSpin}>
+              <div style={{minHeight:"400px"}}>
+                {
+                  projectsList && projectsList.length > 0 ?
+                  <div className="leftlistItem">
+                    {
+                      projectsList.map((i,k)=>{
+                        return(
+                          <li>
+                            <Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
+                            <div className="itemTitle">
+                              <div className="item-title-infos">
+                                <Link to={`/${i.author && i.author.login}/${i.identifier}`} className="infotitle">{i.author && i.author.name}/{i.name}</Link>
+                                {i.praises_count > 0 ? <span><i className="iconfont icon-dianzan11 mr3 font-16"></i>{i.praises_count}</span> :"" }
+                                {i.forked_count > 0 ? <span><i className="iconfont icon-fork2 mr3 font-13"></i>{i.forked_count}</span>:""}
+                              </div>
+                              <div className="item-desc task-hide-2">
+                                {i.description}
+                              </div>
+                              <div className="item-data">
+                                {i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
+                                {i.language && i.language.id ? <span className="language mr30">{i.language.name}</span> :""}
+                                <span style={{lineHeight:"15px",display:"flex"}}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</span>
+                              </div>
+                            </div>
+                          </li>
+                        )
+                      })
+                    }
+                  </div>
+                  :""
+                }
+                {
+                  projectsList && projectsList.length === 0 && <Nodata _html="暂无数据" />
+                }
+              </div>
+            </Spin>
+            <div className="left-bottom-btn">
+              <Link to={`/explore/all`}>查看更多开源项目<img src={more} alt="" /></Link>
+            </div>
+          </div>
+        </div>
+        <SubList />
+      </div>
     </div>
   )
 }

src/forge/Main/projecthome/Index.scss

@@ -5,7 +5,7 @@
   background-color: #0C2A5B;
   .bannersCenter{
     padding-top: 30px;
-    max-width: 1290px;
+    max-width: 1200px;
     margin: 0px auto;
     position: relative;
     height: 516px;
@@ -66,6 +66,10 @@
               font-size: 20px;
               font-weight: 500;
               color: #25EBFF;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              max-width: 250px;
             }
             .company{
               height: 20px;
@@ -73,6 +77,10 @@
               font-size: 14px;
               font-weight: 400;
               color: #FFFFFF;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              max-width: 250px;
             }
           }
           .desc{
@@ -113,39 +121,427 @@
   .airBubble{
     &>div{
       position: absolute;
-      border-radius: 50%;
-      background: linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0%, rgba(5, 200, 220, 0.04) 50%, rgba(5, 200, 220, 0.03) 100%);
-      box-shadow: 0px 0px 7px 3px rgba(0, 154, 255, 0.19);
-      border: 1px solid rgba(0, 154, 255, 0.19);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
-      display: flex;
-      align-items: center;
-      word-break: break-all;
-      text-align: center;
-      padding:5px;
+      height: 410px;
+      width: 415px;
+      bottom: 0px;
       &.right{
         right: 0px;
       }
       &.left{
         left: 0px;
       }
-      &:nth-child(1){
+      &.right div, &.left div{
+        position: relative;
+        width: 100%;
+        height: 100%;
         span{
-          color: #25EBFF;
+          position: absolute;
+          border-radius: 50%;
+          background: linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0%, rgba(5, 200, 220, 0.04) 50%, rgba(5, 200, 220, 0.03) 100%);
+          box-shadow: 0px 0px 7px 3px rgba(0, 154, 255, 0.19);
+          border: 1px solid rgba(0, 154, 255, 0.19);
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 17px;
+          display: flex;
+          align-items: center;
+          word-break: break-all;
+          text-align: center;
+          padding:5px;
+          animation: zoomin 1.3s infinite alternate;
+          &:hover{
+            animation:none
+          }
         }
-        width: 110px;
-        height: 110px;
-        bottom: 310px;
       }
-      &:nth-child(2){
-        span{
-          color: #CD8AFF;
-        }
-        width: 120px;
+      &.right span:nth-child(4) a,&.left span:nth-child(1) a,&.left span:nth-child(2) a{
+        color: #25EBFF!important;
+      }
+      &.right span:nth-child(1) a,&.left span:nth-child(5) a{
+        color: #CD8AFF!important;
+      }
+      &.right span:nth-child(3) a,&.right span:nth-child(5) a,&.left span:nth-child(6) a{
+        color: #FF6125!important;
+      }
+      &.left span:nth-child(3) a{
+        color: #FF8425!important;
+      }
+      &.right span:nth-child(2) a,&.left span:nth-child(4) a{
+        color: #8CC2FF!important;
+      }
+      &.right span:nth-child(1){
+        right: 0px;
         height: 120px;
-        bottom: 293px;
+        width: 120px;
+      }
+      &.right span:nth-child(2){
+        right: 160px;
+        height: 72px;
+        width: 72px;
+        bottom: 220px;
+        padding:0px;
+        animation-delay: 0.2s;
+      }
+      &.right span:nth-child(3){
+        right: 300px;
+        height: 94px;
+        width: 94px;
+        bottom: 99px;
+        padding:8px;
+        animation-delay: 0.3s;
+      }
+      &.right span:nth-child(4){
+        right: 156px;
+        height: 100px;
+        width: 100px;
+        bottom: 39px;
+        font-size: 12px;
+        animation-delay: 0.2s;
+      }
+      &.right span:nth-child(5){
+        right: 10px;
+        height: 94px;
+        width: 94px;
+        bottom: 97px;
+        animation-delay: 0.4s;
+      }
+      &.left span:nth-child(1){
+        left: 80px;
+        height: 110px;
+        width: 110px;
+        padding:8px;
+        animation-delay: 0.1s;
+      }
+      &.left span:nth-child(2){
+        right: 60px;
+        height: 96px;
+        width: 96px;
+        top: 85px;
+        font-size: 13px;
+        animation-delay: 0.2s;
+      }
+      &.left span:nth-child(3){
+        left: 0px;
+        height: 86px;
+        width: 86px;
+        top: 145px;
+        font-size: 13px;
+        animation-delay: 0.3s;
+      }
+      &.left span:nth-child(4){
+        left: 164px;
+        height: 70px;
+        width: 70px;
+        bottom: 158px;
+        font-size: 12px;
+        font-size: 12px;
+        animation-delay: 0.3s;
+      }
+      &.left span:nth-child(5){
+        left: 35px;
+        height: 102px;
+        width: 102px;
+        bottom: 32px;
+        font-size: 13px;
+        animation-delay: 0.4s;
+      }
+      &.left span:nth-child(6){
+        right: 10px;
+        height: 114px;
+        width: 114px;
+        bottom: 26px;
+        padding:8px;
+      }
+    }
+  }
+}
+@keyframes zoomin{
+  0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
+  100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
+}
+@-webkit-keyframes zoomin{
+  0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
+  100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
+}
+.unitBanner{
+  padding:29px 0px;
+  background: #F9F9F9;
+  .unitContent{
+    max-width: 1200px;
+    margin:0px auto;
+    .unitTitle{
+      height: 28px;
+      line-height: 28px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #1E1E1E;
+      display: flex;
+      align-items: center;
+      img{
+        margin-left: 9px;
+      }
+    }
+    .unitSlider{
+      padding:30px 0px 10px;
+      .slick-list{
+        width: 100%;
+        height: 56px;
+        overflow: hidden;
+        .slickline{
+          display: flex!important;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+}
+.dataPanel{
+  width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  padding:30px 0px 60px;
+  margin:0px auto;
+  .left{
+    width: 850px;
+    box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
+    display: flex;
+    .leftTypes{
+      width: 220px;
+      height: 1576px;
+      background: url('../img/index/typebg.png');
+      background-size: 100% 100%;
+      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
+      padding:12px 0px;
+      a{
+        padding:0px 20px;
+        height: 44px;
+        margin-top: 10px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        &:hover{
+          background-color: #F5F5F5;
+        }
+        &.active{
+          background: linear-gradient(to right,#07228F , #466AFF);
+          color: #fff!important;
+        }
+        img{
+          margin-right: 12px;
+          width: 28px;
+        }
+      }
+    }
+    .leftLists{
+      flex:1;
+      .leftTitles{
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(153, 153, 153, 0.16);
+        padding:0px 20px;
+        span{
+          font-size: 18px;
+          font-weight: 500;
+          color: #000000;
+        }
+        a{
+          color: #466AFF!important;
+        }
+      }
+      .leftlistItem{
+        padding:0px 20px;
+        li{
+          border-bottom: 1px solid rgba(153, 153, 153, 0.16);
+          display: flex;
+          align-items: flex-start;
+          padding:20px 0px ;
+          &>a img{
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            margin-right: 10px;
+          }
+          .itemTitle{
+            flex:1;
+            .item-title-infos{
+              height: 32px;
+              display: flex;
+              align-items: center;
+              .infotitle{
+                flex:1;
+                height: 21px;
+                font-size: 15px;
+                font-weight: 600;
+                line-height: 21px;
+                color: #262626!important;
+                &:hover{
+                  color: #466AFF!important;
+                }
+              }
+              span{
+                margin-left:20px ;
+                color: #333;
+                i{
+                  color: #666;
+                }
+              }
+            }
+            .item-desc{
+              height: 48px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #414141;
+              line-height: 24px;
+              max-width: 548px;
+              margin-bottom: 10px;
+            }
+            .item-data{
+              font-size: 13px;
+              font-weight: 400;
+              color: #7D7D7D;
+              height: 20px;
+              line-height: 20px;
+              display: flex;
+              align-items: flex-end;
+              .category{
+                position: relative;
+                padding-left: 11px;
+                margin-right: 10px;
+                &::before{
+                  position: absolute;
+                  content: "";
+                  width: 6px;
+                  height: 6px;
+                  border-radius: 50%;
+                  background-color: #466AFF;
+                  top: 7px;
+                  left: 0px;
+                }
+              }
+              .language{
+                position: relative;
+                padding-left: 11px;
+                &::before{
+                  position: absolute;
+                  content: "";
+                  width: 1px;
+                  height: 10px;
+                  border-radius: 50%;
+                  border-left: 1px solid #9e9e9e;
+                  bottom: 4px;
+                  left: 0px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .left-bottom-btn{
+      display: flex;
+      justify-content: center;
+      padding:18px 0px;
+      a{
+        height: 38px;
+        line-height: 36px;
+        border-radius: 8px;
+        border: 1px solid #466AFF;
+        color: #466AFF;
+        font-size: 16px;
+        padding:0px 20px;
+        img{
+          height: 16px;
+          margin-top: -1px;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  .right{
+    width: 330px;
+    &>div{
+      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
+      margin-bottom: 20px;
+    }
+    .partTitle{
+      padding:15px;
+      background: #F6F9FF;
+      font-size: 18px;
+      color: #000000;
+      font-weight: 500;
+      margin-bottom: 10px;
+      img{
+        width: 33px;
+        margin-right: 6px;
+      }
+    }
+    .righthotAuthor{
+      padding-bottom: 15px;
+      li{
+        padding-left: 15px;
+        &>div{
+          display: flex;
+          align-items: flex-start;
+          padding:10px 15px 10px 0px;
+          border-bottom: 1px solid rgba(153, 153, 153, 0.1);
+          img{
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            margin-right: 8px;
+            margin-top: 3px;
+          }
+        }
+        &:hover{
+          background-color: #F3F3F3;
+        }
+        &:last-child > div{
+          border-bottom: none;
+        }
+      }
+    }
+    .hotProjects{
+      li{
+        padding:10px 15px;
+        margin-bottom: 10px;
+        &:hover{
+          background-color: #F3F3F3;
+        }
+        .mInfos{
+          display: flex;
+          align-items: center;
+          height: 20px;
+          .num{
+            width: 18px;
+            height: 18px;
+            background: #466AFF;
+            border-radius: 2px;
+            color: #fff;
+            text-align: center;
+            line-height: 18px;
+            margin-right: 8px;
+          }
+          .name{
+            flex:1;
+            font-size: 15px;
+          }
+        }
+        .sInfos{
+          background: #F7F8F9;
+          padding:5px;
+          font-size: 13px;
+          font-weight: 400;
+          color: #666666;
+          line-height: 22px;
+          word-break: break-all;
+          margin-top: 10px;
+        }
       }
     }
   }

src/forge/Main/projecthome/SubBanner.jsx

@@ -1,24 +1,26 @@
-import React from 'react';
+import React , { useEffect , useState } from 'react';
 import Slider from 'react-slick';
+import { Link } from 'react-router-dom';
 import { getImageUrl } from 'educoder';
 import Eye from '../img/index/eye.png';
 import Data from '../img/index/data.png';
 import Earth from '../img/index/earth.png';
 import Imgs from '../img/tree.png';
+import axios from 'axios';
 
-const list =[
-  {img:Imgs,name:"openGauss-operator1",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator2",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator3",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator4",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator5",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator6",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator7",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator8",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator9",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator10",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-  {img:Imgs,name:"openGauss-operator11",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-]
+// const list =[
+//   {img:Imgs,name:"矽璓工业物联操作系统XiUOS",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"openGauss-operator",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"PaddleDetection 2.0",company:"TrustieMirrors",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"skyline",company:"浪潮信息",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"BitXHub",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"Device Model",company:"openDACS",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"Gitlink",company:"Gitlink",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"openEuler-datenlord",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"OpenAtom XuperChain",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"xuos-web",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+//   {img:Imgs,name:"CrowdOS开源项目开发",company:"西北工业大学",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
+// ]
 const settings={
   dots: false,
   infinite: true,
@@ -31,44 +33,80 @@ const settings={
 }
 
 function SubBanner() {
+
+  const [ list , setList ] = useState(undefined);
+
+  useEffect(()=>{
+    getList();
+  },[])
+
+  function getList() {
+    const url = `/projects/banner_recommend.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setList(result.data.projects);
+      }
+    }).catch(error=>{})
+  }
   return(
     <div className="banners">
       <div className="bannersCenter">
         <p className="bTitle"><span>新一代开源创新服务平台</span></p>
         <p className="bSubTitle">Gitlink（确实开源）-CCF官网指定的产学研融合面向软件开源创新的开源社区</p>
         <div className="bannerBox">
-          <Slider {...settings} className="bannersProject">
-            {
-              list.map((i,k)=>{
-                return(
-                  <li>
-                    <div className="projectinfos">
-                      <img src={i.img} alt="" />
-                      <div>
-                        <p className="name">{i.name}</p>
-                        <p className="company">{i.company}</p>
+          {
+            list && list.length > 0 ?
+            <Slider {...settings} className="bannersProject">
+              {
+                list.map((i,k)=>{
+                  return(
+                    <li>
+                      <div className="projectinfos">
+                        <img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" />
+                        <div>
+                          <p className="name">{i.name}</p>
+                          <p className="company">{i.author && i.author.name}</p>
+                        </div>
                       </div>
-                    </div>
-                    <p className="desc">{i.desc}</p>
-                    <div className="infoData">
-                      <span><img src={Eye} alt="" /><span>{i.look}</span></span>
-                      <span><img src={Data} alt="" /><span>{i.cloud}</span></span>
-                      <span><img src={Earth} alt="" /><span>{i.type}</span></span>
-                    </div>
-                  </li>
-                )
-              })
-            }
-          </Slider>
+                      <p className="desc">{i.description}</p>
+                      <div className="infoData">
+                        <span><img src={Eye} alt="" /><span>{i.visits}</span></span>
+                        {i.category && i.category.id && <span><img src={Data} alt="" /><span>{i.category.name}</span></span>}
+                        {i.language && i.language.id && <span><img src={Earth} alt="" /><span>{i.language.name}</span></span>}
+                      </div>
+                    </li>
+                  )
+                })
+              }
+            </Slider>
+            :""
+          }
         </div>
         <div className="airBubble">
-          {
-            list.map((i,k)=>{
-              return(
-                <div className={k%2 > 0 ? "right":"left"} style={{width:`${(120-k*10)}px`,height:`${(120-k*10)}px`}}><span>{i.company}/{i.name}</span></div>
-              )
-            })
-          }
+          <div className="left">
+            <div>
+              {
+                list && list.length > 0 && list.map((i,k)=>{
+                  return(
+                    k%2 === 0? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
+                  )
+                })
+              }
+            </div>
+          </div>
+
+          <div className="right">
+            <div>
+              {
+                list && list.length > 0 && list.map((i,k)=>{
+                  return(
+                    k%2 > 0 ? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
+                  )
+                })
+              }
+            </div>
+          </div>
+          
         </div>
       </div>
     </div>

src/forge/Main/projecthome/SubList.jsx

@@ -0,0 +1,138 @@
+import React , { useEffect , useState } from 'react';
+import hotAuthor from '../img/index/hotAuthor.png';
+import week from '../img/index/week.png';
+import month from '../img/index/month.png';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';
+
+
+function SubList() {
+
+  const [ weekList ,setWeekList ] = useState(undefined);
+  const [ monthList ,setMonthList ] = useState(undefined);
+  const [ authorList ,setAuthorList ] = useState(undefined);
+
+  useEffect(()=>{
+    getList(7);
+    getList(30);
+    getAuthorList(7);
+  },[])
+
+  function getList(time){
+    const url = `/project_rank.json`;
+    axios.get(url,{
+      params:{
+        time
+      }
+    }).then(result=>{
+      if(result && result.data){
+        time === 7 ? setWeekList(result.data.projects) : setMonthList(result.data.projects);
+      }
+    }).catch(error=>{})
+  }
+  function getAuthorList(time){
+    const url = `/user_rank.json`;
+    axios.get(url,{
+      params:{
+        time
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setAuthorList(result.data.users);
+      }
+    }).catch(error=>{})
+  }
+
+  return(
+    <div className="right">
+      {
+        authorList && authorList.length > 0?
+        <div>
+          <div className="partTitle"><img src={hotAuthor} alt="" /><span>本周热门开发者</span></div>
+          <div className="righthotAuthor">
+            {
+              authorList.map((i,k)=>{
+                return(
+                  <li>
+                    <div>
+                      <img src={getImageUrl(`/${i.avatar_url}`)} alt=""/>
+                      <div>
+                        <Link to={`/${i.login}`} className="font-15">{i.name}</Link>
+                        <p className="task-hide" style={{maxWidth:"260px"}}>
+                          <i className="iconfont icon-daimakuicon1 font-14 mr8"></i>{i.project && i.project.name}
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                )
+              })
+            }
+          </div>
+        </div>
+        :""
+      }
+      
+      {
+        weekList && weekList.length > 0 ?
+        <div>
+          <div className="partTitle"><img src={week} alt="" /><span>本周热门项目</span></div>
+          <div className="hotProjects">
+            {
+              weekList.map((i,k)=>{
+                return(
+                  <li>
+                    <div className="mInfos">
+                      <span className="num">{k+1}</span>
+                      <Link to={`/${i.owner && i.owner.login}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
+                      <span>
+                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
+                      </span>
+                    </div>
+                    {i.description && 
+                      <div className="sInfos task-hide-2">
+                        {i.description}
+                      </div>
+                    }
+                  </li>
+                )
+              })
+            }
+          </div>
+        </div>
+        :""
+      }
+      {
+        monthList && monthList.length > 0?
+        <div>
+          <div className="partTitle"><img src={month} alt="" /><span>本月热门项目</span></div>
+          <div className="hotProjects">
+            {
+              monthList.map((i,k)=>{
+                return(
+                  <li>
+                    <div className="mInfos">
+                      <span className="num">{k+1}</span>
+                      <a className="name task-hide">{i.owner && i.owner.name}/{i.name}</a>
+                      <span>
+                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
+                      </span>
+                    </div>
+                    {i.description && 
+                      <div className="sInfos task-hide-2">
+                        {i.description}
+                      </div>
+                    }
+                  </li>
+                )
+              })
+            }
+          </div>
+        </div>
+        :""
+      }
+      
+    </div>
+  )
+}
+export default SubList;

src/forge/Main/projecthome/SubUnitBanner.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Hot from '../img/index/hot.png';
+import Slider from "react-slick";
+import huawei from '../img/index/unit/huawei.png';
+import langchao from '../img/index/unit/langchao.png';
+import jijinhui from '../img/index/unit/jijinhui.png';
+import mulan from '../img/index/unit/mulan.png';
+import xigongye from '../img/index/unit/xigongye.png';
+import feiteng from '../img/index/unit/feiteng.png';
+import xiuos from '../img/index/unit/xiuos.png';
+import huake from '../img/index/unit/huake.png';
+
+const settings = {
+  dots: false,
+  infinite: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  vertical: true,
+  verticalSwiping: true,
+  autoplay:true,
+  arrows:false
+};
+
+function SubUnitBanner() {
+  return(
+    <div className="unitBanner">
+      <div className="unitContent">
+        <div className="unitTitle">
+          <span>精选开源组织</span>
+          <img src={Hot} alt="" width="47px"/>
+        </div>
+        <Slider {...settings} className="unitSlider">
+          <div className="slickline">
+            <a href="https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent" target="_blank"><img src={huawei} alt="" height="56px"/></a>
+            <a href="https://www.inspur.com/" target="_blank"><img src={langchao} alt="" height="56px"/></a>
+            <a href="https://www.openatom.org/#/" target="_blank"><img src={jijinhui} alt="" height="56px"/></a>
+            <a href="https://portal.mulanos.cn//" target="_blank"><img src={mulan} alt="" height="56px"/></a>
+          </div>
+          <div className="slickline">
+            <a href="https://www.nwpu.edu.cn/" target="_blank"><img src={xigongye} alt="" height="56px"/></a>
+            <a href="https://www.phytium.com.cn/" target="_blank"><img src={feiteng} alt="" height="56px"/></a>
+            <a href="http://xuos.io" target="_blank"><img src={xiuos} alt="" height="56px"/></a>
+            <a href="https://www.hust.edu.cn/" target="_blank"><img src={huake} alt="" height="56px"/></a>
+          </div>
+        </Slider>
+      </div>
+    </div>
+  )
+}
+export default SubUnitBanner;