1

src/views/home/components/center.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="map">
-    <div
-      class="full-width flex flex-center"
-      style="margin-top: -40px; margin-bottom: 25px"
-    >
-      <div class="center-count flex flex-center">
-        <img class="count mr-15" src="@/assets/biz-img/count.png" />
-        <div class="flex flex-center" v-for="i in userLoginCount.length">
-          <div class="ml-5 bold flex-center flex count-number">
-            {{ userLoginCount.split('')[i - 1] }}
+    <div class="full-width flex flex-center">
+      <div class="chart-m-l-c">
+        <div class="center-count flex flex-center">
+          <img class="img-count mr-15" src="@/assets/biz-img/count.png" />
+          <div class="flex flex-center count">
+            <b v-for="(item, index) in userLoginCount.split('')" :key="index">
+              <div :style="{ top: -item * 40 + 'px' }">
+                <i v-for="(ic, indexc) in 10" :key="indexc"> {{ ic - 1 }}</i>
+              </div>
+            </b>
           </div>
         </div>
       </div>
@@ -23,6 +24,8 @@ import jsonp from 'jsonp'
 export default {
   data() {
     return {
+      prosecutorArr: ['0', '0', '0', '0', '0', '0', '0', '0'],
+      numbers: '59832',
       lockReconnect: false, // 是否真正建立连接
       timeout: 58 * 1000, // 58秒一次心跳
       timeoutObj: null, // 心跳心跳倒计时
@@ -43,7 +46,7 @@ export default {
               areaColor: '#5999ec'
             },
             roam: false,
-            zoom: 1.2,
+            zoom: 1.25,
             emphasis: {
               label: {
                 color: '#ffffff',
@@ -99,11 +102,22 @@ export default {
     this.mapcharts.setOption(this.option)
     this.getUserLoginCount()
     this.initWebSocket()
+    this.plusNPrAll()
   },
   unmounted() {
     this.websock.close() // 离开路由之后断开websocket连接
   },
   methods: {
+    PrefixInteger(num, length) {
+      //给数字前面补零 比如‘59832’补成8位即位‘00059832’
+      return (Array(length).join('0') + num).slice(-length)
+    },
+    plusNPrAll() {
+      //为了看效果，点击上面html中的iconfont触发，refreshLeft方法（我真啰嗦~）
+      const res = this.PrefixInteger(this.numbers, 8)
+      this.prosecutorArr = res.toString().split('')
+    },
+
     getUserLoginCount() {
       this.$api.biz.getUserLoginCount().then(res => {
         if (res.code === 200) {
@@ -205,37 +219,91 @@ export default {
 </script>
 <style lang="scss" scoped>
 .map {
-  width: 830px;
-  height: 500px;
+  width: 930px;
+  height: 530px;
   background-color: rgba(0, 0, 0, 0);
-  margin-top: 40px;
+  margin-top: 0px;
 }
 .content {
-  width: 830px;
-  height: 500px;
+  width: 930px;
+  height: 530px;
   background-color: rgba(0, 0, 0, 0);
+  margin-top: -105px;
 }
-.center-count {
+
+.chart-m-l-c {
+  display: flex;
+  justify-content: center;
   align-items: center;
-  border: 1px solid #1b6ad2;
   width: 550px;
   height: 90px;
-  margin-bottom: -100px;
-  background: rgba(11, 23, 38, 0.78);
-  z-index: 9999;
-  .count {
-    width: 165px;
-    height: 24px;
-  }
-  .count-number {
-    width: 20px;
-    background: #bad5e0;
-    font-size: 26px;
-    padding-right: 3px;
-    padding-left: 3px;
-    color: #2c6e8b;
-    border-radius: 5px;
+  padding: 10px 0;
+  float: left;
+  .center-count {
+    border: 1px solid #1b6ad2;
+    width: 550px;
+    height: 90px;
+    background: rgba(11, 23, 38, 0.78);
     z-index: 9999;
+    .img-count {
+      width: 165px;
+      height: 24px;
+    }
+    .count {
+      height: 60px;
+      float: left;
+      padding: 0 5px;
+      b {
+        width: 24px;
+        height: 40px;
+        float: left;
+        //border: 1px solid #ddd;
+        color: #000;
+        text-align: center;
+        line-height: 40px;
+        margin: 0 2px;
+        position: relative;
+        z-index: 3;
+        overflow: hidden;
+        div {
+          width: 100%;
+          height: 400px;
+          position: absolute;
+          left: 0;
+          top: 0;
+          transition: all 0.8s ease-in-out;
+          i {
+            background: #bad5e0;
+            font-size: 26px;
+            color: #2c6e8b;
+            border-radius: 5px;
+            z-index: 9999;
+            width: 100%;
+            height: 40px;
+            float: left;
+            font-style: normal;
+          }
+        }
+      }
+    }
+    span {
+      line-height: 40px;
+      float: left;
+    }
+
+    span.iconfont {
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      float: right;
+      text-align: center;
+      cursor: pointer;
+      color: #0071ff;
+    }
+
+    span.iconfont:hover {
+      color: #5ec2a6;
+    }
   }
 }
 </style>