CQLJQWXY/web/src/views/tab4/index.vue

<template>
<div class='tab4'>
  <div class="conten">
    <div class="left">
      <ul>
        <li
          :class="{ active: imgListInd===item.url }"
          v-for="item in imgList"
          :key="item.id"
          @click="cutTab(item.url)"
        >
          <p v-if="imgListInd===item.url">
            ★&nbsp;{{ item.name }}&nbsp;★
          </p>
          <p v-else>{{ item.name }}</p>
          <span> {{ item.biaoshi }} </span>
        </li>
      </ul>
    </div>
      <!-- 动态组件 -->
      <keep-alive>
        <component :is="imgListInd"></component>
      </keep-alive>
  </div>
</div>
</template>

<script>
import tab4one from './tab4-1.vue'
import tab4tow from './tab4-2.vue'
import tab4three from './tab4-3.vue'
import tab4four from './tab4-4.vue'
import tab4five from './tab4-5.vue'
export default {
  name: 'tab4',
  components: {tab4one,tab4tow,tab4three,tab4four,tab4five},
  data () {
    // 这里存放数据
    return {
      imgListInd: 'tab4one',
      imgList: [
        { id: 1, name: '学校宣传片', url: 'tab4one',biaoshi:'/' },
        { id: 2, name: '美丽校园', url: 'tab4tow' ,biaoshi:'/'},
        { id: 3, name: '军歌嘹亮', url: 'tab4three',biaoshi:'/' },
        { id: 4, name: '历任学校领导', url: 'tab4four',biaoshi:'/' },
        { id: 5, name: '学籍查询', url: 'tab4five' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击顶部的tab栏切换
    cutTab (val) {
      this.imgListInd = val
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4{
  height: 100%;
    .conten{
    height: 100%;
    min-width: 1740px;
      .left {
    position: relative;
    width: 100%;
    height: 180px;
    background: url("../../assets/img/tab4Tab.png");
    background-size: 100% 100%;
    ul {
      padding-left: 40px;
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      li {
        display: flex;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        width: 240px;
        cursor: pointer;
        &:hover {
          color: #f2cd83;
        }
        & > span {
          margin-left: 50px;
          color: #fff !important;
        }
        & > p {
          text-align: center;
          width: 145px;
        }
        &:nth-of-type(4){
          &>p{
            width: 165px;
          }
        }
      }
      .active {
        color: #f2cd83;
      }
    }

  }

    .con_tab{
      height: 700px;
      }
      .con_tab1{
        display: flex;
        justify-content: center;
        video{
          // width: 100%;
          height: 100%;
        }
      }
    }
}
</style>