新手指南、立即入驻以及计数器调整

components/home/displayCard.vue

@@ -10,7 +10,7 @@
          </ul>
          <ul class="list-unstyled">
            <li ref="pingdanListWrapper" v-for="(c, index) in counts"  :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
-             <span v-html="formatScrollNumber(c.count, c.logo)"></span>
+             <span v-for="(item, index) in formatScrollNumber(c.count, c.logo)" class="count-distance" :class="'count' + index">{{item}}</span>
            </li>
          </ul>
        </div>
@@ -20,9 +20,6 @@
            <span style="color: #333" v-if="item.type === 2">条</span>
          </p>
        </div>
-       <a class="enter" @click="goStoreApply()">
-         <img src="/images/all/enter2.png">
-       </a>
      </div>
   </div>
 </template>
@@ -85,7 +82,7 @@
             let length = String(num).length
             this.len = length > 3 ? length + 1 : length
             num = (Array(7 - length).join(0) + num)
-            num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">亿</span>'
+            num = num.toString() + '亿'
           } else if (num > 9999) {
             let str = num.toString()
             num = Math.floor(num / 10000)
@@ -95,15 +92,15 @@
             let length = String(num).length
             this.len = length > 3 ? length + 1 : length
             num = (Array(7 - length).join(0) + num)
-            num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">万</span>'
+            num = num.toString() + '万'
           } else {
             let length = String(num).length
             this.len = length > 3 ? length + 1 : length
             num = (Array(7 - length).join(0) + num)
             if (logo === 0) {
-              num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">家</span>'
+              num = num.toString() + '家'
             } else {
-              num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">个</span>'
+              num = num.toString() + '个'
             }
           }
         }
@@ -112,7 +109,11 @@
 //        }
 //        num = num.split('')
 //        console.log(num)
-        return num
+        let _arr = []
+        for (let i = 0; i < num.length; i++) {
+          _arr.push(num[i])
+        }
+        return _arr
       },
       formatNumber (num, type) {
         if (num) {
@@ -159,7 +160,7 @@
           }
         }
         return num
-      }
+      },
     },
     computed: {
       allCount () {
@@ -213,15 +214,15 @@
 <style lang="scss" scoped>
   .display-card{
     position: fixed;
-    right: 100px;
-    top: 100px;
-    width: 180px;
-    height: 540px;
+    right: 116px;
+    top: 235px;
+    /*width: 180px;*/
+    /*height: 540px;*/
     z-index: 100;
     .cardClose{
       position: absolute;
-      right: 3px;
-      top: 1px;
+      right: -5px;
+      top: 12px;
       opacity: 0.8;
       &:hover{
         cursor: pointer;
@@ -229,14 +230,14 @@
     }
     .content{
       margin-top: 10px;
-      width: 178px;
-      height: 536px;
-      background: url('/images/all/countBackground1.png') no-repeat;
+      /*width: 178px;*/
+      /*height: 536px;*/
+      background: url('/images/all/countBg.png') no-repeat;
       div{
-        height: 72px;
+        height: 56px;
         width: 158px;
-        padding-top: 30px;
-        margin-left: 6px;
+        padding-top: 19px;
+        margin-left: 16px;
         &:first-child{
           height: 109px;
           padding-top: 1px;
@@ -254,7 +255,7 @@
                   font-weight: bold;
                   font-size: 21px;
                   letter-spacing: 0px;
-                  color: #fff000;
+                  color: #ff3600;
                   position: relative;
                   top: 0;
                   transition: top 1s;
@@ -277,24 +278,42 @@
               top: 21px;
               text-align: right;
               li{
+                position: relative;
+                top: 0;
+                left: 0;
+                margin: 0 auto;
+                width: 141px;
                 height: 30px;
-                line-height: 30px;
+                line-height: 28px;
                 font-weight: bold;
                 font-size: 21px;
-                color: #fff;
-                position: relative;
-                top: 0;
-                left: -28px;
+                text-align: left;
+                color: #bc1b1c;
                 transition: top 1s;
-                -moz-transition: top 1s; /* Firefox 4 */
-                -webkit-transition: top 1s; /* Safari and Chrome */
-                -o-transition: top 1s; /* Opera */
+                -moz-transition: top 1s;
+                -webkit-transition: top 1s;
+                -o-transition: top 1s;
                 &.top {
                   transition: top 0s;
                   -moz-transition: top 0s; /* Firefox 4 */
                   -webkit-transition: top 0s; /* Safari and Chrome */
                   -o-transition: top 0s; /* Opera */
                 }
+                span.count-distance{
+                  display: inline-block;
+                  padding-left: 3.3px;
+                  margin-left: 2px;
+                  font-size: 18px;
+                  color: #bc1b1c;
+                  width: 17px;
+                }
+                span.count-distance.count6{
+                  position:relative;
+                  top: -2px;
+                  padding-left: 0;
+                  font-weight: bold;
+                  color: #fff;
+                }
               }
             }
           }

components/main/Header.vue

@@ -19,6 +19,17 @@
         <!-- <div class="header-count pull-right">
            <count-box></count-box>
          </div>-->
+        <!--立即入驻 新手指南-->
+        <div class="header-count pull-right">
+          <!--新手指南-->
+          <a class="enter" href="/help/home" target="_blank">
+            <img src="/images/all/newPointer.jpg"/>
+          </a>
+          <!--立即入驻-->
+          <a class="enter" @click="goStoreApply()">
+            <img src="/images/all/goInto.jpg"/>
+          </a>
+        </div>
       </div>
     </div>
   </div>