fiee-official-website/src/views/stock-quote/size768/index.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 class="stock-quote-container-768">
    <div class="content-wrapper">
      <div class="title-section">
        <div class="title-decoration"></div>
        <div class="title-text">Stock Quote</div>
      </div>

      <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>
  </main>
</template>

<style scoped lang="scss">
.stock-quote-container-768 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "PingFang SC", sans-serif;
  background-image: url("@/assets/image/768/bg-stock-quote.png");
  background-size: cover;
  background-position: center;
}

.content-wrapper {
  width: 650 * 2.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 16 * 2.5px;
  margin-bottom: 32 * 2.5px;
  margin-top: 43 * 2.5px;
  padding: 0 16 * 2.5px;
}

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

.title-text {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 32 * 2.5px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #000000;
}

.data-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-card {
  width: 100%;
  height: 355 * 2.5px;
  background-color: white;
  border-radius: 16 * 2.5px;
  box-shadow: 0 * 2.5px 3 * 2.5px 14 * 2.5px 0 * 2.5px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16 * 2.5px;
  gap: 30 * 2.5px;
  text-align: center;
}

.price-value {
  width: 100%;
  font-size: 110 * 2.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.48 * 2.5px;
  background: linear-gradient(to right, #ff7bac, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-nasdaq {
  width: 100%;
  font-size: 24 * 2.5px;
  color: black;
  font-weight: 600;
  letter-spacing: 1.2 * 2.5px;
  line-height: 1;
}

.price-date {
  width: 100%;
  font-size: 18 * 2.5px;
  color: #455363;
  font-weight: 500;
}

.details-grid {
  width: 100%;
  display: flex;
  align-items: center;
}

.details-column {
  width: 325 * 2.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.detail-item {
  width: 100%;
  height: 155 * 2.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16 * 2.5px 32 * 2.5px;
  text-align: center;
}

.detail-label {
  width: 100%;
  font-size: 18 * 2.5px;
  color: #455363;
  font-weight: 500;
}

.detail-value {
  width: 100%;
  font-size: 24 * 2.5px;
  color: black;
  font-weight: 600;
  letter-spacing: 1.2 * 2.5px;
}

.text-red {
  color: #cf3050;
}

.text-green {
  color: #00c48c;
}
</style>