首页

src/App.js

@@ -55,7 +55,10 @@ const Shixunnopage = Loadable({
 	loader: () => import('./modules/404/Shixunnopage'),
 	loading: Loading,
 })
-
+const Projects =Loadable({
+	loader: () => import('./mulan/Projects/Index'),
+	loading: Loading,
+})
 //500页面
 const http500 = Loadable({
 	loader: () => import('./modules/500/http500'),
@@ -204,6 +207,13 @@ class App extends Component {
 								<Route path="/500" component={http500} />
 								<Route path="/nopage" component={Shixunnopage} />
 
+								<Route path="/projects"
+									render={
+										(props) => (
+											<Projects {...this.props} {...props} {...this.state}></Projects>
+										)
+									}
+								/>
 								<Route path="/license"
 									render={
 										(props) => (

src/mulan/HOC/HomeHeader.jsx

@@ -4,6 +4,7 @@ import Nav from './Nav';
 function HomeHeader(props){
   return(
     <div className="homeHeader">
+
       <Nav />
     </div>
   )

src/mulan/HOC/HomeHoc.jsx

@@ -8,7 +8,7 @@ export function HomeHoc(Sub){
       return(
       <div style={{height:"100%",overflow:"auto"}}>
         <Header {...this.props} {...this.state}/>
-        <div className="homebody"><Sub {...this.props} {...this.state}/></div>
+        <div className="homebody" style={{paddingTop:"0px"}}><Sub {...this.props} {...this.state}/></div>
       </div>
       )
     }

src/mulan/HOC/Index.scss

@@ -7,6 +7,7 @@
   line-height: 60px;
   background-color: #fff;
   box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+  z-index: 100;
 }
 .homeHeader{
   position: fixed;
@@ -15,6 +16,18 @@
   top:0px;
   height: 60px;
   line-height: 60px;
+  z-index: 100;
+  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
+  background: #312b2b;
+ 
+  ul{
+    li{
+      a{
+        color: #fff;
+      }
+      
+    }
+  }
 }
 .headDiv{
   width:1200px;
@@ -22,8 +35,9 @@
   .headerNav{
     display: flex;
     height: 100%;
+    margin-bottom: 0px;
     li{
-      padding:0px 18px;
+      padding-right:30px;
       height: 100%;
       font-size: 16px;
     }

src/mulan/HOC/Nav.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
+import logo from '../images/logo.png';
 function Nav(props){
   return(
     <div className="headDiv">
       <ul className="headerNav">
+        <li><img src={logo} alt="" width="110px"/></li>
         <li><Link to={`/`}>首页</Link></li>
+        <li><Link to={`/projects`}>开源软件</Link></li>
         <li><Link to={`/license/preface`}>开源许可证</Link></li>
       </ul>
     </div>

src/mulan/Index.jsx

@@ -1,9 +1,178 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { HomeHoc }  from './HOC/HomeHoc';
+import { Link } from 'react-router-dom';
+import './Index.scss';
+import logo1 from './images/coscl.jpg';
+import logo2 from './images/openeuler.jpg';
+import logo3 from './images/opengcc.jpg';
+import logo4 from './images/openlooKeng.png';
+import icon1 from './images/icon1.png';
+import icon2 from './images/icon2.png';
+import active1 from './images/active1.jpg';
+import active2 from './images/active2.png';
+import DefaultImg from './images/default.png';
 
 function Index(props){
   return(
-    <div>dsfdsdf首页</div>
+    <div>
+      <div className="homebase">
+        <div className="baseinfo">
+          <p>木兰开源社区</p>
+          <p className="sub"><span>开放</span><span>共享</span>打造开源生态</p>
+        </div>
+      </div>
+      <div className="homeproject">
+        <div class="tit">开源软件推荐<em></em></div>
+        <ul>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+          <li>
+            <div className="p_head">
+              <p className="p_name task-hide-2">Labeled Risc-V</p>
+              <img src={DefaultImg} alt="" height="50px"/>
+            </div>
+            <p className="p_author">中科院计算所</p>
+            <p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
+          </li>
+        </ul>
+      </div>
+      <div className="homeFirst">
+        <div className="firstPanel">
+          <div className="firstPanelBox">
+            <div class="tit">关于我们<em></em></div>
+            <div className="desc">
+              木兰开源社区建立于2019年8月，是国家重点研发计划重点专项“云计算和大数据开源社区生态系统”的重要成果之一。旨在促进开源领域的交流，建立科教界和产业界开源交流互动平台，加强企业和行业用户之间的沟通，推进企业和个人开发者利用开源软件不断提升技术水平。从开源学习到商业代码托管，您可以从众多的开源开发项目中进行开发学习、主持和审查代码、管理项目和构建软件。
+            </div>
+            <ul className="aboutul">
+              <li>
+                <img src={icon1} alt="" width="84px"/>
+                <span>918</span>
+                <font>开源项目总数</font>
+              </li>
+              <li>
+                <img src={icon2} alt="" width="84px"/>
+                <span>10</span>
+                <font>科技项目开源成果</font>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      
+      <div className="sourceAbout">
+        <div class="tit">开源活动<em></em></div>
+        <div className="sourceactive">
+          <li style={{backgroundImage:`url(${active1})`}}></li>
+          <li style={{backgroundImage:`url(${active2})`}}></li>
+        </div>
+      </div>
+      
+      <div className={"homenews"}>
+        <div class="tit">开源资讯<em></em></div>
+        <div>
+          <ul className="newsul">
+            <li>
+              <img src="" alt="" width="145px" height="96px"/>
+              <div className="news-info">
+                <p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
+                <div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
+                <div className="news-time">2020/06/25 09:09</div>
+              </div>
+            </li>
+            <li>
+              <img src="" alt="" width="145px" height="96px"/>
+              <div className="news-info">
+                <p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
+                <div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
+                <div className="news-time">2020/06/25 09:09</div>
+              </div>
+            </li>
+            <li>
+              <img src="" alt="" width="145px" height="96px"/>
+              <div className="news-info">
+                <p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
+                <div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
+                <div className="news-time">2020/06/25 09:09</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="homeFooter">
+        <ul className="homeFooterUl homeFooterParter">
+          <li><img src={logo1} alt="" width="200px"/></li>
+          <li><img src={logo2} alt="" width="200px"/></li>
+          <li><img src={logo3} alt="" width="200px"/></li>
+          <li><img src={logo4} alt="" width="200px"/></li>
+        </ul>
+        <ul className="homeFooterUl">
+          <li><Link to={``}>关于我们</Link></li>
+          <li><Link to={``}>帮助中心</Link></li>
+          <li><Link to={``}>合作伙伴</Link></li>
+          <li><Link to={``}>服务协议</Link></li>
+        </ul>
+        <div className="homefooterbase">
+          <span>木兰开源社区版权所有 ©2020 技术支持:长沙智擎科技</span>
+          <a href="http://www.beian.miit.gov.cn/" target="_blank" style={{color:"#666"}}>粤ICP备12009483号</a>
+          
+        </div>
+      </div>
+    </div>
   )
 }
 export default HomeHoc(Index);

src/mulan/Index.scss

@@ -0,0 +1,227 @@
+.homeFirst{
+  background:url(./images/bg2.jpg)center center no-repeat;
+  min-height: 450px;
+  position: relative;
+  margin-bottom: 90px;
+  .firstPanel{
+    position: absolute;
+    top:70px;
+    width: 100%;
+    .firstPanelBox{
+      width: 1200px;
+      margin:0px auto;
+      background-color: #fff;
+      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      min-height: 400px;
+      border-radius: 4px;
+      padding:30px 0px ;
+      background:url(./images/1_1.png) no-repeat;
+      .desc{
+        margin:20px auto 50px;
+        line-height: 22px;
+        font-size: 16px;
+        color: #666;
+        width: 880px;
+        text-indent: 2em;
+        text-align: justify;
+      }
+      .aboutul{
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
+        align-items: center;
+        li{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          span{
+            font-size: 28px;
+            line-height: 42px;
+            font-weight: bold;
+          }
+          font{
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+}
+.homeFooter{
+  background: #fff;
+  .homeFooterParter{
+    padding:30px 0px;
+    width: 1200px;
+    margin:0px auto;
+  }
+  .homeFooterUl{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding:15px;
+    li{
+      padding:0px 40px;
+      a{
+        color: #ccc;
+        display: block;
+      }
+    }
+  }
+  .homefooterbase{
+    height: 38px;
+    background: #333;
+    line-height: 38px;
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+  }
+}
+.homebase{
+  position: relative;
+  min-height: 480px;
+  background-image:url(./images/320.jpeg);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  color:#fff;
+  font-size: 60px;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  p{
+    margin-bottom:20px;
+    text-align: center;
+  }
+  .sub{
+    font-size: 28px;
+    margin:0px;
+    span{
+      margin:0px 15px;
+    }
+  }
+}
+.homeproject{
+  padding:60px 0px;
+  ul{
+    display: flex;
+    flex-wrap: wrap;
+    width: 1200px;
+    margin:0px auto;
+    li{
+      width: 22%;
+      margin:0px 1.5%;
+      border-radius: 6px;
+      box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
+      margin-bottom: 40px;
+      .p_head{
+        padding:25px 20px;
+        display: flex;
+        align-items: flex-start;
+        background-image: linear-gradient(#118af3, #8dcaf5);
+        border-radius: 6px 6px 0px 0px;
+        justify-content: space-between;
+      }
+      .p_author{
+        font-size: 16px;
+        color: #666;
+        padding:0px 15px;
+        margin: 0px;
+      }
+      .p_desc{
+        line-height: 18px;
+        color: #666;
+        padding:0px 15px;
+        margin: 10px 0px 18px 0px;
+      }
+      .p_name{
+        font-size: 18px;
+        margin-right: 10px;
+        margin-bottom: 0px;
+        color: #fff;
+        line-height: 20px;    
+        margin-top: 5px;
+      }
+    }
+  }
+}
+.sourceAbout{
+  padding:60px 0px;
+  .sourceactive{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin:40px 0px;
+    li{
+      width: 600px;
+      height: 300px;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: 4px;
+      margin:0px 40px;
+    }
+  }
+}
+
+.tit {
+  font-size: 22px;
+  color: #444;
+  font-weight: bold;
+  margin-bottom: 45px;
+  text-align: center;
+  em{
+    display: block;
+    width: 50px;
+    height: 1px;
+    background: #ccc;
+    margin: 18px auto 0;
+  }
+}
+.homenews{
+  padding:60px 0px;
+  .newsul{
+    width: 1200px;
+    margin:0px auto;
+    display: flex;
+    flex-wrap: wrap;
+    li{
+      display:flex;
+      width: 48%;
+      margin-right: 2%;
+      margin-bottom: 30px;
+      &:nth-child(2n){
+        margin-right: 0px;
+        flex-flow: row-reverse;
+        img{
+          margin-left: 10px;
+        }
+      }
+      &:nth-child(2n+1){
+        img{
+          margin-right: 10px;
+        }
+      }
+      .news-title{
+        font-size: 16px;
+        margin-bottom:5px;
+        font-weight: bold;
+      }
+      .news-time{
+        font-size: 12px;
+        color: #999;
+      }
+      .news-desc{
+        line-height: 20px;
+      }
+      .news-info{
+        flex:1;
+      }
+    }
+  }
+}

src/mulan/Projects/Index.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { HOC } from '../HOC/Index';
+import {Link} from 'react-router-dom';
+import Title from '../../forge/Component/Title';
+import { AlignCenter } from '../../forge/Component/layout';
+import './Index.scss';
+import DefaultImg from '../images/default.png';
+
+function Index(props){
+  return(
+    <div className="panels">
+      <div className="projectsList">
+        <Title>基础类开源软件</Title>
+        <div className="lists">
+          <li>
+            <Link to={``} className="listName">LAMP - Web开发平台</Link>
+            <AlignCenter className="listInfo">
+              <p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
+              <img src={DefaultImg} alt="" width="48px" className="ml10"/>
+            </AlignCenter>
+            <div className="listTag">
+              <span>Go</span>
+              <span>MIT</span>
+              <span>Linux</span>
+            </div>
+          </li>
+          <li>
+            <Link to={``} className="listName">LAMP - Web开发平台</Link>
+            <AlignCenter className="listInfo">
+              <p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
+              <img src={DefaultImg} alt="" width="48px" className="ml10"/>
+            </AlignCenter>
+            <div className="listTag">
+              <span>Go</span>
+              <span>MIT</span>
+              <span>Linux</span>
+            </div>
+          </li>
+          <li>
+            <Link to={``} className="listName">LAMP - Web开发平台</Link>
+            <AlignCenter className="listInfo">
+              <p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
+              <img src={DefaultImg} alt="" width="48px" className="ml10"/>
+            </AlignCenter>
+            <div className="listTag">
+              <span>Go</span>
+              <span>MIT</span>
+              <span>Linux</span>
+            </div>
+          </li>
+          <li>
+            <Link to={``} className="listName">LAMP - Web开发平台</Link>
+            <AlignCenter className="listInfo">
+              <p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
+              <img src={DefaultImg} alt="" width="48px" className="ml10"/>
+            </AlignCenter>
+            <div className="listTag">
+              <span>Go</span>
+              <span>MIT</span>
+              <span>Linux</span>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default HOC(Index);

src/mulan/Projects/Index.scss

@@ -0,0 +1,63 @@
+.panels{
+  width: 1200px;
+  margin:0px auto;
+  .projectsList{
+    margin:20px;
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    .lists{
+      padding:20px 30px;
+      display: flex;
+      flex-wrap: wrap;
+      & > li{
+        margin-right: 2%;
+        border: 1px solid #eee;
+        width: 32%;
+        margin-bottom: 20px;
+        border-radius: 4px;
+        min-height: 200px;
+        box-shadow: 0 4px 8px 0 rgba(95,101,105,0.1);
+        &:hover{
+          transform: translateY(-2px);
+          box-shadow: 0 12px 20px 0 rgba(95,101,105,0.15);
+        }
+        &:nth-child(3){
+          margin-right: 0px;
+        }
+        .listName{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding:10px 20px;
+          height: 90px;
+          background-image: linear-gradient(to right, #118af3, #8dcaf5);
+          color: #fff;
+          font-size: 18px;
+          border-radius: 4px 4px 0px 0px;
+          cursor: pointer;
+        }
+        .listInfo{
+          padding:12px 20px 0px 20px;
+          .listInfoDesc{
+            line-height: 20px;
+            margin:0px;
+            color:#999;
+          }
+        }
+        .listTag{
+          padding:10px 20px;
+          span{
+            display: inline-block;
+            margin-right: 5px;
+            background-color: #c5c5c5;
+            color: #fff;
+            padding:0px 5px;
+            border-radius: 4px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}