修改glcc专题页

src/glcc/index.jsx

@@ -142,7 +142,7 @@ const Glcc = (propsF) => {
           )}
         ></Route>
 
-        {/* 项目/课题列表 */}
+        {/* openmmlab列表 */}
         <Route
           path="/glcc/openmmlab"
           render={(props) => (

src/glcc/openmmlab/SliderLeft/index.jsx

@@ -1,9 +1,65 @@
 import React, { useEffect, useState } from 'react';
 import Slider from 'react-slick';
-import axios from 'axios';
 import './index.scss';
 
 
+const arithmeticArr = [
+  {
+    name: "MMDetection算法演示",
+    describe: "MMDetection 是 OpenMMLab 中的通用目标检测算法平台，目前已经支持了 70+ 算法和 500+ 个预训练模型，支持目标检测、实例分割和全景分割。是 OpenMMLab 算法库中的MMDetection3D 和 MMRotate 的核心依赖，为 MMOCR、MMPose 和 MMTracking 提供了检测组件",
+    source: 'https://www.gitlink.org.cn/api/attachments/387826',
+    type: 'img',
+  },
+  {
+    name: "MMPose算法演示",
+    describe: "MMPose 是 OpenMMLab 中的姿态估计算法库，目前已经支持了近 30 个算法和 300+ 预训练模型，涵盖了人体、人脸、人手、动物等多类目标的姿态估计。秉承 OpenMMLab 系列的结构化框架设计，MMPose 很适合作为算法复现和创新的平台",
+    source: 'https://www.gitlink.org.cn/preview/d2d62f65d08a22bcc257c5a24cf750fa_1654660457842.mp4',
+    type: 'mp4',
+  },
+  {
+    name: "MMMOCR算法演示",
+    describe: "MMOCR 作为 OpenMMLab 家族的一员，支持众多 OCR 相关的模型，涵盖了文本检测、文本识别以及关键信息提取等多个主要方向。通过在 MMOCR 中复现相关算法，你将可以了解到 OCR 领域的前沿知识，熟练掌握 MM 系列框架的整体流程，并积累深度学习相关的学术及工程经验",
+    source: '',
+    type: 'img',
+  },
+  {
+    name: "MMGeneration算法演示",
+    describe: "MMGeneration 是一个图像和视频生成算法库，支持多种生成模型如图像生成，条件生成，图像转换的训练和测试，同时也提供了丰富的应用",
+    source: 'https://www.gitlink.org.cn/api/attachments/387829',
+    type: 'img',
+  },
+  {
+    name: "MMRotate算法演示",
+    describe: "MMRotate 是 OpenMMLab 中基于 PyTorch 的旋转框目标检测工具箱。目前支持了旋转框检测领域主流的数据集和 SOTA 算法",
+    source: '',
+    type: 'img',
+  },
+  {
+    name: "MMDetection3D算法演示",
+    describe: "MMDetection3D 是 OpenMMLab 中的通用 3D 感知算法平台，目前已经支持了室内外多个主流数据集的单模态/多模态 3D 检测和点云分割算法。同时 MMDetection3D 可以无缝使用 MMDetection 中的所有组件，为多模态感知提供了丰富的基础模块",
+    source: 'https://www.gitlink.org.cn/api/attachments/387826',
+    type: 'img',
+  },
+  {
+    name: "MMEditing算法演示",
+    describe: "MMEditing是面向底层视觉工具箱，集成了超分辨率、视频插帧、补图、抠图等方向大量SOTA模型，且持续吸纳新的底层视觉模型",
+    source: '',
+    type: 'img',
+  },
+  {
+    name: "MMFlow算法演示",
+    describe: "MMFlow是一款基于 PyTorch 和 MMCV 的光流估计开源工具箱，提供了多个 SOTA 光流估计算法，并支持光流领域主流学术数据集，以及光流可视化和评估方法",
+    source: 'https://www.gitlink.org.cn/api/attachments/387830',
+    type: 'img',
+  },
+  {
+    name: "MMClassification",
+    describe: "MMClassification 是一款基于 PyTorch 的开源图像分类工具箱，丰富的模型库支持40+预训练模型、主流数据集支持及丰富的训练技巧与策略",
+    source: 'https://www.gitlink.org.cn/api/attachments/387831',
+    type: 'img',
+  },
+];
+
 let setting = {
   infinite: true,
   dots: true,
@@ -11,7 +67,7 @@ let setting = {
   slidesToShow: 1,
   slidesToScroll: 1,
   pauseOnDotsHover: true,
-  autoplaySpeed: 50000,
+  autoplaySpeed: 5000,
   // pauseOnFocus: true,
   centerMode: true,
   centerPadding: "0px",
@@ -22,14 +78,20 @@ function SliderLeft() {
 
   return (
     <Slider {...setting}>
-        <div className="slider_content">
+      {arithmeticArr.map(item => {
-          MMDetection 是 OpenMMLab 中的通用目标检测算法平台，
+        return <div className="slider_content" key={item.name}>
+          <div className="slider_img">
+            {item.type == 'img' && <img src={item.source} />}
+            {item.type == 'mp4' && <video className="introduce-video" src={item.source} autoPlay  muted>您的浏览器不支持 video 标签。</video>}
+          </div>
+          <div className="slider_tit ellipsis-1">
+            {item.name}
+          </div>
+          <div className="slider_content">
+            {item.describe}
+          </div>
         </div>
-
+      })}
-        <div className="slider_content">
-          MMDetection 是 Ope
-        </div>
-
     </Slider>
   )
 }

src/glcc/openmmlab/SliderLeft/index.scss

@@ -1,7 +1,6 @@
 .slider_left {
-  .slick-slider {
+  position: relative;
-    overflow: hidden;
+
-  }
   .slider_content {
     color: #3a4965;
   }
@@ -10,67 +9,22 @@
     height: 679px;
     display: flex;
     .slick-slide {
-      position: relative;
       height: 100%;
-      div {
-        height: 100%;
-        .regform {
-          & > div {
-            overflow: hidden;
-            img {
-              height: 100%;
-              width: 1920px;
-              position: relative;
-              left: 50%;
-              margin-left: -960px;
-            }
-          }
-        }
-        .regPrg {
-          position: absolute;
-          z-index: 2;
-          width: 1200px;
-          left: 50%;
-          margin-left: -600px;
-          top: 54%;
-          margin-top: -23px;
-          a {
-            color: #fff !important;
-            display: inline-block;
-            background-color: #466aff;
-            border-radius: 5px;
-            height: 46px;
-            line-height: 46px;
-            width: 98px;
-            text-align: center;
-            font-size: 18px;
-            letter-spacing: 2px;
-            &:hover {
-              color: #ffffff !important;
-              background-color: #355cff;
-            }
-          }
-        }
-      }
     }
   }
   .slick-slider {
-    position: relative;
-
     .slick-dots {
-      width: 1200px;
+      width: 100%;
-      text-align: left;
+      bottom: -24px;
-      left: 50%;
-      margin-left: -600px;
-      bottom: 25%;
       position: absolute;
       display: flex !important;
+      justify-content: center;
       z-index: 2;
       li {
-        background-color: rgba(225, 225, 225, 0.5);
+        background-color: #fff;
         position: relative;
         height: 3px;
-        width: 46px;
+        width: 37px;
         margin-right: 15px;
         &::after {
           position: absolute;
@@ -79,11 +33,11 @@
           top: 0px;
           height: 100%;
           content: "";
-          transition: 5.2s;
+          transition: 0.75s;
           transition-property: width;
         }
         &.slick-active::after {
-          background-color: #fff;
+          background-color: #466aff;
           width: 100%;
         }
         button {
@@ -99,4 +53,46 @@
       }
     }
   }
+
+  .slick-list {
+    overflow: hidden;
+  }
+
+  .slider_img {
+    height: 350px;
+    background-image: linear-gradient(
+      131.4deg,
+      #dce7ff 0%,
+      #dce7ff 14.22%,
+      #eef3ff 25.11%,
+      #f9fbff 47.69%,
+      #ecf3ff 72.3%,
+      #f2f7ff 100%
+    );
+    border: 2px solid;
+    border-color: #ffffff;
+    border-radius: 2px;
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img{
+      max-width: 100%;
+      max-height: 100%;
+    }
+    video{
+      width: 100%;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .slider_tit {
+    margin:14px 0;
+    font-weight: 500;
+    color: #0f141d;
+    font-size: 20px;
+    line-height: 26px;
+  }
 }

src/glcc/openmmlab/SliderRight/index.jsx

@@ -1,39 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import Slider from 'react-slick';
-import { projectList } from '../../api';
 import './index.scss';
 
-
 let setting = {
   infinite: true,
-  dots: true,
   speed: 750,
-  slidesToShow: 1,
+  slidesToShow: 3,
   slidesToScroll: 1,
   pauseOnDotsHover: true,
-  autoplaySpeed: 50000,
+  autoplaySpeed: 4000,
-  // pauseOnFocus: true,
   centerMode: true,
-  centerPadding: "0px",
+  centerPadding: "",
+  // pauseOnFocus: true,
   autoplay: true,
   arrows: false,
+  vertical: true,
 }
-function SliderLeft() {
 
-  const [list, setList] = useState([]);
+function SliderLeft({list,history}) {
 
-  useEffect(()=>{
+
-    const params = {
+  function goDetail(id){
-      curPage: 1,
+
-      keyword:'openmmlab',
+  }
-      pageSize: 10000
-    }
-    projectList(params).then(response=>{
-      if(response && response.message === "success"){
-        setList(response.data.rows);
-      }
-    })
-  },[])
 
   return (
     <Slider {...setting}>
@@ -42,12 +31,11 @@ function SliderLeft() {
           return (
             <div className="news-slide-item" key={i}>
               <div className="slide-title" >
-                <span className="order-num">{i + 1}</span>
+                <h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.id) }}>{item.projectName}</h3>
-                <h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.fake_id) }}>{item.title}</h3>
+                {/* <span className="slide-tag">{item.projectType}</span> */}
-                <span className="slide-tag">{item.tag}</span>
               </div>
-              <p className="ellipsis-2">{item.content}</p>
+              <p className="ellipsis-2">{item.projectIntro}</p>
-              <span className="news-time">{item.created_time && item.created_time.split(' ')[0]}</span>
+              <span className="news-time">查看详情</span>
             </div>
           )
         })

src/glcc/openmmlab/SliderRight/index.scss

@@ -1,5 +1,5 @@
 .slider_right {
-  width: 30%;
+  width: 390px;
   height: 520px;
   overflow: hidden;
   .slick-track > div {
@@ -7,22 +7,19 @@
     position: relative;
     transition: all 0.7s;
   }
+  // .slick-center{
+  //   margin:5px 0;
+  // }
   .news-slide-item {
-    height: 11.25em;
+    height: 160px;
     overflow: hidden;
-    background-image: linear-gradient(
+    background-image:linear-gradient(131.4deg,#dce7ff 0%,#dce7ff 14.22%,#eef3ff 25.11%,#f9fbff 47.69%,#ecf3ff 72.3%,#f2f7ff 100%);
-      to bottom right,
+    border:2px solid #ffffff;
-      #e9f5ff 0%,
+    box-shadow:0px 0px 8px rgba(132, 160, 255, 0.19);
-      #f1f2fd 25%,
+    margin-bottom: 11px;
-      #e8f2ff 50%,
-      #e1eaff 75%,
-      #c6d3ff 100%
-    );
-    margin-bottom: 10px;
     padding: 1.25em 1.8em 1.6em;
-    border: 1px solid #fff;
     border-radius: .3em;
-
+    box-sizing: border-box;
     .slide-title {
       display: flex;
       align-items: center;
@@ -74,9 +71,9 @@
 
     }
   }
-  .slick-center {
+  // .slick-center {
-    margin-left: 100px;
+  //   margin-left: 100px;
-  }
+  // }
   
  .slick-slide:nth-child(n) .slide-tag{
     background: #586dff;

src/glcc/openmmlab/index.jsx

@@ -1,22 +1,38 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import logo from "../img/openmmlab/logo.png";
-import { useEffect } from 'react';
+import SliderLeft from './sliderLeft';
-import SliderLeft from './SliderLeft';
+import SliderRight from './sliderRight';
-import SliderRight from './SliderRight';
+import ProjectTabs from './projectTab';
+import Teachers from './teachers';
+import { projectList } from '../api';
+
 import './index.scss';
 
-
-
-
 function Openmmlab(props) {
+
+    const [list, setList] = useState([]);
+
     useEffect(() => {
         window.scrollTo(0, 0);
     }, [])
 
+    useEffect(() => {
+        const params = {
+            curPage: 1,
+            keyword: 'openmmlab',
+            pageSize: 10000
+        }
+        projectList(params).then(response => {
+            if (response && response.message === "success") {
+                setList(response.data.rows);
+            }
+        })
+    }, [])
+
     return (
         <div className="glcc_openmmlab">
-            <div className="first_selection">
 
+            <div className="first_selection">
                 <div className="openmmlab_head">
                     <img className="openmmlab_logo" src={logo} alt=''></img>
                     <p className="openmmlab_des">深度学习时代最完整的计算机视觉开源算法体系</p>
@@ -27,11 +43,20 @@ function Openmmlab(props) {
                         <SliderLeft />
                     </div>
                     <div className="slider_right">
-                        <SliderRight />
+                        <SliderRight list={list} />
                     </div>
                 </div>
             </div>
 
+            <div className="openmmlab_title">项目精选</div>
+            <ProjectTabs {...props} list={list} />
+
+            <div className="teachers">
+                <div className="teachers_tit">
+                    导师一览
+                </div>
+                <Teachers />
+            </div>
         </div>
     )
 }

src/glcc/openmmlab/index.scss

@@ -1,10 +1,15 @@
 .glcc_openmmlab {
   font-family: PingFang SC;
 
-  .first_selection{
+  .first_selection {
     // height: 742px;
-    padding:8px 0 63px;
+    padding: 8px 0 63px;
-    background-image: linear-gradient(180deg,#e5e7fc 0%,#f5f7fa 47.28%,#d4daec 100%);
+    background-image: linear-gradient(
+      180deg,
+      #e5e7fc 0%,
+      #f5f7fa 47.28%,
+      #d4daec 100%
+    );
     border-radius: 4px;
   }
 
@@ -28,9 +33,9 @@
     margin: 0 auto;
   }
 
-  .openmmlab_slider{
+  .openmmlab_slider {
-      display: flex;
+    display: flex;
-      justify-content: space-between;
+    justify-content: space-between;
   }
 
   .slider_left {
@@ -40,6 +45,57 @@
     border: 1px solid #ffffff;
     border-radius: 6px;
     box-shadow: 0px 0px 8px rgba(138, 168, 227, 0.21);
-    padding:18px 33px;
+    padding: 18px 33px;
+  }
+
+  .openmmlab_title {
+    font-weight: 500;
+    color: #1e1e1e;
+    background-color: #f4f9ff;
+    font-size: 38px;
+    line-height: 53px;
+    text-align: center;
+    padding: 54px 0 40px;
+  }
+  .second_selection {
+    width: 576px;
+    height: 875px;
+    background-image: linear-gradient(
+      270.28deg,
+      #394661 0%,
+      rgba(53, 65, 90, 0.85) 15.47%,
+      rgba(31, 37, 51, 0) 100%
+    );
+    border-radius: 4px;
+  }
+
+  .teachers{
+    background:#E6ECF9;
+    padding:40px 0 50px;
+  } 
+  .teachers_tit {
+    font-weight: 500;
+    color: #1e1e1e;
+    font-size: 38px;
+    line-height: 53px;
+    text-align: center;
+    margin: 0 auto 50px;
   }
 }
+
+// 1行省略号
+.ellipsis-1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// 2行省略号
+.ellipsis-2 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

src/glcc/openmmlab/projectTab/index.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState, Fragment } from 'react';
+import { Tabs } from 'antd';
+import ProjectDetail from './projectDetail';
+
+import './index.scss';
+
+const { TabPane } = Tabs;
+
+
+function ProjectTabs({ list, applyTaskId, history, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd }) {
+
+
+
+    return (
+        <Tabs
+            // onChange={(e) => { setTaskId(e) }} 
+            // activeKey={}
+            tabPosition={'left'}
+            defaultActiveKey={'0'}
+            className="openmmlab_tab"
+        >
+            {
+                list.map((item, i) => {
+                    return <TabPane
+                        tab={<div className="tab_tit">
+                            <div className="tab_tit_content">{item.projectName && item.projectName.split('-')[1]}</div>
+                            <div className="tab_type">{item.projectType}</div></div>}
+                        key={i + ''} >
+                        <div className="tab_content">
+                            <div className="openmmlab_tab_content">
+                                <ProjectDetail detail={item} applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} />
+                            </div>
+                        </div>
+
+                    </TabPane>
+                })
+            }
+        </Tabs>
+    )
+}
+export default ProjectTabs;
+

src/glcc/openmmlab/projectTab/index.scss

@@ -0,0 +1,215 @@
+.openmmlab_tab {
+  background-color: #2c374e;
+  color: #fff;
+  .ant-tabs-bar {
+    width: calc((100vw - 1200px) / 2 + 216px);
+
+    height: 875px;
+    background-image: linear-gradient(
+      270.28deg,
+      #394661 0%,
+      rgba(53, 65, 90, 0.85) 15.47%,
+      rgba(31, 37, 51, 0) 100%
+    );
+  }
+
+  .tab_type {
+    display: none;
+  }
+  .ant-tabs-nav-container {
+    overflow: visible;
+  }
+  .ant-tabs-nav-wrap {
+    overflow: visible;
+  }
+  .ant-tabs-nav-scroll {
+    text-align: right;
+    overflow: visible;
+    margin-right: -6px;
+  }
+  .ant-tabs-left-bar {
+    border: 0;
+    padding: 32px 0;
+  }
+  .tab_tit {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100%;
+  }
+
+  .ant-tabs-left-bar .ant-tabs-tab {
+    padding: 12px 24px;
+    &:hover {
+      color: #fff;
+    }
+  }
+  .ant-tabs-left-bar .ant-tabs-nav,
+  .ant-tabs-right-bar .ant-tabs-nav {
+    width: 224px;
+  }
+  .ant-tabs-tab-active {
+    height: 121px;
+    background: url("../../img/openmmlab/tab.png") no-repeat;
+    background-size: 100% 100%;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 22px;
+    line-height: 26px;
+    .tab_type {
+      display: block;
+      width: 72px;
+      height: 30px;
+      border: 1px solid#ffffff;
+      border-radius: 4px;
+      font-weight: 500;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 28px;
+      text-align: center;
+    }
+  }
+
+  .tab_tit_content {
+    text-align: left;
+  }
+
+  .ant-tabs-ink-bar {
+    display: none !important;
+  }
+
+  .tab_content{
+      height: 100%;
+      padding:31px 0;
+  }
+  .openmmlab_tab_content {
+    width:954px;
+    height:813px;
+    padding: 21px 30px 50px;
+    color: rgba(0,0,0,.65);
+  }
+  // 项目详情框
+  .projectDetailBox {
+    &.byTask {
+      background-image: linear-gradient(180deg, #f1f5ff 0%, #ffffff 100%);
+      border: 1px solid #ffffff;
+      border-radius: 4px;
+      box-shadow: 0px 0px 10px rgba(100, 141, 255, 0.2);
+      padding: 30px 30px 50px;
+      .taskItem {
+        .center {
+          width: 440px;
+        }
+      }
+    }
+    &.nodata {
+      width: 200px;
+    }
+    font-size: 15px;
+    line-height: 30px;
+    .projectDetailHead {
+      color: #465474;
+      padding-bottom: 12px;
+      border-bottom: 1px dashed #bec5d5;
+      line-height: 36px;
+      .name {
+        font-weight: 700;
+        color: #3753c5;
+        font-size: 20px;
+      }
+      .type {
+        display: inline-block;
+        border: 1px solid #6680bb;
+        border-radius: 4px;
+        margin-left: 12px;
+        padding: 4px 6px;
+        line-height: 26px;
+      }
+      .linkUrl {
+        color: #466aff;
+      }
+    }
+    .taskItem {
+      display: flex;
+      justify-content: space-between;
+      border: 1px solid #ffffff;
+      &:hover {
+        box-shadow: 0px 0px 12px rgba(71, 105, 198, 0.4);
+      }
+      .oneLine {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .left {
+        width: 316px;
+        background-image: url("../../img/projectDetailTaskBg.png");
+        background-size: 100% 100%;
+        padding: 18px 20px;
+        color: #25304a;
+        .taskTitle {
+          cursor: pointer;
+          color: #1834a7;
+          font-size: 18px;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+        }
+        .email span {
+          color: #466aff;
+        }
+        .leftWidth {
+          width: 270px;
+        }
+      }
+      .center {
+        width: 450px;
+        text-align: left;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .taskDesc {
+          color: #6b6b6b;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+        }
+        .taskUrl {
+          color: #465474;
+          font-size: 16px;
+          line-height: 28px;
+          margin-bottom: 5px;
+          a {
+            color: #466aff;
+          }
+        }
+        .applyBut {
+          background-color: #466aff;
+          border-color: #466aff;
+          &:hover {
+            background-color: #5d7cff;
+          }
+          &:focus {
+            background-color: #1140ff;
+          }
+        }
+        .taskReward {
+          color: #ff8800;
+        }
+      }
+      .right {
+        margin-top: 35px;
+        padding-right: 10px;
+        width: 120px;
+        font-weight: 700;
+        color: #ff8800;
+        font-size: 24px;
+      }
+    }
+  }
+}

src/glcc/openmmlab/projectTab/projectDetail.jsx

@@ -0,0 +1,62 @@
+import React, { useState ,useEffect} from 'react';
+import { Button, message, Tooltip } from 'antd';
+import Nodata from '../../../forge/Nodata';
+import { getProjectById } from '../../api';
+
+export default ({ detail, projectId, applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd }) => {
+  const [info, setInfo] = useState(detail);
+
+  // 申请课题按钮点击函数
+  function applyTask(id){
+    // 判断用户是否已经登录
+    if(current_user && current_user.login){
+      // 判断用户是否已经报名两个课题
+      if(applyTaskId && Object.keys(applyTaskId).length >= 2){
+        message.error('最多只能同时报名两个课题');
+      }else{
+        // 跳转到学生报名页
+        window.location.href=`/glcc/student/apply/${id}`;
+      }
+    }else{
+      showLoginDialog();
+    }
+  }
+
+  useEffect(()=>{
+    if(!detail && projectId){
+      // 通过项目Id查询项目详情
+      getProjectById(projectId).then(response=>{
+        if(response && response.message === 'success'){
+          setInfo(response.data)
+        }
+      })
+    }
+  },[detail])
+
+  return (
+    info ? <div className={`projectDetailBox ${detail ? '':'byTask'}`}>
+      <div className="projectDetailHead">
+        <p>GitLink项目地址:&nbsp;&nbsp;<a href={info.gitlinkUrl} className='linkUrl' target={"_blank"}>{info.gitlinkUrl}</a></p>
+        <div>项目简介:&nbsp;&nbsp;{info.projectIntro}</div>
+      </div>
+      {info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map((item, index)=>{
+        return <div className='taskItem mt15' key={index}>
+          <div className="left">
+            <div className="taskTitle" onClick={()=>{window.location.href=`/glcc/subjects/detail/${item.id}`}}><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
+            <div className='mt15 oneLine leftWidth'>导师姓名: &nbsp;&nbsp;{item.tutorName}</div>
+            {item.tutorMail && <div className='mb15 email oneLine leftWidth'>邮箱地址: &nbsp;&nbsp;<span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
+          </div>
+          <div className="center">
+            <div className="taskDesc">{item.taskDesc}</div>
+            {item.taskUrl && <div className="taskUrl oneLine">课题链接: &nbsp;&nbsp;<a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
+            <div>
+              {(isStudentApplyDate || studentApplyEnd) && (applyTaskId && item.id && Object.keys(applyTaskId).includes(item.id.toString()) ? <Button onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}} className='lookDetail mr10'>报名详情</Button> : isStudentApplyDate && <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>)}
+              <Button onClick={()=>{window.open(`/glcc/subjects/detail/${item.id}`)}} className='lookDetail'>课题详情</Button>
+            </div>
+          </div>
+          <div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
+        </div>
+      }) : <Nodata _html="课题暂无数据" small={true}/>}
+    </div>: <div className="projectDetailBox nodata"><Nodata _html="暂无数据" small={true}/></div>
+  )
+}

src/glcc/openmmlab/teachers/index.jsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import './index.scss';
+
+import teacher1 from '../../img/openmmlab/teacher1.png';
+import teacher2 from '../../img/openmmlab/teacher2.png';
+import teacher3 from '../../img/openmmlab/teacher3.png';
+import teacher4 from '../../img/openmmlab/teacher4.png';
+import teacher5 from '../../img/openmmlab/teacher5.png';
+import teacher6 from '../../img/openmmlab/teacher6.png';
+import teacher7 from '../../img/openmmlab/teacher7.png';
+import teacher8 from '../../img/openmmlab/teacher8.png';
+import teacher9 from '../../img/openmmlab/teacher9.png';
+import teacher10 from '../../img/openmmlab/teacher10.png';
+import teacher11 from '../../img/openmmlab/teacher11.png';
+import teacher12 from '../../img/openmmlab/teacher12.png';
+import teacher13 from '../../img/openmmlab/teacher13.png';
+import teacher14 from '../../img/openmmlab/teacher14.png';
+import teacher15 from '../../img/openmmlab/teacher15.png';
+
+const teacherArr = [
+    {
+        name: '王泰',
+        picture: teacher1,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher2,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher3,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher4,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher5,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher6,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher7,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher8,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher9,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher10,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher11,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher12,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher13,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher14,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+    {
+        name: '王泰',
+        picture: teacher15,
+        introduce: '算法研究员，目前负责 MMDetection3D 算法库的开发和维护。曾在 CoRL, CVPR,等顶级会议上发表多篇论文、在 nuScenes, Lyft 等竞赛中多次获奖。',
+        project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
+    },
+];
+
+function Teachers({ list, history }) {
+
+
+    return (
+        <div className="teachers_content clearfix">
+            {
+                teacherArr.map((item,i) => {
+                    return <div className="teacher_item" key={i}>
+                        <img className="teacher_picture" src={item.picture}/>
+                    </div>
+                })
+            }
+        </div>
+    )
+}
+export default Teachers;
+

src/glcc/openmmlab/teachers/index.scss

@@ -0,0 +1,17 @@
+.teachers_content{
+   width: 1200px ;
+   margin:0 auto; 
+   .teacher_item{
+       width: 289px;
+       height: 300px;
+       float: left;
+       margin-right: 14.5px;
+       overflow: hidden;
+   }
+   .teacher_item:nth-child(4n){
+    margin-right: 0;
+   }
+   .teacher_picture{
+       width: 100%;
+   }
+}