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">
|
<style scoped lang="scss">
|
||||||
.page-container {
|
.page-container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 343 * 5.12px; // 由 PostCSS 转换为 vw
|
width: 343 * 5.12px; // 由 PostCSS 转换为 vw
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-section {
|
.title-section {
|
||||||
|
|||||||
@ -1,82 +1,211 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
getStockQuate();
|
onMounted(() => {
|
||||||
|
getStockQuate();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main
|
<main class="stock-quote-container-375">
|
||||||
class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px"
|
<div class="content-wrapper">
|
||||||
>
|
<div class="title-section">
|
||||||
<!-- 价格卡片 -->
|
<div class="title-decoration"></div>
|
||||||
<section
|
<div class="title-text">Stock Quote</div>
|
||||||
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 }}
|
|
||||||
</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
|
<div class="data-section">
|
||||||
class="text-lg font-bold"
|
<div class="price-card">
|
||||||
:class="
|
<div class="price-value">${{ stockQuote.price }}</div>
|
||||||
stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
|
<div class="price-nasdaq">NASDAQ: FIEE</div>
|
||||||
"
|
<div class="price-date">{{ formatted }}</div>
|
||||||
>
|
</div>
|
||||||
{{ stockQuote.change }}
|
<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>
|
</div>
|
||||||
<div class="info-card">
|
</div>
|
||||||
<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>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.glass-card {
|
.stock-quote-container-375 {
|
||||||
backdrop-filter: blur(10px);
|
display: flex;
|
||||||
background: rgba(255, 255, 255, 0.92);
|
flex-direction: column;
|
||||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
align-items: center;
|
||||||
box-shadow: 0 2px 8px 0 rgba(255, 123, 172, 0.08);
|
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);
|
.content-wrapper {
|
||||||
border-radius: 16px;
|
width: 343 * 5.12px;
|
||||||
box-shadow: 0 1px 4px 0 rgba(255, 123, 172, 0.06);
|
|
||||||
padding: 12px 10px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user