scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Phoenix 2025-05-23 11:04:14 +08:00
parent b96475ec2f
commit a206bcbc4e
4 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

8
pnpm-lock.yaml
View File

@ -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

55
src/components/NumberScroll.vue Normal file
View File

@ -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>

36
src/views/stock-quote/size1920/index.vue
View File

@ -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>