CQLJQWXY/index/src/views/tab4/tab4-2.vue

<!--  -->
<template>
  <div class="tab4-2">
    <div class="top">
      美丽校园
      <div class="search">
        <el-input
          placeholder="搜索"
          suffix-icon="el-icon-search"
          v-model="search"
        >
        </el-input>
        <span class="btn" @click="mySearch"></span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="conten">
      <div
        class="row"
        v-for="i in 8"
        :key="i"
      >
        <el-image
          style="width: 380px; height: 240px"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
        <!-- <img src="../../assets/img/demo2.png" alt="" /> -->
        <p>图片名称</p>
      </div>
    </div>
    <!-- 分页 -->
    <!-- :page-sizes="[15, 30, 45, 60]"
        :current-page="from2.pageNum"
        @current-change="currentChange"
        @size-change="sizeChange"
 -->
    <div class="paging">
      <el-pagination layout="prev,pager,next,jumper" :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tab4-2',
  components: {},
  data () {
    // 这里存放数据
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
      search: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    mySearch () {
      console.log('点击了搜索')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4-2 {
  position: relative;
  min-width: 1600px;
  height: 100%;
  padding: 40px 40px 0;
  color: black;
  .top {
    position: relative;
    width: 100%;
    text-align: center;
    color: #b9412e;
    font-size: 26px;
    font-weight: 700;
    .search {
      right: 50px;
      bottom: 0;
      position: absolute;
      .btn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        height: 40px;
        width: 40px;
        background-color: transparent;
      }
    }
  }
  .conten {
    margin-top: 30px;
    min-width: 1650px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .row {
      cursor: pointer;
      margin: 40px 0px;
      width: 380px;
      height: auto;
      /deep/.el-image__preview{
        object-fit: cover;
      }
      & > img {
        width: 380px;
        height: 240px;
      }
      & > p {
        margin-top: 8px;
        text-align: center;
      }
    }
  }
  .paging {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
  }
}
</style>