新增 countup.js 依赖，并优化股票报价组件样式，调整信息展示的排版和大小。

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",

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

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> 

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">
+    <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
-      <div class="text-7xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
+      <div class="text-9xl 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>
+      <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-lg text-gray-400">Open</div>
-        <div class="text-xl font-bold">{{ stockQuote.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-lg text-gray-400">Change</div>
-        <div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</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-lg text-gray-400">Day's Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</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-lg text-gray-400">52-Week Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</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-lg text-gray-400">Volume</div>
-        <div class="text-xl font-bold">{{ stockQuote.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-lg text-gray-400">Market Cap</div>
-        <div class="text-xl font-bold">{{ stockQuote.MarketCap }}</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>