首页新增的两部分已完成，TOC还需等接口，下一步是活动首页的页面

public/css/iconfont.json

@@ -5,6 +5,41 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "21151489",
+      "name": "箭头镂空-左",
+      "font_class": "jiantouloukong-zuo",
+      "unicode": "e861",
+      "unicode_decimal": 59489
+    },
+    {
+      "icon_id": "21151557",
+      "name": "箭头镂空-右",
+      "font_class": "jiantouloukong-you",
+      "unicode": "e862",
+      "unicode_decimal": 59490
+    },
+    {
+      "icon_id": "21568989",
+      "name": "分享",
+      "font_class": "fenxiang1",
+      "unicode": "e89c",
+      "unicode_decimal": 59548
+    },
+    {
+      "icon_id": "21568990",
+      "name": "回到顶部",
+      "font_class": "huidaodingbu1",
+      "unicode": "e89d",
+      "unicode_decimal": 59549
+    },
+    {
+      "icon_id": "21568993",
+      "name": "帮助",
+      "font_class": "bangzhu",
+      "unicode": "e8a0",
+      "unicode_decimal": 59552
+    },
     {
       "icon_id": "991344",
       "name": "提交",

src/mulan/About/About.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Banner } from '../../forge/Component/layout';
+
+
+function About(props){
+  const [ about , setAbout ] = useState(undefined);
+
+  useEffect(()=>{
+    getAbout();
+  },[])
+
+  function getAbout(){
+    const url = `/helps/about.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setAbout(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <div>
+      <Banner>关于我们</Banner>
+      <div className="desc">
+        {about && about.content}
+      </div>
+    </div>
+  )
+}
+export default About;

src/mulan/About/Index.jsx

@@ -1,29 +1,66 @@
-import React, { useEffect, useState } from 'react';
+import React , { useEffect , useState } from 'react';
 import { HomeHoc }  from '../HOC/HomeHoc';
+import {Route, Switch , Link } from 'react-router-dom';
+import Loadable from 'react-loadable';
+import Loading from '../../Loading';
+import { Box , Long , Short , Gap } from '../../forge/Component/layout';
+import './Index.scss';
+import { Menu } from 'antd';
 import'./Index.scss';
-import axios from 'axios';
 
-function Index(){
-  const [ about , setAbout ] = useState(undefined);
+const About = Loadable({
+  loader: () => import('./About'),
+  loading: Loading,
+})
+const TOC = Loadable({
+  loader: () => import('./TOC'),
+  loading: Loading,
+})
+function Index(props){
+  const [ nav , setNav ] = useState("0");
 
+  const pathname = props.history.location.pathname;
   useEffect(()=>{
-    getAbout();
-  },[])
-
-  function getAbout(){
-    const url = `/helps/about.json`;
-    axios.get(url).then(result=>{
-      if(result && result.data){
-        setAbout(result.data.data);
+    if(pathname){
+      if(pathname === `/about`){
+        setNav("0");
       }
-    }).catch(error=>{})
-  }
+      if(pathname === `/about/TOC`){
+        setNav("1");
+      }
+    }
+  },[pathname])
+  
   return(
-    <div className="aboutBox">
-      <p className="aboutTitle">关于我们</p>
-      <div className="desc">
-        {about && about.content}
-      </div>
+    <div className="aboutboxs">
+      <Box>
+        <Short>
+          <Menu selectedKeys={[nav]} mode="inline" className="menus">
+            <Menu.Item key="0"><Link to={`/about`}>关于我们</Link></Menu.Item>
+            <Menu.Item key="1"><Link to={`/about/TOC`}>TOC</Link></Menu.Item>
+          </Menu>
+        </Short>
+        <Long>
+          <Gap>
+            <div className="boxshadow">
+              <Switch {...props}>
+                <Route
+                  path="/about/TOC"
+                  render={(p) => (
+                    <TOC {...props} {...p} />
+                  )}
+                ></Route>
+                <Route
+                  path="/about"
+                  render={(p) => (
+                    <About {...props} {...p} />
+                  )}
+                ></Route>
+              </Switch>
+            </div>
+          </Gap>
+        </Long>
+      </Box>
     </div>
   )
 }

src/mulan/About/Index.scss

@@ -1,17 +1,15 @@
-.aboutBox{
-  max-width: 1200px;
+.aboutboxs{
+  width: 1200px;
   margin:20px auto;
-  border:1px solid #eee;
-  border-radius: 4px;
-  .aboutTitle{
-    font-size: 20px;
-    padding:10px 0px;
-    text-align: center;
-    border-bottom:1px solid #eee;
-    margin-bottom: 0px;
+  .menus.ant-menu-inline {
+    border-right: none;
+    box-shadow: 0px 0px 8px 0px #f1f1f1;
+  }
+  .boxshadow {
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
   }
   .desc{
-    line-height: 22px;
+    line-height: 26px;
     font-size: 16px;
     color: #333;
     text-indent: 2em;

src/mulan/About/TOC.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Banner } from '../../forge/Component/layout';
+
+
+function TOC(props){
+  const [ data , setData ] = useState(undefined);
+
+
+  return(
+    <div>
+      <Banner>木兰开源社区技术委员会</Banner>
+    </div>
+  )
+}
+export default TOC;

src/mulan/Index.jsx

@@ -8,7 +8,7 @@ import icon2 from './images/icon2.png';
 import active1 from './images/active1.jpg';
 import active2 from './images/active2.png';
 import DefaultImg from './images/default.png';
-import { Carousel } from 'antd';
+import { Carousel , Spin } from 'antd';
 import { getUrlHead } from './Data/getUrl';
 import axios from 'axios';
 
@@ -22,13 +22,25 @@ function Index(props){
   const [ cooperatersMenus ,setCooperatersMenus ] =useState(undefined);
   const [ cooperatersMenusValue ,setCooperatersMenusValue ] =useState(undefined);
   const [ cooperaters ,setCooperaters ] =useState(undefined);
+  const [ lectures ,setLectures ] =useState(undefined);
+  const [ isSpin ,setIsSpin ] =useState(false);
   useEffect(()=>{
     getRecommand();
     getAbout();
     getNews();
     getActivity();
     getCooperatersMenu();
+    getLectures();
   },[])
+  // 专家寄语
+  function getLectures(){
+    const url = `/lectures.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setLectures(result.data);
+      }
+    }).catch(error=>{})
+  }
 
   // 关于我们
   function getAbout(){
@@ -88,6 +100,7 @@ function Index(props){
 
   useEffect(()=>{
     if(cooperatersMenusValue){
+      setIsSpin(true);
       getCooperaters(cooperatersMenusValue);
     }
   },[cooperatersMenusValue])
@@ -102,6 +115,7 @@ function Index(props){
     }).then(result=>{
       if(result && result.data){
         setCooperaters(result.data.data);
+        setIsSpin(false);
       }
     }).catch(error=>{})
   }
@@ -232,19 +246,24 @@ function Index(props){
             ref={Carousels}
             autoplay
             pauseOnDotsHover
+            arrows={lectures && lectures.total_count && lectures.total_count > 1}
+            speed={1500}
+            prevArrow={<button type='button' className='slick-prev slick-arrow'><i className='iconfont icon-jiantouloukong-zuo'></i></button>}
+            nextArrow={<button type='button' className='slick-next slick-arrow'><i className='iconfont icon-jiantouloukong-you'></i></button>}
           >
-            <div className="professionalItem">
-              <img src="" alt="" className="professionalImg"/>
-              <span className="name">梅元师</span>
-              <span className="school">北京大学院士</span>
-              <p>木兰开源社区建立于2019年8月，是国家重点研发计划重点专项“云计</p>
-            </div>
-            <div className="professionalItem">
-              <img src="" alt="" className="professionalImg"/>
-              <span className="name">梅元师</span>
-              <span className="school">北京大学院士</span>
-              <p>木兰开源社区建立于2019年8月，是国家重点研发计划重点专项“云计</p>
-            </div>
+            {
+              lectures && lectures.data && lectures.data.length>0 &&
+              lectures.data.map((i,k)=>{
+                return(
+                  <div className="professionalItem">
+                    <img src={getUrlHead(i.avatar_url)} alt="" className="professionalImg"/>
+                    <span className="name">{i.expert_name}</span>
+                    <span className="school">{i.expert_title}</span>
+                    <p className="content">{i.content}</p>
+                  </div>
+                )
+              })
+            }
           </Carousel>
         </div>
       </div>
@@ -262,6 +281,7 @@ function Index(props){
             }
           </ul>
         }
+        <Spin spinning={isSpin}>
         {
           cooperaters && cooperaters.length > 0 &&
           <ul className="homeFooterUl homeFooterParter">
@@ -274,6 +294,7 @@ function Index(props){
             }
           </ul>
         }
+        </Spin>
       </div>
     </div>
   )

src/mulan/Index.scss

@@ -62,6 +62,33 @@
   .ant-carousel,.slick-slider,.slick-list,.slick-track,.slick-slide>div{
     height: 100%;
   }
+  .slick-slider{
+    &:hover .slick-arrow{
+      display: block!important;
+    }
+    .slick-arrow{
+      height: 46px;
+      width: 46px;
+      z-index: 10;
+      display: none!important;
+      &:hover i{
+        color: #1890FF;
+      }
+    }
+    .slick-arrow > i{
+      color: rgb(236, 236, 236);
+      font-size: 46px!important;  
+      height: 46px;
+      width: 46px;
+      line-height: 46px;
+    }
+    .slick-prev{
+      left: 70px;
+    }
+    .slick-next{
+      right: 70px;
+    }
+  }
   .professionalItem{
     display: flex!important;
     align-items: center;
@@ -86,6 +113,15 @@
       line-height: 30px;
       margin-bottom: 20px;
     }
+    .content{
+      max-width: 1000px;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
   }
   
 }