package.json

@@ -17,7 +17,6 @@
     "@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,9 +26,6 @@ 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
@@ -1813,9 +1810,6 @@ 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==}
 
@@ -5788,8 +5782,6 @@ 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

@@ -1,55 +0,0 @@
-<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="flex flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
+    class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12   p-12 rounded-3xl  animate-bounce-in"
   >
     <!-- 左侧大号价格 -->
-    <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
+    <section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
-      <div class="text-9xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
+      <div class="text-7xl 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>
+      <div class="mt-4 text-xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
     </section>
     <!-- 右侧信息卡片 -->
-    <section class="grid grid-cols-2 gap-16">
+    <section class="grid grid-cols-2 gap-8">
       <div class="info-card">
-        <div class="text-lg text-gray-400">Open</div>
+        <div class="text-xs text-gray-400">Open</div>
-        <div class="text-3xl font-bold">{{ stockQuote.Open }}</div>
+        <div class="text-xl font-bold">{{ stockQuote.Open }}</div>
       </div>
       <div class="info-card">
-        <div class="text-lg text-gray-400">Change</div>
+        <div class="text-xs text-gray-400">Change</div>
-        <div class="text-3xl font-bold text-red-500 ">{{ stockQuote.change?.join('') }}</div>
+        <div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
       </div>
       <div class="info-card">
-        <div class="text-lg text-gray-400">Day's Range</div>
+        <div class="text-xs text-gray-400">Day's Range</div>
-        <div class="text-3xl font-bold">{{ stockQuote.DaysRange }}</div>
+        <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
       </div>
       <div class="info-card">
-        <div class="text-lg text-gray-400">52-Week Range</div>
+        <div class="text-xs text-gray-400">52-Week Range</div>
-        <div class="text-3xl font-bold">{{ stockQuote.Week52Range }}</div>
+        <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
       </div>
       <div class="info-card">
-        <div class="text-lg text-gray-400">Volume</div>
+        <div class="text-xs text-gray-400">Volume</div>
-        <div class="text-3xl font-bold">{{ stockQuote.Volume }}</div>
+        <div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
       </div>
       <div class="info-card">
-        <div class="text-lg text-gray-400">Market Cap</div>
+        <div class="text-xs text-gray-400">Market Cap</div>
-        <div class="text-3xl font-bold">{{ stockQuote.MarketCap }}</div>
+        <div class="text-xl 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  hover:scale-105 transition-transform duration-300;
+  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 animate-bounce-in hover:scale-105 transition-transform duration-300;
 }
 </style>