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

<template>
  <div class="mta-card-lv1">
    <div class="mta-card-content-pc mta-hidden-xs">
      <img :src="img">
      <div class="card-info">
        <h5>{{title}}</h5>
        <p>{{description}}</p>
        <div class="mta-card-row" v-for="(rowList,index) in tages" :key="`pc-${index}`">
          <template v-for="(des,ind) in rowList">
            <!--    站位div    -->
            <span v-if="des.empty" :key="ind"></span>
            <span :key="ind"><i></i><span>{{des.value}}</span></span>
          </template>
        </div>
      </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;
    },
    description() {
      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 = list.slice(start, end);
        if (curList.length < count) {
          curList.push({type: 'empty'});
        }
        result.push(curList)
      }
    }
  }
}
</script>

<style scoped>

</style>