计数器。

components/main/count/Box.vue

@@ -52,14 +52,15 @@
 <style lang="scss" scoped>
   .count-box {
     position: relative;
-    top: 21px;
+    top: 20px;
     float: right;
     width: 210px;
     height: 40px;
-    margin-right: 60px;
+    margin-right: 65px;
     overflow: hidden;
     border-radius: 3px;
-    background: #83c5f8;
+    background: url("/images/all/count_bg.png") no-repeat;
+    /*background: #7299E8;*/
   .swiper-slide{
     width: 100%;
     /*background: #83c5f8;*/

components/main/count/Item.vue

@@ -2,10 +2,11 @@
   <div class="count-item">
     <span class="title">{{ title }}</span>
     <div class="count-content">
-      <span v-for="num in nums" :class="num == '，' ? 'separator' : num == 0 ? 'zero num' : 'num'">{{ num }}</span>
-     <!-- <span v-if="nums.length < 7">个</span>
-      <span v-if="nums.length > 7">万</span>-->
-      <span v-text="isMore?'万':'个'"></span>
+      <span v-for="(num, index) in nums" :class="num == '，' ? 'separator' : nums.length - len > index ? 'zero num' : 'num'">{{ num }}</span>
+      <!-- <span v-if="nums.length < 7">个</span>
+       <span v-if="nums.length > 7">万</span>-->
+      <span v-text="isMore?'万':'个'" v-if="!isShow"></span>
+      <span v-if="isShow">亿</span>
     </div>
   </div>
 </template>
@@ -23,13 +24,22 @@
     },
     data () {
       return {
-        isMore: false
+        isMore: false,
+        isShow: false,
+        len: 0
       }
     },
     methods: {
       formatNumber (num) {
-        console.log(num)
         let re = /(\d+)(\d{3})/
+        if (num > 99999999) {
+          this.isShow = true
+          let str2 = num.toString()
+          num = Math.floor(num / 100000000)
+          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
+            num = num + 1
+          }
+        }
         if (num > 9999) {
           this.isMore = true
           let str = num.toString()
@@ -38,7 +48,9 @@
             num = num + 1
           }
         }
-        num = (Array(7 - String(num).length).join(0) + num)
+        let length = String(num).length
+        this.len = length > 3 ? length + 1 : length
+        num = (Array(7 - length).join(0) + num)
         while (re.test(num)) {
           num = num.replace(re, '$1，$2')
         }
@@ -61,60 +73,61 @@
     text-align: center;
     line-height: 20px;
 
-    .title {
-      display: inline-block;
-      width: 58px;
-      float: left;
-      font-weight: bold;
-      line-height: 40px;
-      color: #fff;
-      font-size: 14px;
-    }
-    .separator, .num {
-      display: inline-block;
-    }
-    .separator {
-      font-size: 12px;
-      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;
-        margin-left: 2px;
-      }
-    }
-    .num {
-      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;
-    }
+  .title {
+    display: inline-block;
+    width: 55px;
+    float: left;
+    font-weight: bold;
+    line-height: 40px;
+    color: #fff;
+    font-size: 14px;
+  }
+  .separator, .num {
+    display: inline-block;
+  }
+  .separator {
+    font-size: 12px;
+    color: #7299E8;
+    line-height: 38px !important;
+    margin: 0 5px 0 -5px;
+    width: 3px;
+  }
+  .count-content{
+    width: 150px;
+    /*background: #fff;*/
+    float: right;
+    height: 30px;
+    margin-top: 5px;
+    padding-left: 3px;
+    margin-right: 5px;
+  span{
+    float: left;
+    line-height: 24px;
+    font-weight: bold;
+  }
+  span.zero{
+    color: #9EBCF7;
+  }
+  span:first-child{
+    margin-left: 3px;
+  }
+  span:last-child{
+    line-height: 30px;
+    color: #7299E8;
+    margin-left: 2px;
+  }
+  }
+  .num {
+    background: #7299E8;
+    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>