diff --git a/src/App.js b/src/App.js
index 3072aca5b..5b745a709 100644
--- a/src/App.js
+++ b/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) => (
diff --git a/src/forge/Head/Footer.jsx b/src/forge/Head/Footer.jsx
index 52c068586..8a69c2ad1 100644
--- a/src/forge/Head/Footer.jsx
+++ b/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">
diff --git a/src/forge/Index.js b/src/forge/Index.js
index 5cdf4b4fb..0f1424707 100644
--- a/src/forge/Index.js
+++ b/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) => (
diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx
index f50c134a3..bfd6105ad 100644
--- a/src/forge/Main/CoderDepot.jsx
+++ b/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);
       }
diff --git a/src/forge/Main/img/index/hot.png b/src/forge/Main/img/index/hot.png
new file mode 100644
index 000000000..0304899db
Binary files /dev/null and b/src/forge/Main/img/index/hot.png differ
diff --git a/src/forge/Main/img/index/hotAuthor.png b/src/forge/Main/img/index/hotAuthor.png
new file mode 100644
index 000000000..62d01a746
Binary files /dev/null and b/src/forge/Main/img/index/hotAuthor.png differ
diff --git a/src/forge/Main/img/index/icon.png b/src/forge/Main/img/index/icon.png
new file mode 100644
index 000000000..2bfa60dde
Binary files /dev/null and b/src/forge/Main/img/index/icon.png differ
diff --git a/src/forge/Main/img/index/month.png b/src/forge/Main/img/index/month.png
new file mode 100644
index 000000000..3b0b909f9
Binary files /dev/null and b/src/forge/Main/img/index/month.png differ
diff --git a/src/forge/Main/img/index/more.png b/src/forge/Main/img/index/more.png
new file mode 100644
index 000000000..1ae51d036
Binary files /dev/null and b/src/forge/Main/img/index/more.png differ
diff --git a/src/forge/Main/img/index/typebg.png b/src/forge/Main/img/index/typebg.png
new file mode 100644
index 000000000..e1d748ed5
Binary files /dev/null and b/src/forge/Main/img/index/typebg.png differ
diff --git a/src/forge/Main/img/index/unit/feiteng.png b/src/forge/Main/img/index/unit/feiteng.png
new file mode 100644
index 000000000..b4190d4e3
Binary files /dev/null and b/src/forge/Main/img/index/unit/feiteng.png differ
diff --git a/src/forge/Main/img/index/unit/huake.png b/src/forge/Main/img/index/unit/huake.png
new file mode 100644
index 000000000..56863862a
Binary files /dev/null and b/src/forge/Main/img/index/unit/huake.png differ
diff --git a/src/forge/Main/img/index/unit/huawei.png b/src/forge/Main/img/index/unit/huawei.png
new file mode 100644
index 000000000..4374a68c6
Binary files /dev/null and b/src/forge/Main/img/index/unit/huawei.png differ
diff --git a/src/forge/Main/img/index/unit/jijinhui.png b/src/forge/Main/img/index/unit/jijinhui.png
new file mode 100644
index 000000000..c7fc91a6f
Binary files /dev/null and b/src/forge/Main/img/index/unit/jijinhui.png differ
diff --git a/src/forge/Main/img/index/unit/langchao.png b/src/forge/Main/img/index/unit/langchao.png
new file mode 100644
index 000000000..46a1d70cc
Binary files /dev/null and b/src/forge/Main/img/index/unit/langchao.png differ
diff --git a/src/forge/Main/img/index/unit/mulan.png b/src/forge/Main/img/index/unit/mulan.png
new file mode 100644
index 000000000..8e700754f
Binary files /dev/null and b/src/forge/Main/img/index/unit/mulan.png differ
diff --git a/src/forge/Main/img/index/unit/xigongye.png b/src/forge/Main/img/index/unit/xigongye.png
new file mode 100644
index 000000000..7ec298106
Binary files /dev/null and b/src/forge/Main/img/index/unit/xigongye.png differ
diff --git a/src/forge/Main/img/index/unit/xiuos.png b/src/forge/Main/img/index/unit/xiuos.png
new file mode 100644
index 000000000..cc9d74223
Binary files /dev/null and b/src/forge/Main/img/index/unit/xiuos.png differ
diff --git a/src/forge/Main/img/index/week.png b/src/forge/Main/img/index/week.png
new file mode 100644
index 000000000..c967f424d
Binary files /dev/null and b/src/forge/Main/img/index/week.png differ
diff --git a/src/forge/Main/projecthome/Index.jsx b/src/forge/Main/projecthome/Index.jsx
index de846525e..37e72cd1b 100644
--- a/src/forge/Main/projecthome/Index.jsx
+++ b/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>
   )
 }
diff --git a/src/forge/Main/projecthome/Index.scss b/src/forge/Main/projecthome/Index.scss
index 3643d0030..33053c461 100644
--- a/src/forge/Main/projecthome/Index.scss
+++ b/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;
+        }
       }
     }
   }
diff --git a/src/forge/Main/projecthome/SubBanner.jsx b/src/forge/Main/projecthome/SubBanner.jsx
index 726f0c196..8bd9a1021 100644
--- a/src/forge/Main/projecthome/SubBanner.jsx
+++ b/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>
diff --git a/src/forge/Main/projecthome/SubList.jsx b/src/forge/Main/projecthome/SubList.jsx
new file mode 100644
index 000000000..b68d9a5db
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/forge/Main/projecthome/SubUnitBanner.jsx b/src/forge/Main/projecthome/SubUnitBanner.jsx
new file mode 100644
index 000000000..a723b6f12
--- /dev/null
+++ b/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;
\ No newline at end of file