关于我们-精选组织

src/forge/AboutUs/AboutUs.jsx

@@ -1,6 +1,7 @@
 import React , { useEffect , useState } from 'react';
 import { TPMIndexHOC} from '../../modules/tpm/TPMIndexHOC';
 import { Timeline, Carousel } from 'antd';
+import { Link } from 'react-router-dom';
 import { getImageUrl } from 'educoder';
 import CountUp from 'react-countup';
 import axios from 'axios';
@@ -17,6 +18,14 @@ 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 huawei from '../Main/img/index/unit/huawei.png';
+import langchao from '../Main/img/index/unit/langchao.png';
+import jijinhui from '../Main/img/index/unit/jijinhui.png';
+import mulan from '../Main/img/index/unit/mulan.png';
+import xigongye from '../Main/img/index/unit/xigongye.png';
+import feiteng from '../Main/img/index/unit/feiteng.png';
+import xiuos from '../Main/img/index/unit/xiuos.png';
+import huake from '../Main/img/index/unit/huake.png';
 
 function AboutUs(){
   const countUpProps = {
@@ -53,6 +62,19 @@ function AboutUs(){
     }
   }
 
+  const teamlist =
+    [
+      {url:"/Huawei_Technology",avatar_url:huawei,name:"华为技术有限公司"},
+      {url:"/openatom_foundation",avatar_url:jijinhui,name:"开放原子开源基金会"},
+      {url:"/Inspur",avatar_url:langchao,name:"浪潮信息"},
+      {url:"/mulan-community",avatar_url:mulan,name:"木兰开源社区"},
+      {url:"/CrowdOS_WeSense",avatar_url:xigongye,name:"西北工业大学"},
+      {url:"/pkecosystem",avatar_url:feiteng,name:"PK开源生态项目组"},
+      {url:"/xuos",avatar_url:xiuos,name:"泛在操作系统实验室"},
+      {url:"/hustos",avatar_url:huake,name:"华中科技大学操作系统团队"},
+    ]
+  
+
   return(
     <div className="aboutUs_body">
       <div className="aboutUs_head df">
@@ -255,6 +277,23 @@ function AboutUs(){
             <p className="delivery">简历投递邮箱：zengyt#csxjy.com.cn 曾先生  (用@符号替换#)</p>
           </div>
         </div>
+        {/* 精选组织 */}
+
+        <div className="about_team">
+          <div className="au_title">精选组织</div>
+          {
+            teamlist && teamlist.length > 0 &&
+            <ul className="about_team_lists">
+              {
+                teamlist.map((i,k)=>{
+                  return(
+                    <li><Link to={i.url}><img src={i.avatar_url} title={i.name} alt={i.name} style={{maxWidth:"240px",marginLeft:k===3?"-45px":"0px"}}/></Link></li>
+                  )
+                })
+              }
+            </ul>
+          }
+        </div>
 
         {/* 合作单位 */}
         <div className="unit">

src/forge/AboutUs/AboutUs.scss

@@ -21,6 +21,41 @@
     top: -70px;
   }
 }
+.about_team{
+  min-height: 495px;
+  background-image: url('./image/teambanner.png');
+  background-size: 100% 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  .about_team_lists{
+    width: 1200px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 20px;
+    li{
+      height: 120px;
+      width: 266px;
+      margin-right: 40px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:hover{
+        background-color:#ffffff;
+        border:2px solid #ffffff;
+        border-color:#ffffff;
+        border-radius:6px;
+        box-shadow:0px 1px 8px rgba(0, 0, 0, 0.06);
+      }
+      &:nth-child(4n){
+        margin-right: 0px;
+      }
+    }
+  }
+}
 .aboutUs_head.df{
   flex-direction: column;
   justify-content: center;