From 14f296180e5cc2979feb746e5fe9371b89fa7ab0 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 06 一月 2023 09:20:09 +0800
Subject: [PATCH] 1. 引入 vue-count-to
---
src/views/xtsy/index.vue | 34 ++++++++++++++++++++++++++--------
package.json | 1 +
2 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/package.json b/package.json
index 4d32fa5..ff7656c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"qrcode": "^1.5.0",
"qrcodejs2": "0.0.2",
"vue": "2.6.10",
+ "vue-count-to": "^1.0.13",
"vue-easy-print": "0.0.8",
"vue-print-nb": "^1.7.5",
"vue-router": "3.0.6",
diff --git a/src/views/xtsy/index.vue b/src/views/xtsy/index.vue
index 0d6325c..d7b2071 100644
--- a/src/views/xtsy/index.vue
+++ b/src/views/xtsy/index.vue
@@ -11,12 +11,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩鐧诲綍</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop01" class="barTop" style="width: 100%;" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩鐧诲綍</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop02" class="barTop" />
</div>
@@ -29,12 +33,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop03" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop04" class="barTop" />
</div>
@@ -47,12 +55,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop05" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop06" class="barTop" />
</div>
@@ -65,12 +77,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop07" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop08" class="barTop" />
</div>
@@ -107,9 +123,11 @@
<script>
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
+import countTo from 'vue-count-to'
export default {
name: 'Index',
+ components: { countTo },
data() {
return {
isIpad: false,
--
Gitblit v1.9.3