forked from Gitlink/forgeplus-react
Merge branch 'feature_GLCC' of http://106.75.45.236:3000/tongChong/forgeplus-react into feature_IDE
This commit is contained in:
何童崇
commit
cef85e5ebe
|
|
@ -1,6 +1,6 @@
|
|||
import javaFetch from '../forge/javaFetch';
|
||||
|
||||
let settings = JSON.parse(localStorage.chromesetting);
|
||||
let settings = localStorage.chromesetting&&JSON.parse(localStorage.chromesetting);
|
||||
let actionUrl = settings && settings.common.glcc;
|
||||
|
||||
const service = javaFetch(actionUrl);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import introduce from "../img/introduce.png";
|
|||
import apply1 from "../img/apply1.png";
|
||||
import apply2 from "../img/apply2.png";
|
||||
import teacher from "../img/teacher.png";
|
||||
import logo from "../img/openmmlab/logo1.png";
|
||||
import { hasAuditRole } from '../api';
|
||||
import './index.scss';
|
||||
|
||||
|
|
@ -102,6 +103,17 @@ export default (props) => {
|
|||
<div className="introduce-content">GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。</div>
|
||||
<img src={introduce} alt="" className="introduceImg" />
|
||||
</div>
|
||||
{/* 活动特邀合作单位 */}
|
||||
<div className="openMMlabBox">
|
||||
<div className="logoTitle">
|
||||
<img src={logo} alt="" className="logo"/>
|
||||
<span className="title">活动特邀合作单位 openMMlab</span>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="intro">OpenMMLab是深度学习时代最完整的计算机视觉开源算法体系。自开源以来，累计发布了超过20个算法库，有超过300个算法2300多个预训练模型。所有算法均具备风格统一、模型丰富、质量高、易复现等特点。在社区生态上，OpenMMLab一直秉持开放、认真、持续成长的原则，积极推动社区建设发展</div>
|
||||
<div className="goToButBox"><button className="goToBut" onClick={()=>{window.location.href='/glcc/openmmlab'}}>查看详情</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Lightspot isGlccApplyDate={isGlccApplyDate} current_user={current_user} showNotification={showNotification} studentApplyStart={studentApplyStart} />
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@
|
|||
// padding: 48px;
|
||||
min-height: 500px;
|
||||
background-image:linear-gradient(132.67deg,#e5ecff 0%,#e0e9ff 53.13%,#fbfcff 100%);
|
||||
padding-bottom: 80px;
|
||||
.glcc-tit {
|
||||
margin-bottom: 60px !important;
|
||||
}
|
||||
|
|
@ -189,3 +190,46 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.openMMlabBox{
|
||||
margin-right: 30px;
|
||||
padding: 25px 20px 30px 40px;
|
||||
background-image:linear-gradient(183.03deg,#032495 0%,#102a82 14.65%,#203788 47.7%,#4a56c2 100%);
|
||||
.logoTitle{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo{
|
||||
width: 155px;
|
||||
}
|
||||
.title{
|
||||
font-weight:500;
|
||||
color:#ffffff;
|
||||
font-size:28px;
|
||||
}
|
||||
.intro{
|
||||
opacity:90%;
|
||||
font-weight:500;
|
||||
color:#ffffff;
|
||||
font-size:15px;
|
||||
margin: 30px 0;
|
||||
line-height:34px;
|
||||
}
|
||||
.goToButBox{
|
||||
text-align: center;
|
||||
}
|
||||
.goToBut{
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
background-color: #DEE6FF;
|
||||
border:1px solid #ffffff;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 0px 6px rgba(255, 255, 255, 0.73);
|
||||
color:#1140ff;
|
||||
font-size:16px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-image:linear-gradient(90deg,#ffffff 0%,#eef4ff 51.04%,#ffffff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
|
|
@ -142,7 +142,7 @@ const Glcc = (propsF) => {
|
|||
)}
|
||||
></Route>
|
||||
|
||||
{/* 项目/课题列表 */}
|
||||
{/* openmmlab列表 */}
|
||||
<Route
|
||||
path="/glcc/openmmlab"
|
||||
render={(props) => (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
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/388003',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMPose算法演示",
|
||||
describe: "MMPose 是 OpenMMLab 中的姿态估计算法库，目前已经支持了近 30 个算法和 300+ 预训练模型，涵盖了人体、人脸、人手、动物等多类目标的姿态估计。秉承 OpenMMLab 系列的结构化框架设计，MMPose 很适合作为算法复现和创新的平台",
|
||||
// source: 'https://www.gitlink.org.cn/preview/d2d62f65d08a22bcc257c5a24cf750fa_1654781749389.mp4',
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387956.mp4',
|
||||
type: 'mp4',
|
||||
img: 'https://www.gitlink.org.cn/api/attachments/388006'
|
||||
},
|
||||
{
|
||||
name: "MMMOCR算法演示",
|
||||
describe: "MMOCR 作为 OpenMMLab 家族的一员，支持众多 OCR 相关的模型，涵盖了文本检测、文本识别以及关键信息提取等多个主要方向。通过在 MMOCR 中复现相关算法，你将可以了解到 OCR 领域的前沿知识，熟练掌握 MM 系列框架的整体流程，并积累深度学习相关的学术及工程经验",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/388005',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMGeneration算法演示",
|
||||
describe: "MMGeneration 是一个图像和视频生成算法库，支持多种生成模型如图像生成，条件生成，图像转换的训练和测试，同时也提供了丰富的应用",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387955',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMRotate算法演示",
|
||||
describe: "MMRotate 是 OpenMMLab 中基于 PyTorch 的旋转框目标检测工具箱。目前支持了旋转框检测领域主流的数据集和 SOTA 算法",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387957',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMDetection3D算法演示",
|
||||
describe: "MMDetection3D 是 OpenMMLab 中的通用 3D 感知算法平台，目前已经支持了室内外多个主流数据集的单模态/多模态 3D 检测和点云分割算法。同时 MMDetection3D 可以无缝使用 MMDetection 中的所有组件，为多模态感知提供了丰富的基础模块",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387953',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMEditing算法演示",
|
||||
describe: "MMEditing是面向底层视觉工具箱，集成了超分辨率、视频插帧、补图、抠图等方向大量SOTA模型，且持续吸纳新的底层视觉模型",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/388004',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMFlow算法演示",
|
||||
describe: "MMFlow是一款基于 PyTorch 和 MMCV 的光流估计开源工具箱，提供了多个 SOTA 光流估计算法，并支持光流领域主流学术数据集，以及光流可视化和评估方法",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387954',
|
||||
type: 'img',
|
||||
},
|
||||
{
|
||||
name: "MMClassification",
|
||||
describe: "MMClassification 是一款基于 PyTorch 的开源图像分类工具箱，丰富的模型库支持40+预训练模型、主流数据集支持及丰富的训练技巧与策略",
|
||||
source: 'https://www.gitlink.org.cn/api/attachments/387952',
|
||||
type: 'img',
|
||||
},
|
||||
];
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
dots: true,
|
||||
speed: 750,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 10000,
|
||||
// pauseOnFocus: true,
|
||||
centerMode: true,
|
||||
centerPadding: "0px",
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
}
|
||||
function SliderLeft() {
|
||||
|
||||
return (
|
||||
<Slider {...setting}>
|
||||
{arithmeticArr.map(item => {
|
||||
return <div className="slider_content" key={item.name}>
|
||||
<div className={`slider_img ${item.name.split('算法演示')[0]}`} >
|
||||
{item.type == 'img' && <img src={item.source} />}
|
||||
{item.type == 'mp4' && <video className="introduce-video" src={item.source} poster={item.img} autoPlay loop muted>您的浏览器不支持 video 标签。</video>}
|
||||
|
||||
{
|
||||
item.name === 'MMClassification' && <div className="point">
|
||||
<div className="point_item">40+预训练模型</div>
|
||||
<div className="point_item">主流数据集支持</div>
|
||||
<div className="point_item">丰富的训练技巧与策略</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
item.name === 'MMDetection3D算法演示' && <div className="point">
|
||||
<div className="point_item">7 个数据集</div>
|
||||
<div className="point_item">17 种不同算法</div>
|
||||
<div className="point_item">80+ 个预训练模型</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="slider_tit ellipsis-1">
|
||||
{item.name}
|
||||
</div>
|
||||
<div className="slider_content">
|
||||
{item.describe}
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</Slider>
|
||||
)
|
||||
}
|
||||
export default SliderLeft;
|
||||
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
.slider_left {
|
||||
position: relative;
|
||||
|
||||
.slider_content {
|
||||
color: #3a4965;
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
height: 679px;
|
||||
display: flex;
|
||||
.slick-slide {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.slick-slider {
|
||||
.slick-dots {
|
||||
width: 100%;
|
||||
bottom: -24px;
|
||||
left:0;
|
||||
position: absolute;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
li {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
height: 3px;
|
||||
width: 37px;
|
||||
margin-right: 15px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 0px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
transition: 0.75s;
|
||||
transition-property: width;
|
||||
}
|
||||
&.slick-active::after {
|
||||
background-color: #466aff;
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
left: 0px;
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_img {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 350px;
|
||||
padding:1px;
|
||||
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;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.introduce-video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
// max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.MMDetection3D,.MMClassification {
|
||||
padding:30px 0;
|
||||
justify-content: space-around;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
.point{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.point_item {
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
// background-image: url('../../img/openmmlab/pointBg.png');
|
||||
// background-size: 100% 100%;
|
||||
|
||||
width: 192px;
|
||||
height: 54px;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
#e4f4ff 0%,
|
||||
#c4d9ff 50.63%,
|
||||
#ffffff 100%
|
||||
);
|
||||
border: 1px solid;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.MMDetection3D {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.slider_tit {
|
||||
margin: 14px 0;
|
||||
font-weight: 500;
|
||||
color: #0f141d;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import './index.scss';
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
speed: 750,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 2000,
|
||||
centerMode: true,
|
||||
centerPadding: "",
|
||||
// pauseOnFocus: true,
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
vertical: true,
|
||||
}
|
||||
|
||||
function SliderLeft({list,history}) {
|
||||
|
||||
|
||||
function goDetail(projectName){
|
||||
history.push({
|
||||
pathname:'/glcc/projects',
|
||||
state:{projectName:projectName.replace(/ /g,'-')}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Slider {...setting}>
|
||||
{
|
||||
list && list.map((item, i) => {
|
||||
return (
|
||||
<div className="news-slide-item" key={i}>
|
||||
<div className="slide-title" >
|
||||
<h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.projectName) }}>{item.projectName}</h3>
|
||||
{/* <span className="slide-tag">{item.projectType}</span> */}
|
||||
</div>
|
||||
<p className="ellipsis-2">{item.projectIntro}</p>
|
||||
<span className="project_more" onClick={()=>{goDetail(item.projectName)}}>查看详情<i className="iconfont font-12 icon-xiangyoujiantou"></i></span>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Slider>
|
||||
)
|
||||
}
|
||||
export default SliderLeft;
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
.slider_right {
|
||||
width: 390px;
|
||||
height: 520px;
|
||||
overflow: hidden;
|
||||
.slick-track > div {
|
||||
max-width: 83.3%;
|
||||
position: relative;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
// .slick-center{
|
||||
// margin:5px 0;
|
||||
// }
|
||||
.news-slide-item {
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
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 #ffffff;
|
||||
box-shadow: 0px 0px 8px rgba(132, 160, 255, 0.19);
|
||||
margin-bottom: 11px;
|
||||
padding: 1.25em 1.8em 1.6em;
|
||||
border-radius: 0.3em;
|
||||
box-sizing: border-box;
|
||||
.slide-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slide-title-content {
|
||||
color: #000870;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0 !important;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.project_more {
|
||||
font-weight: 500;
|
||||
color: #1140ff;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
opacity: .85;
|
||||
}
|
||||
.iconfont{
|
||||
font-weight: 600;
|
||||
margin-left:16px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .75em 0 !important;
|
||||
color: #3c476e;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
// .slick-center {
|
||||
// margin-left: 100px;
|
||||
// }
|
||||
|
||||
.slick-slide:nth-child(n) .slide-tag {
|
||||
background: #586dff;
|
||||
}
|
||||
|
||||
.slick-slide:nth-child(2n) .slide-tag {
|
||||
background: #e53939;
|
||||
}
|
||||
|
||||
.slick-slide:nth-child(3n) .slide-tag {
|
||||
background: #ff7300;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,62 @@
|
|||
import React from 'react';
|
||||
import banner from "../img/studentProject.png";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import logo from "../img/openmmlab/logo.png";
|
||||
import SliderLeft from './sliderLeft';
|
||||
import SliderRight from './sliderRight';
|
||||
import ProjectTabs from './projectTab';
|
||||
import Teachers from './teachers';
|
||||
import { projectList } from '../api';
|
||||
|
||||
import './index.scss';
|
||||
import { useEffect } from 'react';
|
||||
import ProjectList from '../project/projectList';
|
||||
|
||||
|
||||
|
||||
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_project">
|
||||
<img className="glcc-banner" src={banner} alt=''></img>
|
||||
<ProjectList {...props} />
|
||||
<div className="glcc_openmmlab">
|
||||
|
||||
<div className="first_selection">
|
||||
<div className="openmmlab_head">
|
||||
<img className="openmmlab_logo" src={logo} alt=''></img>
|
||||
<p className="openmmlab_des">深度学习时代最完整的计算机视觉开源算法体系</p>
|
||||
</div>
|
||||
|
||||
<div className="openmmlab_slider openmmlab_main">
|
||||
<div className="slider_left">
|
||||
<SliderLeft />
|
||||
</div>
|
||||
<div className="slider_right">
|
||||
<SliderRight list={list} {...props}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="openmmlab_title">项目精选</div>
|
||||
<ProjectTabs {...props} list={list} />
|
||||
|
||||
<div className="teachers">
|
||||
<div className="teachers_tit">
|
||||
导师一览
|
||||
</div>
|
||||
<Teachers />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,223 +1,101 @@
|
|||
.glcc_project{
|
||||
background-color: #ebf2ff;
|
||||
.head{
|
||||
background-color:rgba(188, 208, 255, 0.27);
|
||||
border:1px solid #ffffff;
|
||||
text-align: center;
|
||||
a{
|
||||
padding: 18px 20px 20px;
|
||||
display: inline-block;
|
||||
color: #273778;
|
||||
font-size: 18px;
|
||||
font-weight:700;
|
||||
line-height: 30px;
|
||||
&.active{
|
||||
border-bottom: 1px solid #5474df;;
|
||||
}
|
||||
&:last-child{
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gobackBox{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0 12px;
|
||||
color: #202d40;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px dashed #bec5d5;
|
||||
a{
|
||||
color:#a4aabb;
|
||||
}
|
||||
}
|
||||
.listBox{
|
||||
background-image:linear-gradient(180deg,#ebf2ff 0%,#ebf2ff 43.09%,#f3f4f8 100%);
|
||||
position: relative;
|
||||
.list{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.search{
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0 40px;
|
||||
&.task{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.ant-input-group-wrapper{width: 40%;}
|
||||
}
|
||||
}
|
||||
.search .ant-btn, .search .ant-input{
|
||||
height: 48px;
|
||||
}
|
||||
.search .ant-btn{font-size: 30px;}
|
||||
.search .ant-input{
|
||||
font-size: 16px;
|
||||
border-color: #ebf2ff;
|
||||
&:hover{
|
||||
border-color: #466aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
.ant-btn-primary{
|
||||
background-color:#466aff;
|
||||
border-color: #466aff;
|
||||
}
|
||||
}
|
||||
.bgPng3, .bgPng4{
|
||||
width: 146px;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 162px;
|
||||
left: 100px;
|
||||
}
|
||||
.bgPng4{
|
||||
top: 450px;
|
||||
left: auto;
|
||||
right: 310px;
|
||||
}
|
||||
}
|
||||
.glcc_openmmlab {
|
||||
font-family: PingFang SC;
|
||||
|
||||
.first_selection {
|
||||
// height: 742px;
|
||||
padding: 8px 0 63px;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
#e5e7fc 0%,
|
||||
#f5f7fa 47.28%,
|
||||
#d4daec 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.glcc-banner {
|
||||
width: 100%;
|
||||
|
||||
.openmmlab_head {
|
||||
text-align: center;
|
||||
margin: 8px auto 20px;
|
||||
}
|
||||
// 项目详情框
|
||||
.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: 640px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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: 22px 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: 665px;
|
||||
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: 3;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
.openmmlab_logo {
|
||||
width: 287px;
|
||||
}
|
||||
.projectItemPopover{
|
||||
.openmmlab_des {
|
||||
font-weight: 500;
|
||||
color: #4a5a7a;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.openmmlab_main {
|
||||
width: 1200px;
|
||||
.ant-popover-content .ant-popover-arrow{
|
||||
border-width: 12px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
}
|
||||
.projectItemPopover .ant-popover-inner{
|
||||
transform: translateY(8px);
|
||||
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);
|
||||
.ant-popover-inner-content{
|
||||
padding: 30px 30px 50px;
|
||||
}
|
||||
|
||||
.openmmlab_slider {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.lookDetail{
|
||||
border-color: #466aff;
|
||||
color: #466aff;
|
||||
&:hover{
|
||||
border-color: #5d7cff;
|
||||
color: #5d7cff;
|
||||
}
|
||||
&:focus{
|
||||
border-color: #1140ff;
|
||||
color: #1140ff;
|
||||
}
|
||||
}
|
||||
|
||||
.slider_left {
|
||||
width: 766px;
|
||||
height: 520px;
|
||||
background-image: linear-gradient(180deg, #edf1f8 0%, #f9fbff 100%);
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 8px rgba(138, 168, 227, 0.21);
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
.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);
|
||||
background-image: url('../../img/openmmlab/tabBackground.png') ;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 项目详情框
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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项目地址: <a href={info.gitlinkUrl} className='linkUrl' target={"_blank"}>{info.gitlinkUrl}</a></p>
|
||||
<div>项目简介: {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'>导师姓名: {item.tutorName}</div>
|
||||
{item.tutorMail && <div className='mb15 email oneLine leftWidth'>邮箱地址: <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">课题链接: <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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import React 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: '基于 MMDetection3D，支持轻量化3D感知模型的部署与应用',
|
||||
},
|
||||
{
|
||||
name: '张士龙',
|
||||
picture: teacher2,
|
||||
introduce: '算法研究员，目前负责MMDetection、MMCV、MMFewshot 的开发与维护,擅长 Object Detection，在 CVPR，ICML发表过相关论文',
|
||||
project: '基于MMDetection, 探究 Transformer 在 Object Detection 中的应用',
|
||||
},
|
||||
{
|
||||
name: '孔焕军',
|
||||
picture: teacher3,
|
||||
introduce: '算法研究员，目前主要负责 MMDeploy 部署算法库的开发和维护。擅长降低技术入门难度，分享过一系列入门文档\n',
|
||||
project: '基于 MMDeploy，实现猫猫识别',
|
||||
},
|
||||
{
|
||||
name: '高桐',
|
||||
picture: teacher4,
|
||||
introduce: '算法研究员，目前主要负责 MMOCR 算法库的开发和维护。曾在 ICLR 等会议发表相关论文\n',
|
||||
project: '基于 MMOCR，实现前沿 OCR 算法',
|
||||
},
|
||||
{
|
||||
name: '余朝晖',
|
||||
picture: teacher5,
|
||||
introduce: '算法研究员，主要负责 MMClassification 算法库的开发和维护',
|
||||
project: '基于 MMCLS，实现 Google-landmark 数据集上的图像检索功能',
|
||||
},
|
||||
{
|
||||
name: '郑淼',
|
||||
picture: teacher6,
|
||||
introduce: '算法研究员，主要负责 MMFlow 和 MMSegmentation 算法库的开发和维护',
|
||||
project: '基于MMFlow，实现 flow1d 算法（ICCV 2021 oral）',
|
||||
},
|
||||
{
|
||||
name: '刘奎坤',
|
||||
picture: teacher7,
|
||||
introduce: '算法研究员，主要负责 MMOCR 算法库的开发和维护',
|
||||
project: '基于 MMOCR，实现前沿 OCR 算法',
|
||||
},
|
||||
{
|
||||
name: '胡木',
|
||||
picture: teacher8,
|
||||
introduce: '算法研究员，主要负责 MMRazor 算法库的开发和维护',
|
||||
project: '基于MMRazor，实现AdaRound量化算法',
|
||||
},
|
||||
{
|
||||
name: '杨逸飞',
|
||||
picture: teacher9,
|
||||
introduce: '算法研究员，主要负责 MMGeneration 算法库的开发和维护',
|
||||
project: '基于 MMGen，实现Text2Image 生成算法',
|
||||
},
|
||||
{
|
||||
name: '王若晖',
|
||||
picture: teacher10,
|
||||
introduce: '算法研究员，负责 OpenMMLab 课程项目以及 MMEditing 算法库的开发和维护',
|
||||
project: '图像、视频上色工具的构建',
|
||||
},
|
||||
{
|
||||
name: '李亦宁',
|
||||
picture: teacher11,
|
||||
introduce: '算法研究员，目前负责 MMPose 算法库的开发和维护',
|
||||
project: '基于 MMPose 实现前沿姿态估计算法',
|
||||
},
|
||||
{
|
||||
name: '吕成器',
|
||||
picture: teacher12,
|
||||
introduce: '算法研究员，目前负责 MMDetection 开发和维护，知名目标检测算法 NanoDet 作者',
|
||||
project: '基于 MMDetection 实现密集行人检测算法',
|
||||
},
|
||||
{
|
||||
name: '周越',
|
||||
picture: teacher13,
|
||||
introduce: '算法研究员，目前负责 MMDetection 和 MMRotate 算法库的开发和维护',
|
||||
project: '基于 MMRotate，实现前沿的旋转框检测算法',
|
||||
},
|
||||
{
|
||||
name: '方翊箫',
|
||||
picture: teacher14,
|
||||
introduce: '算法研究员，主要负责 MMSelfSup 算法库的开发和维护',
|
||||
project: '基于 MMSelfSup 实现前沿的自监督学习算法以及 Benchmark 评测',
|
||||
},
|
||||
{
|
||||
name: '黄海安',
|
||||
picture: teacher15,
|
||||
introduce: '算法研究员，目前负责 MMDetection 算法库的开发和维护，知乎 ID 深度眸',
|
||||
project: '基于 MMDetection，实现前沿的实例/全景分割算法',
|
||||
},
|
||||
];
|
||||
|
||||
function Teachers() {
|
||||
return (
|
||||
<div className="teachers_content clearfix">
|
||||
{
|
||||
teacherArr.map((item,i) => {
|
||||
return <div className={`teacher_item ${i<4 ? 'maxHeight':''}`} key={i}>
|
||||
<img className="teacher_picture" src={item.picture} alt=''/>
|
||||
<div className='showBox'>
|
||||
<div className='name font-17'>{item.name}</div>
|
||||
<div className='introBox'>{item.introduce}</div>
|
||||
</div>
|
||||
<div className='hoverShow'>{item.project}</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Teachers;
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
.teachers_content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
.teacher_item {
|
||||
width: 289px;
|
||||
height: 350px;
|
||||
float: left;
|
||||
margin-right: 14.5px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #EFF5FF;
|
||||
&.maxHeight{
|
||||
height: 405px;
|
||||
.showBox, .hoverShow{
|
||||
height: 166px;
|
||||
}
|
||||
.hoverShow{
|
||||
bottom: -168px;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.showBox{
|
||||
display: none;
|
||||
}
|
||||
.hoverShow{
|
||||
padding-top: 35px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
transition: all 0.6s;
|
||||
background-image:linear-gradient(90deg,#e4f4ff 0%,#c4d9ff 50.63%,#ffffff 100%);
|
||||
border:1px solid #ffffff;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 0px 6px rgba(255, 255, 255, 0.73);
|
||||
color:#1140ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.teacher_item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.teacher_picture {
|
||||
width: 100%;
|
||||
}
|
||||
.showBox {
|
||||
background-color: #466aff;
|
||||
color: white;
|
||||
.name{
|
||||
text-align: center;
|
||||
}
|
||||
.name,.introBox{
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
.showBox, .hoverShow{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 102px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.hoverShow{
|
||||
// display: none;
|
||||
bottom: -102px;
|
||||
border:1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,14 +6,12 @@ import { projectList } from '../../api';
|
|||
import ProjectDetail from '../component/projectDetail';
|
||||
import bgPng from "../../img/bgPng.png";
|
||||
import logo from "../../img/logo.png";
|
||||
import { indexOf } from 'lodash';
|
||||
const {Search} = Input;
|
||||
|
||||
// 项目列表
|
||||
function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, location}) {
|
||||
function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, location,history}) {
|
||||
|
||||
console.log(location.pathname);
|
||||
let openmmlab = location.pathname.indexOf('glcc/openmmlab')>-1;
|
||||
let openmmlab =location.state&&location.state.projectName;
|
||||
// 输入搜索框
|
||||
const [keyword, setKeyword] = useState(openmmlab?'openmmlab':undefined);
|
||||
const [data, setData] = useState([]);
|
||||
|
|
@ -29,6 +27,12 @@ function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApply
|
|||
projectList(params).then(response=>{
|
||||
if(response && response.message === "success"){
|
||||
setData(response.data.rows);
|
||||
openmmlab&&setTimeout(()=>{
|
||||
let openProject=document.querySelector(`.${openmmlab}`);
|
||||
openProject.click();
|
||||
let height=document.documentElement.clientWidth/1920*500+71+70+100+openProject.offsetTop;
|
||||
window.scrollTo(0, height);
|
||||
},100)
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
|
|
@ -37,12 +41,12 @@ function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApply
|
|||
return(
|
||||
<div className="taskList listBox">
|
||||
<div className="list">
|
||||
<div className='search'>{openmmlab?'':<Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/>}</div>
|
||||
<div className='search'><Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/></div>
|
||||
<Spin spinning={loading}>
|
||||
<div className='projectListBox'>
|
||||
{data && data.map((item, index)=>{
|
||||
return <Popover key={index} placement= {(index+1)%3 === 0 ? 'bottomRight' : (index+1)%3%2 === 0 ? 'bottom' : 'bottomLeft'} content={<ProjectDetail detail={item} applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd}/>} trigger='click' overlayClassName='projectItemPopover' autoAdjustOverflow={false}>
|
||||
<div className={`projectItem ${(index+1)%3 === 0 || (index+1)%3%2 === 0 ? '' : 'firstBox'}`}>
|
||||
<div className={`projectItem ${(index+1)%3 === 0 || (index+1)%3%2 === 0 ? '' : 'firstBox'} ${item.projectName.replace(/ /g,'-')}`}>
|
||||
<div className="border"></div>
|
||||
<div className="projectLogo"><img src={item.projectLogoId ? `${main_site_url}/api/attachments/${item.projectLogoId}` : logo} alt=''/></div>
|
||||
<div className="title">{item.projectName}</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ const gradeList = [
|
|||
{ id: '大五', name: '大五' },
|
||||
{ id: '研一', name: '研一' },
|
||||
{ id: '研二', name: '研二' },
|
||||
{ id: '研三', name: '研三' }];
|
||||
{ id: '研三', name: '研三' },
|
||||
{ id: '博士及以上', name: '博士及以上' }
|
||||
];
|
||||
function Apply(props) {
|
||||
const { form, current_user, showNotification, match, history, setStudentInfoReset } = props;
|
||||
const taskId = Number(match.params.taskId);
|
||||
|
|
|
|||
Loading…
Reference in New Issue