diff --git a/src/mulan/Index.jsx b/src/mulan/Index.jsx index 9084c88a..c363816b 100644 --- a/src/mulan/Index.jsx +++ b/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){ } - { - cooperaters && cooperaters.length > 0 && - - } +
+
专家寄语
+
+ +
+ + 梅元师 + 北京大学院士 +

木兰开源社区建立于2019年8月,是国家重点研发计划重点专项“云计

+
+
+ + 梅元师 + 北京大学院士 +

木兰开源社区建立于2019年8月,是国家重点研发计划重点专项“云计

+
+
+
+
+
+
合作伙伴
+ { + cooperatersMenus && cooperatersMenusValue && + + } + { + cooperaters && cooperaters.length > 0 && + + } +
) } diff --git a/src/mulan/Index.scss b/src/mulan/Index.scss index 007d6d3b..3e9a8569 100644 --- a/src/mulan/Index.scss +++ b/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; diff --git a/src/mulan/images/professional.png b/src/mulan/images/professional.png new file mode 100644 index 00000000..b2c71641 Binary files /dev/null and b/src/mulan/images/professional.png differ