Merge branch 'xingyy'

# Conflicts:
#	src/router/index.js   resolved by xingyy version

package.json

@@ -15,6 +15,7 @@
     "@unocss/reset": "^0.61.9",
     "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

@@ -20,6 +20,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
@@ -1962,6 +1965,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==}
 
@@ -3529,6 +3535,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==}
 
@@ -3820,6 +3829,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':
@@ -5944,6 +5956,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:
@@ -7579,6 +7596,8 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  tslib@2.3.0: {}
+
   tslib@2.6.3: {}
 
   tsx@4.16.5:
@@ -7896,3 +7915,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,36 +17,26 @@ const routes = [
         //     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: '/companyprofil',
+        path: '/email-alerts',
-    //     name: 'Companyprofil',
+        name: 'email-alerts',
-    //     component: () => import('@/views/companyprofil/index.vue'),
+        component: () => import('@/views/email-alerts/index.vue'),
-    // },
+    },
-    // {
-    //     path: '/companyprofildetail',
-    //     name: 'Companyprofildetail',
-    //     component: () => import('@/views/companyprofildetail/index.vue'),
-    // },
-    // {
-    //     path: '/businessintroduction',
-    //     name: 'Businessintroduction',
-    //     component: () => import('@/views/businessintroduction/index.vue'),
-    // },
-    // {
-    //     path: '/investor',
-    //     name: 'Investor',
-    //     component: () => import('@/views/investor/index.vue'),
-    // },
-    // {
-    //     path: '/investorhandbook',
-    //     name: 'Investorhandbook',
-    //     component: () => import('@/views/investorhandbook/index.vue'),
-    // },
 ];
 
 const router = createRouter({

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 "./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/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,96 @@
+<script setup>
+import { NCarousel, NCard } from "naive-ui";
+import { ref, onMounted } from "vue";
+import * as echarts from 'echarts';
+
+// 轮播图片示例
+const images = [
+  'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
+];
+
+// ECharts 实例
+const chartRef = ref();
+let chartInstance = null;
+
+onMounted(() => {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value);
+    chartInstance.setOption({
+      title: { text: '历史数据趋势', left: 'center', textStyle: { color: '#fff', fontSize: 24 } },
+      tooltip: {},
+      xAxis: {
+        type: 'category',
+        data: ['一月', '二月', '三月', '四月', '五月', '六月'],
+        axisLabel: { color: '#fff' },
+        axisLine: { lineStyle: { color: '#fff' } }
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: { color: '#fff' },
+        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+        axisLine: { lineStyle: { color: '#fff' } }
+      },
+      series: [{
+        data: [120, 200, 150, 80, 70, 110],
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(59,130,246,0.5)' },
+              { offset: 1, color: 'rgba(59,130,246,0)' }
+            ]
+          }
+        },
+        lineStyle: { width: 4, color: '#3b82f6' },
+        symbol: 'circle',
+        symbolSize: 12,
+        itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
+        animationDuration: 1200
+      }]
+    });
+  }
+});
+</script>
+
+<template>
+  <main ref="main" class="relative w-full h-[calc(100vh-120px)] flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#0f172a] animate-bg-move">
+    <!-- 背景流动渐变动画 -->
+    <div class="absolute inset-0 -z-1 animate-bg-move bg-gradient-to-tr from-[#2563eb]/60 via-[#9333ea]/40 to-[#f59e0b]/30 blur-2xl opacity-80"></div>
+    <div class="relative z-10 w-full h-full flex flex-1 flex-row items-center justify-center gap-12 px-12 pt-8">
+      <!-- 左侧图片轮播 -->
+      <div class="w-1/3 h-[420px] rounded-3xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-md animate-bounce-in">
+        <NCarousel autoplay show-arrow effect="card" class="h-full">
+          <img v-for="img in images" :key="img" :src="img" class="object-cover w-full h-full" />
+        </NCarousel>
+      </div>
+      <!-- 右侧信息卡片 -->
+      <div class="w-1/3 h-[420px] flex flex-col justify-between p-8 rounded-3xl bg-white/20 backdrop-blur-2xl shadow-xl animate-blob">
+        <NCard class="bg-transparent border-none shadow-none text-white" content-style="background:transparent;">
+          <template #header>
+            <div class="text-3xl font-bold mb-2 animate-bounce-in">高大上数据看板</div>
+          </template>
+          <div class="text-lg mb-4 animate-delay-200 animate-bounce-in">这里可以放置一些关键指标、简介或实时数据。</div>
+          <ul class="space-y-2">
+            <li class="flex items-center gap-2 animate-delay-400 animate-bounce-in"><span class="i-uil:chart-line text-2xl text-primary"></span> 指标一：<span class="font-bold">12345</span></li>
+            <li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:users-alt text-2xl text-accent"></span> 指标二：<span class="font-bold">6789</span></li>
+            <li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:clock text-2xl text-secondary"></span> 更新时间：<span class="font-bold">2024-06-01</span></li>
+          </ul>
+        </NCard>
+      </div>
+    </div>
+    <!-- 下方 ECharts 图表 -->
+    <div class="relative z-10 w-4/5 h-[320px] mt-12 rounded-3xl bg-white/10 backdrop-blur-md shadow-2xl animate-icon-in flex items-center justify-center">
+      <div ref="chartRef" class="w-full h-full"></div>
+    </div>
+  </main>
+</template>
+
+<style scoped lang="scss">
+// 可根据需要自定义更多样式
+</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>
+