ShouBo/webM/src/views/Collections/index.vue

<template>
  <div class="Collections">
    <div class="ban">
      <img src="@/assets/img/bannerC.png" alt="" />
      <h3>Collections</h3>
    </div>
    <div class="main">
      <div class="row" v-for="(item, index) in data" :key="index">
        <img :src="require(`@/assets/img/Collections/${item.img}`)" alt="" />
        <div @click="skip(item.path)">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Collections",
  components: {},
  data() {
    //这里存放数据
    return {
      data: [
        {
          name: "Bronzes",
          path: "/Layout/Collections/Bronzes",
          img: "Bronzes.png",
        },
        {
          name: "Ceramics",
          path: "/Layout/Collections/Ceramics",
          img: "Ceramics.png",
        },
        {
          name: "Buddhist Statues",
          path: "/Layout/Collections/Buddhist",
          img: "Buddhist.png",
        },
        {
          name: "Jadewares",
          path: "/Layout/Collections/Jadewares",
          img: "Jadewares.png",
        },
        {
          name: "Calligraphies",
          path: "/Layout/Collections/Calligraphies",
          img: "Calligraphies.png",
        },
        {
          name: "Paintings",
          path: "/Layout/Collections/Paintings",
          img: "Paintings.png",
        },
        {
          name: "Gold & Silverwares",
          path: "/Layout/Collections/Gold",
          img: "Gold.png",
        },
        {
          name: "Coins & Banknotes",
          path: "/Layout/Collections/Coins",
          img: "Coins.png",
        },
        {
          name: "Brocades & Embroideries",
          path: "/Layout/Collections/Brocades",
          img: "Brocades.png",
        },
        {
          name: "Cultural Supplies",
          path: "/Layout/Collections/Cultural",
          img: "Cultural.png",
        },
        {
          name: "Miscellaneous",
          path: "/Layout/Collections/Miscellaneous",
          img: "Miscellaneous.png",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skip(path) {
      this.$router.push(path).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Collections {
  width: 100%;
  background-color: #f7f6f3;
  .ban {
    position: relative;
    width: 100%;
    & > img {
      width: 100%;
    }
    & > h3 {
      position: absolute;
      font-size: 24px;
      color: #fff;
      left: 30px;
      bottom: 30px;
      border-bottom: 1px solid #fff;
    }
  }
  .main {
    padding: 20px;
    .row {
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      & > img {
        width: 100%;
        border-radius: 5px;
      }
      & > div {
        font-weight: 700;
        color: #fff;
        font-size: 22px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>