<template>
<div class='tab4'>
  <div class="conten">
      <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>
</template>

<script>
export default {
  name: 'tab4',
  components: {},
  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: 5, name: '学籍查询', url: '/tab4-4' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击顶部的tab栏切换
    cutTab (tabId) {
      this.imgListInd = tabId
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4{
  height: 100%;
    .conten{
    padding: 100px 100px 0;
    height: 100%;
    min-width: 1740px;
    .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;
      }
    }
    .con_tab{
      height: 700px;
      }
      .con_tab1{
        display: flex;
        justify-content: center;
        video{
          // width: 100%;
          height: 100%;
        }
      }
    }
}
</style>
