计数器

components/main/count/Box.vue

@@ -2,16 +2,7 @@
   <div class="count-box">
     <div class="swiper-container" v-swiper:swiper="swiperOption">
       <div class="swiper-wrapper">
-        <div class="swiper-slide" v-for="(c, index) in list1" :key="index">
-          <count-item class="item" :title="c.item" :value="c.count"></count-item>
-        </div>
-        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
-          <count-item class="item" :title="c.item" :value="c.count"></count-item>
-        </div>
-        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
-          <count-item class="item" :title="c.item" :value="c.count"></count-item>
-        </div>
-        <div class="swiper-slide" v-for="(c, index) in list3" :key="index">
+        <div class="swiper-slide" v-for="(c, index) in counts.data" :key="index">
           <count-item class="item" :title="c.item" :value="c.count"></count-item>
         </div>
       </div>
@@ -20,6 +11,7 @@
 </template>
 <script>
   import CountItem from './Item.vue'
+
   export default {
     name: 'count-box',
     components: {
@@ -39,15 +31,6 @@
     computed: {
       counts () {
         return this.$store.state.product.common.counts
-      },
-      list1 () {
-        return this.counts.data.slice(1, 2)
-      },
-      list2 () {
-        return this.counts.data.slice(2, 3)
-      },
-      list3 () {
-        return this.counts.data.slice(3, 4)
       }
     },
     mounted () {
@@ -75,8 +58,8 @@
     height: 60px;
     overflow: hidden;
 
-    .swiper-container {
-      height: 100%;
-    }
+  .swiper-container {
+    height: 100%;
+  }
   }
 </style>