62 lines
2.3 KiB
Vue
62 lines
2.3 KiB
Vue
|
<script setup>
|
||
|
|
import {useStockQuote} from '@/store/stock-quote/index.js'
|
||
|
|
const useStock=useStockQuote()
|
||
|
|
useStock.getStockQuate()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<header class="header">
|
||
|
|
</header>
|
||
|
|
<main
|
||
|
|
ref="main"
|
||
|
|
class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 bg-gradient-to-br from-primary/10 to-white/80 p-12 rounded-3xl shadow-2xl animate-bounce-in"
|
||
|
|
>
|
||
|
|
<!-- 左侧大号价格 -->
|
||
|
|
<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>
|
||
|
|
<!-- 右侧信息卡片 -->
|
||
|
|
<section class="grid grid-cols-2 gap-8">
|
||
|
|
<div class="info-card">
|
||
|
|
<div class="text-xs text-gray-400">Open</div>
|
||
|
|
<div class="text-xl font-bold">$2.00</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">-0.05 (-2.46%)</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-card">
|
||
|
|
<div class="text-xs text-gray-400">Day's Range</div>
|
||
|
|
<div class="text-xl font-bold">$1.85 - $2.03</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-card">
|
||
|
|
<div class="text-xs text-gray-400">52-Week Range</div>
|
||
|
|
<div class="text-xl font-bold">$1.85 - $12.60</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-card">
|
||
|
|
<div class="text-xs text-gray-400">Volume</div>
|
||
|
|
<div class="text-xl font-bold">23.5K</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-card">
|
||
|
|
<div class="text-xs text-gray-400">Market Cap</div>
|
||
|
|
<div class="text-xl font-bold">$1.2M</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
</footer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
|
||
|
|
.glass-card {
|
||
|
|
backdrop-filter: blur(16px);
|
||
|
|
background: rgba(255,255,255,0.6);
|
||
|
|
border: 1px solid rgba(255,255,255,0.3);
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|