From 3c0afdde84f9dfc7f03404af7dbb8d77c7099ff0 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 23 May 2025 09:37:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BE=9D=E8=B5=96=E9=A1=B9?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=20ECharts=20=E5=BA=93=EF=BC=9B?=
 =?UTF-8?q?=E5=9C=A8=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE=E4=B8=AD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=82=A1=E7=A5=A8=E6=8A=A5=E4=BB=B7=E5=92=8C=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=82=A1=E7=A5=A8=E9=A1=B5=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                |  1 +
 pnpm-lock.yaml                              | 23 +++++
 src/router/index.js                         | 11 ++-
 src/store/stock-quote/index.js              | 19 ++++
 src/views/historic-stock/index.vue          | 34 ++++++++
 src/views/historic-stock/size1440/index.vue | 22 +++++
 src/views/historic-stock/size1920/index.vue | 96 +++++++++++++++++++++
 src/views/historic-stock/size375/index.vue  | 22 +++++
 src/views/historic-stock/size768/index.vue  | 22 +++++
 src/views/stock-quote/index.vue             | 34 ++++++++
 src/views/stock-quote/size1440/index.vue    | 22 +++++
 src/views/stock-quote/size1920/index.vue    | 62 +++++++++++++
 src/views/stock-quote/size375/index.vue     | 22 +++++
 src/views/stock-quote/size768/index.vue     | 22 +++++
 14 files changed, 411 insertions(+), 1 deletion(-)
 create mode 100644 src/store/stock-quote/index.js
 create mode 100644 src/views/historic-stock/index.vue
 create mode 100644 src/views/historic-stock/size1440/index.vue
 create mode 100644 src/views/historic-stock/size1920/index.vue
 create mode 100644 src/views/historic-stock/size375/index.vue
 create mode 100644 src/views/historic-stock/size768/index.vue
 create mode 100644 src/views/stock-quote/index.vue
 create mode 100644 src/views/stock-quote/size1440/index.vue
 create mode 100644 src/views/stock-quote/size1920/index.vue
 create mode 100644 src/views/stock-quote/size375/index.vue
 create mode 100644 src/views/stock-quote/size768/index.vue

diff --git a/package.json b/package.json
index 591cf5c..a13bc48 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a469e2e..4d99557 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/router/index.js b/src/router/index.js
index b72e60e..dc0b6b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,16 @@ 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',
diff --git a/src/store/stock-quote/index.js b/src/store/stock-quote/index.js
new file mode 100644
index 0000000..4ae5b6c
--- /dev/null
+++ b/src/store/stock-quote/index.js
@@ -0,0 +1,19 @@
+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?.[20]
+    stockQuote.value.DayRange=[res.data.nodes?.[2]?.data?.[10],res.data.nodes?.[2]?.data?.[11]]
+    console.log('stockQuote.value',stockQuote.value);
+}
+  return {
+    getStockQuate,
+    stockQuote
+  }
+})
diff --git a/src/views/historic-stock/index.vue b/src/views/historic-stock/index.vue
new file mode 100644
index 0000000..cfc4094
--- /dev/null
+++ b/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>
diff --git a/src/views/historic-stock/size1440/index.vue b/src/views/historic-stock/size1440/index.vue
new file mode 100644
index 0000000..427f3d2
--- /dev/null
+++ b/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>
+
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
new file mode 100644
index 0000000..a1c48ed
--- /dev/null
+++ b/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>
+
diff --git a/src/views/historic-stock/size375/index.vue b/src/views/historic-stock/size375/index.vue
new file mode 100644
index 0000000..f3e7467
--- /dev/null
+++ b/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>
+
diff --git a/src/views/historic-stock/size768/index.vue b/src/views/historic-stock/size768/index.vue
new file mode 100644
index 0000000..e7c4364
--- /dev/null
+++ b/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>
+
diff --git a/src/views/stock-quote/index.vue b/src/views/stock-quote/index.vue
new file mode 100644
index 0000000..cfc4094
--- /dev/null
+++ b/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>
diff --git a/src/views/stock-quote/size1440/index.vue b/src/views/stock-quote/size1440/index.vue
new file mode 100644
index 0000000..427f3d2
--- /dev/null
+++ b/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>
+
diff --git a/src/views/stock-quote/size1920/index.vue b/src/views/stock-quote/size1920/index.vue
new file mode 100644
index 0000000..0a8cc29
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/stock-quote/size375/index.vue b/src/views/stock-quote/size375/index.vue
new file mode 100644
index 0000000..f3e7467
--- /dev/null
+++ b/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>
+
diff --git a/src/views/stock-quote/size768/index.vue b/src/views/stock-quote/size768/index.vue
new file mode 100644
index 0000000..e7c4364
--- /dev/null
+++ b/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>
+