66 lines
2.4 KiB
Vue
66 lines
2.4 KiB
Vue
<script setup>
|
|
import { useStockQuote } from '@/store/stock-quote/index.js';
|
|
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
|
|
getStockQuate();
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px">
|
|
<!-- 价格卡片 -->
|
|
<section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
|
|
<div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
|
|
<div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
|
|
<div class="text-gray-500 text-60px">{{ formatted }}</div>
|
|
</section>
|
|
<!-- 信息卡片列表 -->
|
|
<section class="w-full max-w-90vw grid grid-cols-2 gap-2">
|
|
<div class="info-card">
|
|
<div class="text-xs text-gray-400">Open</div>
|
|
<div class="text-lg font-bold">{{ stockQuote.open }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-xs text-gray-400">% Change</div>
|
|
|
|
<div class="text-lg font-bold"
|
|
:class="stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'">
|
|
{{ stockQuote.change }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-xs text-gray-400">Day's Range</div>
|
|
<div class="text-lg 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 font-bold">{{ stockQuote.week52Range }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-xs text-gray-400">Volume</div>
|
|
<div class="text-lg font-bold">{{ stockQuote.volume }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-xs text-gray-400">Market Cap</div>
|
|
<div class="text-lg font-bold">{{ stockQuote.marketCap }}</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.glass-card {
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255,255,255,0.92);
|
|
border: 1px solid rgba(200,200,255,0.18);
|
|
box-shadow: 0 2px 8px 0 rgba(31,38,135,0.08);
|
|
}
|
|
.info-card {
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: 16px;
|
|
box-shadow: 0 1px 4px 0 rgba(31,38,135,0.06);
|
|
padding: 12px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
}
|
|
</style>
|