diff --git a/src/App.vue b/src/App.vue
index 8fb2b53..820406a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,14 +18,15 @@
 </template>
 <script>
 import headers from './views/header/index'
-import footers from  './views/footer/index'
+import footers from './views/footer/index'
+
 export default {
-  name:'App',
-  components:{
+  name: 'App',
+  components: {
     headers,
     footers
   },
-  data(){
+  data() {
     return {
       iftop: false
     }
@@ -47,16 +48,20 @@ export default {
 }
 </script>
 <style>
- *{
-   margin: 0;
-   padding: 0;
- }
- .grid-content{
-   height: 1px;
- }
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: PingFangSC-Medium, PingFang SC !important;
+}
+
+.grid-content {
+  height: 1px;
+  width: 100%;
+}
 </style>
 <style scoped>
-.headers{
+.headers {
   width: 100%;
   z-index: 9999;
   position: fixed;
diff --git a/src/assets/index/news_center/t2.png b/src/assets/index/news_center/t2.png
new file mode 100644
index 0000000..f6967d8
Binary files /dev/null and b/src/assets/index/news_center/t2.png differ
diff --git a/src/assets/index/news_center/t2@2x.png b/src/assets/index/news_center/t2@2x.png
new file mode 100644
index 0000000..b5f7042
Binary files /dev/null and b/src/assets/index/news_center/t2@2x.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 6403441..cf1eca3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'index',
-    component: () => import(/* webpackChunkName: "about" */ '../views/index/index')
+    component: () => import(/* webpackChunkName: "about" */ '../views/shouye/index')
   },
   {
     path: '/sp',
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index ca83684..6df88fc 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -18,12 +18,29 @@
             <div class="title">{{ $t('message.news_center') }}</div>
             <div class="divider">
               <div class="divider_left">
-                <img src="@/assets/index/sy_icon_gd.png" alt="">
-              </div>
-              <div class="name">News Center</div>
-              <div class="divider_right">
-                <img src="@/assets/index/sy_icon_gd1.png" alt="">
+
               </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+              <el-divider class="name">News Center</el-divider>
             </div>
             <!--录播图-->
             <div class="slideshow">
@@ -113,13 +130,9 @@
             <!--标题-->
             <div class="title" style="background: #FFFFFF; color: #1956BC;margin-bottom: 2rem;">科学研究</div>
             <div class="divider" style="width: 80rem;">
-              <div class="divider_left">
-                <img src="@/assets/index/sy_icon_gd.png" alt="">
-              </div>
-              <div class="name" style="color: #FFFFFF;">Scientific research trends</div>
-              <div class="divider_right">
-                <img src="@/assets/index/sy_icon_gd1.png" alt="">
-              </div>
+              <el-divider class="name">
+                <div >Scientific research trends</div>
+              </el-divider>
             </div>
 
             <el-row>
@@ -260,13 +273,9 @@
               {{ $t('message.more') }}
             </div>
             <div class="divider" style="width: 66rem;">
-              <div class="divider_left">
-                <img src="@/assets/index/sy_icon_gd.png" alt="">
-              </div>
-              <div class="name" style="color: #FFFFFF;font-size: 2.6rem;">学术交流</div>
-              <div class="divider_right">
-                <img src="@/assets/index/sy_icon_gd1.png" alt="">
-              </div>
+              <el-divider>
+                <div class="name">学术交流</div>
+              </el-divider>
             </div>
             <el-row>
               <el-col :offset="3" :span="18">
@@ -414,13 +423,9 @@
           <!--标题-->
           <div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">党群工作</div>
           <div class="divider" style="width: 80rem;">
-            <div class="divider_left">
-              <img src="@/assets/index/tttl.png" alt="">
-            </div>
-            <div class="name" style="color: #DA2D2D;">Party Building Activities</div>
-            <div class="divider_right">
-              <img src="@/assets/index/tttr.png" alt="">
-            </div>
+            <el-divider>
+              <div class="name">Party Building Activities</div>
+            </el-divider>
           </div>
 
           <div>
@@ -436,13 +441,9 @@
 
 
           <div class="divider" style="width: 64rem; margin-top: 2rem;">
-            <div class="divider_left">
-              <img src="@/assets/index/tttl.png" alt="">
-            </div>
-            <div class="name" style="color: #DA2D2D;">党史教育</div>
-            <div class="divider_right">
-              <img src="@/assets/index/tttr.png" alt="">
-            </div>
+            <el-divider>
+              <div class="name">党史教育</div>
+            </el-divider>
           </div>
 
           <div class="phe">
@@ -545,177 +546,164 @@
     <!--教学工作-->
     <div class="teaching_and_student">
       <el-row>
-        <el-col :offset="3" :span="18">
+        <el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="5">
+          <div class="grid-content"></div>
+        </el-col>
+        <el-col :xs="22" :sm="22" :md="20" :lg="18" :xl="14">
           <!--教学工作-->
           <div class="title">教学工作</div>
           <div class="divider" style="width: 76rem;">
-            <div class="divider_left">
-              <img src="@/assets/index/sy_icon_gd.png" alt="">
-            </div>
-            <div class="name">Teaching and student</div>
-            <div class="divider_right">
-              <img src="@/assets/index/sy_icon_gd1.png" alt="">
-            </div>
+            <el-divider>
+              <div class="name">Teaching and student</div>
+            </el-divider>
           </div>
           <div class="tw">
             <el-row>
-              <el-col :offset="3" :span="18">
-                <el-row>
-                  <el-col :span="3">
-                    <div class="tw_time">
-                      <div class="tw_top">
-                        28
-                      </div>
-                      <div class="tw_bottoms">
-                        2021-10
-                      </div>
-                    </div>
-                  </el-col>
-                  <el-col :span="17">
-                    <div class="tw_context">
-                      <div class="tw_context_title">
-                        不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
-                      </div>
-                      <div class="tw_context_text">
-                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
-                      </div>
-                    </div>
-                  </el-col>
-                  <el-col :span="3" :offset="1">
-                    <div class="tw_img">
-                      <img src="@/assets/index/tw1.png" alt="">
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-divider></el-divider>
+              <el-col :span="3">
+                <div class="tw_time">
+                  <div class="tw_top">
+                    28
+                  </div>
+                  <div class="tw_bottoms">
+                    2021-10
+                  </div>
+                </div>
+              </el-col>
+              <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
+                <div class="tw_context">
+                  <div class="tw_context_title">
+                    不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
+                  </div>
+                  <div class="tw_context_text">
+                    为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="3" :offset="1">
+                <div class="tw_img">
+                  <img src="@/assets/index/tw1.png" alt="">
+                </div>
               </el-col>
             </el-row>
+            <el-divider></el-divider>
             <el-row>
-              <el-col :offset="3" :span="18">
-                <el-row>
-                  <el-col :span="3">
-                    <div class="tw_time">
-                      <div class="tw_top">
-                        28
-                      </div>
-                      <div class="tw_bottoms">
-                        2021-10
-                      </div>
+              <el-row>
+                <el-col :span="3">
+                  <div class="tw_time">
+                    <div class="tw_top">
+                      28
                     </div>
-                  </el-col>
-                  <el-col :span="17">
-                    <div class="tw_context">
-                      <div class="tw_context_title">
-                        不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
-                      </div>
-                      <div class="tw_context_text">
-                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
-                      </div>
+                    <div class="tw_bottoms">
+                      2021-10
                     </div>
-                  </el-col>
-                  <el-col :span="3" :offset="1">
-                    <div class="tw_img">
-                      <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
+                  <div class="tw_context">
+                    <div class="tw_context_title">
+                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                     </div>
-                  </el-col>
-                </el-row>
-                <el-divider></el-divider>
-              </el-col>
+                    <div class="tw_context_text">
+                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="3" :offset="1">
+                  <div class="tw_img">
+                    <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+              </el-row>
+              <el-divider></el-divider>
             </el-row>
             <el-row>
-              <el-col :offset="3" :span="18">
-                <el-row>
-                  <el-col :span="3">
-                    <div class="tw_time">
-                      <div class="tw_top">
-                        28
-                      </div>
-                      <div class="tw_bottoms">
-                        2021-10
-                      </div>
+              <el-row>
+                <el-col :span="3">
+                  <div class="tw_time">
+                    <div class="tw_top">
+                      28
                     </div>
-                  </el-col>
-                  <el-col :span="17">
-                    <div class="tw_context">
-                      <div class="tw_context_title">
-                        不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
-                      </div>
-                      <div class="tw_context_text">
-                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
-                      </div>
+                    <div class="tw_bottoms">
+                      2021-10
                     </div>
-                  </el-col>
-                  <el-col :span="3" :offset="1">
-                    <div class="tw_img">
-                      <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
+                  <div class="tw_context">
+                    <div class="tw_context_title">
+                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                     </div>
-                  </el-col>
-                </el-row>
-                <el-divider></el-divider>
-              </el-col>
+                    <div class="tw_context_text">
+                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="3" :offset="1">
+                  <div class="tw_img">
+                    <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+              </el-row>
+              <el-divider></el-divider>
             </el-row>
             <el-row>
-              <el-col :offset="3" :span="18">
-                <el-row>
-                  <el-col :span="3">
-                    <div class="tw_time">
-                      <div class="tw_top">
-                        28
-                      </div>
-                      <div class="tw_bottoms">
-                        2021-10
-                      </div>
+              <el-row>
+                <el-col :span="3">
+                  <div class="tw_time">
+                    <div class="tw_top">
+                      28
                     </div>
-                  </el-col>
-                  <el-col :span="17">
-                    <div class="tw_context">
-                      <div class="tw_context_title">
-                        不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
-                      </div>
-                      <div class="tw_context_text">
-                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
-                      </div>
+                    <div class="tw_bottoms">
+                      2021-10
                     </div>
-                  </el-col>
-                  <el-col :span="3" :offset="1">
-                    <div class="tw_img">
-                      <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
+                  <div class="tw_context">
+                    <div class="tw_context_title">
+                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                     </div>
-                  </el-col>
-                </el-row>
-                <el-divider></el-divider>
-              </el-col>
+                    <div class="tw_context_text">
+                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="3" :offset="1">
+                  <div class="tw_img">
+                    <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+              </el-row>
+              <el-divider></el-divider>
             </el-row>
             <el-row>
-              <el-col :offset="3" :span="18">
-                <el-row>
-                  <el-col :span="3">
-                    <div class="tw_time">
-                      <div class="tw_top">
-                        28
-                      </div>
-                      <div class="tw_bottoms">
-                        2021-10
-                      </div>
+              <el-row>
+                <el-col :span="3">
+                  <div class="tw_time">
+                    <div class="tw_top">
+                      28
                     </div>
-                  </el-col>
-                  <el-col :span="17">
-                    <div class="tw_context">
-                      <div class="tw_context_title">
-                        不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
-                      </div>
-                      <div class="tw_context_text">
-                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
-                      </div>
+                    <div class="tw_bottoms">
+                      2021-10
                     </div>
-                  </el-col>
-                  <el-col :span="3" :offset="1">
-                    <div class="tw_img">
-                      <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
+                  <div class="tw_context">
+                    <div class="tw_context_title">
+                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                     </div>
-                  </el-col>
-                </el-row>
-              </el-col>
+                    <div class="tw_context_text">
+                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="3" :offset="1">
+                  <div class="tw_img">
+                    <img src="@/assets/index/tw1.png" alt="">
+                  </div>
+                </el-col>
+              </el-row>
             </el-row>
           </div>
 
@@ -726,79 +714,80 @@
             <img src="@/assets/index/sy_icon_zhdl.png" alt="">
           </div>
         </el-col>
+        <el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="3">
+          <div class="grid-content"></div>
+        </el-col>
       </el-row>
     </div>
     <!--下方开始-->
-    <div class="bottom">
-      <el-row>
-        <el-col :xs="0" :sm="2" :md="3" :lg="5" :xl="5">
-          <div class="grid-content"></div>
-        </el-col>
-        <el-col  :xs="24" :sm="20" :md="16" :lg="12" :xl="12">
-          <div class="table">
-            <table>
-              <tr>
-                <td rowspan="6">
-                  <div class="left">
-                    <div class="table_img">
-                      <img src="@/assets/index/sy_icon_sjzx.png" alt="">
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="right one">
-                    <div class="table_tr_left">职工人数</div>
-                    <div class="table_tr_right">667人</div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class="right tow">
-                    <div class="table_tr_left">在校学生人数</div>
-                    <div class="table_tr_right">667人</div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class="right three">
-                    <div class="table_tr_left">研究生导师</div>
-                    <div class="table_tr_right">667人</div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class="right fourth">
-                    <div class="table_tr_left">科研团队</div>
-                    <div class="table_tr_right">28000人</div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class="right five">
-                    <div class="table_tr_left">高层次人才</div>
-                    <div class="table_tr_right">18个</div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class="right sex">
-                    <div class="table_tr_left">重大项目</div>
-                    <div class="table_tr_right">280000个</div>
-                  </div>
-                </td>
-              </tr>
-            </table>
-          </div>
-        </el-col>
-      </el-row>
-
-
-    </div>
+    <!--    <div class="bottom">-->
+    <!--      <el-row>-->
+    <!--        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">-->
+    <!--          <div class="grid-content"></div>-->
+    <!--        </el-col>-->
+    <!--        <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">-->
+    <!--          <div class="table">-->
+    <!--            <table>-->
+    <!--              <tr>-->
+    <!--                <td rowspan="6">-->
+    <!--                  <div class="left">-->
+    <!--                    <div class="table_img">-->
+    <!--                      <img src="@/assets/index/sy_icon_sjzx.png" alt="">-->
+    <!--                    </div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--                <td>-->
+    <!--                  <div class="right one">-->
+    <!--                    <div class="table_tr_left">职工人数</div>-->
+    <!--                    <div class="table_tr_right">667人</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--              <tr>-->
+    <!--                <td>-->
+    <!--                  <div class="right tow">-->
+    <!--                    <div class="table_tr_left">在校学生人数</div>-->
+    <!--                    <div class="table_tr_right">667人</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--              <tr>-->
+    <!--                <td>-->
+    <!--                  <div class="right three">-->
+    <!--                    <div class="table_tr_left">研究生导师</div>-->
+    <!--                    <div class="table_tr_right">667人</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--              <tr>-->
+    <!--                <td>-->
+    <!--                  <div class="right fourth">-->
+    <!--                    <div class="table_tr_left">科研团队</div>-->
+    <!--                    <div class="table_tr_right">28000人</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--              <tr>-->
+    <!--                <td>-->
+    <!--                  <div class="right five">-->
+    <!--                    <div class="table_tr_left">高层次人才</div>-->
+    <!--                    <div class="table_tr_right">18个</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--              <tr>-->
+    <!--                <td>-->
+    <!--                  <div class="right sex">-->
+    <!--                    <div class="table_tr_left">重大项目</div>-->
+    <!--                    <div class="table_tr_right">280000个</div>-->
+    <!--                  </div>-->
+    <!--                </td>-->
+    <!--              </tr>-->
+    <!--            </table>-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--      </el-row>-->
+    <!--    </div>-->
 
 
   </div>
@@ -843,10 +832,10 @@ export default {
       console.log(window.pageYOffset)
       */
     },	//返回顶部
-    backtop(top,type) {
+    backtop(top, type) {
       // 实现滚动效果
       const timeTop = setInterval(() => {
-        if (type){
+        if (type) {
           document.body.scrollTop = document.documentElement.scrollTop = top -= 50
           if (top <= 0) {
             clearInterval(timeTop)
@@ -859,6 +848,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.el-divider__text{
+
+  background-color: transparent;
+}
 #index {
   .title {
     margin: 4rem auto 1rem;
@@ -900,12 +893,9 @@ export default {
     height: 3rem;
     line-height: 3rem;
 
-    div {
-      float: left;
-    }
-
     .name {
       font-size: 2rem;
+      background-color: transparent;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #1956BC;
@@ -915,7 +905,6 @@ export default {
   }
 
   .top {
-
     img {
       width: 100%;
     }
@@ -923,6 +912,7 @@ export default {
 
   .news_center {
     .slideshow {
+      width: 100%;
 
       .el-carousel__arrow {
         top: 93%;
@@ -994,6 +984,7 @@ export default {
       border-radius: 2.4rem;
 
       .divider {
+        margin: 0 auto;
         margin: 0;
         padding: 0;
         width: 44rem;
@@ -1152,6 +1143,14 @@ export default {
       }
     }
 
+    .tw_img {
+      width: 7vw;
+
+      img {
+        width: 100%;
+      }
+    }
+
 
   }
 
@@ -1165,9 +1164,10 @@ export default {
       width: 100%;
 
 
-      tr{
+      tr {
         width: 100%;
       }
+
       td {
         width: 50%;
         margin: 0;
diff --git a/src/views/shouye/components/news_center.vue b/src/views/shouye/components/news_center.vue
new file mode 100644
index 0000000..16fdecd
--- /dev/null
+++ b/src/views/shouye/components/news_center.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="news_center">
+    <el-row>
+      <el-col class="headline" :offset="6" :span="12">
+        <div class="title">
+          {{ $t('message.news_center') }}
+        </div>
+        <el-row>
+          <el-col :span="9">
+            <el-divider></el-divider>
+          </el-col>
+          <el-col :span="6">
+            <div class="divider_text">News Center</div>
+          </el-col>
+          <el-col :span="9">
+            <el-divider></el-divider>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <!--录播图-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
+        <div class="slideshow">
+          <el-carousel trigger="click" height="20.3vw">
+            <el-carousel-item v-for="item in 4" :key="item">
+              <div>
+                <img src="@/assets/index/t1@2x.png" alt="">
+                <div class="bottom_title">
+                  <el-row>
+                    <el-col :offset="2" :span="18">
+                      {{ item }}喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </el-col>
+      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
+        <div class="grid-content"></div>
+      </el-col>
+    </el-row>
+    <!--轮播图下的新闻-->
+
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
+        <el-row class="news">
+          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="@/assets/index/news_center/t2.png" alt="">
+              </div>
+              <div class="news_context_text">
+                信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
+            <div class="news_context"></div>
+          </el-col>
+          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
+            <div class="news_context"></div>
+          </el-col>
+          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
+            <div class="news_context"></div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "news_center"
+}
+</script>
+
+<style scoped lang="scss">
+@import '../css/comment.css';
+
+.slideshow {
+  width: 100%;
+
+  .el-carousel__arrow {
+    top: 93%;
+    display: block;
+  }
+
+  .bottom_title {
+    z-index: 99;
+    width: 100%;
+    height: 3.6vw;
+    background: #1956BC;
+    opacity: 0.89;
+    position: absolute;
+    bottom: 0;
+    line-height: 3.6vw;
+    font-size: 2rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.news {
+
+  .news_context:hover{
+    box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
+  }
+  .news_context {
+    width: 23rem;
+    height: 23rem;
+    margin: 3rem auto;
+    border-radius: 1.4rem;
+    border: 0.1rem solid #CAD9F3;
+    .news_context_img{
+      height: 14rem;
+      img{
+        width: 100%;
+      }
+    }
+    .news_context_text{
+      font-size: 1.6rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #262626;
+      margin: 1rem auto;
+      width: 80%;
+      height: 4rem;
+    }
+  }
+}
+
+</style>
diff --git a/src/views/shouye/components/party_building_activities.vue b/src/views/shouye/components/party_building_activities.vue
new file mode 100644
index 0000000..3883546
--- /dev/null
+++ b/src/views/shouye/components/party_building_activities.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "party_building_activities"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/shouye/components/scientific_research_trends.vue b/src/views/shouye/components/scientific_research_trends.vue
new file mode 100644
index 0000000..9c60b95
--- /dev/null
+++ b/src/views/shouye/components/scientific_research_trends.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "scientific_research_trends"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/shouye/components/slideshow_card.vue b/src/views/shouye/components/slideshow_card.vue
new file mode 100644
index 0000000..0e92ca8
--- /dev/null
+++ b/src/views/shouye/components/slideshow_card.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="banner-card">
+    <ul class="ul">
+      <li>
+        <div class="card_img">
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""/>
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+
+      </li>
+      <li>
+        <div class="card_img">
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""
+          />
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+      </li>
+      <li>
+        <div class="card_img">
+
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""
+          />
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+      </li>
+      <li>
+        <div class="card_img">
+
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""
+          />
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+      </li>
+      <li>
+        <div class="card_img">
+
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""
+          />
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+      </li>
+      <li>
+        <div class="card_img">
+
+          <img
+            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
+            alt=""
+          />
+        </div>
+        <div class="card_title">
+          建党百年 信息报国——信息科学与技术学院备份
+        </div>
+      </li>
+    </ul>
+    <div class="left-btn">
+        <span>
+          <button class="el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i></button>
+        </span>
+    </div>
+    <div class="right-btn">
+      <span>
+        <button class="el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i></button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      default: {
+//默认值
+        classArray: ["one", "two", "three", "four", "five", "six"],
+        leftSlider: true,
+      },
+      bannerWrap: null,
+      time: null,
+      lisArray: null, //卡片的集合
+      classlist: null,
+      leftBtn: null,
+      rightBtn: null,
+    };
+  },
+  methods: {
+    constructor() {
+      this.bannerWrap = document.getElementsByClassName("banner-card")[0];
+      let lis = this.bannerWrap.getElementsByTagName("li");
+// 将类数组转化为数组
+      this.lisArray = Array.from(lis);
+      this.classlist = this.default.classArray;
+//获取左右按钮
+      this.leftBtn = document.getElementsByClassName("left-btn")[0];
+      this.rightBtn = document.getElementsByClassName("right-btn")[0];
+
+      this.move(this.classlist);
+      this.timer();
+      this.listenMouseEvent();
+      this.listenMouseClickBtnEvent();
+    },
+//移动
+    move(list) {
+      this.lisArray.forEach((value, index) => {
+        value.setAttribute("class", list[index]); //给每一个li添加对应的类名
+      });
+    },
+// 向左运动
+    leftMove() {
+      let popValue = this.classlist.pop(); //删除并返回数组的最后一个
+      this.classlist.unshift(popValue); //把刚才删除的最后一个添加到数组开头
+      this.move(this.classlist); //调用移动方法，每一个li会根据新数组的位置进行移动，从而实现轮播的效果
+    },
+// 向右运动
+    rightMove() {
+      let shiftValue = this.classlist.shift(); //删除并返回数组的第一个
+      this.classlist.push(shiftValue); //把刚才删除的第一个push到数组末尾
+      this.move(this.classlist);
+    },
+// 定时器自动切换
+    timer() {
+      this.time = setInterval(this.leftMove.bind(this), 1000);
+    },
+// 鼠标移入移出事件
+    listenMouseEvent() {
+      this.bannerWrap.addEventListener("mouseover", () => {
+        clearInterval(this.time);
+        this.leftBtn.style.cssText = `left: 6rem; opacity: 1`;
+        this.rightBtn.style.cssText = `right: 6rem; opacity: 1`;
+      });
+      this.bannerWrap.addEventListener("mouseout", () => {
+        this.timer();
+        this.leftBtn.style.cssText = `left: 2rem; opacity: 0`;
+        this.rightBtn.style.cssText = `right: 2rem; opacity: 0`;
+      });
+    },
+// 点击左右按钮事件
+    listenMouseClickBtnEvent() {
+      this.leftBtn.addEventListener("click", () => {
+        this.leftMove();
+      });
+      this.rightBtn.addEventListener("click", () => {
+        this.rightMove();
+      });
+    },
+  },
+  mounted() {
+    this.constructor();
+  },
+};
+
+</script>
+<style scoped lang="scss">
+
+.banner-card {
+  width: 100%;
+  height: 50rem;
+  //background: #f5f5f5;
+  position: relative;
+
+  ul {
+    width: 90%;
+    height: 100%;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  li {
+    border-radius: 2rem;
+    width: 40rem;
+    height: 40rem;
+    position: absolute;
+    top: 2.5rem;
+    list-style-type: none;
+    transition: 0.3s;
+    cursor: pointer;
+    border: 1px solid #DA2D2D;
+    background-color: #fff;
+
+    .card_img {
+      width: 40rem;
+      height: 30rem;
+
+      img {
+        border-radius:2rem 2rem 0 0;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .card_title{
+      font-size: 2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1C1C1C;
+      text-align: left;
+      width: 36rem;
+      margin: 2rem auto;
+    }
+
+  }
+}
+
+.one {
+  z-index: 98;
+  left: -6rem;
+  transform: scale(0.8);
+}
+
+.two {
+  z-index: 99;
+  left: 14rem;
+  transform: scale(0.9);
+}
+
+.three {
+  left: 30rem;
+  z-index: 100;
+  transform: scale(1);
+}
+
+.four {
+  z-index: 99;
+  left: 48rem;
+  transform: scale(0.9);
+}
+
+.five {
+  left: 66rem;
+  z-index: 98;
+  transform: scale(0.8);
+}
+
+.six {
+  left: 74rem;
+  z-index: 96;
+  transform: scale(0.7);
+}
+
+.banner-card .left-btn ,.right-btn {
+  transition: 0.3s;
+  position: absolute;
+  top: 20rem;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.banner-card div span {
+  display: inline-block;
+  font-size: 2.5rem;
+}
+
+.left-btn {
+  left: 2rem;
+}
+
+.right-btn {
+  right: 10rem;
+}
+
+</style>
diff --git a/src/views/shouye/components/teaching_student.vue b/src/views/shouye/components/teaching_student.vue
new file mode 100644
index 0000000..32116cc
--- /dev/null
+++ b/src/views/shouye/components/teaching_student.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "teaching_student"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/shouye/css/comment.css b/src/views/shouye/css/comment.css
new file mode 100644
index 0000000..c87ff5c
--- /dev/null
+++ b/src/views/shouye/css/comment.css
@@ -0,0 +1,29 @@
+/**
+* @author: Clay
+* @date: 2022/1/2 17:16
+* @description：comment
+* @email: clay@hchyun.com
+*/
+.headline > .title {
+  margin: 0 auto;
+  width: 23rem;
+  height: 6rem;
+  background: #1956BC;
+  border-radius: 2.95rem;
+  text-align: center;
+  line-height: 6rem;
+  font-size: 2.6rem;
+  font-weight: 500;
+  color: #FFFFFF;
+  text-align: center;
+}
+.divider div{
+  float: left;
+}
+.divider_text{
+  font-size: 2rem;
+  color: #1956BC;
+  text-align: center;
+  line-height: 5rem;
+}
+
diff --git a/src/views/shouye/index.vue b/src/views/shouye/index.vue
new file mode 100644
index 0000000..5c326ad
--- /dev/null
+++ b/src/views/shouye/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <el-row>
+      <el-col>
+        <!--首页图片-->
+        <div class="top">
+          <img src="@/assets/index/sy_bj1@2x.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col class="interval">
+        <NewsCenter/>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NewsCenter from './components/news_center'
+import PartyBuildingActivities from './components/party_building_activities.vue'
+import ResearchTrends from './components/scientific_research_trends.vue'
+import SlideshowCard from './components/slideshow_card.vue'
+export default {
+  name: "index",
+  components:{
+    NewsCenter,
+    PartyBuildingActivities,
+    ResearchTrends,
+    SlideshowCard
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.top {
+  img {
+    width: 100%;
+  }
+}
+.interval{
+  margin-top: 5rem;
+}
+</style>