feat: 添加数字滚动

src/css/index.css

 body {
   margin: 0 20px;
   padding: 0;
-  background: url("../images/bg.png") no-repeat;
+  background: url('../images/bg.png') no-repeat;
+  min-width: 1800px;
+  overflow-x: auto;
 }
 ul {
   list-style: none;
 }
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 .header {
   position: relative;
   height: 130px;
   width: 100%;
-  background: url("../images/header-bg.png") no-repeat;
+  background: url('../images/header-bg.png') no-repeat;
   background-size: cover;
   display: -webkit-box;
   display: -webkit-flex;
@@ -24,7 +31,7 @@ ul {
   width: 228px;
   height: 40px;
   margin: 80px 0 0 20px;
-  background: url("../images/logo.png") no-repeat;
+  background: url('../images/logo.png') no-repeat;
   background-size: cover;
 }
 .header-middle {
@@ -94,7 +101,7 @@ ul {
   display: inline-block;
   width: 23px;
   height: 23px;
-  background: url("../images/user.png") no-repeat;
+  background: url('../images/user.png') no-repeat;
   background-size: cover;
   margin-right: 15px;
 }
@@ -111,7 +118,7 @@ ul {
   width: 21px;
   height: 23px;
   cursor: pointer;
-  background: url("../images/logout.png") no-repeat;
+  background: url('../images/logout.png') no-repeat;
   background-size: contain;
   margin-right: 15px;
 }
@@ -133,7 +140,7 @@ ul {
 .content .st-box::before,
 .content .st-box::after {
   position: absolute;
-  content: " ";
+  content: ' ';
   display: block;
   top: 50%;
   -webkit-transform: translateY(-50%);
@@ -196,8 +203,7 @@ ul {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  margin-top: 35px;
-  margin-right: 20px;
+  margin: 35px 20px 0;
 }
 .content .st-box .echarts-box .legend li {
   display: -webkit-box;
@@ -218,7 +224,7 @@ ul {
   height: 12px;
   border-radius: 5px;
   display: block;
-  content: " ";
+  content: ' ';
 }
 .content .st-box .echarts-box .legend li:nth-child(1)::before {
   background: #4380f0;
@@ -307,7 +313,7 @@ ul {
           align-items: center;
 }
 .content .center-section .center-top .center-title {
-  background: url("../images/center-title-bg.png") no-repeat;
+  background: url('../images/center-title-bg.png') no-repeat;
   width: 411px;
   height: 54px;
   position: relative;
@@ -616,4 +622,3 @@ ul {
   white-space: nowrap;
   line-height: 24px;
 }
-/*# sourceMappingURL=index.css.map */
\ No newline at end of file

src/css/stat-bar.css

+@font-face {
+  font-family: 'DigifaceWide';
+  src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype');
+  /* Safari, Android, iOS */
+}
+.stat-bar {
+  z-index: 2;
+  width: 98%;
+  margin: 0 auto;
+  height: 64px;
+  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 79, 253, 0.2)), color-stop(70%, rgba(12, 80, 252, 0)), to(rgba(12, 80, 252, 0)));
+  background-image: -o-linear-gradient(bottom, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
+  background-image: linear-gradient(0deg, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
+  overflow: hidden;
+}
+.stat-bar .stat-bar-inner {
+  width: 1700px;
+  margin: 8px auto 0 auto;
+  height: 48px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.stat-bar .stat-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.stat-bar .stat-item .tit {
+  font-size: 20px;
+  color: #52ccff;
+  font-family: 'Source Han Sans CN';
+}
+.stat-bar .stat-item .scroll-box {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 10px;
+}
+.stat-bar .stat-item .scroll-num {
+  width: var(--width, 36px);
+  height: var(--height, 48px);
+  line-height: var(--height, 48px);
+  text-align: center;
+  font-size: 41px;
+  color: #01fff6;
+  font-family: 'DigifaceWide';
+  border-radius: 3px;
+  background-image: -webkit-gradient(linear, left bottom, left top, from(#07256a), to(rgba(7, 37, 105, 0)));
+  background-image: -o-linear-gradient(bottom, #07256a 0%, rgba(7, 37, 105, 0) 100%);
+  background-image: linear-gradient(0deg, #07256a 0%, rgba(7, 37, 105, 0) 100%);
+  border: 1px solid #01fff6;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.stat-bar .stat-item .suffix {
+  font-size: 16px;
+  color: #758094;
+  font-family: 'Source Han Sans CN';
+}
+.stat-bar .border-animate {
+  -webkit-animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+          animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+.stat-bar .animate {
+  -webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+          animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+@-webkit-keyframes move {
+  from {
+    -webkit-transform: translateY(-90%);
+            transform: translateY(-90%);
+    -webkit-filter: url(#blur);
+            filter: url(#blur);
+  }
+  to {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+    -webkit-filter: url(#blur);
+            filter: url(#blur);
+  }
+}
+@keyframes move {
+  from {
+    -webkit-transform: translateY(-90%);
+            transform: translateY(-90%);
+    -webkit-filter: url(#blur);
+            filter: url(#blur);
+  }
+  to {
+    -webkit-transform: translateY(1%);
+            transform: translateY(1%);
+    -webkit-filter: url(#blur);
+            filter: url(#blur);
+  }
+}
+@-webkit-keyframes bounce-in-down {
+  from {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
+            transform: translateY(calc(var(--i) * -9.09% - 7%));
+    -webkit-filter: none;
+            filter: none;
+  }
+  25% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
+            transform: translateY(calc(var(--i) * -9.09% + 3%));
+  }
+  50% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
+            transform: translateY(calc(var(--i) * -9.09% - 1%));
+  }
+  70% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+            transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+  }
+  85% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+            transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+  }
+  to {
+    -webkit-transform: translateY(calc(var(--i) * -9.09%));
+            transform: translateY(calc(var(--i) * -9.09%));
+  }
+}
+@keyframes bounce-in-down {
+  from {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
+            transform: translateY(calc(var(--i) * -9.09% - 7%));
+    -webkit-filter: none;
+            filter: none;
+  }
+  25% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
+            transform: translateY(calc(var(--i) * -9.09% + 3%));
+  }
+  50% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
+            transform: translateY(calc(var(--i) * -9.09% - 1%));
+  }
+  70% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+            transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+  }
+  85% {
+    -webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+            transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+  }
+  to {
+    -webkit-transform: translateY(calc(var(--i) * -9.09%));
+            transform: translateY(calc(var(--i) * -9.09%));
+  }
+}
+@-webkit-keyframes enhance-bounce-in-down {
+  25% {
+    -webkit-transform: translateY(8%);
+            transform: translateY(8%);
+  }
+  50% {
+    -webkit-transform: translateY(-4%);
+            transform: translateY(-4%);
+  }
+  70% {
+    -webkit-transform: translateY(2%);
+            transform: translateY(2%);
+  }
+  85% {
+    -webkit-transform: translateY(-1%);
+            transform: translateY(-1%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+@keyframes enhance-bounce-in-down {
+  25% {
+    -webkit-transform: translateY(8%);
+            transform: translateY(8%);
+  }
+  50% {
+    -webkit-transform: translateY(-4%);
+            transform: translateY(-4%);
+  }
+  70% {
+    -webkit-transform: translateY(2%);
+            transform: translateY(2%);
+  }
+  85% {
+    -webkit-transform: translateY(-1%);
+            transform: translateY(-1%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}

src/index.html

 <html>
-  <head>
+
+<head>
   <title></title>
-    <script src="js/index.js"></script>
   <link href="/css/index.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
+  <link href="/css/stat-bar.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
   <!--顶部标题栏-->
   <div class="header">
     <div class="header-left">
@@ -27,12 +29,33 @@
   </div>
   <!--顶部统计栏-->
   <div class="stat-bar">
-      <ul>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ul>
+    <div class="stat-bar-inner">
+      <div class="stat-item">
+        <div class="tit">累计用电量</div>
+        <div class="scroll-box"></div>
+        <div class="suffix">万kWh</div>
+      </div>
+      <div class="stat-item">
+        <div class="tit">累计发电量</div>
+        <div class="scroll-box"></div>
+        <div class="suffix">万kWh</div>
+      </div>
+      <div class="stat-item">
+        <div class="tit">累计碳排放量</div>
+        <div class="scroll-box"></div>
+        <div class="suffix">万t</div>
+      </div>
+      <div class="stat-item">
+        <div class="tit">累计减碳量</div>
+        <div class="scroll-box"></div>
+        <div class="suffix">万t</div>
+      </div>
+    </div>
+    <svg width="0" height="0">
+      <filter id="blur">
+        <feGaussianBlur in="SourceGraphic" :stdDeviation="0 12" />
+      </filter>
+    </svg>
   </div>
   <!--内容区-->
   <div class="content">
@@ -230,6 +253,8 @@
       </div>
     </div>
   </div>
-    <script src="https://cdn.ucyber.cn/common/echarts.js"></script>
-  </body>
+</body>
+
+<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
+<script src="/js/index.js"></script>
 </html>
\ No newline at end of file

src/js/index.js

+const ua = navigator.userAgent.toLowerCase()
+const testUA = (regexp) => regexp.test(ua)
+const isSafari = testUA(/safari/g) && !testUA(/chrome/g)
+const isWeChat = testUA(/micromessenger/g)
+
 // 用电量、上送电量
 const echart1Data = {
-  date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
+  date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
   line1: [200, 190, 250, 100, 90, 100, 250],
   line2: [100, 90, 200, 80, 60, 50, 200],
-};
+}
 
 // 楼层负荷、充电桩负荷
 const echart2Data = {
-  date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
+  date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
   line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5],
   line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
-};
+}
 
 // 负荷预测、负荷功率
 const echart3Data = {
   date: [
-    "0",
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    "10",
-    "11",
-    "12",
-    "13",
-    "14",
-    "15",
-    "16",
-    "17",
-    "18",
-    "19",
-    "20",
-    "21",
-    "22",
-    "23",
-    "24",
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
   ],
   line1: [
     0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
@@ -49,43 +54,43 @@ const echart3Data = {
     0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05,
     0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
   ],
-};
+}
 
 // 光伏发电量、碳减排量
 const echart4Data = {
-  date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
+  date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
   line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01],
   line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
-};
+}
 
 // AC/DC、储能、光伏、负荷
 const echart5Data = {
   date: [
-    "0",
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    "10",
-    "11",
-    "12",
-    "13",
-    "14",
-    "15",
-    "16",
-    "17",
-    "18",
-    "19",
-    "20",
-    "21",
-    "22",
-    "23",
-    "24",
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
   ],
   line1: [
     100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
@@ -103,36 +108,36 @@ const echart5Data = {
     400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
     100, 90, 100, 250, 100, 1000, 100, 250, 300,
   ],
-};
+}
 
 // 光伏预测、光伏功率
 const echart6Data = {
   date: [
-    "0",
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    "10",
-    "11",
-    "12",
-    "13",
-    "14",
-    "15",
-    "16",
-    "17",
-    "18",
-    "19",
-    "20",
-    "21",
-    "22",
-    "23",
-    "24",
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
   ],
   line1: [
     0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
@@ -142,7 +147,7 @@ const echart6Data = {
     0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05,
     0.05, 0.02, 0.03, 0.02, 0.05, 1, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.05,
   ],
-};
+}
 
 /**
  * echartjs 曲线图通用配置
@@ -150,7 +155,7 @@ const echart6Data = {
  * @param {type: array, desc: y轴数据 } yData
  * */
 const lineChartOption = (xData, yData, interval) => {
-  const series = [];
+  const series = []
   yData.forEach((item) => {
     series.push({
       data: item.data,
@@ -169,163 +174,220 @@ const lineChartOption = (xData, yData, interval) => {
             ]),
           }
         : null,
-      type: "line",
+      type: 'line',
       smooth: true,
-      symbol: "none",
-    });
-  });
+      symbol: 'none',
+    })
+  })
 
   return {
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "5%",
-      bottom: "15%",
-      right: "5%",
+      top: '5%',
+      bottom: '15%',
+      right: '5%',
     },
     xAxis: {
       data: xData,
-      type: "category",
+      type: 'category',
       axisLine: { show: false },
       axisTick: { show: false },
       splitLine: false,
       boundaryGap: false,
       axisLabel: {
-        color: "#7c90c8",
+        color: '#7c90c8',
         fontSize: 10,
         margin: 15,
         interval,
       },
     },
     yAxis: {
-      type: "value",
+      type: 'value',
       axisLine: { show: false },
       axisTick: { show: false },
       splitLine: false,
       axisLabel: {
-        color: "#7c90c8",
+        color: '#7c90c8',
         fontSize: 10,
         margin: 15,
       },
     },
     series,
-  };
-};
+  }
+}
+
+// 创建一组数字
+function createMultiSrollNum(box, numString, width, height, delay) {
+  box.style.setProperty('--width', width + 'px')
+  box.style.setProperty('--height', height + 'px')
+  const docFrag = document.createDocumentFragment()
+  numString.split('').forEach((num, i) => {
+    docFrag.appendChild(createSrollNum(num, delay + i * 0.2))
+  })
+  box.appendChild(docFrag)
+}
+
+// 创建单个数字
+function createSrollNum(num, delay) {
+  const scrollNumNode = document.createElement('div')
+  scrollNumNode.className = 'scroll-num border-animate'
+  scrollNumNode.innerHTML = `<ul class="animate">
+  <li>0</li>
+  <li>1</li>
+  <li>2</li>
+  <li>3</li>
+  <li>4</li>
+  <li>5</li>
+  <li>6</li>
+  <li>7</li>
+  <li>8</li>
+  <li>9</li>
+  <li>0</li>
+  </ul>`
+
+  scrollNumNode.style.setProperty('--i', num)
+  scrollNumNode.style.setProperty('--delay', delay)
+
+  const ulNode = scrollNumNode.childNodes[0]
+
+  if (isSafari || isWeChat) {
+    let timer = setTimeout(() => {
+      ulNode.setAttribute(
+        'style',
+        'animation: none;transform: translateY(' + num * -9.09 + '%)'
+      )
+      timer = null
+    }, delay * 1000)
+  }
+
+  return scrollNumNode
+}
 
 window.onload = () => {
   // echart渲染
-  const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
+  const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
   lineChart1.setOption(
     lineChartOption(echart1Data.date, [
       {
         data: echart1Data.line1,
-        color: "#4a76cf",
-        areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        color: '#4a76cf',
+        areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
       },
       {
         data: echart1Data.line2,
-        color: "#2dc9e3",
-        areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
+        color: '#2dc9e3',
+        areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
       },
     ])
-  );
+  )
 
-  const lineChart2 = echarts.init(document.getElementById("line_chart_2"));
+  const lineChart2 = echarts.init(document.getElementById('line_chart_2'))
   lineChart2.setOption(
     lineChartOption(echart2Data.date, [
       {
         data: echart2Data.line1,
-        color: "#4a76cf",
-        areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        color: '#4a76cf',
+        areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
       },
       {
         data: echart2Data.line2,
-        color: "#2dc9e3",
-        areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
+        color: '#2dc9e3',
+        areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
       },
     ])
-  );
+  )
 
-  const lineChart3 = echarts.init(document.getElementById("line_chart_3"));
+  const lineChart3 = echarts.init(document.getElementById('line_chart_3'))
   lineChart3.setOption(
     lineChartOption(
       echart3Data.date,
       [
         {
           data: echart3Data.line1,
-          color: "#4a76cf",
-          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+          color: '#4a76cf',
+          areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
         },
         {
           data: echart3Data.line2,
-          color: "#2dc9e3",
-          areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
+          color: '#2dc9e3',
+          areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
         },
       ],
       3
     )
-  );
+  )
 
-  const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
+  const lineChart4 = echarts.init(document.getElementById('line_chart_4'))
   lineChart4.setOption(
     lineChartOption(echart4Data.date, [
       {
         data: echart4Data.line1,
-        color: "#4a76cf",
-        areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+        color: '#4a76cf',
+        areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
       },
       {
         data: echart4Data.line2,
-        color: "#2dc9e3",
-        areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
+        color: '#2dc9e3',
+        areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
       },
     ])
-  );
+  )
 
-  const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
+  const lineChart5 = echarts.init(document.getElementById('line_chart_5'))
   lineChart5.setOption(
     lineChartOption(
       echart5Data.date,
       [
         {
           data: echart5Data.line1,
-          color: "#f1ec41",
+          color: '#f1ec41',
         },
         {
           data: echart5Data.line2,
-          color: "#c49ffe",
+          color: '#c49ffe',
         },
         {
           data: echart5Data.line3,
-          color: "#4a76cf",
+          color: '#4a76cf',
         },
         {
           data: echart5Data.line4,
-          color: "#2dc9e3",
+          color: '#2dc9e3',
         },
       ],
       3
     )
-  );
+  )
 
-  const lineChart6 = echarts.init(document.getElementById("line_chart_6"));
+  const lineChart6 = echarts.init(document.getElementById('line_chart_6'))
   lineChart6.setOption(
     lineChartOption(
       echart6Data.date,
       [
         {
           data: echart6Data.line1,
-          color: "#4a76cf",
-          areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
+          color: '#4a76cf',
+          areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
         },
         {
           data: echart6Data.line2,
-          color: "#2dc9e3",
-          areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
+          color: '#2dc9e3',
+          areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
         },
       ],
       3
     )
-  );
-};
+  )
+
+  // 数据统计数字滚动
+  const width = 36
+  const height = 48
+  const delay = 1.4
+  const scrollBox = document.getElementsByClassName('scroll-box')
+
+  ;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
+    createMultiSrollNum(scrollBox[i], numStr, width, height, delay)
+  })
+}

src/css/index.less → src/less/index.less

 body {
   margin: 0 20px;
   padding: 0;
-  background: url("../images/bg.png") no-repeat;
+  background: url('../images/bg.png') no-repeat;
+  min-width: 1800px;
+  overflow-x: auto;
 }
 ul {
   list-style: none;
 }
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 .header {
   position: relative;
   height: 130px;
   width: 100%;
-  background: url("../images/header-bg.png") no-repeat;
+  background: url('../images/header-bg.png') no-repeat;
   background-size: cover;
   display: flex;
 }
@@ -21,7 +28,7 @@ ul {
   width: 228px;
   height: 40px;
   margin: 80px 0 0 20px;
-  background: url("../images/logo.png") no-repeat;
+  background: url('../images/logo.png') no-repeat;
   background-size: cover;
 }
 .header-middle {
@@ -80,7 +87,7 @@ ul {
       display: inline-block;
       width: 23px;
       height: 23px;
-      background: url("../images/user.png") no-repeat;
+      background: url('../images/user.png') no-repeat;
       background-size: cover;
       margin-right: 15px;
     }
@@ -97,7 +104,7 @@ ul {
       width: 21px;
       height: 23px;
       cursor: pointer;
-      background: url("../images/logout.png") no-repeat;
+      background: url('../images/logout.png') no-repeat;
       background-size: contain;
       margin-right: 15px;
     }
@@ -116,7 +123,7 @@ ul {
     &::before,
     &::after {
       position: absolute;
-      content: " ";
+      content: ' ';
       display: block;
       top: 50%;
       transform: translateY(-50%);
@@ -162,8 +169,7 @@ ul {
       .legend {
         user-select: none;
         display: flex;
-        margin-top: 35px;
-        margin-right: 20px;
+        margin: 35px 20px 0;
         li {
           display: flex;
           align-items: center;
@@ -176,7 +182,7 @@ ul {
             height: 12px;
             border-radius: 5px;
             display: block;
-            content: " ";
+            content: ' ';
           }
           &:nth-child(1) {
             &::before {
@@ -227,11 +233,11 @@ ul {
       }
     }
   }
-  .center-section{
+  .center-section {
     width: 865px;
     height: 540px;
     position: relative;
-    .justify-between{
+    .justify-between {
       display: flex;
       justify-content: space-between;
     }
@@ -247,7 +253,7 @@ ul {
       margin: 15px 0 0 28px;
       line-height: 47px;
     }
-    .text-globe{
+    .text-globe {
       position: absolute;
       height: 110px;
       background: url(../images/globe.png) 100% no-repeat;
@@ -263,16 +269,16 @@ ul {
       text-align: left;
       white-space: nowrap;
     }
-    .center-top{
+    .center-top {
       display: flex;
       flex-direction: column;
       align-items: center;
-      .center-title{
-        background: url("../images/center-title-bg.png") no-repeat;
+      .center-title {
+        background: url('../images/center-title-bg.png') no-repeat;
         width: 411px;
         height: 54px;
         position: relative;
-        & > span{
+        & > span {
           width: 89px;
           height: 22px;
           overflow-wrap: break-word;
@@ -284,7 +290,7 @@ ul {
           line-height: 53px;
           margin: 16px 0 0 168px;
         }
-        .center-title-bg{
+        .center-title-bg {
           background: url(../images/center-title-top.png) no-repeat;
           width: 549px;
           height: 14px;
@@ -293,7 +299,7 @@ ul {
           left: -72px;
         }
       }
-      .center-content{
+      .center-content {
         .box_1 {
           width: 822px;
           height: 78px;
@@ -355,7 +361,7 @@ ul {
             }
           }
         }
-        .center-title-bottom{
+        .center-title-bottom {
           position: absolute;
           left: 158px;
           top: 532px;
@@ -375,7 +381,7 @@ ul {
         }
       }
     }
-    .center-bottom{
+    .center-bottom {
       .flex-row {
         display: flex;
         flex-direction: row;

src/less/stat-bar.less

+
+
+@font-face {
+  font-family: 'DigifaceWide';
+  src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype'); /* Safari, Android, iOS */
+}
+
+.stat-bar {
+  z-index: 2;
+  width: 98%;
+  margin: 0 auto;
+  height: 64px;
+  background-image: linear-gradient(
+    0deg,
+    rgba(11, 79, 253, 0.2) 0%,
+    rgba(12, 80, 252, 0) 70%,
+    rgba(12, 80, 252, 0) 100%
+  );
+  overflow: hidden;
+  .stat-bar-inner {
+    width: 1700px;
+    margin: 8px auto 0 auto;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .stat-item {
+    display: flex;
+    align-items: center;
+    .tit {
+      font-size: 20px;
+      color: #52ccff;
+      font-family: 'Source Han Sans CN';
+    }
+    .scroll-box {
+      display: flex;
+      margin-left: 10px;
+    }
+    .scroll-num {
+      width: var(--width, 36px);
+      height: var(--height, 48px);
+      line-height: var(--height, 48px);
+      text-align: center;
+      font-size: 41px;
+      color: #01fff6;
+      font-family: 'DigifaceWide';
+      border-radius: 3px;
+      background-image: linear-gradient(
+        0deg,
+        #07256a 0%,
+        rgba(7, 37, 105, 0) 100%
+      );
+      border: 1px solid #01fff6;
+      overflow: hidden;
+      margin-right: 4px;
+    }
+    .suffix {
+      font-size: 16px;
+      color: #758094;
+      font-family: 'Source Han Sans CN';
+    }
+  }
+
+  .border-animate {
+    animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+  }
+
+  .animate {
+    animation: move 1.6s linear infinite,
+      bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+  }
+}
+
+@keyframes move {
+  from {
+    transform: translateY(-90%);
+    filter: url(#blur);
+  }
+
+  to {
+    transform: translateY(1%);
+    filter: url(#blur);
+  }
+}
+
+@keyframes bounce-in-down {
+  from {
+    transform: translateY(calc(var(--i) * -9.09% - 7%));
+    filter: none;
+  }
+
+  25% {
+    transform: translateY(calc(var(--i) * -9.09% + 3%));
+  }
+
+  50% {
+    transform: translateY(calc(var(--i) * -9.09% - 1%));
+  }
+
+  70% {
+    transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+  }
+
+  85% {
+    transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+  }
+
+  to {
+    transform: translateY(calc(var(--i) * -9.09%));
+  }
+}
+
+@keyframes enhance-bounce-in-down {
+  25% {
+    transform: translateY(8%);
+  }
+  50% {
+    transform: translateY(-4%);
+  }
+  70% {
+    transform: translateY(2%);
+  }
+  85% {
+    transform: translateY(-1%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}