首页计数器样式恢复

components/main/count/Box.vue

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

components/main/count/Item.vue

@@ -1,12 +1,7 @@
 <template>
   <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>
-    </div>
+    <span v-for="num in nums" :class="num == ',' ? 'separator' : 'num'">{{ num }}</span>
   </div>
 </template>
 <script>
@@ -21,30 +16,14 @@
         type: String
       }
     },
-    data () {
-      return {
-        isMore: false
-      }
-    },
     methods: {
       formatNumber (num) {
-        console.log(num)
         let re = /(\d+)(\d{3})/
-        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
-          }
-        }
-        num = (Array(7 - String(num).length).join(0) + num)
+        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')
         }
-        num = num.split('')
-//        console.log(num)
-        return num
+        return num.split('')
       }
     },
     computed: {
@@ -63,58 +42,26 @@
 
     .title {
       display: inline-block;
-      width: 58px;
+      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: #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;
-      }
+      color: $primary;
+      margin: 0 5px 0 -2px;
     }
     .num {
-      background: #9dd0f9;
-      width: 18px;
-      height: 24px;
-      margin-right: 2px;
-      line-height: 24px;
+      background: $primary;
+      width: 15px;
+      height: 20px;
+      margin-right: 10px;
       text-align: center;
       color: $white;
       font-weight: bold;
-      border-radius: 2px;
-      margin-top: 3px;
     }
   }
 </style>