首页计数器样式修改

components/mobile/common/StatisticsMobile.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="statistics">
     <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
-      <li v-for="(item, index) in itemData">
-        <span class="title"><i class="icon" :class="'icon' + index" ></i></span>
+      <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
         <span class="number" v-if="item.type === 2">
-          <span v-html="formatDouble(item.count)"></span>
+          <!--<span class="title"><i class="icon" :class="'icon' + index" ></i></span>-->
+          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
+          <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
           <span class="unit">条</span>
         </span>
         <span class="number" v-else>
-          <span v-html="formatNumber(item.count, index)"></span>
+          <!--<span class="title">
+            <i class="icon" :class="'icon' + index" ></i>
+          </span>-->
+          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
+          <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
           <span class="unit" v-if="item.type === 3">家</span>
         </span>
       </li>
@@ -152,18 +157,22 @@
         white-space: nowrap;
         overflow: hidden;
         vertical-align:top;
-        &:nth-child(odd){
-          &::after{
+        &:nth-child(even){
+          &::before{
             content: '';
             display: inline-block;
             width: 0.02rem;
             height: 0.3rem;
             background-color: #9c9c9c;
             position: relative;
-            top: 3px;
+            top: .1rem;
+            left: -.3rem;
           }
         }
         span{
+          img {
+            height: .3rem;
+          }
           &.title{
             display: inline-block;
             width: 1.85rem;
@@ -215,28 +224,27 @@
           &.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;
+              vertical-align: middle;
             }
           }
         }
         &:nth-child(2), &:nth-child(4){
           span{
             &.title{
-              width: 1.4rem;
+              width: 1.8rem;
             }
           }
         }
         &:nth-child(6){
           span{
             &.title{
-              width: 1.83rem;
+              width: 1.9rem;
               margin-left: 0rem;
             }
           }