修改glcc专题页

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);

src/glcc/openmmlab/SliderLeft/index.jsx

@@ -7,55 +7,57 @@ const arithmeticArr = [
   {
     name: "MMDetection算法演示",
     describe: "MMDetection 是 OpenMMLab 中的通用目标检测算法平台，目前已经支持了 70+ 算法和 500+ 个预训练模型，支持目标检测、实例分割和全景分割。是 OpenMMLab 算法库中的MMDetection3D 和 MMRotate 的核心依赖，为 MMOCR、MMPose 和 MMTracking 提供了检测组件",
-    source: 'https://www.gitlink.org.cn/api/attachments/387826',
+    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_1654660457842.mp4',
+    // 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: '',
+    source: 'https://www.gitlink.org.cn/api/attachments/388005',
     type: 'img',
   },
   {
     name: "MMGeneration算法演示",
     describe: "MMGeneration 是一个图像和视频生成算法库，支持多种生成模型如图像生成，条件生成，图像转换的训练和测试，同时也提供了丰富的应用",
-    source: 'https://www.gitlink.org.cn/api/attachments/387829',
+    source: 'https://www.gitlink.org.cn/api/attachments/387955',
     type: 'img',
   },
   {
     name: "MMRotate算法演示",
     describe: "MMRotate 是 OpenMMLab 中基于 PyTorch 的旋转框目标检测工具箱。目前支持了旋转框检测领域主流的数据集和 SOTA 算法",
-    source: '',
+    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/387826',
+    source: 'https://www.gitlink.org.cn/api/attachments/387953',
     type: 'img',
   },
   {
     name: "MMEditing算法演示",
     describe: "MMEditing是面向底层视觉工具箱，集成了超分辨率、视频插帧、补图、抠图等方向大量SOTA模型，且持续吸纳新的底层视觉模型",
-    source: '',
+    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/387830',
+    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/387831',
+    source: 'https://www.gitlink.org.cn/api/attachments/387952',
     type: 'img',
   },
 ];
@@ -67,7 +69,7 @@ let setting = {
   slidesToShow: 1,
   slidesToScroll: 1,
   pauseOnDotsHover: true,
-  autoplaySpeed: 5000,
+  autoplaySpeed: 10000,
   // pauseOnFocus: true,
   centerMode: true,
   centerPadding: "0px",
@@ -80,9 +82,25 @@ function SliderLeft() {
     <Slider {...setting}>
       {arithmeticArr.map(item => {
         return <div className="slider_content" key={item.name}>
-          <div className="slider_img">
+          <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} autoPlay  muted>您的浏览器不支持 video 标签。</video>}
+            {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}

src/glcc/openmmlab/SliderLeft/index.scss

@@ -16,6 +16,7 @@
     .slick-dots {
       width: 100%;
       bottom: -24px;
+      left:0;
       position: absolute;
       display: flex !important;
       justify-content: center;
@@ -59,7 +60,12 @@
   }
 
   .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%,
@@ -73,23 +79,58 @@
     border-color: #ffffff;
     border-radius: 2px;
     overflow: hidden;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    img{
+    
+    img {
       max-width: 100%;
       max-height: 100%;
     }
-    video{
+    .introduce-video {
       width: 100%;
       max-width: 100%;
-      max-height: 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;
+    margin: 14px 0;
     font-weight: 500;
     color: #0f141d;
     font-size: 20px;

src/glcc/openmmlab/SliderRight/index.jsx

@@ -8,7 +8,7 @@ let setting = {
   slidesToShow: 3,
   slidesToScroll: 1,
   pauseOnDotsHover: true,
-  autoplaySpeed: 4000,
+  autoplaySpeed: 2000,
   centerMode: true,
   centerPadding: "",
   // pauseOnFocus: true,
@@ -20,8 +20,11 @@ let setting = {
 function SliderLeft({list,history}) {
 
 
-  function goDetail(id){
-
+  function goDetail(projectName){
+    history.push({
+      pathname:'/glcc/projects',
+      state:{projectName:projectName.replace(/ /g,'-')} 
+    })
   }
 
   return (
@@ -31,11 +34,11 @@ function SliderLeft({list,history}) {
           return (
             <div className="news-slide-item" key={i}>
               <div className="slide-title" >
-                <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.projectName) }}>{item.projectName}</h3>
                 {/* <span className="slide-tag">{item.projectType}</span> */}
               </div>
               <p className="ellipsis-2">{item.projectIntro}</p>
-              <span className="news-time">查看详情</span>
+              <span className="project_more" onClick={()=>{goDetail(item.projectName)}}>查看详情<i className="iconfont font-12 icon-xiangyoujiantou"></i></span>
             </div>
           )
         })

src/glcc/openmmlab/SliderRight/index.scss

@@ -13,12 +13,20 @@
   .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);
+    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: .3em;
+    border-radius: 0.3em;
     box-sizing: border-box;
     .slide-title {
       display: flex;
@@ -30,60 +38,42 @@
       margin-bottom: 0 !important;
       flex: auto;
     }
-    .order-num {
-      flex: none;
-      display: inline-block;
-      margin-right: 1em;
-      color: #fff;
-      border-radius: 50%;
-      width: 1.75em;
-      height: 1.75em;
-      line-height: 1.75em;
-      background: linear-gradient(
-        272deg,
-        #4154f1 0%,
-        #4154f1 47%,
-        #4154f1 100%
-      );
-      box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33);
-      text-align: center;
-    }
 
-    .slide-tag {
-      flex: none;
-      color: #fff;
-      padding: .2em .75em;
-      background: #586dff;
-      border-radius: .2em;
-    }
+    .project_more {
+      font-weight: 500;
+      color: #1140ff;
+      font-size: 15px;
+      line-height: 26px;
+      cursor: pointer;
 
-
-    .news-time {
-      font-size: .95em;
-      font-weight: 400;
-      color: #3c476e;
+      &:hover{
+        opacity: .85;
+      }
+      .iconfont{
+        font-weight: 600;
+        margin-left:16px;
+      }
     }
 
     p {
-      margin:1em 0 .5em;
+      margin: .75em 0 !important;
       color: #3c476e;
-      font-size: .9em;
-
+      font-size: 0.9em;
     }
   }
   // .slick-center {
   //   margin-left: 100px;
   // }
-  
- .slick-slide:nth-child(n) .slide-tag{
+
+  .slick-slide:nth-child(n) .slide-tag {
     background: #586dff;
   }
 
-  .slick-slide:nth-child(2n) .slide-tag{
+  .slick-slide:nth-child(2n) .slide-tag {
     background: #e53939;
   }
 
-  .slick-slide:nth-child(3n) .slide-tag{
+  .slick-slide:nth-child(3n) .slide-tag {
     background: #ff7300;
   }
 }

src/glcc/openmmlab/index.jsx

@@ -43,7 +43,7 @@ function Openmmlab(props) {
                         <SliderLeft />
                     </div>
                     <div className="slider_right">
-                        <SliderRight list={list} />
+                        <SliderRight list={list} {...props}/>
                     </div>
                 </div>
             </div>

src/glcc/openmmlab/index.scss

@@ -15,7 +15,7 @@
 
   .openmmlab_head {
     text-align: center;
-    margin: 8px auto;
+    margin: 8px auto 20px;
   }
   .openmmlab_logo {
     width: 287px;

src/glcc/openmmlab/projectTab/index.scss

@@ -86,7 +86,9 @@
     width:954px;
     height:813px;
     padding: 21px 30px 50px;
-    color: rgba(0,0,0,.65);
+    // color: rgba(0,0,0,.65);
+    background-image: url('../../img/openmmlab/tabBackground.png') ;
+    background-size: 100% 100%;
   }
   // 项目详情框
   .projectDetailBox {

src/glcc/project/projectList/index.jsx

@@ -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>

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);