优化代码

src/forge/AboutUs/AboutUs.jsx

@@ -1,7 +1,9 @@
 import React , { useEffect , useState } from 'react';
 import { TPMIndexHOC} from '../../modules/tpm/TPMIndexHOC';
 import { Timeline, Carousel } from 'antd';
+import { getImageUrl } from 'educoder';
 import CountUp from 'react-countup';
+import axios from 'axios';
 import './AboutUs.scss';
 import subititle from './image/subtitle.png';
 import achievements from './image/achievements.png';
@@ -15,26 +17,6 @@ import fun2 from './image/fun2.png';
 import fun3 from './image/fun3.png';
 import fun4 from './image/fun4.png';
 import fun5 from './image/fun5.png';
-import img1 from './image/img1.png';
-import img2 from './image/img2.png';
-import img3 from './image/img3.png';
-import img4 from './image/img4.png';
-import img5 from './image/img5.png';
-import img6 from './image/img6.png';
-import img7 from './image/img7.png';
-import img8 from './image/img8.png';
-import img9 from './image/img9.png';
-import img10 from './image/img10.png';
-import img11 from './image/img11.png';
-import img12 from './image/img12.png';
-import img13 from './image/img13.png';
-import img14 from './image/img14.png';
-import img15 from './image/img15.png';
-import img16 from './image/img16.png';
-import img17 from './image/img17.png';
-import img18 from './image/img18.png';
-import img19 from './image/img19.png';
-import img20 from './image/img20.png';
 
 function AboutUs(){
   const countUpProps = {
@@ -46,8 +28,17 @@ function AboutUs(){
   const [selectTitle, setSelectTitle] = useState(1);
   //用于刷新组件
   const [flush, setFlush] = useState(false);
+  //合作单位
+  const [units, setUnits] = useState([]);
+
   useEffect(()=>{
+    //添加浏览器滚动监听事件
     window.addEventListener('scroll', scrollListener);
+    //请求topics.json接口获取合作单位信息
+    axios.get(`/topics.json`, { params: { topic_type: "cooperator", limit: 20, group_size: 5}}).then(response=>{
+      response && setUnits(response.data.topics);
+    });
+    return ()=>window.removeEventListener('scroll', scrollListener);
   },[])
 
   function scrollListener(e){
@@ -269,34 +260,17 @@ function AboutUs(){
           <a id="value4" className="mao"></a>
           <div className="au_title">合作单位</div>
           <table>
+            {units && units.map(group =>{
+              return (
                 <tr>
-              <td><a href="https://www.nudt.edu.cn/" target="_blank"><img src={img6}></img></a></td>
-              <td><a href="https://www.pku.edu.cn/" target="_blank"><img src={img7}></img></a></td>
-              <td><a href="https://www.buaa.edu.cn/" target="_blank"><img src={img8}></img></a></td>
-              <td><a href="https://www.nju.edu.cn/" target="_blank"><img src={img10}></img></a></td>
-              <td><a href="http://www.iscas.ac.cn/" target="_blank"><img src={img9}></img></a></td>
-            </tr>
-            <tr>
-              <td><a href="https://www.ccf.org.cn/" target="_blank"><img src={img1}></img></a></td>
-              <td><a href="https://www.hnjmrh.gov.cn/newweb/service/detail/305/" target="_blank"><img src={img2}></img></a></td>
-              <td><a href="https://www.zhejianglab.com/" target="_blank"><img src={img3}></img></a></td>
-              <td><a href="http://www.zjusdgyy.com/product/wuxi_545.html" target="_blank"><img src={img4}></img></a></td>
-              <td><a href="http://www.cec.com.cn/" target="_blank"><img src={img5}></img></a></td>
-            </tr>
-            <tr>
-              <td><a href="https://www.openi.org.cn/" target="_blank"><img src={img11}></img></a></td>
-              <td><a href="https://www.mulanos.cn/" target="_blank"><img src={img12}></img></a></td>
-              <td><a href="https://osredm.com/" target="_blank"><img src={img13}></img></a></td>
-              <td><a href="http://www.copu.org.cn/" target="_blank"><img src={img14}></img></a></td>
-              <td><a href="https://www.opengcc.org" target="_blank"><img src={img15}></img></a></td>
-            </tr>
-            <tr>
-              <td><a href="https://www.educoder.net/" target="_blank"><img src={img16}></img></a></td>
-              <td><a href="https://www.didiglobal.com/" target="_blank"><img src={img17}></img></a></td>
-              <td><a href="https://www.tencent.com/" target="_blank"><img src={img18}></img></a></td>
-              <td><a href="https://www.inspur.com/" target="_blank"><img src={img19}></img></a></td>
-              <td><a href="https://www.ucloud.cn/" target="_blank"><img src={img20}></img></a></td>
+                  {group.map(item =>{
+                    return(
+                      <td><a href={item.url} target="_blank"><img src={getImageUrl(item.image)}></img></a></td>
+                    )
+                  })}
                 </tr>
+              )
+            })}
           </table>
         </div>
       </div>

src/forge/AboutUs/AboutUs.scss

@@ -319,14 +319,17 @@
     width: 1200px;
     height: 550px;
     margin-top: 15px;
-  }
-  & img{ 
+    border-collapse: separate;
+    border-spacing: 10px 10px;
+    & td{
       width: 224px;
+      height: 122px;
       box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
       border-radius: 6px;
       border: 2px solid #FFFFFF;
       &:hover{ border: 1px solid #466AFF;}
     }
+  }
 }
 .au_cont{
   width: 1200px;