diff --git a/src/glcc/img/openmmlab/logo.png b/src/glcc/img/openmmlab/logo.png
new file mode 100644
index 00000000..42c2448e
Binary files /dev/null and b/src/glcc/img/openmmlab/logo.png differ
diff --git a/src/glcc/openmmlab/SliderLeft/index.jsx b/src/glcc/openmmlab/SliderLeft/index.jsx
new file mode 100644
index 00000000..e7e65260
--- /dev/null
+++ b/src/glcc/openmmlab/SliderLeft/index.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import Slider from 'react-slick';
+import axios from 'axios';
+import './index.scss';
+
+
+let setting = {
+  infinite: true,
+  dots: true,
+  speed: 750,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover: true,
+  autoplaySpeed: 50000,
+  // pauseOnFocus: true,
+  centerMode: true,
+  centerPadding: "0px",
+  autoplay: true,
+  arrows: false,
+}
+function SliderLeft() {
+
+  return (
+    <Slider {...setting}>
+        <div className="slider_content">
+          MMDetection 是 OpenMMLab 中的通用目标检测算法平台，
+        </div>
+
+        <div className="slider_content">
+          MMDetection 是 Ope
+        </div>
+
+    </Slider>
+  )
+}
+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..32e0f03f
--- /dev/null
+++ b/src/glcc/openmmlab/SliderLeft/index.scss
@@ -0,0 +1,102 @@
+.slider_left {
+  .slick-slider {
+    overflow: hidden;
+  }
+  .slider_content {
+    color: #3a4965;
+  }
+
+  .slick-track {
+    height: 679px;
+    display: flex;
+    .slick-slide {
+      position: relative;
+      height: 100%;
+      div {
+        height: 100%;
+        .regform {
+          & > div {
+            overflow: hidden;
+            img {
+              height: 100%;
+              width: 1920px;
+              position: relative;
+              left: 50%;
+              margin-left: -960px;
+            }
+          }
+        }
+        .regPrg {
+          position: absolute;
+          z-index: 2;
+          width: 1200px;
+          left: 50%;
+          margin-left: -600px;
+          top: 54%;
+          margin-top: -23px;
+          a {
+            color: #fff !important;
+            display: inline-block;
+            background-color: #466aff;
+            border-radius: 5px;
+            height: 46px;
+            line-height: 46px;
+            width: 98px;
+            text-align: center;
+            font-size: 18px;
+            letter-spacing: 2px;
+            &:hover {
+              color: #ffffff !important;
+              background-color: #355cff;
+            }
+          }
+        }
+      }
+    }
+  }
+  .slick-slider {
+    position: relative;
+
+    .slick-dots {
+      width: 1200px;
+      text-align: left;
+      left: 50%;
+      margin-left: -600px;
+      bottom: 25%;
+      position: absolute;
+      display: flex !important;
+      z-index: 2;
+      li {
+        background-color: rgba(225, 225, 225, 0.5);
+        position: relative;
+        height: 3px;
+        width: 46px;
+        margin-right: 15px;
+        &::after {
+          position: absolute;
+          left: 0px;
+          width: 0px;
+          top: 0px;
+          height: 100%;
+          content: "";
+          transition: 5.2s;
+          transition-property: width;
+        }
+        &.slick-active::after {
+          background-color: #fff;
+          width: 100%;
+        }
+        button {
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          left: 0px;
+          background-color: transparent !important;
+          border: none;
+          cursor: pointer;
+          color: transparent;
+        }
+      }
+    }
+  }
+}
diff --git a/src/glcc/openmmlab/SliderRight/index.jsx b/src/glcc/openmmlab/SliderRight/index.jsx
new file mode 100644
index 00000000..be3b7086
--- /dev/null
+++ b/src/glcc/openmmlab/SliderRight/index.jsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import Slider from 'react-slick';
+import { projectList } from '../../api';
+import './index.scss';
+
+
+let setting = {
+  infinite: true,
+  dots: true,
+  speed: 750,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover: true,
+  autoplaySpeed: 50000,
+  // pauseOnFocus: true,
+  centerMode: true,
+  centerPadding: "0px",
+  autoplay: true,
+  arrows: false,
+}
+function SliderLeft() {
+
+  const [list, setList] = useState([]);
+
+  useEffect(()=>{
+    const params = {
+      curPage: 1,
+      keyword:'openmmlab',
+      pageSize: 10000
+    }
+    projectList(params).then(response=>{
+      if(response && response.message === "success"){
+        setList(response.data.rows);
+      }
+    })
+  },[])
+
+  return (
+    <Slider {...setting}>
+      {
+        list && list.map((item, i) => {
+          return (
+            <div className="news-slide-item" key={i}>
+              <div className="slide-title" >
+                <span className="order-num">{i + 1}</span>
+                <h3 className="slide-title-content ellipsis-1 link" onClick={() => { goDetail(item.fake_id) }}>{item.title}</h3>
+                <span className="slide-tag">{item.tag}</span>
+              </div>
+              <p className="ellipsis-2">{item.content}</p>
+              <span className="news-time">{item.created_time && item.created_time.split(' ')[0]}</span>
+            </div>
+          )
+        })
+      }
+    </Slider>
+  )
+}
+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..baf5d9be
--- /dev/null
+++ b/src/glcc/openmmlab/SliderRight/index.scss
@@ -0,0 +1,92 @@
+.slider_right {
+  width: 30%;
+  height: 520px;
+  overflow: hidden;
+  .slick-track > div {
+    max-width: 83.3%;
+    position: relative;
+    transition: all 0.7s;
+  }
+  .news-slide-item {
+    height: 11.25em;
+    overflow: hidden;
+    background-image: linear-gradient(
+      to bottom right,
+      #e9f5ff 0%,
+      #f1f2fd 25%,
+      #e8f2ff 50%,
+      #e1eaff 75%,
+      #c6d3ff 100%
+    );
+    margin-bottom: 10px;
+    padding: 1.25em 1.8em 1.6em;
+    border: 1px solid #fff;
+    border-radius: .3em;
+
+    .slide-title {
+      display: flex;
+      align-items: center;
+    }
+    .slide-title-content {
+      color: #000870;
+      font-size: 1em;
+      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;
+    }
+
+
+    .news-time {
+      font-size: .95em;
+      font-weight: 400;
+      color: #3c476e;
+    }
+
+    p {
+      margin:1em 0 .5em;
+      color: #3c476e;
+      font-size: .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/index.jsx b/src/glcc/openmmlab/index.jsx
index 5274ef49..39538bba 100644
--- a/src/glcc/openmmlab/index.jsx
+++ b/src/glcc/openmmlab/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import banner from "../img/studentProject.png";
-import './index.scss';
+import logo from "../img/openmmlab/logo.png";
 import { useEffect } from 'react';
-import ProjectList from '../project/projectList';
+import SliderLeft from './SliderLeft';
+import SliderRight from './SliderRight';
+import './index.scss';
+
 
 
 
@@ -12,9 +14,24 @@ function Openmmlab(props) {
     }, [])
 
     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 />
+                    </div>
+                </div>
+            </div>
+
         </div>
     )
 }
diff --git a/src/glcc/openmmlab/index.scss b/src/glcc/openmmlab/index.scss
index 89d55bdd..b1a48a79 100644
--- a/src/glcc/openmmlab/index.scss
+++ b/src/glcc/openmmlab/index.scss
@@ -1,223 +1,45 @@
-.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;
   }
-  // 项目详情框
-  .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 {
+  .openmmlab_logo {
+    width: 287px;
+  }
+  .openmmlab_des {
+    font-weight: 500;
+    color: #4a5a7a;
+    font-size: 15px;
+    line-height: 26px;
+    text-align: center;
+  }
+
+  .openmmlab_main {
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  .openmmlab_slider{
       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;
-      }
-    }
   }
-  .projectItemPopover{
-    width: 1200px;
-    .ant-popover-content .ant-popover-arrow{
-      border-width: 12px;
-    }
+
+  .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;
   }
-  .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;
-    }
-  }
-  .lookDetail{
-    border-color: #466aff;
-    color: #466aff;
-    &:hover{
-      border-color: #5d7cff;
-      color: #5d7cff;
-    }
-    &:focus{
-      border-color: #1140ff;
-      color: #1140ff;
-    }
-  }
\ No newline at end of file
+}