From a206bcbc4e4241512c75a41de0355d6495de46a4 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 23 May 2025 11:04:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20countup.js=20=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=EF=BC=8C=E5=B9=B6=E4=BC=98=E5=8C=96=E8=82=A1=E7=A5=A8?=
 =?UTF-8?q?=E6=8A=A5=E4=BB=B7=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E6=8E=92=E7=89=88=E5=92=8C=E5=A4=A7=E5=B0=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |  1 +
 pnpm-lock.yaml                           |  8 ++++
 src/components/NumberScroll.vue          | 55 ++++++++++++++++++++++++
 src/views/stock-quote/size1920/index.vue | 36 ++++++++--------
 4 files changed, 82 insertions(+), 18 deletions(-)
 create mode 100644 src/components/NumberScroll.vue

diff --git a/package.json b/package.json
index e4cfed4..461f54b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@vicons/utils": "^0.1.4",
     "axios": "^1.7.3",
     "cnjm-postcss-px-to-viewport": "^1.0.1",
+    "countup.js": "^2.8.2",
     "echarts": "^5.6.0",
     "gsap": "^3.12.5",
     "jsdom": "^24.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e3756e..8f776ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       cnjm-postcss-px-to-viewport:
         specifier: ^1.0.1
         version: 1.0.1(postcss@8.4.40)
+      countup.js:
+        specifier: ^2.8.2
+        version: 2.8.2
       echarts:
         specifier: ^5.6.0
         version: 5.6.0
@@ -1810,6 +1813,9 @@ packages:
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  countup.js@2.8.2:
+    resolution: {integrity: sha512-UtRoPH6udaru/MOhhZhI/GZHJKAyAxuKItD2Tr7AbrqrOPBX/uejWBBJt8q86169AMqKkE9h9/24kFWbUk/Bag==}
+
   cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
 
@@ -5782,6 +5788,8 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
+  countup.js@2.8.2: {}
+
   cross-spawn@5.1.0:
     dependencies:
       lru-cache: 4.1.5
diff --git a/src/components/NumberScroll.vue b/src/components/NumberScroll.vue
new file mode 100644
index 0000000..3dfc672
--- /dev/null
+++ b/src/components/NumberScroll.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { CountUp } from 'countup.js'
+
+const props = defineProps({
+  endVal: {
+    type: [Number, String],
+    required: true
+  },
+  duration: {
+    type: Number,
+    default: 1.2
+  },
+  decimals: {
+    type: Number,
+    default: 2
+  },
+  prefix: {
+    type: String,
+    default: ''
+  },
+  suffix: {
+    type: String,
+    default: ''
+  }
+})
+
+const el = ref(null)
+let countUpInstance = null
+
+const start = (val) => {
+  if (countUpInstance) countUpInstance.update(val)
+  else {
+    countUpInstance = new CountUp(el.value, val, {
+      duration: props.duration,
+      decimalPlaces: props.decimals,
+      prefix: props.prefix,
+      suffix: props.suffix
+    })
+    countUpInstance.start()
+  }
+}
+
+onMounted(() => {
+  start(props.endVal)
+})
+
+watch(() => props.endVal, (val) => {
+  start(val)
+})
+</script>
+
+<template>
+  <span ref="el"></span>
+</template> 
\ No newline at end of file
diff --git a/src/views/stock-quote/size1920/index.vue b/src/views/stock-quote/size1920/index.vue
index aa9dd4e..b4cd003 100644
--- a/src/views/stock-quote/size1920/index.vue
+++ b/src/views/stock-quote/size1920/index.vue
@@ -8,38 +8,38 @@ getStockQuate()
 <template>
   <main
     ref="main"
-    class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12   p-12 rounded-3xl  animate-bounce-in"
+    class="flex flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
   >
     <!-- 左侧大号价格 -->
-    <section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
-      <div class="text-7xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
-      <div class="mt-4 text-xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
+    <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
+      <div class="text-9xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
+      <div class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
     </section>
     <!-- 右侧信息卡片 -->
-    <section class="grid grid-cols-2 gap-8">
+    <section class="grid grid-cols-2 gap-16">
       <div class="info-card">
-        <div class="text-xs text-gray-400">Open</div>
-        <div class="text-xl font-bold">{{ stockQuote.Open }}</div>
+        <div class="text-lg text-gray-400">Open</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Open }}</div>
       </div>
       <div class="info-card">
-        <div class="text-xs text-gray-400">Change</div>
-        <div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
+        <div class="text-lg text-gray-400">Change</div>
+        <div class="text-3xl font-bold text-red-500 ">{{ stockQuote.change?.join('') }}</div>
       </div>
       <div class="info-card">
-        <div class="text-xs text-gray-400">Day's Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
+        <div class="text-lg text-gray-400">Day's Range</div>
+        <div class="text-3xl font-bold">{{ stockQuote.DaysRange }}</div>
       </div>
       <div class="info-card">
-        <div class="text-xs text-gray-400">52-Week Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
+        <div class="text-lg text-gray-400">52-Week Range</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Week52Range }}</div>
       </div>
       <div class="info-card">
-        <div class="text-xs text-gray-400">Volume</div>
-        <div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
+        <div class="text-lg text-gray-400">Volume</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Volume }}</div>
       </div>
       <div class="info-card">
-        <div class="text-xs text-gray-400">Market Cap</div>
-        <div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
+        <div class="text-lg text-gray-400">Market Cap</div>
+        <div class="text-3xl font-bold">{{ stockQuote.MarketCap }}</div>
       </div>
     </section>
   </main>
@@ -54,6 +54,6 @@ getStockQuate()
   box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
 }
 .info-card {
-  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 animate-bounce-in hover:scale-105 transition-transform duration-300;
+  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1  hover:scale-105 transition-transform duration-300;
 }
 </style>
\ No newline at end of file