69 lines
2.6 KiB
Vue
69 lines
2.6 KiB
Vue
<script setup>
|
|
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
|
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
|
import { useStockQuote } from '@/store/stock-quote/index.js';
|
|
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
|
|
getStockQuate();
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<main ref="main">
|
|
<main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
|
|
<!-- 价格卡片 -->
|
|
<section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
|
|
<div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.[0].slice(0,4) }}</div>
|
|
<div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
|
|
<div class="text-gray-500 text-70px">{{ formatted }}</div>
|
|
</section>
|
|
<!-- 信息卡片列表 -->
|
|
<section class="w-full max-w-80vw grid grid-cols-3 gap-4">
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">Open</div>
|
|
<div class="text-xl font-bold">{{ stockQuote.Open }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">Change</div>
|
|
<div class="text-xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">Day's Range</div>
|
|
<div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">52-Week Range</div>
|
|
<div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">Volume</div>
|
|
<div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="text-sm text-gray-400">Market Cap</div>
|
|
<div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.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 3px 12px 0 rgba(31,38,135,0.08);
|
|
}
|
|
.info-card {
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 6px 0 rgba(31,38,135,0.06);
|
|
padding: 16px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
</style>
|
|
|