fiee-official-website/src/views/stock-quote/size1920/index.vue

<script setup>
import { useStockQuote } from "@/store/stock-quote/index.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { getStockQuate, stockQuote, formatted } = useStockQuote();
console.log(stockQuote);
getStockQuate();
const trimTrailingLetter = (val) => {
  const s = String(val ?? '').trim();
  return s.replace(/[A-Za-z]$/, '');
};
</script>

<template>
  <main ref="main" class="stock-quote-hero">
    <div class="hero-content">
      <!-- 标题区域 -->
      <div class="title-section">
        <div class="title-decoration"></div>
        <div class="stock-title">{{ t("stock_quote.title") }}</div>
      </div>
      <section class="quote-layout">
        <div class="price-card">
          <div class="price-value" style="display: flex; align-items: center;gap: 10px;">{{ stockQuote.price }} <span style="font-size: 60px;">{{ t("stock_quote.dollar") }}</span> </div>
          <div class="price-market">{{ t("stock_quote.nasdaq") }}</div>
          <div class="price-time">{{ formatted }}</div>
        </div>
        <div class="stats-table">
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.open") }}</span>
            <span class="stat-value">{{ stockQuote.open }}</span>
          </div>
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.change") }}</span>
            <span
              class="stat-value"
              :class="
                stockQuote.change
                  ? String(stockQuote.change).includes('-')
                    ? 'negative-change'
                    : String(stockQuote.change).includes('+')
                    ? 'positive-change'
                    : 'neutral-change'
                  : 'neutral-change'
              "
            >
              {{ stockQuote.change }}
            </span>
          </div>
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.volume") }}</span>
            <span class="stat-value">{{ stockQuote.volume }}</span>
          </div>
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.week_range") }}</span>
            <span class="stat-value">{{ stockQuote.week52Range }}</span>
          </div>
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.days_range") }}</span>
            <span class="stat-value">{{ stockQuote.daysRange }}</span>
          </div>
          <div class="stats-cell">
            <span class="stat-title">{{ t("stock_quote.market_cap") }}({{ t("stock_quote.dollar") }})</span>
            <span class="stat-value">{{ trimTrailingLetter(stockQuote.marketCap) }} {{ t("stock_quote.million") }}</span>
          </div>
        </div>
      </section>
    </div>
  </main>
</template>

<style scoped>
.stock-quote-hero {
  position: relative;
}

.hero-content {
  max-width: 930px;
  margin: 0 auto;
}

.hero-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.title-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}

.title-decoration {
  width: 58px;
  height: 7px;
  background: #ff7bac;
  margin: auto 0;
  margin-top: 43px;
}

.stock-title {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.4em;
  letter-spacing: 3%;
  color: #000000;
}

.gradient-badge {
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background: #e62968;
}

.hero-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0d1b2a;
}

.quote-layout {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.price-card {
  width: 466px;
  min-height: 466px;
  border-radius: 32px;
  background: #ffffff;
  border: 1px solid #f0f3f8;
  box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  text-align: center;
}

.price-value {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.price-market {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0d1b2a;
  margin-bottom: 12px;
}

.price-time {
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #5a6775;
}

.stats-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.stats-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
}

.stat-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #73849a;
}

.stat-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #455363;
}

.stat-value {
  color: #000;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "PingFang SC";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px; /* 215.385% */
  letter-spacing: 1.2px;
}

.positive-change {
  color: #00c48c;
}

.negative-change {
  color: #cf3050;
}

.neutral-change {
  color: #0d1b2a;
}
</style>