From 2d79617095724d4984df1f130a205ab475dd1abf Mon Sep 17 00:00:00 2001
From: clay <20932067@zju.edu.cn>
Date: Mon, 3 Oct 2022 16:29:06 +0800
Subject: [PATCH] =?UTF-8?q?clay=20commit=20:=20=E9=A6=96=E9=A1=B5=E9=87=8D?=
 =?UTF-8?q?=E5=81=9A=E5=87=86=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/views/header/index_back.vue               | 340 +++++++++++++++++
 src/views/index/components-back/bottom.vue    | 201 ++++++++++
 .../news_center_back.vue                      |   0
 .../party_building_activities_back.vue        |   2 +-
 .../scientific_research_trends_back.vue       |   0
 .../index/components-back/slideshow_card.vue  | 342 ++++++++++++++++++
 .../teaching_student_back.vue                 |   0
 src/views/index/index.vue                     |  12 -
 9 files changed, 885 insertions(+), 14 deletions(-)
 create mode 100644 src/views/header/index_back.vue
 create mode 100644 src/views/index/components-back/bottom.vue
 rename src/views/index/{components => components-back}/news_center_back.vue (100%)
 rename src/views/index/{components => components-back}/party_building_activities_back.vue (99%)
 rename src/views/index/{components => components-back}/scientific_research_trends_back.vue (100%)
 create mode 100644 src/views/index/components-back/slideshow_card.vue
 rename src/views/index/{components => components-back}/teaching_student_back.vue (100%)

diff --git a/.env.development b/.env.development
index 9d17ba1..3d433fe 100644
--- a/.env.development
+++ b/.env.development
@@ -3,7 +3,7 @@ ENV = 'development'
 
 # EBTS/开发环境
 #VUE_APP_BASE_API = '/dev-api'
-VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
+VUE_APP_BASE_API = 'http://192.168.101.4:8085/dev-api'
 #VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
 SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
 #VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'
diff --git a/src/views/header/index_back.vue b/src/views/header/index_back.vue
new file mode 100644
index 0000000..c1cb992
--- /dev/null
+++ b/src/views/header/index_back.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="header">
+    <!--头部部分-->
+    <div class="top">
+      <el-row>
+<!--        <el-col :span="2">-->
+<!--          <div class="link">-->
+<!--            {{ $t('message.student') }}-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="2">-->
+<!--          <div class="link">-->
+<!--            {{ $t('message.staff') }}-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="2">-->
+<!--          <div class="link">-->
+<!--            {{ $t('message.alumni') }}-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="2">-->
+<!--          <div class="link">-->
+<!--            {{ $t('message.examine') }}-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="3">-->
+<!--          <div class="link">-->
+<!--            {{ $t('message.services_portal') }}-->
+<!--          </div>-->
+<!--        </el-col>-->
+        <el-col :span="11">
+          <div style="width: 10px;height: 10px;"></div>
+        </el-col>
+        <el-col :offset="11" :span="2">
+          <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
+        </el-col>
+      </el-row>
+    </div>
+    <!--导航部分-->
+    <div class="bottom">
+      <el-row>
+        <!--        <el-col v-show="width" :span="1">-->
+        <!--          <div class="grid-content"></div>-->
+        <!--        </el-col>-->
+        <div class="bottom-div" style="margin-left: 1rem;">
+          <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5">
+            <div class="icon">
+              <div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
+              <!--            <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>-->
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
+            <div class="banner">
+              <router-link to="/home">
+                <div class="link_text">
+                  <div v-show="$i18n.locale  === 'cn'" style="padding: 0 1.1rem;" class="link_text_title">学院首页</div>
+                  <div v-show="$i18n.locale  === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
+                </div>
+              </router-link>
+
+              <span v-for="(menu,index) in menuData" :key="index"
+                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'cn'&& menu.displayType == 2)">
+            <a>
+              <div class="link_text">
+                <div class="link_text_title">
+                  <span style="padding: 0 1.1rem;" v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+                  <span style="padding: 0 .9rem" v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
+                <div class="secondary">
+                  <ul style="text-align:left;">
+                    <span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
+                    <li class="menu_list" v-if="item.displayType != 4">
+                      <div class="menu_suffix">
+                        <div>
+                          <span v-show="$i18n.locale  === 'cn'">{{ item.title }}</span>
+                          <span v-show="$i18n.locale  === 'en'">{{ item.englishTitle }}</span>
+                        </div>
+                      </div>
+                    </li>
+                    </span>
+                  </ul>
+                </div>
+                </div>
+                <!--<div class="secondary" v-if="index == 5">-->
+              </div>
+            </a>
+            </span>
+            </div>
+          </el-col>
+        </div>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getNavigation} from "@/api";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      english: false,
+      width: document.documentElement.clientWidth >= 1200,
+      pc: document.documentElement.clientWidth > 992,
+      menuData: [],
+    }
+  },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth >= 1200
+      })()
+    }
+  },
+  created() {
+    if (this.pc) {
+      getNavigation({}).then(res => {
+        this.menuData = res.data
+        sessionStorage.setItem("menu", JSON.stringify(res.data))
+      })
+    }
+  },
+  methods: {
+    menuCut(menu) {
+      console.log(menu)
+      this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
+    },
+    switchLang() {
+      let lang = ''
+      if (this.$i18n.locale === 'en') {
+        lang = 'cn'
+      } else {
+        lang = 'en'
+      }
+      sessionStorage.setItem("lang", lang)
+      let fullPath = this.$route.fullPath
+      debugger
+      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.header {
+  //width: 100rem;
+  width: 130rem;
+  margin: 0 auto;
+
+  .top {
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    text-align: center;
+    width: 100%;
+    height: 3rem;
+    background: #1956BC;
+
+    .switchLang {
+      cursor: pointer;
+      font-size: 1.6rem;
+    }
+
+    .link {
+      line-height: 2.2rem;
+      width: 80%;
+      margin: .4rem auto;
+      border-radius: 1.1rem;
+    }
+
+    .link:hover {
+      background: rgba(255, 255, 255, 0.7);
+    }
+
+  }
+
+  .bottom {
+    height: 7.6rem;
+    background: rgba(25, 86, 188, 0.6);
+    border-radius: 0rem 0rem 2rem 2rem;
+
+    .icon {
+      margin-left: 4rem;
+
+      div {
+        margin-top: 2.4rem;
+      }
+
+      .icont {
+        img {
+          width: 23.3rem;
+        }
+      }
+
+      .iconb {
+        img {
+          width: 8.9rem;
+        }
+      }
+    }
+
+    .banner {
+      a {
+        text-decoration: none;
+        color: #ffffff;
+      }
+
+      width: 100%;
+      height: 7.6rem;
+      clear: left;
+      margin-left: 3rem;
+
+      .link_text {
+        height: 100%;
+        text-align: center;
+        float: left;
+        font-size: 1.6rem;
+        font-family: "微软雅黑";
+        font-weight: 400;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+
+      }
+
+      .link_text_title {
+        position: relative;
+      }
+
+
+      .secondary {
+        display: none;
+        width: 25rem;
+        position: absolute;
+        //top: 6rem;
+        background-color: transparent;
+        text-align: left !important;
+        margin-top: 1rem;
+        //display: block;
+        //width: 100%;
+        //height: 5rem;
+        //background-color: #1956BC;
+
+
+        ul {
+          background-color: #ffffff;
+          display: inline-block;
+          border-radius: 0 0 .5rem .5rem;
+
+          li {
+            margin-top: 1.2rem;
+            height: 2rem;
+            list-style: none;
+            //border-bottom: .1rem solid gray;
+            color: #666666;
+            //display: flex;
+            //align-items: center;
+            //justify-content: center;
+            //clear: left;
+
+            //.menu_prefix{
+            //  width: 1.2rem;
+            //}
+            .menu_suffix {
+
+              margin-left: .6rem;
+              display: inline-block;
+              //width: 14.3rem;
+              border-left: .2rem solid #ffffff;
+              margin-right: .8rem;
+              padding-left: .8rem;
+
+              div {
+                padding: 0.2rem .4rem;
+              }
+            }
+
+            div {
+              float: left;
+            }
+          }
+
+          li:hover {
+            //background-color: rgba(25, 86, 188, 0.6);
+          }
+
+          li:last-child {
+            margin-bottom: 1.4rem;
+            //border-bottom: none;
+
+          }
+        }
+      }
+
+
+      .link_text:hover {
+        //.border{
+        //  background-color: #fff;
+        //}
+        .secondary {
+          display: block;
+        }
+
+        .link_text_title {
+          //font-weight: bolder !important;
+        }
+      }
+
+      .menu_list:hover {
+        .menu_suffix {
+
+          border-left: .2rem solid #1956BC;
+
+          div {
+            color: #0054B0;
+            background-color: #C3D7EC;
+            border-radius: 0.2rem;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .banner {
+    margin: 0 auto;
+  }
+}
+
+
+</style>
diff --git a/src/views/index/components-back/bottom.vue b/src/views/index/components-back/bottom.vue
new file mode 100644
index 0000000..448b856
--- /dev/null
+++ b/src/views/index/components-back/bottom.vue
@@ -0,0 +1,201 @@
+<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 class="text">
+                    {{ $t('message.data_information') }}
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="right one">
+                  <div class="table_tr_left">{{ $t('message.employees') }}</div>
+                  <div class="table_tr_right">{{data.worker}}人</div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="right tow">
+                  <div class="table_tr_left">{{ $t('message.number_students') }}</div>
+                  <div class="table_tr_right">{{data.students}}人</div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="right three">
+                  <div class="table_tr_left">{{ $t('message.graduate_tutor') }}</div>
+                  <div class="table_tr_right">{{data.postgraduateTutor}}人</div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="right fourth">
+                  <div class="table_tr_left">{{ $t('message.research_team') }}</div>
+                  <div class="table_tr_right">{{data.scientificTeam}}人</div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="right five">
+                  <div class="table_tr_left">{{ $t('message.high_level_talents') }}</div>
+                  <div class="table_tr_right">{{data.highLevelTalents}}个</div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="right sex">
+                  <div class="table_tr_left">{{ $t('message.major_projects') }}</div>
+                  <div class="table_tr_right">{{data.majorProjects}}个</div>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import {getConfig} from "@/api";
+
+export default {
+  name: "bottom",
+  data(){
+    return{
+      data:{}
+    }
+  },
+  created() {
+    getConfig("statistic").then(res=>{
+      this.data = JSON.parse(res.data)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.bottom {
+  margin-top: 2rem;
+  background-image: url('../../../assets/index/bottom/sy_bj4.png');
+  padding-bottom: 4rem;
+
+  .table {
+    margin: 4rem 0 0 0;
+    width: 100%;
+
+    tr {
+      width: 100%;
+    }
+
+    td {
+      width: 50%;
+      margin: 0;
+      padding: 0;
+    }
+
+    .left {
+      width: 100%;
+      height: 55rem;
+      position: relative;
+
+      .table_img {
+        //width: 17.6vw;
+        text-align: right;
+        padding-top: 6rem;
+      }
+      .text{
+        height: 7rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        padding: 0;
+        margin: 0;
+        color: #1956BC;
+        width: 55%;
+        text-align: center;
+        font-size: 2.6rem;
+        position: absolute;
+        top: 42%;
+        left: 11%;
+      }
+    }
+
+    .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>
diff --git a/src/views/index/components/news_center_back.vue b/src/views/index/components-back/news_center_back.vue
similarity index 100%
rename from src/views/index/components/news_center_back.vue
rename to src/views/index/components-back/news_center_back.vue
diff --git a/src/views/index/components/party_building_activities_back.vue b/src/views/index/components-back/party_building_activities_back.vue
similarity index 99%
rename from src/views/index/components/party_building_activities_back.vue
rename to src/views/index/components-back/party_building_activities_back.vue
index 4726409..0c02c5d 100644
--- a/src/views/index/components/party_building_activities_back.vue
+++ b/src/views/index/components-back/party_building_activities_back.vue
@@ -128,7 +128,7 @@
 </template>
 
 <script>
-import SlideshowCard from './slideshow_card'
+import SlideshowCard from '../components/slideshow_card'
 import {getArticleList} from "@/api";
 import {toArticle, lookMoreComment} from "@/utils/sist";
 import {lookMoreFixedComment} from "../../../utils/sist";
diff --git a/src/views/index/components/scientific_research_trends_back.vue b/src/views/index/components-back/scientific_research_trends_back.vue
similarity index 100%
rename from src/views/index/components/scientific_research_trends_back.vue
rename to src/views/index/components-back/scientific_research_trends_back.vue
diff --git a/src/views/index/components-back/slideshow_card.vue b/src/views/index/components-back/slideshow_card.vue
new file mode 100644
index 0000000..8e0dcdd
--- /dev/null
+++ b/src/views/index/components-back/slideshow_card.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="banner-card">
+    <ul class="ul">
+      <li v-for="(item,index) in bannerDate" :key="index">
+        <div v-if="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
+          <div class="card_img" >
+            <img
+              :src="item.imgurl"
+              alt=""/>
+          </div>
+          <div class="card_title">
+            {{item.title}}
+          </div>
+        </div>
+        <div v-if="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
+          <div class="card_img" >
+            <img
+              :src="item.imgurl"
+              alt=""/>
+          </div>
+          <div class="card_title">
+            {{item.enTitle}}
+          </div>
+        </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>
+import {banner} from "@/api";
+
+export default {
+  data() {
+    return {
+      defaultConfig: {
+//默认值
+        classArray: ["one", "two", "three", "four", "five", "six"],
+        // classArray: ["one", "two", "three", "four", "five"],
+        leftSlider: true,
+      },
+      bannerWrap: null,
+      time: null,
+      lisArray: null, //卡片的集合
+      classlist: null,
+      leftBtn: null,
+      rightBtn: null,
+      bannerDate:[]
+    };
+  },
+  beforeCreate() {
+    banner("STCplDRCWAA3zcFE0EBTcQI").then(res=>{
+      this.bannerDate = res.data
+    })
+  },
+  created() {
+  },
+  methods: {
+    clickTo(link){
+      //console.log(link)
+      window.location.href=link;//当前标签页
+    },
+    constructor() {
+      this.bannerWrap = document.getElementsByClassName("banner-card")[0];
+      let lis = this.bannerWrap.getElementsByTagName("li");
+// 将类数组转化为数组
+      this.lisArray = Array.from(lis);
+      this.classlist = this.defaultConfig.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() {
+    setTimeout(() =>{
+      this.constructor();
+    },1000);
+  },
+};
+
+</script>
+<style scoped lang="scss">
+
+.banner-card {
+  width: 100%;
+  height: 50rem;
+  //background: #f5f5f5;
+  position: relative;
+
+  ul {
+    width: 71.5%;
+    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;
+    background-color: #fff;
+
+    .card_img {
+      width: 100%;
+      height: 75%;
+
+      img {
+        border-radius: 2rem 2rem 0 0;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .card_title {
+      width: 90%;
+      font-size: 2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1C1C1C;
+      text-align: left;
+      //width: 36rem;
+      margin: 2rem auto;
+      overflow:hidden; //超出的文本隐藏
+      text-overflow:ellipsis; //溢出用省略号显示
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
+    }
+
+  }
+}
+
+.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);
+  border: 1px solid #DA2D2D;
+}
+
+.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;
+}
+
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
+  .banner-card {
+    height: 34rem;
+
+    li {
+      width: 28rem !important;
+      height: 28rem !important;
+
+      .card_title {
+        font-size: 1.6rem;
+        margin: 1rem 1rem;
+      }
+    }
+
+    .one {
+      left: -2.8rem;
+    }
+
+    .two {
+      left: 10rem;
+    }
+
+    .three {
+      left: 24rem;
+    }
+
+    .four {
+      left: 38rem;
+    }
+
+    .five {
+      left: 50.3rem;
+    }
+
+    .six {
+      left: 80rem;
+    }
+  }
+
+
+}
+
+@media screen and (max-width: 1100px) {
+  .banner-card {
+    height: 34rem;
+
+    li {
+      width: 22rem !important;
+      height: 22rem !important;
+
+      .card_title {
+        font-size: 1.6rem;
+        margin: 1rem 1rem;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 2; //显示的行
+      }
+    }
+
+    .one {
+      left: -2.6rem;
+    }
+
+    .two {
+      left: 6rem;
+    }
+
+    .three {
+      left: 16rem;
+    }
+
+    .four {
+      left: 26rem;
+    }
+
+    .five {
+      left: 34rem;
+    }
+
+    .six {
+      left: 80rem;
+    }
+  }
+}
+</style>
diff --git a/src/views/index/components/teaching_student_back.vue b/src/views/index/components-back/teaching_student_back.vue
similarity index 100%
rename from src/views/index/components/teaching_student_back.vue
rename to src/views/index/components-back/teaching_student_back.vue
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 2f195a9..ad8f7a3 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,17 +1,5 @@
 <template>
   <div>
-    <el-row>
-      <el-col class="bgc">
-        <!--首页图片-->
-        <div class="top">
-          <img v-if="imageUrl != null" :src="imageUrl" alt="">
-          <img v-if="imageUrl == null" src="@/assets/index/sy_bj1@2x.png" alt="">
-        </div>
-        <div class="next">
-          <img src="@/assets/index/sy_icon_xh.png" alt="">
-        </div>
-      </el-col>
-    </el-row>
     <el-row>
       <el-col class="interval">
         <NewsCenter/>