首页计数器修改。

components/main/count/Box.vue

@@ -23,8 +23,8 @@
           autoplay: 5000,
           speed: 500,
           direction: 'vertical',
-          slidesPerView: 2,
-          slidesPerGroup: 2
+          slidesPerView: 1,
+          slidesPerGroup: 1
         }
       }
     },
@@ -52,11 +52,17 @@
 <style lang="scss" scoped>
   .count-box {
     position: relative;
-    top: 15px;
+    top: 21px;
     float: right;
-    width: 300px;
-    height: 60px;
+    width: 210px;
+    height: 40px;
+    margin-right: 60px;
     overflow: hidden;
+  .swiper-slide{
+    width: 100%;
+    background: #83c5f8;
+    border-radius: 3px;
+  }
 
   .swiper-container {
     height: 100%;

components/main/count/Item.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="count-item">
     <span class="title">{{ title }}</span>
-    <span v-for="num in nums" :class="num == ',' ? 'separator' : 'num'">{{ num }}</span>
+    <div class="count-content">
+      <span v-for="num in nums" :class="num == '，' ? 'separator' : 'num'">{{ num }}</span>
+      <span v-if="nums.length < 7">个</span>
+      <span v-if="nums.length > 7">万</span>
+    </div>
   </div>
 </template>
 <script>
@@ -19,9 +23,16 @@
     methods: {
       formatNumber (num) {
         let re = /(\d+)(\d{3})/
+//        let numLength = num.toString().length
+//        for (var i=0;i< numLength; i++){
+//        }
+//        if (numLength > 6) {
+//          let maxNum = num.slice(-1, 6)
+//          console.log(maxNum)
+//        }
         num = (Array(10 - String(num).length).join(0) + num)
         while (re.test(num)) {
-          num = num.replace(re, '$1,$2')
+          num = num.replace(re, '$1，$2')
         }
         return num.split('')
       }
@@ -45,23 +56,54 @@
       width: 60px;
       float: left;
       font-weight: bold;
+      line-height: 40px;
+      color: #fff;
+      font-size: 14px;
     }
     .separator, .num {
       display: inline-block;
     }
     .separator {
       font-size: 12px;
-      color: $primary;
-      margin: 0 5px 0 -2px;
+      color: #6cb7f3;
+      line-height: 38px !important;
+      margin: 0 5px 0 -5px;
+      width: 3px;
+    }
+    .count-content{
+      width: 145px;
+      background: #fff;
+      float: right;
+      height: 30px;
+      margin-top: 5px;
+      margin-right: 5px;
+      span{
+        float: left;
+        line-height: 24px;
+        font-weight: bold;
+      }
+      span.zero{
+        color: #bbdffb;
+      }
+      span:first-child{
+        margin-left: 3px;
+      }
+      span:last-child{
+        line-height: 30px;
+        color: #6cb7f3;
+      }
     }
     .num {
-      background: $primary;
-      width: 15px;
-      height: 20px;
-      margin-right: 10px;
+      background: #9dd0f9;
+      width: 18px;
+      height: 24px;
+      margin-right: 2px;
+      line-height: 24px;
       text-align: center;
       color: $white;
       font-weight: bold;
+      border-radius: 2px;
+      margin-top: 3px;
     }
   }
 </style>