大屏numflip

src/assets/styles/font-some.css

@@ -1,7 +1,7 @@
 .chartNum{
     display: flex;
     justify-content: center;
-    margin-top: 0.25rem;
+    margin-top: -1rem;
 }
 .box-items {
     position: relative;
@@ -14,11 +14,11 @@
   display: flex;
   justify-content: center;
   text-align: center;
-  width: 0.45rem;
-  height: 0.6rem;
-  line-height: 0.6rem;
-  margin-right: 0.125rem;
-  border: 1px solid #2C75E0;
+  width: 1.75rem;
+  height: 1.75rem;
+  line-height: 1.8rem;
+  margin-right: 0.2rem;
+  border: 1px solid #0E3465;
 }
 .number-item span{
     position: relative;
@@ -32,11 +32,11 @@
 .number-item span i{
     font-style: normal;
     position: absolute;
-    top: 0.1rem;
+    top: 25%;
     left: 50%;
-    font-size: 0.325rem;
+    font-size: 0.8rem;
     font-weight: bold;
-    color: #1AC9FF;
+    color: #fff;
     transform: translate(-50%,0);
     transition: transform 1s ease-in-out;
     letter-spacing: 10px;

src/views/environmentalScreen/index.vue

@@ -244,15 +244,17 @@
             <ul>
               <li>
                 <span>日借阅量</span>
-                <div class="chartNum">
-                  <div id="TNum" class="box-items">
-                    <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
-                  </div>
-                </div>
+                <NumFlip :tnum="daylend" />
+              </li>
+              <li><span>日归还量</span>
+                <NumFlip :tnum="dayreturn" />
+              </li>
+              <li><span>月借阅量</span>
+                <NumFlip :tnum="monlend" />
+              </li>
+              <li><span>月归还量</span>
+                <NumFlip :tnum="monreturn" />
               </li>
-              <li><span>日归还量</span></li>
-              <li><span>月借阅量</span></li>
-              <li><span>月归还量</span></li>
             </ul>
 
           </div>
@@ -298,6 +300,7 @@ import SecurityDoor from '@/views/components/SecurityDoor'
 import displayConfigApi from '@/api/storeManage/displayConfig'
 import thirdApi from '@/api/thirdApi'
 import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
+import NumFlip from './module/numFlip.vue'
 export default {
   name: 'EnvironmentalScreen',
   components: {
@@ -305,7 +308,8 @@ export default {
     SecurityDoor,
     Video,
     lendAcross,
-    typePie
+    typePie,
+    NumFlip
   },
   mixins: [statisticsCrud],
   data() {
@@ -365,7 +369,11 @@ export default {
         waterLeakageStatus3: false,
         waterLeakageStatus4: false,
         waterLeakageText4: ''
-      }
+      },
+      daylend: 'daylend',
+      dayreturn: 'dayreturn',
+      monlend: 'monlend',
+      monreturn: 'monreturn'
     }
   },
   async created() {
@@ -549,13 +557,13 @@ export default {
         })
       }
     }
+
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import "~@/assets/styles/lend-manage.scss";
-@import "~@/assets/styles/font-some.css";
 
 .env-container {
   width: 100%;

src/views/environmentalScreen/module/numFlip.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div class="chartNum">
+      <div :id="tnum" class="box-items">
+        <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tnum: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      chartNum: ['0', '0', '0', '0', '0', '0', '0', '0']
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.start()
+    })
+  },
+  methods: {
+    start() {
+      var strHtml = ''
+      for (var i = 0; i < this.chartNum.length; i++) {
+        strHtml += '<li class="number-item">\n' +
+                ' <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
+                ' </li>'
+      }
+      document.getElementById(this.tnum).innerHTML = strHtml
+      // 定时改变数字
+      const _this = this
+      setInterval(() => {
+        _this.toOrderNum('123456')
+        _this.setNumberTransform()
+      }, 1000)
+    },
+    toOrderNum(num) {
+      num = num.toString() // 数字变成字符串
+      if (num.length < 6) { // 如未满位数，添加"0"补位
+        num = '0' + num
+        this.toOrderNum(num) // 递归添加"0"补位
+      } else if (num.length === 6) { // 数中加入逗号
+        this.chartNum = num.split('') // 将其便变成数据
+      } else {
+        alert('显示异常')
+      }
+    },
+    setNumberTransform() {
+      var numberItems = document.getElementsByClassName('item')
+      // console.log(numberItems)
+      const numberArr = this.chartNum.filter(item => !isNaN(item))
+      for (var index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index]
+        elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/font-some.css";
+
+</style>