Merge remote-tracking branch 'origin/master'

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

components/main/count/Item.vue

@@ -1,7 +1,13 @@
 <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, 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>
 <script>
@@ -16,14 +22,41 @@
         type: String
       }
     },
+    data () {
+      return {
+        isMore: false,
+        isShow: false,
+        len: 0
+      }
+    },
     methods: {
       formatNumber (num) {
         let re = /(\d+)(\d{3})/
-        num = (Array(Math.max(0, 10 - String(num).length)).join(0) + num)
+        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()
+          num = Math.floor(num / 10000)
+          if (parseInt(str.charAt(str.length - 4)) > 4) {
+            num = num + 1
+          }
+        }
+        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')
+          num = num.replace(re, '$1，$2')
         }
-        return num.split('')
+        num = num.split('')
+//        console.log(num)
+        return num
       }
     },
     computed: {
@@ -40,28 +73,61 @@
     text-align: center;
     line-height: 20px;
 
-    .title {
-      display: inline-block;
-      width: 60px;
-      float: left;
-      font-weight: bold;
-    }
-    .separator, .num {
-      display: inline-block;
-    }
-    .separator {
-      font-size: 12px;
-      color: $primary;
-      margin: 0 5px 0 -2px;
-    }
-    .num {
-      background: $primary;
-      width: 15px;
-      height: 20px;
-      margin-right: 10px;
-      text-align: center;
-      color: $white;
-      font-weight: bold;
-    }
+  .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>