nuxtProject/components/common/layout/desComp/gangweiList.vue

<template>
  <div class="client-gangwei-box">

    <h4 class="gangwei-label" v-if="label">{{label}}</h4>

    <div class="gangwei-row mta-hidden-xs" :class="rowClassPc" v-for="(rowList,index) in myListPc" :key="`pc-${index}`">
      <template v-for="(des,ind) in rowList">
        <!--    站位div    -->
        <div v-if="des.type === 'empty'"></div>
        <iconGangwei v-else class="my-icon"  :key="ind" :des="des"></iconGangwei>
      </template>
    </div>
    <div class="gangwei-row mta-hidden-sm cur-h5" :class="rowClassH5" v-for="(rowList,index) in myListH5" :key="`h5${index}`">
      <template  v-for="(des,ind) in rowList">
        <!--    站位div    -->
        <div v-if="des.type === 'empty'"></div>
        <iconGangwei v-else class="my-icon" :key="ind" :des="des"></iconGangwei>
      </template>
    </div>
  </div>
</template>

<script>
import iconGangwei from "@/components/common/iconGangwei";

export default {
  name: "gangweiList",
  props: {
    label: {
      type: String,
    },
    list: {
      type: Array,
      default: () => ([])
    },
    pcNum: {
      type: Number,
      default: 4
    },
    h5Num: {
      type: Number,
      default: 2
    },
  },
  computed: {
    myListPc() {
      const count = this.pcNum;
      const row = Math.ceil(this.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)
      }
      return result;
    },
    myListH5() {
      const count = this.h5Num;
      const row = Math.ceil(this.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)
      }
      return result;
    },
    rowClassPc() {
      const obj = {
        4: 'four',
        3: 'three',
        2: 'two'
      }
      return [`gangwei-icon-${obj[this.pcNum]}`]
    },
    rowClassH5() {
      const obj = {
        4: 'four',
        3: 'three',
        2: 'two'
      }
      return [`gangwei-icon-${obj[this.h5Num]}`]
    },
  },
  components: {
    iconGangwei
  }
}
</script>

<style lang="scss" scoped>
.client-gangwei-box {
  margin: 0 auto;

  .gangwei-row {
    width: 98%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 119px;

    .my-icon {
      &:last-child {
        margin-right: 0 !important;
      }
    }
  }


  .gangwei-label {
    text-align: center;
    font-size: 30px;
    color: #333;
    margin-bottom: 160px;
    margin-top: 90px;
    font-weight: 800;
  }

}
.client-gangwei-box {
  @media (max-width: 768px){
    .gangwei-label {
      margin-bottom: 60px;
    }

    .gangwei-row {
      margin-bottom: 60px;
    }
  }
}

</style>