手机首页添加计数器

components/mobile/common/StatisticsMobile.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="statistics">
     <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
-      <li v-for="item in itemData">
-        <span v-text="item.id"></span>
-        <span v-text="formatNumber(item.count)"></span>
+      <li v-for="(item, index) in itemData">
+        <span class="title"><i class="icon" :class="'icon' + index" ></i></span>
+        <span class="number" v-if="item.type === 2">
+          <span v-html="formatDouble(item.count)"></span>
+          <span class="unit">条</span>
+        </span>
+        <span class="number" v-else>
+          <span v-html="formatNumber(item.count, index)"></span>
+          <span class="unit" v-if="item.type === 3">家</span>
+        </span>
       </li>
     </ul>
   </div>
@@ -16,7 +23,10 @@
         step: 1,
         widthTop: 0,
         timerIndex: 0,
-        timer: {} // 定时器实体
+        timer: {}, // 定时器实体
+        imgbox: {
+            'src': ''
+        }
       }
     },
     mounted () {
@@ -28,8 +38,8 @@
       changeInterval () {
         setInterval(() => {
           this.widthTop += -0.6
-          if (this.widthTop < -2.4) {
-            this.widthTop = 0.6
+          if (this.widthTop === -2.4) {
+            this.widthTop = 0
           }
         }, 3000)
       },
@@ -44,17 +54,17 @@
           if (parseInt(str2.charAt(str2.length - 8)) > 8) {
             num = num + 1
           }
-          num += '亿'
+          num = num + '<span style="color: #333">亿</span>'
         } else if (num > 9999) {
           let str = num.toString()
           num = Math.floor(num / 10000)
           if (parseInt(str.charAt(str.length - 4)) > 4) {
             num = num + 1
           }
-          num += '万'
+          num += '<span style="color: #333">万</span>'
         } else {
-          if (type === 1 || type === 2) {
-            num += '元'
+          if (type === 6 || type === 7) {
+            num += '<span style="color: #333">元</span>'
           } else {
             num += ''
           }
@@ -62,14 +72,15 @@
         return num
       },
       formatDouble (num) {
+        console.log(11)
         if (num.toString().indexOf('E') !== -1) {
           let arr = num.toString().split('E')
           num = arr[0] * Math.pow(10, arr[1])
         }
         if (num > 99999999) {
-          num = (num / 100000000).toFixed(2).slice(num.length - 1, 4) + '亿'
+          num = (num / 100000000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">亿</span>'
         } else if (num > 9999) {
-          num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '万'
+          num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">万</span>'
         } else {
           num += ''
         }
@@ -102,15 +113,15 @@
             str.push({id: $data[key].item, count: $data[key].count, type: 1})
           })
         }
+        str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
+        str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
+        str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
         if (this.allCount) {
           this.allCount.forEach((value, key, $data) => {
             str.push({id: $data[key].item, count: $data[key].count, type: 1})
           })
         }
-        str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
-        str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
-        str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
-        console.log(str)
+        str = [str[1], str[2], str[0], ...str.slice(3, 6), str[7], str[6]]
         return str
       }
     }
@@ -134,17 +145,107 @@
         width:50%;
         height:.6rem;
         line-height: .6rem;
-        padding: 0 .3rem;
-        text-align: center;
+        /*padding: 0 .3rem;*/
+        /*text-align: center;*/
         font-size: .28rem;
         font-weight: bold;
         white-space: nowrap;
         overflow: hidden;
         vertical-align:top;
+        &:nth-child(odd){
+          &::after{
+            content: '';
+            display: inline-block;
+            width: 0.02rem;
+            height: 0.3rem;
+            background-color: #9c9c9c;
+            position: relative;
+            top: 3px;
+          }
+        }
         span{
-          margin: 0 .1rem;
-          &:last-child{
+          &.title{
+            display: inline-block;
+            width: 1.85rem;
+            height:.6rem;
+            line-height: .6rem;
+            vertical-align:middle;
+            margin-left: 0.15rem;
+
+            i{
+              &.icon{
+                display: inline-block;
+                width: 100%;
+                height: .6rem;
+              }
+              &.icon0{
+                background:url('/images/mobile/@2x/home/count1.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon1{
+                background:url('/images/mobile/@2x/home/count2.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon2{
+                background:url('/images/mobile/@2x/home/count3.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon3{
+                background:url('/images/mobile/@2x/home/count4.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon4{
+                background:url('/images/mobile/@2x/home/count5.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon5{
+                background:url('/images/mobile/@2x/home/count6.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon6{
+                background:url('/images/mobile/@2x/home/count7.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+              &.icon7{
+                background:url('/images/mobile/@2x/home/count8.jpg') right no-repeat;
+                background-size: auto 0.3rem;
+              }
+            }
+          }
+          &.number{
+            display: inline-block;
             color:red;
+            width: 1.6rem;
+            font-size: 0.32rem;
+            height: .6rem;
+            vertical-align:middle;
+            padding-left: 0.14rem;
+            line-height:.6rem;
+            .unit{
+              color: #333;
+            }
+          }
+        }
+        &:nth-child(2), &:nth-child(4){
+          span{
+            &.title{
+              width: 1.4rem;
+            }
+          }
+        }
+        &:nth-child(6){
+          span{
+            &.title{
+              width: 1.83rem;
+              margin-left: 0rem;
+            }
+          }
+        }
+        &:nth-child(8){
+          span{
+            &.title{
+              width: 1.3rem;
+            }
           }
         }
       }