diff --git a/src/glcc/home/award/index.jsx b/src/glcc/home/award/index.jsx
index ce2481f1..ffa1c758 100644
--- a/src/glcc/home/award/index.jsx
+++ b/src/glcc/home/award/index.jsx
@@ -10,7 +10,7 @@ function Award() {
       <div className="glcc-content">
         <div className="award-item">
           <div className="award-tit">丰厚现金奖励</div>
-          <div className="award-content">根据项目难度设置高、中、低三个阶梯课题，对应奖金为12000 元、9000 元和 6000 元</div>
+          <div className="award-content">根据项目难度设置高、中、低三个阶梯课题，对应奖金为<span className="number">12000</span> 元、<span className="number">9000</span> 元和 <span className="number">6000</span> 元</div>
           <div className="award-line"></div>
         </div>
 
diff --git a/src/glcc/home/award/index.scss b/src/glcc/home/award/index.scss
index ab56c929..f8173a7f 100644
--- a/src/glcc/home/award/index.scss
+++ b/src/glcc/home/award/index.scss
@@ -59,4 +59,8 @@
     height: 3px;
     background-image: linear-gradient(90deg, #2135b9 0%, #e3a600 100%);
   }
+
+  .number{
+    color: rgba(14, 85, 189, 1);
+  }
 }
diff --git a/src/glcc/home/contact/index.jsx b/src/glcc/home/contact/index.jsx
index fc744857..eaeeb24f 100644
--- a/src/glcc/home/contact/index.jsx
+++ b/src/glcc/home/contact/index.jsx
@@ -12,7 +12,7 @@ function Contact() {
           <div className="contact-info">
             <h4 className="contact-invite">期待你的加入，和我们一起推动开源繁荣发展！</h4>
             <div className="contact-way">
-              <p>问题资讯：12345689@qq.com</p>
+              <p>问题咨询：12345689@qq.com</p>
               <p>合作推广：56898989416@hotmail.com</p>
             </div>
           </div>
diff --git a/src/glcc/home/index.jsx b/src/glcc/home/index.jsx
index 7c4df260..e5cda7ac 100644
--- a/src/glcc/home/index.jsx
+++ b/src/glcc/home/index.jsx
@@ -1,19 +1,31 @@
 import React from "react";
-import Banner from "./banner";
+import { Link } from "react-router-dom";
+// import Banner from "./banner";
 import Lightspot from './lightspot';
 import TimerShaft from './timerShaft';
 import Award from "./award";
 import News from './news';
 import Partner from "./partner";
 import Contact from "./contact";
-
+import banner from "../img/banner.png";
 import './index.scss';
 
 export default () => {
 
   return (
     <div className="glcc">
-      <Banner />
+      {/* <Banner /> */}
+      <img className="glcc-banner" src={banner}></img>
+      {/* <div > */}
+        <Link className="apply-btn" to="/glcc/apply">
+          <div className="apply-text">立即报名</div>
+          <div className="apply-icon"><i className="font-14 iconfont icon-xiangyoujiantou "></i></div>
+        </Link>
+      {/* </div> */}
+      <div className="introduce glcc-content">
+        <div className="glcc-tit">活动简介</div>
+        <div className="introduce-content">GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。</div>
+      </div>
       <Lightspot />
       <TimerShaft />
       <Award />
diff --git a/src/glcc/home/index.scss b/src/glcc/home/index.scss
index c170a583..6063018c 100644
--- a/src/glcc/home/index.scss
+++ b/src/glcc/home/index.scss
@@ -1,12 +1,80 @@
 .glcc {
+  position: relative;
   font-family: PingFang SC;
+  background-image: linear-gradient(
+    163.51deg,
+    #eff3fe 0%,
+    #ebeffb 9.63%,
+    #f0f4ff 16.73%,
+    #e8edfc 33.05%,
+    #e5ecff 43.93%,
+    #e3eaf6 72.41%,
+    #cfe0ff 89.21%,
+    #ffffff 94.79%,
+    #ecf4ff 100%
+  );
+
+  .ant-btn-primary{
+    background-color: #466aff;
+    border-color: #466aff;
+    
+    &:hover{
+      opacity: .8;
+    }
+  }
+
+  .apply-btn {
+    position: absolute;
+    top: 15vw;
+    left: 18.8vw;
+    width: 152px;
+    height: 40px;
+    background-color: #2e5bfe;
+    border: 1px solid #466aff;
+    color: #fff;
+    padding-left: 18px;
+  }
+  .apply-text {
+    font-family: Alibaba PuHuiTi;
+    color: #ffffff;
+    font-size: 18px;
+  }
+  .apply-icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 47px;
+    height: 38px;
+    background-color: #fff;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 0;
+      height: 0;
+      border-color: transparent #2e5bfe;
+      border-width: 0 0 40px 10px;
+      border-style: solid;
+    }
+
+    .iconfont {
+      color: #466aff;
+      font-weight: 700;
+    }
+  }
 }
+
 .glcc-tit {
   text-align: center;
   font-family: PingFang SC;
   font-weight: 500;
   color: #1e1e1e;
   font-size: 38px;
+  line-height: 1.4;
   margin-bottom: 50px !important;
 }
 
@@ -18,19 +86,47 @@
   padding-top: 45px;
 }
 
- // 1行省略号
- .ellipsis-1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+// 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;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.glcc-banner {
+  width: 100%;
+}
+
+.introduce {
+  z-index: 1;
+  position: relative;
+  top: -45px;
+  background-image: linear-gradient(
+    163.51deg,
+    #e5ecff 0%,
+    #e0e9ff 32.91%,
+    #fbfcff 100%
+  );
+  background: url("../img/introduce-bg.png");
+  box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
+  background-size: 100% 100%;
+  padding: 48px;
+  .glcc-tit {
+    margin-bottom: 30px !important;
   }
+  .introduce-content {
+    color: #202d40;
+    font-size: 15px;
+    line-height: 30px;
+  }
+}
diff --git a/src/glcc/home/lightspot/index.jsx b/src/glcc/home/lightspot/index.jsx
index 390b32fe..cdd67311 100644
--- a/src/glcc/home/lightspot/index.jsx
+++ b/src/glcc/home/lightspot/index.jsx
@@ -1,8 +1,11 @@
 import { Button } from 'antd';
 import React from 'react';
 import teacherImg from '../../img/teacher-img.png';
-// import lightspot1 from '../../img/lightspot1.png';
-// import lightspot2 from '../../img/lightspot2.png';
+import lightspot1 from '../../img/lightspot1.png';
+import lightspot2 from '../../img/lightspot2.png';
+import lightspot3 from '../../img/lightspot3.png';
+import lightspot4 from '../../img/lightspot4.png';
+
 
 import './index.scss';
 
@@ -25,12 +28,33 @@ function Lightspot() {
 
           <div className="info-student">
             <div className="info-item">
-              <img className="info-item-img"></img>
-              
+              <img className="info-item-img" src={lightspot1}></img>
+              <h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
+              <div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
             </div>
+
+            <div className="info-item">
+              <img className="info-item-img" src={lightspot2}></img>
+              <h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
+              <div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
+            </div>
+
+            <div className="info-item">
+              <img className="info-item-img" src={lightspot3}></img>
+              <h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
+              <div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
+            </div>
+
+            <div className="info-item">
+              <img className="info-item-img" src={lightspot4}></img>
+              <h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
+              <div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
+            </div>
+
           </div>
 
 
+
         </div>
       </div>
     </div>
diff --git a/src/glcc/home/lightspot/index.scss b/src/glcc/home/lightspot/index.scss
index 178b123a..ecfe0040 100644
--- a/src/glcc/home/lightspot/index.scss
+++ b/src/glcc/home/lightspot/index.scss
@@ -1,15 +1,18 @@
 .lightspot {
   background: url("../../img/lightspot-bg.png");
   background-size: 100% 100%;
-  height: 55.26vw;
-  min-height: 1061px;
+  height: 44.6875vw;
+  min-height: 858px;
 
-  .info-teacher {
-      display: flex;
-      justify-content: space-between;
+  .glcc-content{
+    padding-top:55px;
   }
-  .teacher-text{
-      margin-right: 2.84%;
+  .info-teacher {
+    display: flex;
+    justify-content: space-between;
+  }
+  .teacher-text {
+    margin-right: 2.84%;
   }
   .teacher-invite {
     color: #202d40;
@@ -28,4 +31,32 @@
   .teacher-img {
     width: 52%;
   }
+
+  .info-student {
+    display: flex;
+    justify-content: space-between;
+  }
+  .info-item {
+    width: 20%;
+    min-width: 240px;
+    text-align: center;
+    .info-item-img {
+      width: 83.33%;
+      min-width: 200px;
+      margin-bottom: 12px;
+    }
+
+    .info-item-tit {
+      color: #202d40;
+      font-size: 20px;
+      line-height: 26px;
+      margin-bottom: 18px !important;
+    }
+
+    .info-item-content {
+      color: #8794bb;
+      font-size: 15px;
+      line-height: 30px;
+    }
+  }
 }
diff --git a/src/glcc/home/news/index.jsx b/src/glcc/home/news/index.jsx
index 30b4e503..8e61629c 100644
--- a/src/glcc/home/news/index.jsx
+++ b/src/glcc/home/news/index.jsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Col, Row } from 'antd';
+import axios from 'axios';
 import './index.scss';
 
 
 function News() {
 
+  const [list, setList] = useState([]);
+  useEffect(() => {
+    const url = `/topics.json?topic_type=glcc_news`;
+    axios.get(url).then(result => {
+      if (result && result.data) {
+        setList(result.data.topics);
+      }
+    }).catch(error => { })
+  })
+
   return (
     <div className="news">
       <div className="glcc-content">
@@ -19,16 +30,27 @@ function News() {
           
         </Row> */}
         <div className="news-content">
-          <div className="main-news">
-            <h3 className="news-tit ellipsis-2">此处为新闻中心的标题内容此处为新闻中心的标题内容此处为新闻中心</h3>
-            <div className="main-news-content ellipsis-2">此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情
-            </div>
-            <div className="news-date">2022-04-02</div>
-            <Button type="link">查看详情</Button>
-          </div>
+
+          {list.length && <div className="main-news">
+            <h3 className="news-tit ellipsis-2">{list[0].title}</h3>
+            <div className="news-date">{list[0].created_time && list[0].created_time.split(' ')[0]}</div>
+            <Button type="link" ><a target="_black" href={list[0].url}>查看详情</a></Button>
+          </div>}
 
           <div className="news-box">
-            <div className="news-item">
+            {
+              list.map((item, i) => {
+                return i ? <div className="news-item" key={item.id}>
+                  <h3 className="news-tit ellipsis-2">{item.title}</h3>
+                  <div className="news-content">
+                    <div className="news-date">{item.created_time && item.created_time.split(' ')[0]}</div>
+                    <Button type="link"><a target="_black" href={item.url}>查看详情</a></Button>
+                  </div>
+                </div> : ''
+
+              })
+            }
+            {/* <div className="news-item">
               <h3 className="news-tit ellipsis-2">此处为新闻中心的标题内容此处为新闻中心的标题内容此处为新闻中心</h3>
               <div className="news-content">
                 <div className="news-date">2022-04-02</div>
@@ -58,7 +80,7 @@ function News() {
                 <div className="news-date">2022-04-02</div>
                 <Button type="link">查看详情</Button>
               </div>
-            </div>
+            </div> */}
 
           </div>
         </div>
diff --git a/src/glcc/home/news/index.scss b/src/glcc/home/news/index.scss
index 2f60ff2b..e7713844 100644
--- a/src/glcc/home/news/index.scss
+++ b/src/glcc/home/news/index.scss
@@ -17,17 +17,18 @@
     height: 276px;
     color: #fff;
     line-height: 30px;
-    padding: 30px 20px;
+    padding: 40px 20px;
     .news-tit {
       font-weight: 500;
       font-size: 18px;
       color: #fff;
       margin-bottom: 13px !important;
+      min-height: 56px;
     }
     .news-date {
       opacity: 85%;
       font-size: 14px;
-      margin:15px 0;
+      margin:15px 0 44px;
     }
     .main-news-content {
       opacity: 85%;
@@ -59,6 +60,7 @@
       color: #1e1e1e;
       font-size: 16px;
       line-height: 30px;
+      min-height: 56px;
     }
 
     .news-date {
@@ -69,7 +71,6 @@
     &:hover {
       background: url("../../img/news-item.png");
       background-size: 100% 100%;
-      border: 0;
       .news-tit,
       .news-date {
         color: #fff;
diff --git a/src/glcc/home/timerShaft/index.jsx b/src/glcc/home/timerShaft/index.jsx
index 70f238cd..930ac780 100644
--- a/src/glcc/home/timerShaft/index.jsx
+++ b/src/glcc/home/timerShaft/index.jsx
@@ -4,48 +4,48 @@ import './index.scss';
 
 const stepArr = [{
   title: "Step1",
-  date: "4月15日",
+  date: "4.15",
   content: "GLCC发布"
 },
 {
   title: "Step2",
-  date: "4月15日-5月8日",
+  date: "4.15-5.8",
   content: "社区启动报名"
 },
 {
   title: "Step2",
-  date: "5月20日",
+  date: "5.20",
   content: "公示社区名单"
 },
 {
   title: "Step2",
-  date: "5月21日-6月19日",
+  date: "5.21-6.19",
   content: "学生提交proposal"
 },
 {
   title: "Step2",
-  date: "7月1日",
+  date: "7.1",
   content: "公示项目申请审核结果",
   noArrow: true,
 },
 {
   title: "Step2",
-  date: "7月4日-8月12日",
+  date: "7.4-8.12",
   content: "项目开发第一阶段",
 },
 {
   title: "Step2",
-  date: "8月12日-9月30日",
+  date: "8.12-9.30",
   content: "项目开发第二阶段",
 },
 {
   title: "Step2",
-  date: "10月1日-10月14日",
+  date: "10.1-10.14",
   content: "结项审核",
 },
 {
   title: "Step2",
-  date: "11月11日",
+  date: "11.11",
   content: "公布优秀项目&学员",
   noArrow: true,
 }
@@ -60,7 +60,7 @@ function TimerShaft() {
         <div className="time-content">
           {
             stepArr.map((item, i) => {
-              return <Step {...item} title={`Step${i + 1}`} />
+              return <Step {...item} title={`Step${i + 1}`} key={i}/>
             })
           }
         </div>
diff --git a/src/glcc/home/timerShaft/index.scss b/src/glcc/home/timerShaft/index.scss
index 19c40457..631eed93 100644
--- a/src/glcc/home/timerShaft/index.scss
+++ b/src/glcc/home/timerShaft/index.scss
@@ -12,7 +12,6 @@
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
-
   }
   .step-item {
     display: flex;
@@ -25,28 +24,31 @@
       width: 201.69px;
       height: 178.93px;
       text-align: center;
-      padding: 25px 0 10px;
+      padding: 34px 0 10px;
       line-height: 26px;
       font-weight: 700;
     }
     .sexange-tit {
-      color: #124599;
-      font-size: 26px;
-      line-height: 37px;
-      margin-bottom: 10px !important;
+      font-weight: 700;
+      color: #202d40;
+      font-size: 18px;
+      line-height: 26px;
+      margin-bottom: 11px !important;
     }
 
     .sexange-date {
-      color: #202d40;
-      font-size: 18px;
       margin-bottom: 8px;
+      font-weight: 700;
+      color: #124599;
+      font-size: 22px;
+      line-height: 26px;
     }
 
     .sexange-content {
       font-weight: 500;
       color: #6c7283;
       font-size: 15px;
-      width: 60%;
+      width: 55%;
       margin: 0 auto;
     }
 
diff --git a/src/glcc/img/banner.png b/src/glcc/img/banner.png
new file mode 100644
index 00000000..0c839df4
Binary files /dev/null and b/src/glcc/img/banner.png differ
diff --git a/src/glcc/img/introduce-bg.png b/src/glcc/img/introduce-bg.png
new file mode 100644
index 00000000..380eaf0e
Binary files /dev/null and b/src/glcc/img/introduce-bg.png differ
diff --git a/src/glcc/img/lightspot-bg.png b/src/glcc/img/lightspot-bg.png
index 75d78ce5..c7fd56c0 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/lightspot1.png b/src/glcc/img/lightspot1.png
new file mode 100644
index 00000000..aa3877f2
Binary files /dev/null and b/src/glcc/img/lightspot1.png differ
diff --git a/src/glcc/img/lightspot2.png b/src/glcc/img/lightspot2.png
new file mode 100644
index 00000000..710cf6dd
Binary files /dev/null and b/src/glcc/img/lightspot2.png differ
diff --git a/src/glcc/img/lightspot3.png b/src/glcc/img/lightspot3.png
new file mode 100644
index 00000000..32140378
Binary files /dev/null and b/src/glcc/img/lightspot3.png differ
diff --git a/src/glcc/img/lightspot4.png b/src/glcc/img/lightspot4.png
new file mode 100644
index 00000000..bf8a551e
Binary files /dev/null and b/src/glcc/img/lightspot4.png differ