nuxtProject/components/common/layout/imgDes/imgCardLv1.vue

<template>
  <div class="mta-card-lv1">
    <div class="mta-card-content-pc mta-hidden-xs">
      <img src="#">
      <div class="card-info"></div>
    </div>
    <div class="mta-card-content-h5 mta-hidden-sm">
      <img src="#">
      <div class="card-info"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "imgCardLv1",
  props: {
    img: {
      type: String,
      required: true,
    },
    option: {
      type: Object,
      required: true,
    },
    col: {
      type: Number,
      default: 3
    }
  },
  computed: {
    title() {
      return this.option.title;
    },
    des() {
      return this.option.des;
    },
    tages() {
      const count = this.col;
      const list = this.option.list;
      const row = Math.ceil(list.length / count);
      const result = [];
      for (let i = 1; i <= row; i++) {
        const start = (i - 1) * count;
        const end = (i * count)
        const curList = this.list.slice(start, end);
        if (curList.length < count) {
          curList.push({type: 'empty'});
        }
        result.push(curList)
      }
    }
  }
}
</script>

<style scoped>

</style>