<!--  -->
<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>
