diff --git a/src/glcc/fetch.js b/src/glcc/fetch.js index 4f1f4d7c..e6bdcc80 100644 --- a/src/glcc/fetch.js +++ b/src/glcc/fetch.js @@ -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); diff --git a/src/glcc/home/index.jsx b/src/glcc/home/index.jsx index 13ad23f5..4717ce06 100644 --- a/src/glcc/home/index.jsx +++ b/src/glcc/home/index.jsx @@ -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) => {
GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。
+ {/* 活动特邀合作单位 */} +
+
+ + 活动特邀合作单位 openMMlab +
+
+
+
OpenMMLab是深度学习时代最完整的计算机视觉开源算法体系。自开源以来，累计发布了超过20个算法库，有超过300个算法2300多个预训练模型。所有算法均具备风格统一、模型丰富、质量高、易复现等特点。在社区生态上，OpenMMLab一直秉持开放、认真、持续成长的原则，积极推动社区建设发展
+
+
diff --git a/src/glcc/home/index.scss b/src/glcc/home/index.scss index f9cd5ef2..3b70fbd8 100644 --- a/src/glcc/home/index.scss +++ b/src/glcc/home/index.scss @@ -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:.9; + 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%); + } + } +} \ No newline at end of file diff --git a/src/glcc/img/contact_bg.png b/src/glcc/img/contact_bg.png index edcbc6d1..5c1c24ab 100644 Binary files a/src/glcc/img/contact_bg.png and b/src/glcc/img/contact_bg.png differ diff --git a/src/glcc/img/help_bg.png b/src/glcc/img/help_bg.png index f3d1c016..48b440ce 100644 Binary files a/src/glcc/img/help_bg.png and b/src/glcc/img/help_bg.png differ diff --git a/src/glcc/img/introduce-bg.png b/src/glcc/img/introduce-bg.png index 380eaf0e..a0a88bf3 100644 Binary files a/src/glcc/img/introduce-bg.png and b/src/glcc/img/introduce-bg.png differ diff --git a/src/glcc/img/introduce.png b/src/glcc/img/introduce.png index 43c007dd..9ed50dcc 100644 Binary files a/src/glcc/img/introduce.png and b/src/glcc/img/introduce.png differ diff --git a/src/glcc/img/lightspot-bg.png b/src/glcc/img/lightspot-bg.png index c7fd56c0..8f7d69b3 100644 Binary files a/src/glcc/img/lightspot-bg.png and b/src/glcc/img/lightspot-bg.png differ diff --git a/src/glcc/img/openmmlab/butBg.png b/src/glcc/img/openmmlab/butBg.png new file mode 100644 index 00000000..7ad84603 Binary files /dev/null and b/src/glcc/img/openmmlab/butBg.png differ diff --git a/src/glcc/img/openmmlab/logo.png b/src/glcc/img/openmmlab/logo.png new file mode 100644 index 00000000..4560ad9b Binary files /dev/null and b/src/glcc/img/openmmlab/logo.png differ diff --git a/src/glcc/img/openmmlab/logo1.png b/src/glcc/img/openmmlab/logo1.png new file mode 100644 index 00000000..6d6bfddd Binary files /dev/null and b/src/glcc/img/openmmlab/logo1.png differ diff --git a/src/glcc/img/openmmlab/pointBg.png b/src/glcc/img/openmmlab/pointBg.png new file mode 100644 index 00000000..fc5a4bb8 Binary files /dev/null and b/src/glcc/img/openmmlab/pointBg.png differ diff --git a/src/glcc/img/openmmlab/tab.png b/src/glcc/img/openmmlab/tab.png new file mode 100644 index 00000000..a30b0cd2 Binary files /dev/null and b/src/glcc/img/openmmlab/tab.png differ diff --git a/src/glcc/img/openmmlab/tabBackground.png b/src/glcc/img/openmmlab/tabBackground.png new file mode 100644 index 00000000..ca84f7c5 Binary files /dev/null and b/src/glcc/img/openmmlab/tabBackground.png differ diff --git a/src/glcc/img/openmmlab/teacher1.png b/src/glcc/img/openmmlab/teacher1.png new file mode 100644 index 00000000..b7d98920 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher1.png differ diff --git a/src/glcc/img/openmmlab/teacher10.png b/src/glcc/img/openmmlab/teacher10.png new file mode 100644 index 00000000..9219d84f Binary files /dev/null and b/src/glcc/img/openmmlab/teacher10.png differ diff --git a/src/glcc/img/openmmlab/teacher11.png b/src/glcc/img/openmmlab/teacher11.png new file mode 100644 index 00000000..6ce3bf48 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher11.png differ diff --git a/src/glcc/img/openmmlab/teacher12.png b/src/glcc/img/openmmlab/teacher12.png new file mode 100644 index 00000000..3562b348 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher12.png differ diff --git a/src/glcc/img/openmmlab/teacher13.png b/src/glcc/img/openmmlab/teacher13.png new file mode 100644 index 00000000..8bae87dc Binary files /dev/null and b/src/glcc/img/openmmlab/teacher13.png differ diff --git a/src/glcc/img/openmmlab/teacher14.png b/src/glcc/img/openmmlab/teacher14.png new file mode 100644 index 00000000..069c7fba Binary files /dev/null and b/src/glcc/img/openmmlab/teacher14.png differ diff --git a/src/glcc/img/openmmlab/teacher15.png b/src/glcc/img/openmmlab/teacher15.png new file mode 100644 index 00000000..97a785d1 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher15.png differ diff --git a/src/glcc/img/openmmlab/teacher2.png b/src/glcc/img/openmmlab/teacher2.png new file mode 100644 index 00000000..f0f77ce2 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher2.png differ diff --git a/src/glcc/img/openmmlab/teacher3.png b/src/glcc/img/openmmlab/teacher3.png new file mode 100644 index 00000000..c1c79ed5 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher3.png differ diff --git a/src/glcc/img/openmmlab/teacher4.png b/src/glcc/img/openmmlab/teacher4.png new file mode 100644 index 00000000..81f8668f Binary files /dev/null and b/src/glcc/img/openmmlab/teacher4.png differ diff --git a/src/glcc/img/openmmlab/teacher5.png b/src/glcc/img/openmmlab/teacher5.png new file mode 100644 index 00000000..17e1de82 Binary files /dev/null and b/src/glcc/img/openmmlab/teacher5.png differ diff --git a/src/glcc/img/openmmlab/teacher6.png b/src/glcc/img/openmmlab/teacher6.png new file mode 100644 index 00000000..58bef74f Binary files /dev/null and b/src/glcc/img/openmmlab/teacher6.png differ diff --git a/src/glcc/img/openmmlab/teacher7.png b/src/glcc/img/openmmlab/teacher7.png new file mode 100644 index 00000000..0943c06a Binary files /dev/null and b/src/glcc/img/openmmlab/teacher7.png differ diff --git a/src/glcc/img/openmmlab/teacher8.png b/src/glcc/img/openmmlab/teacher8.png new file mode 100644 index 00000000..26a2848e Binary files /dev/null and b/src/glcc/img/openmmlab/teacher8.png differ diff --git a/src/glcc/img/openmmlab/teacher9.png b/src/glcc/img/openmmlab/teacher9.png new file mode 100644 index 00000000..c7dd72fe Binary files /dev/null and b/src/glcc/img/openmmlab/teacher9.png differ diff --git a/src/glcc/img/studentProject.png b/src/glcc/img/studentProject.png index 45539509..6b73cf5b 100644 Binary files a/src/glcc/img/studentProject.png and b/src/glcc/img/studentProject.png differ diff --git a/src/glcc/img/teacher-img.png b/src/glcc/img/teacher-img.png index 193f53b0..c0e96a81 100644 Binary files a/src/glcc/img/teacher-img.png and b/src/glcc/img/teacher-img.png differ diff --git a/src/glcc/img/time-bg.png b/src/glcc/img/time-bg.png index 9873945c..db05593b 100644 Binary files a/src/glcc/img/time-bg.png and b/src/glcc/img/time-bg.png differ diff --git a/src/glcc/index.jsx b/src/glcc/index.jsx index 4ecd5139..e4e8fc32 100644 --- a/src/glcc/index.jsx +++ b/src/glcc/index.jsx @@ -142,7 +142,7 @@ const Glcc = (propsF) => { )} > - {/* 项目/课题列表 */} + {/* openmmlab列表 */} ( diff --git a/src/glcc/openmmlab/index.jsx b/src/glcc/openmmlab/index.jsx index 5274ef49..4945c030 100644 --- a/src/glcc/openmmlab/index.jsx +++ b/src/glcc/openmmlab/index.jsx @@ -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 ( -
- - +
+ +
+
+ +

深度学习时代最完整的计算机视觉开源算法体系

+
+ +
+
+ +
+
+ +
+
+
+ +
项目精选
+ + +
+
+ 导师一览 +
+ +
) } diff --git a/src/glcc/openmmlab/index.scss b/src/glcc/openmmlab/index.scss index 89d55bdd..eb51d03e 100644 --- a/src/glcc/openmmlab/index.scss +++ b/src/glcc/openmmlab/index.scss @@ -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; - } - } \ No newline at end of file + + .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; +} diff --git a/src/glcc/openmmlab/projectTab/index.jsx b/src/glcc/openmmlab/projectTab/index.jsx new file mode 100644 index 00000000..c707ed8f --- /dev/null +++ b/src/glcc/openmmlab/projectTab/index.jsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState, Fragment } from 'react'; +import { Tabs } from 'antd'; +import ProjectDetail from './projectDetail'; + +import './index.scss'; +const $ = window.$; +const { TabPane } = Tabs; + + +function ProjectTabs({ list, applyTaskId, history, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd }) { + + useEffect(()=>{ + setTimeout(()=>{ + $('.glcc_openmmlab .ant-tabs-tab').hover((e)=>{ + e.currentTarget.click(); + },(e)=>{ + }); + },1000) + + },[]) + + return ( + + { + list.map((item, i) => { + return +
{item.projectName && item.projectName.split('-')[1]}
+
{item.projectType}
} + key={i + ''} > +
+
+ +
+
+ + + }) + } + + ) +} +export default ProjectTabs; + diff --git a/src/glcc/openmmlab/projectTab/index.scss b/src/glcc/openmmlab/projectTab/index.scss new file mode 100644 index 00000000..28951c69 --- /dev/null +++ b/src/glcc/openmmlab/projectTab/index.scss @@ -0,0 +1,220 @@ +.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: -8px; + } + .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 { + opacity: .8; + 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 { + background: rgba(255,255,255,.8); + .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; + background: rgba(255,255,255,.8); + &: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; + } + } + } +} diff --git a/src/glcc/openmmlab/projectTab/projectDetail.jsx b/src/glcc/openmmlab/projectTab/projectDetail.jsx new file mode 100644 index 00000000..206bef69 --- /dev/null +++ b/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 ?
+
+

GitLink项目地址:  {info.gitlinkUrl}

+
项目简介:  {info.projectIntro}
+
+ {info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map((item, index)=>{ + return
+
+
{window.location.href=`/glcc/subjects/detail/${item.id}`}}>{item.taskName}
+
导师姓名:   {item.tutorName}
+ {item.tutorMail &&
邮箱地址:   {item.tutorMail}
} +
+
+
{item.taskDesc}
+ {item.taskUrl &&
课题链接:   {item.taskUrl}
} +
+ {(isStudentApplyDate || studentApplyEnd) && (applyTaskId && item.id && Object.keys(applyTaskId).includes(item.id.toString()) ? : isStudentApplyDate && )} + +
+
+
￥{item.taskReward}
+
+ }) : } +
:
+ ) +} \ No newline at end of file diff --git a/src/glcc/openmmlab/sliderLeft/index.jsx b/src/glcc/openmmlab/sliderLeft/index.jsx new file mode 100644 index 00000000..608dbd5f --- /dev/null +++ b/src/glcc/openmmlab/sliderLeft/index.jsx @@ -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 ( + + {arithmeticArr.map(item => { + return
+
+ {item.type == 'img' && } + {item.type == 'mp4' && } + + { + item.name === 'MMClassification' &&
+
40+预训练模型
+
主流数据集支持
+
丰富的训练技巧与策略
+
+ } + + { + item.name === 'MMDetection3D算法演示' &&
+
7 个数据集
+
17 种不同算法
+
80+ 个预训练模型
+
+ } +
+
+ {item.name} +
+
+ {item.describe} +
+
+ })} + + ) +} +export default SliderLeft; + diff --git a/src/glcc/openmmlab/sliderLeft/index.scss b/src/glcc/openmmlab/sliderLeft/index.scss new file mode 100644 index 00000000..61d1ca10 --- /dev/null +++ b/src/glcc/openmmlab/sliderLeft/index.scss @@ -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; + } +} diff --git a/src/glcc/openmmlab/sliderRight/index.jsx b/src/glcc/openmmlab/sliderRight/index.jsx new file mode 100644 index 00000000..6f78cc4b --- /dev/null +++ b/src/glcc/openmmlab/sliderRight/index.jsx @@ -0,0 +1,51 @@ +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: 5000, + 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,'-')} + // }) + window.open(`/glcc/projects?projectName=${projectName}`); + } + + return ( + + { + list && list.map((item, i) => { + return ( +
+
+

{ goDetail(item.projectName) }}>{item.projectName}

+ {/* {item.projectType} */} +
+

{item.projectIntro}

+ {goDetail(item.projectName)}}>查看详情 +
+ ) + }) + } + + ) +} +export default SliderLeft; + diff --git a/src/glcc/openmmlab/sliderRight/index.scss b/src/glcc/openmmlab/sliderRight/index.scss new file mode 100644 index 00000000..0d89422b --- /dev/null +++ b/src/glcc/openmmlab/sliderRight/index.scss @@ -0,0 +1,78 @@ +.slider_right { + width: 390px; + height: 520px; + overflow: hidden; + .slick-track > div { + 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; + } +} diff --git a/src/glcc/openmmlab/teachers/index.jsx b/src/glcc/openmmlab/teachers/index.jsx new file mode 100644 index 00000000..0889524e --- /dev/null +++ b/src/glcc/openmmlab/teachers/index.jsx @@ -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 ( +
+ { + teacherArr.map((item,i) => { + return
+ +
+
{item.name}
+
{item.introduce}
+
+
{item.project}
+
+ }) + } +
+ ) +} +export default Teachers; + diff --git a/src/glcc/openmmlab/teachers/index.scss b/src/glcc/openmmlab/teachers/index.scss new file mode 100644 index 00000000..f27bc3b7 --- /dev/null +++ b/src/glcc/openmmlab/teachers/index.scss @@ -0,0 +1,64 @@ +.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; + } + } + } + .teacher_item:nth-child(4n) { + margin-right: 0; + } + .teacher_picture { + width: 100%; + &:hover~.showBox{ + display: none; + } + &:hover~.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; + } + } + .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; + } +} diff --git a/src/glcc/project/projectList/index.jsx b/src/glcc/project/projectList/index.jsx index a486cf97..13134d32 100644 --- a/src/glcc/project/projectList/index.jsx +++ b/src/glcc/project/projectList/index.jsx @@ -6,14 +6,11 @@ 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}) { - - console.log(location.pathname); - let openmmlab = location.pathname.indexOf('glcc/openmmlab')>-1; +function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, location,history}) { + let openmmlab =location.search&&location.search.split('=')[1]; // 输入搜索框 const [keyword, setKeyword] = useState(openmmlab?'openmmlab':undefined); const [data, setData] = useState([]); @@ -29,6 +26,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 +40,12 @@ function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApply return(
-
{openmmlab?'':{setKeyword(value)}}/>}
+
{setKeyword(value)}}/>
{data && data.map((item, index)=>{ return } trigger='click' overlayClassName='projectItemPopover' autoAdjustOverflow={false}> -
+
{item.projectName}
diff --git a/src/glcc/student/index.jsx b/src/glcc/student/index.jsx index 83acdba4..fdb47d7c 100644 --- a/src/glcc/student/index.jsx +++ b/src/glcc/student/index.jsx @@ -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);