fix stock-quote 375
This commit is contained in:
yuanshan
parent
364a7e4e3e
commit
ad91c54d8d
@ -327,7 +327,7 @@ const handleClickOutside = (event) => {
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
margin: 0 auto;
|
||||
max-width: 343 * 5.12px; // 由 PostCSS 转换为 vw
|
||||
width: 343 * 5.12px; // 由 PostCSS 转换为 vw
|
||||
}
|
||||
|
||||
.title-section {
|
||||
|
||||
@ -1,82 +1,211 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
onMounted(() => {
|
||||
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-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
<main class="stock-quote-container-375">
|
||||
<div class="content-wrapper">
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title-text">Stock Quote</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</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 class="data-section">
|
||||
<div class="price-card">
|
||||
<div class="price-value">${{ stockQuote.price }}</div>
|
||||
<div class="price-nasdaq">NASDAQ: FIEE</div>
|
||||
<div class="price-date">{{ formatted }}</div>
|
||||
</div>
|
||||
<div class="details-grid">
|
||||
<div class="details-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Open</span>
|
||||
<span class="detail-value">{{ stockQuote.open }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Day's Range</span>
|
||||
<span class="detail-value">{{ stockQuote.daysRange }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Volume</span>
|
||||
<span class="detail-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">% Change</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="{
|
||||
'text-red': String(stockQuote.change).includes('-'),
|
||||
'text-green': String(stockQuote.change).includes('+'),
|
||||
}"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">52-Week Range</span>
|
||||
<span class="detail-value">{{ stockQuote.week52Range }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Market Cap</span>
|
||||
<span class="detail-value">{{ stockQuote.marketCap }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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(255, 123, 172, 0.08);
|
||||
<style scoped lang="scss">
|
||||
.stock-quote-container-375 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
background-image: url("@/assets/image/375/bg-stock-quote.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 4px 0 rgba(255, 123, 172, 0.06);
|
||||
padding: 12px 10px;
|
||||
|
||||
.content-wrapper {
|
||||
width: 343 * 5.12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8 * 5.12px;
|
||||
margin-bottom: 32 * 5.12px;
|
||||
margin-top: 43 * 5.12px;
|
||||
padding: 0 16 * 5.12px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 5.12px;
|
||||
height: 7 * 5.12px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24 * 5.12px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.data-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16 * 5.12px;
|
||||
}
|
||||
|
||||
.price-card {
|
||||
width: 100%;
|
||||
height: 280 * 5.12px;
|
||||
background-color: white;
|
||||
border-radius: 16 * 5.12px;
|
||||
box-shadow: 0 3 * 5.12px 14 * 5.12px 0 rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16 * 5.12px;
|
||||
gap: 4 * 5.12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
width: 100%;
|
||||
font-size: 88 * 5.12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.48 * 5.12px;
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.price-nasdaq {
|
||||
width: 100%;
|
||||
font-size: 20 * 5.12px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-date {
|
||||
width: 100%;
|
||||
font-size: 16 * 5.12px;
|
||||
color: #455363;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
width: 343 * 5.12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-column {
|
||||
width: 172 * 5.12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
width: 100%;
|
||||
height: 155 * 5.12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding: 16 * 5.12px 32 * 5.12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 100%;
|
||||
font-size: 16 * 5.12px;
|
||||
color: #455363;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
width: 100%;
|
||||
font-size: 20 * 5.12px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.2 * 5.12px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #cf3050;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #00c48c;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user