修改布局

houtai/src/views/tab1/index.vue

@@ -265,8 +265,6 @@ export default {
           right: 0px;
           top: 0;
         }
-        .table {
-        }
       }
     }
   }

index/src/views/home/index.vue

@@ -44,7 +44,8 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .7);
+  background: url('../../assets/img/indexBac.png');
+  background-size: 100% 100%;
   .btn{
     border-radius: 8px;
     cursor: pointer;

index/src/views/tab2/index.vue

@@ -52,8 +52,8 @@ export default {
   mounted () {
     // eslint-disable-next-line
     new Swiper(".swiper-container", {
-      slidesPerView: 2,
-      spaceBetween: 100,
+      slidesPerView: 3,
+      spaceBetween: 0,
       // centeredSlides: true,
       loop: true,
       // 如果需要前进后退按钮
@@ -81,9 +81,9 @@ export default {
   height: 100%;
   margin: 0 auto;
   .swiper-container {
-    padding-top: 100px;
-    height: 100%;
+    padding-top: 200px;
     width: 100%;
+    height: 100%;
     .swiper-wrapper {
       .swiper-slide {
         text-align: center;
@@ -91,25 +91,21 @@ export default {
         width: 100%;
         height: 500px;
         overflow: hidden;
-        transform: translateX(-800px);
         img {
-          opacity: 0.5;
+          border: 2px solid #b9412e;
           width: 100%;
           height: 500px;
           object-fit: cover;
         }
       }
     }
-    /deep/.swiper-slide.swiper-slide-active {
-      transform: translate(0, 0);
-    }
+    // /deep/.swiper-slide.swiper-slide-active {
+    //   transform: translate(0, 0);
+    // }
     /deep/.swiper-slide.swiper-slide-next {
+      transform:scale(1.3) ;
       overflow: visible;
-      transform: translate(-390px, 250px);
       z-index: 9999 !important;
-      img {
-        opacity: 1 !important;
-      }
     }
   }
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next{

index/src/views/tab3/index.vue

@@ -246,6 +246,7 @@ export default {
         width: 100%;
         height: 200px;
         object-fit: cover;
+        border: 2px solid #b9412e;
       }
       & > p {
         margin-top: 10px;

index/src/views/tab4/index copy.vue

@@ -0,0 +1,110 @@
+<!--  -->
+<template>
+<div class='tab4'>
+  <div class="conten">
+    <div v-for="item in imgList" :key="item.id"  @click="$router.push(item.url)">
+      <img :src="require('@/assets/img/tab5-'+item.id+'.png')" alt="">
+      <p>{{item.name}}</p>
+    </div>
+    <!-- 后面的盒子 -->
+    <div class="search" @click="$router.push('tab4-5')">
+      <div class="sea_con">
+        <i class="el-icon-search"></i>
+        <div>学籍查询</div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'tab4',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      imgList: [
+        { id: 1, name: '学校宣传片', url: '/tab4-1' },
+        { id: 2, name: '美丽校园', url: '/tab4-2' },
+        { id: 3, name: '校歌', url: '/tab4-3' },
+        { id: 4, name: '历任学校领导', url: '/tab4-4' }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab4{
+  .conten{
+    min-width: 1740px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    &>div{
+      cursor: pointer;
+      margin:50px 40px 0;
+      width: 500px;
+      height: auto;
+      &>img {
+        width: 500px;
+        height: 360px;
+        object-fit: cover;
+      }
+      &>p{
+        margin-top: 10px;
+        color: black;
+        text-align: center;
+      }
+    }
+    .search{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px dotted #ccc;
+      height: 360px;
+      .sea_con{
+        width: 100px;
+        height: 80px;
+        text-align: center;
+        &>i {
+          color: #b9412e;
+          font-size: 36px;
+        }
+        &>div {
+          border-radius: 5px;
+          margin-top: 8px;
+          width: 100px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          background-color: #b9412e;
+        }
+      }
+    }
+  }
+}
+</style>

index/src/views/tab4/index.vue

@@ -1,18 +1,13 @@
-<!--  -->
 <template>
 <div class='tab4'>
   <div class="conten">
-    <div v-for="item in imgList" :key="item.id"  @click="$router.push(item.url)">
-      <img :src="require('@/assets/img/tab5-'+item.id+'.png')" alt="">
-      <p>{{item.name}}</p>
-    </div>
-    <!-- 后面的盒子 -->
-    <div class="search" @click="$router.push('tab4-5')">
-      <div class="sea_con">
-        <i class="el-icon-search"></i>
-        <div>学籍查询</div>
+      <div class="con_top">
+        <div :class="{active:imgListInd===item.id}" v-for="item in imgList" :key="item.id" @click="cutTab(item.id)">{{item.name}}</div>
+      </div>
+      <!-- 学校宣传片 -->
+      <div class="con_tab con_tab1" v-show="imgListInd===1">
+        <video src="@/assets/video/loop.mp4" controls></video>
       </div>
-    </div>
   </div>
 </div>
 </template>
@@ -24,11 +19,13 @@ export default {
   data () {
     // 这里存放数据
     return {
+      imgListInd: 1,
       imgList: [
         { id: 1, name: '学校宣传片', url: '/tab4-1' },
         { id: 2, name: '美丽校园', url: '/tab4-2' },
         { id: 3, name: '校歌', url: '/tab4-3' },
-        { id: 4, name: '历任学校领导', url: '/tab4-4' }
+        { id: 4, name: '历任学校领导', url: '/tab4-4' },
+        { id: 5, name: '学籍查询', url: '/tab4-4' }
       ]
     }
   },
@@ -38,7 +35,10 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 点击顶部的tab栏切换
+    cutTab (tabId) {
+      this.imgListInd = tabId
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
@@ -59,52 +59,41 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4{
-  .conten{
+  height: 100%;
+    .conten{
+    padding: 100px 100px 0;
+    height: 100%;
     min-width: 1740px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    &>div{
-      cursor: pointer;
-      margin:50px 40px 0;
-      width: 500px;
-      height: auto;
-      &>img {
-        width: 500px;
-        height: 360px;
-        object-fit: cover;
-      }
-      &>p{
-        margin-top: 10px;
-        color: black;
+    .con_top{
+      margin-bottom: 40px;
+      display: flex;
+      justify-content: space-between;
+      height: 60px;
+      border-bottom: 4px solid #b9412e;
+      &>div {
+        font-size: 20px;
         text-align: center;
+        line-height: 56px;
+        width: 200px;
+        cursor: pointer;
+        color: #5d5d5d;
+      }
+      .active {
+        background-color: #b9412e;
+        color: #fde602;
       }
     }
-    .search{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 2px dotted #ccc;
-      height: 360px;
-      .sea_con{
-        width: 100px;
-        height: 80px;
-        text-align: center;
-        &>i {
-          color: #b9412e;
-          font-size: 36px;
-        }
-        &>div {
-          border-radius: 5px;
-          margin-top: 8px;
-          width: 100px;
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          background-color: #b9412e;
+    .con_tab{
+      height: 700px;
+      }
+      .con_tab1{
+        display: flex;
+        justify-content: center;
+        video{
+          // width: 100%;
+          height: 100%;
         }
       }
     }
-  }
 }
 </style>