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

<template>
  <div class="client-gangwei-box">
    <div class="client-container">
    <h4 class="gangwei-title" v-if="label">{{label}}</h4>

      <div class="gangwei-cp-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  :key="ind" :des="des" ></iconGangwei>
        </template>
      </div>
      <div class="gangwei-phone-row mta-hidden-sm" :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 :key="ind" :des="des" ></iconGangwei>
        </template>
      </div>
    </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">
  .client-gangwei-box {
    // 标题
    .gangwei-title {font-size: 30px;color: #333;font-weight: 800;text-align: center;margin: 92px 0 105px;}

    /**************** pc样式 ****************/
    .gangwei-cp-row{display: flex;flex-wrap: wrap;}
    // 图标列表
    .gangwei-icon-three,.gangwei-icon-four{
      text-align: center;
      .gangwei-icon{margin-bottom: 116px}
      .gangwei-icon-content{
        display: inline-block;margin: 0 auto;text-align: center;
        i{width:164px;height:164px;margin:0 auto 22px;display: block;
          background-repeat: no-repeat;background-position: center;background-size: contain;}
        p{font-size: 18px;font-weight: 800;color: #333333;}
      }
    }

    // 一行三个
    .gangwei-icon-three{
      .gangwei-icon{width: 33.33%;}
    }

    // 一行四个
    .gangwei-icon-four{
      .gangwei-icon{width: 25%;}
    }

    /**************** 手机样式 ****************/
    @media (max-width: 768px){
      // 标题
      .gangwei-title {font-size: 18px;margin: 50px 0 26px;}
      .gangwei-phone-row{display: flex;flex-wrap: wrap;}
      .gangwei-icon-two{
        text-align: center;
        .gangwei-icon{width: 50%;margin-bottom: 25px;}
        .gangwei-icon-content{
          display: inline-block;margin: 0 auto;text-align: center;
          i{width:75px;height:75px;margin:0 auto 10px;display: block;
            background-repeat: no-repeat;background-position: center;background-size: contain;}
          p{font-size: 16px;font-weight: normal;color: #333333;}
        }
      }
    }
  }

</style>