Merge branch 'wyfMain-dev'

# Conflicts:
#	src/router/index.js

package.json

@@ -17,6 +17,7 @@
     "@vicons/utils": "^0.1.4",
     "axios": "^1.7.3",
     "cnjm-postcss-px-to-viewport": "^1.0.1",
+    "echarts": "^5.6.0",
     "gsap": "^3.12.5",
     "jsdom": "^24.0.0",
     "lodash": "^4.17.21",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       cnjm-postcss-px-to-viewport:
         specifier: ^1.0.1
         version: 1.0.1(postcss@8.4.40)
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
       gsap:
         specifier: ^3.12.5
         version: 3.12.7
@@ -1985,6 +1988,9 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
   electron-to-chromium@1.5.4:
     resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
 
@@ -3552,6 +3558,9 @@ packages:
     resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
     engines: {node: '>=0.10.0'}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
@@ -3843,6 +3852,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -5986,6 +5998,11 @@ snapshots:
 
   duplexer@0.1.2: {}
 
+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
   electron-to-chromium@1.5.4: {}
 
   end-of-stream@1.4.4:
@@ -7621,6 +7638,8 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  tslib@2.3.0: {}
+
   tslib@2.6.3: {}
 
   tsx@4.16.5:
@@ -7938,3 +7957,7 @@ snapshots:
       fd-slicer: 1.1.0
 
   yocto-queue@0.1.0: {}
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0

src/router/index.js

@@ -17,6 +17,31 @@ const routes = [
         path: '/home',
         name: 'home',
         component: () => import('@/views/home/index.vue'),
+        // beforeEnter: (to, from, next) => {
+
+        //     localStorage.clear()
+        //     next()
+        // }
+    },
+    {
+        path: '/stock-quote',
+        name: 'stock-quote',
+        component: () => import('@/views/stock-quote/index.vue'),
+    },
+    {
+        path: '/historic-stock',
+        name: 'historic-stock',
+        component: () => import('@/views/historic-stock/index.vue'),
+    },
+    {
+        path: '/contacts',
+        name: 'contacts',
+        component: () => import('@/views/contacts/index.vue'),
+    },
+    {
+        path: '/email-alerts',
+        name: 'email-alerts',
+        component: () => import('@/views/email-alerts/index.vue'),
       },
       {
         path: '/quarterlyresults',

src/store/stock-quote/index.js

@@ -0,0 +1,20 @@
+import { ref } from 'vue'
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import axios from 'axios'
+export const useStockQuote = createGlobalState(() => {
+  const stockQuote = useLocalStorage('stockQuote', {})
+const getStockQuate= async()=>{
+    const res = await axios.post('http://saas-test.szjixun.cn/api/chart/forward/test')
+    console.log('res',res);
+    stockQuote.value.Open=res.data.nodes?.[2]?.data?.[10]
+    stockQuote.value.Volume=res.data.nodes?.[1]?.data?.[21]
+    stockQuote.value.DayRange=[res.data.nodes?.[2]?.data?.[10],res.data.nodes?.[2]?.data?.[11]]
+    stockQuote.value.WeekRange=[res.data.nodes?.[2]?.data?.[31],res.data.nodes?.[1]?.data?.[30]]
+    
+    console.log('stockQuote.value',stockQuote.value);
+}
+  return {
+    getStockQuate,
+    stockQuote
+  }
+})

src/views/contacts/size1920/index.vue

@@ -11,7 +11,7 @@ function copyEmail() {
   <header className="header">
   
   </header>
-  <main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')]  rounded-3xl  to-accent w-100vw animate-fade-in">
+  <main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')]  rounded-3xl  to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]">
     <div class="w-full flex flex-col items-center gap-6 py-16 px-8">
       <h1 class="text-5xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
       <div class="text-3xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>

src/views/contacts/size375/index.vue

@@ -9,7 +9,7 @@ function copyEmail() {
   <header class="header-mobile">
     <!-- 可根据需要添加移动端头部内容 -->
   </header>
-  <main ref="main" class="flex flex-col items-center  from-white/80 to-white/40 backdrop-blur-md rounded-xl shadow-lg border border-gradient-to-br from-primary to-accent  w-[100vw] mt-8 animate-fade-in px-4 py-8 bg-[url('@/assets/image/background.png')]">
+  <main ref="main" class="flex flex-col items-center     from-primary to-accent  w-[100vw] mt-8 animate-fade-in px-4 py-8 bg-[url('@/assets/image/bg-mobile.png')]">
     <div class="w-full flex flex-col items-center gap-4 px-2">
       <h1 class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
       <div class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>

src/views/email-alerts/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "@/views/email-alerts/size375/index.vue";
+import size768 from "@/views/email-alerts/size768/index.vue";
+import size1440 from "@/views/email-alerts/size1440/index.vue";
+import size1920 from "@/views/email-alerts/size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/email-alerts/size1440/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  1440
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/email-alerts/size1920/index.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from "vue";
+
+const form = ref({
+  firstName: "",
+  lastName: "",
+  email: "",
+  company: "",
+  phone: "",
+  alertType: "all"
+});
+const submitted = ref(false);
+
+function handleSubmit(e) {
+  e.preventDefault();
+  submitted.value = true;
+}
+</script>
+
+<template>
+  <header class="header">
+  </header>
+  <main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')]  overflow-hidden">
+    <!-- 粒子背景 -->
+    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
+    <!-- 表单卡片/提交成功卡片 -->
+    <div class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in">
+      <template v-if="!submitted">
+        <h2 class="text-3xl font-bold text-primary mb-2 tracking-wide">E-Mail Alerts</h2>
+        <p class="text-sm text-gray-500 mb-6">* Required Fields</p>
+        <form class="space-y-4" @submit="handleSubmit">
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* First Name</label>
+            <input v-model="form.firstName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
+            <input v-model="form.lastName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Email</label>
+            <input v-model="form.email" type="email" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">* Company</label>
+            <input v-model="form.company" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <div>
+            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
+            <input v-model="form.phone" type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
+          </div>
+          <button type="submit" class="w-full py-3 rounded-xl bg-primary text-white font-bold text-lg shadow-lg hover:(bg-primary/90 scale-105) active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
+            Submit
+          </button>
+        </form>
+      </template>
+      <template v-else>
+        <div class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in">
+          <span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
+          <h2 class="text-2xl font-bold text-primary mb-2">提交成功！</h2>
+          <div class="text-gray-700 text-base mb-4">您提交的信息如下：</div>
+          <div class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800">
+            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+            <div><span class="font-semibold">Phone：</span>{{ form.phone || '（未填写）' }}</div>
+            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </main>
+  <footer>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+/* 可选：自定义粒子或渐变动画背景 */
+</style>

src/views/email-alerts/size375/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/email-alerts/size768/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  768
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/historic-stock/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "./size375/index.vue";
+import size768 from "./size1920/index.vue";
+import size1440 from "./size1920/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/historic-stock/size1440/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  1440
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/historic-stock/size1920/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="historic-data-container">
+    <img src="@/assets/image/historic-stock.png" alt="1" />
+
+    <div class="header">
+      <h1 class="title">Historical Data</h1>
+      <div class="filter-container">
+        <n-dropdown
+          trigger="click"
+          :options="periodOptions"
+          @select="handlePeriodChange"
+          :value="state.selectedPeriod"
+        >
+          <n-button
+            >{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
+          ></n-button>
+        </n-dropdown>
+
+        <n-dropdown
+          trigger="click"
+          :options="durationOptions"
+          @select="handleDurationChange"
+          :value="state.selectedDuration"
+        >
+          <n-button
+            >{{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon
+          ></n-button>
+        </n-dropdown>
+      </div>
+    </div>
+
+    <n-data-table
+      :columns="columns"
+      :data="state.tableData"
+      :bordered="false"
+      :single-line="false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h } from "vue";
+import axios from "axios";
+import { ChevronDownOutline } from "@vicons/ionicons5";
+
+// 数据筛选选项
+const periodOptions = [
+  { label: "Daily", key: "Daily" },
+  { label: "Weekly", key: "Weekly" },
+  { label: "Monthly", key: "Monthly" },
+  { label: "Quarterly", key: "Quarterly" },
+  { label: "Annual", key: "Annual" },
+];
+
+const durationOptions = [
+  { label: "3 Months", key: "3 Months" },
+  { label: "6 Months", key: "6 Months" },
+  { label: "Year to Date", key: "Year to Date" },
+  { label: "1 Year", key: "1 Year" },
+  { label: "5 Years", key: "5 Years" },
+  { label: "10 Years", key: "10 Years" },
+];
+
+const state = reactive({
+  selectedPeriod: "Daily",
+  selectedDuration: "3 Months",
+  tableData: [],
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: "Date",
+    key: "date",
+    align: "left",
+  },
+  {
+    title: "Open",
+    key: "open",
+    align: "center",
+  },
+  {
+    title: "High",
+    key: "high",
+    align: "center",
+  },
+  {
+    title: "Low",
+    key: "low",
+    align: "center",
+  },
+  {
+    title: "Close",
+    key: "close",
+    align: "center",
+  },
+  {
+    title: "Adj. Close",
+    key: "adjClose",
+    align: "center",
+  },
+  {
+    title: "Change",
+    key: "change",
+    align: "center",
+    render(row) {
+      const value = parseFloat(row.change);
+      const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
+      return h("span", { style: { color } }, row.change);
+    },
+  },
+  {
+    title: "Volume",
+    key: "volume",
+    align: "center",
+  },
+];
+
+// 处理下拉选项变更
+const handlePeriodChange = (key) => {
+  state.selectedPeriod = key;
+  getPageData();
+};
+
+const handleDurationChange = (key) => {
+  state.selectedDuration = key;
+  getPageData();
+};
+
+onMounted(() => {
+  getPageData();
+});
+
+const getPageData = async () => {
+  try {
+    // 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
+    let url =
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+
+    // 转换API返回的数据为表格需要的格式
+    // 注意：以下是模拟数据，实际应该根据API返回的数据结构调整
+    state.tableData = [
+      {
+        date: "May 22, 2025",
+        open: "1.87",
+        high: "2.03",
+        low: "1.85",
+        close: "2.00",
+        adjClose: "2.00",
+        change: "-2.44%",
+        volume: "2,103",
+      },
+      {
+        date: "May 21, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "2.05",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "4",
+      },
+      {
+        date: "May 20, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "1.86",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "11,042",
+      },
+      {
+        date: "May 19, 2025",
+        open: "2.04",
+        high: "2.05",
+        low: "1.85",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "-",
+        volume: "6,204",
+      },
+      {
+        date: "May 16, 2025",
+        open: "2.05",
+        high: "2.06",
+        low: "1.85",
+        close: "2.05",
+        adjClose: "2.05",
+        change: "2.50%",
+        volume: "3,618",
+      },
+      {
+        date: "May 15, 2025",
+        open: "2.05",
+        high: "2.05",
+        low: "1.93",
+        close: "2.00",
+        adjClose: "2.00",
+        change: "-1.48%",
+        volume: "5,413",
+      },
+      {
+        date: "May 14, 2025",
+        open: "1.95",
+        high: "2.05",
+        low: "1.95",
+        close: "2.03",
+        adjClose: "2.03",
+        change: "4.10%",
+        volume: "8,886",
+      },
+      {
+        date: "May 13, 2025",
+        open: "2.26",
+        high: "2.26",
+        low: "1.80",
+        close: "1.95",
+        adjClose: "1.95",
+        change: "-18.41%",
+        volume: "10,750",
+      },
+    ];
+
+    console.log("获取到的数据", state.tableData);
+  } catch (error) {
+    console.error("获取数据失败", error);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.historic-data-container {
+  padding: 20px;
+  width: 100%;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 24px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .filter-container {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  :deep(.n-data-table) {
+    .n-data-table-td {
+      padding: 12px 8px;
+    }
+  }
+}
+</style>

src/views/historic-stock/size375/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/historic-stock/size768/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  768
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/stock-quote/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "./size375/index.vue";
+import size768 from "./size768/index.vue";
+import size1440 from "./size1440/index.vue";
+import size1920 from "./size1920/index.vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const router = useRouter();
+const { width } = useWindowSize();
+const { t } = useI18n();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/stock-quote/size1440/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  1440
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/stock-quote/size1920/index.vue

@@ -0,0 +1,62 @@
+<script setup>
+import {useStockQuote} from '@/store/stock-quote/index.js'
+const useStock=useStockQuote()
+useStock.getStockQuate()
+</script>
+
+<template>
+  <header class="header">
+  </header>
+  <main
+    ref="main"
+    class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 bg-gradient-to-br from-primary/10 to-white/80 p-12 rounded-3xl shadow-2xl animate-bounce-in"
+  >
+    <!-- 左侧大号价格 -->
+    <section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
+      <div class="text-7xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
+      <div class="mt-4 text-xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
+    </section>
+    <!-- 右侧信息卡片 -->
+    <section class="grid grid-cols-2 gap-8">
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Open</div>
+        <div class="text-xl font-bold">$2.00</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Change</div>
+        <div class="text-xl font-bold text-red-500 animate-bounce-in">-0.05 (-2.46%)</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Day's Range</div>
+        <div class="text-xl font-bold">$1.85 - $2.03</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">52-Week Range</div>
+        <div class="text-xl font-bold">$1.85 - $12.60</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Volume</div>
+        <div class="text-xl font-bold">23.5K</div>
+      </div>
+      <div class="info-card">
+        <div class="text-xs text-gray-400">Market Cap</div>
+        <div class="text-xl font-bold">$1.2M</div>
+      </div>
+    </section>
+  </main>
+  <footer>
+  </footer>
+</template>
+
+<style scoped>
+/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
+.glass-card {
+  backdrop-filter: blur(16px);
+  background: rgba(255,255,255,0.6);
+  border: 1px solid rgba(255,255,255,0.3);
+  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
+}
+.info-card {
+  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 animate-bounce-in hover:scale-105 transition-transform duration-300;
+}
+</style>

src/views/stock-quote/size375/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+

src/views/stock-quote/size768/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+
+</script>
+
+<template>
+  <header className="header">
+  768
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+