新增 class

components/common/layout/desComp/gangweiList.vue

@@ -3,18 +3,18 @@
 
     <h4 class="gangwei-label" v-if="label">{{label}}</h4>
 
-    <div class="gangwei-row mta-hidden-xs" v-for="(rowList,index) in myListPc" :key="`pc-${index}`">
+    <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" :style="iconStylePc"></iconGangwei>
+        <iconGangwei v-else class="my-icon"  :key="ind" :des="des"></iconGangwei>
       </template>
     </div>
-    <div class="gangwei-row mta-hidden-sm cur-h5" v-for="(rowList,index) in myListH5" :key="`h5${index}`">
+    <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" :style="iconStyleH5"></iconGangwei>
+        <iconGangwei v-else class="my-icon" :key="ind" :des="des"></iconGangwei>
       </template>
     </div>
   </div>
@@ -41,14 +41,6 @@ export default {
       type: Number,
       default: 2
     },
-    PcMargin: {
-      type: Number,
-      default: 308
-    },
-    H5Margin: {
-      type: Number,
-      default: 120
-    }
   },
   computed: {
     myListPc() {
@@ -82,12 +74,22 @@ export default {
       }
       return result;
     },
-    iconStylePc() {
-      return `margin-right: ${this.PcMargin}px`
+    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]}`]
     },
-    iconStyleH5() {
-      return `margin-right: ${this.H5Margin}%`
-    }
   },
   components: {
     iconGangwei