首页增加最新动态模块

public/css/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2340181 */
-  src: url('iconfont.woff2?t=1620957611209') format('woff2'),
-       url('iconfont.woff?t=1620957611209') format('woff'),
-       url('iconfont.ttf?t=1620957611209') format('truetype');
+  src: url('iconfont.woff2?t=1620981873232') format('woff2'),
+       url('iconfont.woff?t=1620981873232') format('woff'),
+       url('iconfont.ttf?t=1620981873232') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-arrowRight:before {
+  content: "\e863";
+}
+
 .icon-jiantouloukong-zuo:before {
   content: "\e861";
 }

public/css/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "14835599",
+      "name": "右箭头",
+      "font_class": "arrowRight",
+      "unicode": "e863",
+      "unicode_decimal": 59491
+    },
     {
       "icon_id": "21151489",
       "name": "箭头镂空-左",

src/mulan/About/About.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Banner } from '../../forge/Component/layout';
+import { Skeleton } from 'antd';
 
 
 function About(props){
@@ -22,7 +23,7 @@ function About(props){
     <div>
       <Banner>关于我们</Banner>
       <div className="desc">
-        {about && about.content}
+        {about ? about.content : <Skeleton />}
       </div>
     </div>
   )

src/mulan/About/Index.scss

@@ -16,4 +16,39 @@
     text-align: justify;
     padding:40px;
   }
+}
+.descTOC{
+  padding:20px;
+  .descUl{
+    text-indent: 0px;
+    margin-left: 20px;
+    padding-left: 0px;
+    li{
+      list-style-type: disc;
+      margin-left:20px;
+    }
+  }
+  .descPerson{
+    display: flex;
+    flex-wrap: wrap;
+    padding:10px 0px;
+    li{
+      width: 33%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      padding:20px 0.16%;
+      img{
+        margin-bottom: 15px;
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+        cursor: default;
+      }
+      span.school{
+        color: #888;
+      }
+    }
+  }
 }

src/mulan/About/TOC.jsx

@@ -1,15 +1,67 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Banner } from '../../forge/Component/layout';
-
+import { Skeleton } from 'antd';
+import RenderHtml from '../../components/render-html';
 
 function TOC(props){
   const [ data , setData ] = useState(undefined);
 
 
+  useEffect(()=>{
+    getAbout();
+  },[])
+
+  function getAbout(){
+    const url = `/helps/toc.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setData(result.data.data);
+      }
+    }).catch(error=>{})
+  }
   return(
     <div>
       <Banner>木兰开源社区技术委员会</Banner>
+      {
+        data ? 
+        <RenderHtml className="break_word_comments imageLayerParent" value={data.content} url={props.history.location}/>
+        // <div className="descTOC">
+        //   <ul className="descUl">主要为木兰开源社区旗下的开源项目提供技术指导，具体职责如下：
+        //     <li>对孵化项目进行批准及毕业审核；</li>
+        //     <li>促进项目“产学研用”之间的生态联系；</li>
+        //     <li>为项目提供国际化的视野与技术指导。</li>
+        //   </ul>
+        //   <ul className="descPerson">
+        //     <li>
+        //       <img src="" alt="" />
+        //       <span className="name">梅院士</span>
+        //       <span className="school">北京大学院士</span>
+        //     </li>
+        //     <li>
+        //       <img src="" alt="" />
+        //       <span className="name">梅院士</span>
+        //       <span className="school">北京大学院士</span>
+        //     </li>
+        //     <li>
+        //       <img src="" alt="" />
+        //       <span className="name">梅院士</span>
+        //       <span className="school">北京大学院士</span>
+        //     </li>
+        //     <li>
+        //       <img src="" alt="" />
+        //       <span className="name">梅院士</span>
+        //       <span className="school">北京大学院士</span>
+        //     </li>
+        //     <li>
+        //       <img src="" alt="" />
+        //       <span className="name">梅院士</span>
+        //       <span className="school">北京大学院士</span>
+        //     </li>
+        //   </ul>
+        // </div>
+        :<Skeleton />
+      }
     </div>
   )
 }

src/mulan/Index.jsx

@@ -19,6 +19,7 @@ function Index(props){
   const [ recommand ,setRecommand ] =useState(undefined);
   const [ news ,setNews ] =useState(undefined);
   const [ activity ,setActivity ] =useState(undefined);
+  const [ newActivity ,setNewActivity ] =useState(undefined);
   const [ cooperatersMenus ,setCooperatersMenus ] =useState(undefined);
   const [ cooperatersMenusValue ,setCooperatersMenusValue ] =useState(undefined);
   const [ cooperaters ,setCooperaters ] =useState(undefined);
@@ -31,6 +32,7 @@ function Index(props){
     getActivity();
     getCooperatersMenu();
     getLectures();
+    getNewActivity();
   },[])
   // 专家寄语
   function getLectures(){
@@ -65,18 +67,29 @@ function Index(props){
   function getNews(){
     const url = `/topics.json`;
     axios.get(url,{
-      params:{type:"activity"}
+      params:{topic_type:"activity"}
     }).then(result=>{
       if(result && result.data){
         setNews(result.data.data);
       }
     }).catch(error=>{})
   }
+  // 最新动态
+  function getNewActivity(){
+    const url = `/topics.json`;
+    axios.get(url,{
+      params:{topic_type:"moment"}
+    }).then(result=>{
+      if(result && result.data){
+        setNewActivity(result.data.data);
+      }
+    }).catch(error=>{})
+  }
   // 开源资讯
   function getActivity(){
     const url = `/topics.json`;
     axios.get(url,{
-      params:{type:"news"}
+      params:{topic_type:"news"}
     }).then(result=>{
       if(result && result.data){
         setActivity(result.data.data);
@@ -212,6 +225,32 @@ function Index(props){
         
         {/* <Link to={`/projects`} className="color-blue">查看更多<i className="iconfont icon-youjiantou ml8 font-12 color-blue"></i></Link> */}
       </div>
+      {
+        newActivity && newActivity.length > 0 &&
+        <div>
+          <div class="tit">最新动态</div>
+          <ul className="newActivity">
+            {
+              newActivity.map((i,k)=>{
+                return(
+                  <li>
+                    <a href={i.url}>
+                      <img src={getUrlHead(i.cover)} alt="" />
+                      <div className="infobox">
+                        <span className="time">{i.created_at}</span>
+                        <p className="name">{i.title}</p>
+                        <div className="desc">{i.content}</div>
+                        <a href={i.url} className="color-blue">了解详情<i className="iconfont icon-arrowRight ml5 font-14 color-blue"></i></a>
+                      </div>
+                      </a>
+                  </li>
+                )
+              })
+            }
+          </ul>
+        </div>
+      }
+      
       
       <div className={"homenews"}>
         <div class="tit">开源资讯</div>

src/mulan/Index.scss

@@ -130,6 +130,57 @@
   width: 1200px;
   margin:0px auto!important;
 }
+
+.newActivity{
+  width: 1240px;
+  margin:40px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  li{
+    width: 280px;
+    margin:0px 30px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 8px 0px #F1F1F1;
+    &:hover{
+      box-shadow: 0px 0px 40px 0px rgba(24, 144, 255, 0.3);
+    }
+    & >a img{
+      max-height: 150px;
+      width: 100%;
+    }
+    .infobox{
+      padding:20px;
+      .time{
+        color:#666666;
+        height: 18px;
+        line-height: 18px;
+        display: block;
+        margin-bottom: 15px;
+      }
+      .name{
+        color: #333;
+        font-size: 16px;
+        height: 20px;
+        line-height: 20px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .desc{
+        line-height: 20px;
+        color: #666;
+        height: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 5;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
 .homeFooterUl{
   display: flex;
   align-items: center;