From ad91c54d8dc545c739fd109fe91546a0a2f0c2ca Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Mon, 13 Oct 2025 10:23:20 +0800
Subject: [PATCH] fix stock-quote 375

---
 .../quarterlyreports/size375/index.vue        |   2 +-
 src/views/stock-quote/size375/index.vue       | 255 +++++++++++++-----
 2 files changed, 193 insertions(+), 64 deletions(-)

diff --git a/src/views/financialinformation/quarterlyreports/size375/index.vue b/src/views/financialinformation/quarterlyreports/size375/index.vue
index 1370616..59f5532 100644
--- a/src/views/financialinformation/quarterlyreports/size375/index.vue
+++ b/src/views/financialinformation/quarterlyreports/size375/index.vue
@@ -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 {
diff --git a/src/views/stock-quote/size375/index.vue b/src/views/stock-quote/size375/index.vue
index ec853db..063c403 100644
--- a/src/views/stock-quote/size375/index.vue
+++ b/src/views/stock-quote/size375/index.vue
@@ -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>