首页新增两个部分的显示

src/mulan/Index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState , useRef } from 'react';
 import { HomeHoc }  from './HOC/HomeHoc';
 import { Link } from 'react-router-dom';
 import './Index.scss';
@@ -13,18 +13,21 @@ import { getUrlHead } from './Data/getUrl';
 import axios from 'axios';
 
 function Index(props){
+  const Carousels = useRef(null);
   const [ about ,setAbout ] =useState(undefined);
   const [ covers ,setCovers ] =useState(undefined);
   const [ recommand ,setRecommand ] =useState(undefined);
   const [ news ,setNews ] =useState(undefined);
   const [ activity ,setActivity ] =useState(undefined);
+  const [ cooperatersMenus ,setCooperatersMenus ] =useState(undefined);
+  const [ cooperatersMenusValue ,setCooperatersMenusValue ] =useState(undefined);
   const [ cooperaters ,setCooperaters ] =useState(undefined);
   useEffect(()=>{
     getRecommand();
     getAbout();
     getNews();
     getActivity();
-    getCooperaters();
+    getCooperatersMenu();
   },[])
 
   // 关于我们
@@ -68,10 +71,35 @@ function Index(props){
       }
     }).catch(error=>{})
   }
-  // 合作伙伴
-  function getCooperaters(){
-    const url = `/cooperaters.json`;
+
+  // 合作伙伴-menu
+  function getCooperatersMenu(){
+    const url = `/cooperater_categories.json`;
     axios.get(url).then(result=>{
+      if(result && result.data){
+        let data = result.data.data;
+        if(data && data.length>0){
+          setCooperatersMenus(data);
+          setCooperatersMenusValue(data[0].id);
+        }
+      }
+    }).catch(error=>{})
+  }
+
+  useEffect(()=>{
+    if(cooperatersMenusValue){
+      getCooperaters(cooperatersMenusValue);
+    }
+  },[cooperatersMenusValue])
+
+  // 合作伙伴
+  function getCooperaters(cateId){
+    const url = `/cooperaters.json`;
+    axios.get(url,{
+      params:{
+        cooperater_category_id:cateId
+      }
+    }).then(result=>{
       if(result && result.data){
         setCooperaters(result.data.data);
       }
@@ -197,18 +225,56 @@ function Index(props){
           }
         </div>
       </div>
-      {
-        cooperaters && cooperaters.length > 0 &&
-        <ul className="homeFooterUl homeFooterParter">
-          {
-            cooperaters.map((i,k)=>{
-              return(
-                <li><a href={i.website_url} target="_blank"><img src={getUrlHead(i.logo_url) } alt="" width="200px"/></a></li>
-              )
-            })
-          }
-        </ul>
-      }
+      <div>
+        <div class="tit">专家寄语</div>
+        <div className="professional">
+          <Carousel 
+            ref={Carousels}
+            autoplay
+            pauseOnDotsHover
+          >
+            <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>
+          </Carousel>
+        </div>
+      </div>
+      <div>
+        <div class="tit">合作伙伴</div>
+        {
+          cooperatersMenus && cooperatersMenusValue &&
+          <ul className="cooperatersMenus">
+            {
+              cooperatersMenus.map((i,k)=>{
+                return(
+                  <li className={cooperatersMenusValue === i.id ?"active":""} onClick={()=>setCooperatersMenusValue(i.id)}>{i.name}</li>
+                )
+              })
+            }
+          </ul>
+        }
+        {
+          cooperaters && cooperaters.length > 0 &&
+          <ul className="homeFooterUl homeFooterParter">
+            {
+              cooperaters.map((i,k)=>{
+                return(
+                  <li><a href={i.website_url} target="_blank"><img src={getUrlHead(i.logo_url) } alt="" width="200px"/></a></li>
+                )
+              })
+            }
+          </ul>
+        }
+      </div>
     </div>
   )
 }

src/mulan/Index.scss

@@ -52,8 +52,45 @@
     }
   }
 }
+.professional{
+  width: 1300px;
+  height: 434px;
+  margin: 0px auto;
+  background-image: url(./images/professional.png);
+  background-repeat: no-repeat;
+  margin-bottom: 60px;
+  .ant-carousel,.slick-slider,.slick-list,.slick-track,.slick-slide>div{
+    height: 100%;
+  }
+  .professionalItem{
+    display: flex!important;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
+    .professionalImg{
+      width: 120px;
+      height: 120px;
+      border-radius: 25px;
+      margin-bottom: 30px;
+    }
+    .name{
+      font-size: 16px;
+      color: #333333;
+      line-height: 40px;
+      display: block;
+    }
+    .school{
+      color: #888;
+      display: block;
+      line-height: 30px;
+      margin-bottom: 20px;
+    }
+  }
+  
+}
 .homeFooterParter{
-  padding:30px 0px;
+  padding:40px 0px;
   width: 1200px;
   margin:0px auto!important;
 }
@@ -184,6 +221,31 @@
     }
   }
 }
+.cooperatersMenus{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  li{
+    padding:0px 50px;
+    font-size: 18px;
+    color: #333333;
+    position: relative;
+    cursor: pointer;
+    &.active{
+      color: #1890FF;
+    }
+    &.active::after{
+      position: absolute;
+      content: "";
+      background-color: #1890FF;
+      width: 50px;
+      height: 2px;
+      left: 50%;
+      margin-left: -25px;
+      bottom: -5px;
+    }
+  }
+}
 
 .tit {
   font-size: 22px;