首页完成

src/views/edu_teach/index.vue

@@ -94,7 +94,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>
@@ -122,7 +122,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>
@@ -150,7 +150,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>
@@ -178,7 +178,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>
@@ -206,7 +206,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>
@@ -234,7 +234,7 @@
                         </el-col>
                         <el-col :span="3" :offset="1">
                           <div class="tw_img">
-                            <img src="@/assets/index/tw1.png" alt="">
+                            <img src="@/assets/index/teaching_student/tw1.png" alt="">
                           </div>
                         </el-col>
                       </el-row>

src/views/index/index.vue

@@ -22,24 +22,6 @@
               </div>
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
               <el-divider class="name">News Center</el-divider>
             </div>
             <!--录播图-->
@@ -131,7 +113,7 @@
             <div class="title" style="background: #FFFFFF; color: #1956BC;margin-bottom: 2rem;">科学研究</div>
             <div class="divider" style="width: 80rem;">
               <el-divider class="name">
-                <div >Scientific research trends</div>
+                <div>Scientific research trends</div>
               </el-divider>
             </div>
 
@@ -720,74 +702,74 @@
       </el-row>
     </div>
     <!--下方开始-->
-    <!--    <div class="bottom">-->
+        <div class="bottom">
-    <!--      <el-row>-->
+          <el-row>
-    <!--        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">-->
+            <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">
-    <!--          <div class="grid-content"></div>-->
+              <div class="grid-content"></div>
-    <!--        </el-col>-->
+            </el-col>
-    <!--        <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">-->
+            <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
-    <!--          <div class="table">-->
+              <div class="table">
-    <!--            <table>-->
+                <table>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td rowspan="6">-->
+                    <td rowspan="6">
-    <!--                  <div class="left">-->
+                      <div class="left">
-    <!--                    <div class="table_img">-->
+                        <div class="table_img">
-    <!--                      <img src="@/assets/index/sy_icon_sjzx.png" alt="">-->
+                          <img src="@/assets/index/sy_icon_sjzx.png" alt="">
-    <!--                    </div>-->
+                        </div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right one">-->
+                      <div class="right one">
-    <!--                    <div class="table_tr_left">职工人数</div>-->
+                        <div class="table_tr_left">职工人数</div>
-    <!--                    <div class="table_tr_right">667人</div>-->
+                        <div class="table_tr_right">667人</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right tow">-->
+                      <div class="right tow">
-    <!--                    <div class="table_tr_left">在校学生人数</div>-->
+                        <div class="table_tr_left">在校学生人数</div>
-    <!--                    <div class="table_tr_right">667人</div>-->
+                        <div class="table_tr_right">667人</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right three">-->
+                      <div class="right three">
-    <!--                    <div class="table_tr_left">研究生导师</div>-->
+                        <div class="table_tr_left">研究生导师</div>
-    <!--                    <div class="table_tr_right">667人</div>-->
+                        <div class="table_tr_right">667人</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right fourth">-->
+                      <div class="right fourth">
-    <!--                    <div class="table_tr_left">科研团队</div>-->
+                        <div class="table_tr_left">科研团队</div>
-    <!--                    <div class="table_tr_right">28000人</div>-->
+                        <div class="table_tr_right">28000人</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right five">-->
+                      <div class="right five">
-    <!--                    <div class="table_tr_left">高层次人才</div>-->
+                        <div class="table_tr_left">高层次人才</div>
-    <!--                    <div class="table_tr_right">18个</div>-->
+                        <div class="table_tr_right">18个</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--              <tr>-->
+                  <tr>
-    <!--                <td>-->
+                    <td>
-    <!--                  <div class="right sex">-->
+                      <div class="right sex">
-    <!--                    <div class="table_tr_left">重大项目</div>-->
+                        <div class="table_tr_left">重大项目</div>
-    <!--                    <div class="table_tr_right">280000个</div>-->
+                        <div class="table_tr_right">280000个</div>
-    <!--                  </div>-->
+                      </div>
-    <!--                </td>-->
+                    </td>
-    <!--              </tr>-->
+                  </tr>
-    <!--            </table>-->
+                </table>
-    <!--          </div>-->
+              </div>
-    <!--        </el-col>-->
+            </el-col>
-    <!--      </el-row>-->
+          </el-row>
-    <!--    </div>-->
+        </div>
 
 
   </div>
@@ -848,10 +830,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.el-divider__text{
+.el-divider__text {
 
   background-color: transparent;
 }
+
 #index {
   .title {
     margin: 4rem auto 1rem;
@@ -1101,62 +1084,62 @@ export default {
 
     .tw {
       margin-top: 4rem;
+
+      .tw_time {
+        border-right: .2rem solid #D5D5D5;
+        height: 10rem;
+        width: 10rem;
+        color: #1956BC;
+        text-align: center;
+
+        .tw_top {
+          height: 8rem;
+          width: 100%;
+          line-height: 8rem;
+          font-size: 5.2rem;
+        }
+
+        .tw_bottoms {
+          height: 2rem;
+          width: 100%;
+          font-size: 1.4rem;
+        }
+      }
+
+      .tw_context {
+
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #161616;
+
+        .tw_context_title {
+          font-size: 2rem;
+          font-weight: 600;
+          padding-right: 2rem;
+
+        }
+
+        .tw_context_text {
+          margin-top: .8rem;
+          font-size: 1.6rem;
+          font-weight: 400;
+        }
+      }
+
+      .tw_img {
+        width: 7vw;
+
+        img {
+          width: 100%;
+        }
+      }
+
     }
 
-    .tw_time {
-      border-right: .2rem solid #D5D5D5;
-      height: 10rem;
-      width: 10rem;
-      color: #1956BC;
-      text-align: center;
-
-      .tw_top {
-        height: 8rem;
-        width: 100%;
-        line-height: 8rem;
-        font-size: 5.2rem;
-      }
-
-      .tw_bottoms {
-        height: 2rem;
-        width: 100%;
-        font-size: 1.4rem;
-      }
-    }
-
-    .tw_context {
-
-      font-family: PingFangSC-Medium, PingFang SC;
-      color: #161616;
-
-      .tw_context_title {
-        font-size: 2rem;
-        font-weight: 600;
-        padding-right: 2rem;
-
-      }
-
-      .tw_context_text {
-        margin-top: .8rem;
-        font-size: 1.6rem;
-        font-weight: 400;
-      }
-    }
-
-    .tw_img {
-      width: 7vw;
-
-      img {
-        width: 100%;
-      }
-    }
-
-
   }
 
   .bottom {
     margin-top: 2rem;
-    background-image: url('../../assets/index/sy_bj4.png');
+    background-image: url('../../assets/index/bottom/sy_bj4.png');
     //height: 66rem;
 
     .table {
@@ -1212,32 +1195,32 @@ export default {
       }
 
       .one {
-        background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
+        background-image: url("../../assets/index/bottom/sy_icon_zxxs.png");
       }
 
       .tow {
         margin-left: 6rem;
-        background-image: url("../../assets/index/footer/sy_icon_yjs.png");
+        background-image: url("../../assets/index/bottom/sy_icon_yjs.png");
       }
 
       .three {
         margin-left: 12rem;
-        background-image: url("../../assets/index/footer/sy_icon_kytd.png");
+        background-image: url("../../assets/index/bottom/sy_icon_kytd.png");
       }
 
       .fourth {
         margin-left: 18rem;
-        background-image: url("../../assets/index/footer/sy_icon_gccrc.png");
+        background-image: url("../../assets/index/bottom/sy_icon_gccrc.png");
       }
 
       .five {
         margin-left: 12rem;
-        background-image: url("../../assets/index/footer/sy_icon_gzrs.png");
+        background-image: url("../../assets/index/bottom/sy_icon_gzrs.png");
       }
 
       .sex {
         margin-left: 6rem;
-        background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
+        background-image: url("../../assets/index/bottom/sy_icon_zxxs.png");
       }
 
     }

src/views/shouye/components/bottom.vue

@@ -0,0 +1,169 @@
+<template>
+  <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/bottom/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>
+</template>
+
+<script>
+export default {
+  name: "bottom"
+}
+</script>
+
+<style scoped lang="scss">
+
+.bottom {
+  margin-top: 2rem;
+  background-image: url('../../../assets/index/bottom/sy_bj4.png');
+  //height: 66rem;
+
+  .table {
+    margin: 4rem 0 0 0;
+    width: 100%;
+
+
+    tr {
+      width: 100%;
+    }
+
+    td {
+      width: 50%;
+      margin: 0;
+      padding: 0;
+    }
+
+    .left {
+      width: 100%;
+      height: 55rem;
+
+      .table_img {
+        //width: 17.6vw;
+        text-align: right;
+        padding-top: 6rem;
+      }
+    }
+
+    .right {
+      width: 123%;
+      height: 6.8rem;
+      clear: left;
+      position: relative;
+      color: #FFFFFF;
+
+      .table_tr_left {
+        position: absolute;
+        font-size: 1.6rem;
+        height: 100%;
+        line-height: 6.8rem;
+        float: left;
+        left: 12.5rem;
+      }
+
+      .table_tr_right {
+        position: absolute;
+        font-size: 2.4rem;
+        float: left;
+        right: 3.3rem;
+        height: 100%;
+        line-height: 6.8rem;
+      }
+    }
+
+    .one {
+      background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
+    }
+
+    .tow {
+      margin-left: 6rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_yjs.png");
+    }
+
+    .three {
+      margin-left: 12rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_kytd.png");
+    }
+
+    .fourth {
+      margin-left: 18rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_gccrc.png");
+    }
+
+    .five {
+      margin-left: 12rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_gzrs.png");
+    }
+
+    .sex {
+      margin-left: 6rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
+    }
+
+  }
+
+}
+</style>

src/views/shouye/components/news_center.vue

@@ -29,10 +29,10 @@
       </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 trigger="click" height="23.3vw">
             <el-carousel-item v-for="item in 4" :key="item">
               <div>
-                <img src="@/assets/index/t1@2x.png" alt="">
+                <img src="@/assets/index/news_center/t1@2x.png" alt="">
                 <div class="bottom_title">
                   <el-row>
                     <el-col :offset="2" :span="18">

src/views/shouye/components/party_building_activities.vue

@@ -68,7 +68,7 @@
           <el-row>
             <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
               <div class="phe_img">
-                <img src="@/assets/index/1.png" alt="">
+                <img src="@/assets/index/party_building_activities/1.png" alt="">
               </div>
             </el-col>
             <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
@@ -83,12 +83,13 @@
               <div class="phe_time">2021.11.10</div>
             </el-col>
           </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
         </div>
         <div class="phe_row">
           <el-row>
             <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
               <div class="phe_img">
-                <img src="@/assets/index/1.png" alt="">
+                <img src="@/assets/index/party_building_activities/1.png" alt="">
               </div>
             </el-col>
             <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
@@ -103,12 +104,13 @@
               <div class="phe_time">2021.11.10</div>
             </el-col>
           </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
         </div>
         <div class="phe_row">
           <el-row>
             <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
               <div class="phe_img">
-                <img src="@/assets/index/1.png" alt="">
+                <img src="@/assets/index/party_building_activities/1.png" alt="">
               </div>
             </el-col>
             <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
@@ -123,12 +125,13 @@
               <div class="phe_time">2021.11.10</div>
             </el-col>
           </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
         </div>
         <div class="phe_row">
           <el-row>
             <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
               <div class="phe_img">
-                <img src="@/assets/index/1.png" alt="">
+                <img src="@/assets/index/party_building_activities/1.png" alt="">
               </div>
             </el-col>
             <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
@@ -143,12 +146,13 @@
               <div class="phe_time">2021.11.10</div>
             </el-col>
           </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
         </div>
         <div class="phe_row">
           <el-row>
             <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
               <div class="phe_img">
-                <img src="@/assets/index/1.png" alt="">
+                <img src="@/assets/index/party_building_activities/1.png" alt="">
               </div>
             </el-col>
             <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
@@ -164,8 +168,6 @@
             </el-col>
           </el-row>
         </div>
-
-
       </el-col>
     </el-row>
   </div>

src/views/shouye/components/scientific_research_trends.vue

@@ -151,6 +151,9 @@
                 <div class="time">2021.10.23</div>
               </el-col>
             </el-row>
+            <div v-show="width<992" class="scientific_context_divider">
+              <hr style="border: 0.1rem solid #E6E6E6;">
+            </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
             <el-row class="scientific_context_text">
@@ -260,9 +263,9 @@
                 <div class="time">2021.10.01</div>
               </el-col>
             </el-row>
-            <!--            <div class="scientific_context_divider">-->
+            <div v-show="width<992" class="academia_context_divider">
-            <!--              <hr style="border: 0.1rem solid #E6E6E6;">-->
+              <hr style="border: 0.1rem solid #E6E6E6;">
-            <!--            </div>-->
+            </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
             <el-row class="academia_context_text">
@@ -284,7 +287,7 @@
         <div class="grid-content"></div>
       </el-col>
       <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div style="background: #FFFFFF;color: #1956BC;"  class="more">
+        <div style="background: #FFFFFF;color: #1956BC;" class="more">
           {{ $t('message.more') }}
         </div>
         <div class="more_img">
@@ -297,7 +300,12 @@
 
 <script>
 export default {
-  name: "scientific_research_trends"
+  name: "scientific_research_trends",
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
 }
 </script>
 
@@ -335,7 +343,9 @@ export default {
     padding-left: 4rem;
 
     .img {
-      width: 8.33333%;
+      img{
+        width: 2.6rem;
+      }
     }
 
     .text {
@@ -382,7 +392,9 @@ export default {
 
 
     .img {
-      width: 8.33333%;
+      img{
+        width: 2.6rem;
+      }
     }
 
     .text {

src/views/shouye/components/teaching_student.vue

@@ -1,13 +1,300 @@
 <template>
+  <div class="teaching_student">
 
+    <!--title-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div class="title">
+          <!--        {{ $t('message.news_center') }}-->
+          教学工作
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <hr class="hr">
+          </el-col>
+          <el-col :span="8">
+            <div class="divider_text">Teaching and student</div>
+          </el-col>
+          <el-col :span="8">
+            <hr class="hr">
+          </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" class="phe">
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+          <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
+        </div>
+        <div class="tw">
+          <el-row>
+            <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
+              <div class="tw_time">
+                <div class="tw_top">
+                  28
+                </div>
+                <div class="tw_bottoms">
+                  2021-10
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="19" :sm="19" :md="15" :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 v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
+              <div class="tw_img">
+                <img src="@/assets/index/teaching_student/tw1.png" alt="">
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+    <!--更多-->
+    <el-row>
+      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
+        <div class="more">
+          {{ $t('message.more') }}
+        </div>
+        <div class="more_img">
+          <img src="@/assets/index/sy_icon_zhdl.png" alt="">
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "teaching_student"
+  name: "teaching_student",
+  data(){
+    return{
+      width:document.documentElement.clientWidth
+    }
+  },
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '../css/comment.css';
+.teaching_student{
+  margin-top: 4rem;
+}
+.tw {
+  margin-top: 4rem;
 
+  .tw_time {
+    border-right: .2rem solid #D5D5D5;
+    height: 10rem;
+    width: 10rem;
+    color: #1956BC;
+    text-align: center;
+
+    .tw_top {
+      height: 8rem;
+      width: 100%;
+      line-height: 8rem;
+      font-size: 5.2rem;
+    }
+
+    .tw_bottoms {
+      height: 2rem;
+      width: 100%;
+      font-size: 1.4rem;
+    }
+  }
+
+  .tw_context {
+
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #161616;
+
+    .tw_context_title {
+      font-size: 2rem;
+      font-weight: 600;
+      padding-right: 2rem;
+
+    }
+
+    .tw_context_text {
+      margin-top: .8rem;
+      font-size: 1.6rem;
+      font-weight: 400;
+    }
+  }
+
+  .tw_img {
+    width: 7vw;
+
+    img {
+      width: 100%;
+    }
+  }
+
+}
 </style>

src/views/shouye/index.vue

@@ -23,6 +23,16 @@
         <PartyBuildingActivities/>
       </el-col>
     </el-row>
+    <el-row>
+      <el-col>
+        <TeachingStudent/>
+      </el-col>
+    </el-row>
+    <el-row v-show="width>=1100">
+      <el-col>
+        <Bottom/>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -31,14 +41,23 @@ 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'
+import TeachingStudent from './components/teaching_student.vue'
+import Bottom from './components/bottom.vue'
 export default {
   name: "index",
   components:{
     NewsCenter,
     PartyBuildingActivities,
     ResearchTrends,
-    SlideshowCard
+    SlideshowCard,
-  }
+    TeachingStudent,
+    Bottom
+  },
+  data(){
+    return{
+      width:document.documentElement.clientWidth
+    }
+  },
 }
 </script>