From dc5658513cfdd384189362103b09b8c7989d54c8 Mon Sep 17 00:00:00 2001 From: Swanky <413564165@qq.com> Date: Thu, 19 Jun 2025 23:43:56 +0800 Subject: [PATCH] 1 --- package-lock.json | 46 +- package.json | 14 +- public/tv86-announcements.json | 11 + src/App.vue | 1 - src/RouterApp.vue | 12 + src/components/BaseCard.vue | 52 +- src/components/SupplyDemandData.vue | 2 +- src/components/TV86/MarketAnnouncements.vue | 264 +++++++++ src/components/TV86/PriceTrendChart.vue | 613 ++++++++++++++++++++ src/components/TV86/YakTradingOverview.vue | 225 +++++++ src/main.js | 5 +- src/router/index.js | 23 + src/styles/index.scss | 54 +- src/views/Dashboard.vue | 469 +++++++++++++++ src/views/TV86Display.vue | 287 +++++++++ 15 files changed, 2011 insertions(+), 67 deletions(-) create mode 100644 public/tv86-announcements.json create mode 100644 src/RouterApp.vue create mode 100644 src/components/TV86/MarketAnnouncements.vue create mode 100644 src/components/TV86/PriceTrendChart.vue create mode 100644 src/components/TV86/YakTradingOverview.vue create mode 100644 src/router/index.js create mode 100644 src/views/Dashboard.vue create mode 100644 src/views/TV86Display.vue diff --git a/package-lock.json b/package-lock.json index 3500d24..66382a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "@vueuse/core": "^10.4.1", "axios": "^1.5.0", "echarts": "^5.4.3", - "vue": "^3.3.4" + "lunar-javascript": "^1.7.3", + "vue": "^3.3.4", + "vue-router": "^4.5.1" }, "devDependencies": { "@vitejs/plugin-vue": "^4.4.0", @@ -778,6 +780,11 @@ "@vue/shared": "3.5.16" } }, + "node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==" + }, "node_modules/@vue/reactivity": { "version": "3.5.16", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.16.tgz", @@ -1304,6 +1311,11 @@ "node": ">=0.12.0" } }, + "node_modules/lunar-javascript": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/lunar-javascript/-/lunar-javascript-1.7.3.tgz", + "integrity": "sha512-p03Nj1D50UIHF66nRszKh9jDGf1nSsGlRFavrbqV6cz9UgOAcjQw7m0NRprjxPV3JsKKwhw4almHhe8BKkNFgg==" + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -1577,6 +1589,20 @@ } } }, + "node_modules/vue-router": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", + "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==", + "dependencies": { + "@vue/devtools-api": "^6.6.4" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/zrender": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz", @@ -1948,6 +1974,11 @@ "@vue/shared": "3.5.16" } }, + "@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==" + }, "@vue/reactivity": { "version": "3.5.16", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.16.tgz", @@ -2307,6 +2338,11 @@ "dev": true, "optional": true }, + "lunar-javascript": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/lunar-javascript/-/lunar-javascript-1.7.3.tgz", + "integrity": "sha512-p03Nj1D50UIHF66nRszKh9jDGf1nSsGlRFavrbqV6cz9UgOAcjQw7m0NRprjxPV3JsKKwhw4almHhe8BKkNFgg==" + }, "magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -2454,6 +2490,14 @@ "@vue/shared": "3.5.16" } }, + "vue-router": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", + "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==", + "requires": { + "@vue/devtools-api": "^6.6.4" + } + }, "zrender": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz", diff --git a/package.json b/package.json index 31898a3..ad550ab 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,16 @@ "preview": "vite preview" }, "dependencies": { - "vue": "^3.3.4", - "echarts": "^5.4.3", + "@vueuse/core": "^10.4.1", "axios": "^1.5.0", - "@vueuse/core": "^10.4.1" + "echarts": "^5.4.3", + "lunar-javascript": "^1.7.3", + "vue": "^3.3.4", + "vue-router": "^4.5.1" }, "devDependencies": { "@vitejs/plugin-vue": "^4.4.0", - "vite": "^4.4.9", - "sass": "^1.66.1" + "sass": "^1.66.1", + "vite": "^4.4.9" } -} \ No newline at end of file +} diff --git a/public/tv86-announcements.json b/public/tv86-announcements.json new file mode 100644 index 0000000..7b7d310 --- /dev/null +++ b/public/tv86-announcements.json @@ -0,0 +1,11 @@ +{ + "announcements": [ + { + "id": 1, + "content": "各位牧民、客商请注意，交易时请保管好财物，遵守市场秩序，公平议价，禁止强买强卖；运输牦牛需确保车辆牢固，避免牲畜受惊。遇纠纷可联系市场管理方协调，共同维护安全、诚信的交易环境。", + "content_tibetan": "འབྲོག་པ་དང་ཚོང་པ་ཚོས་གཟིགས་ནས། ཚོང་འདུས་སྐབས་རང་གི་དངུལ་རྫས་ལེགས་པར་སྲུང་སྐྱོབ་བྱེད་པ་དང་། ཚོང་འདུས་ཀྱི་རིམ་པ་བསྲུང་བ། འགྲིག་པའི་གོང་གི་གླེང་སྟེགས་བྱེད་པ། ཁས་ལེན་འདེད་སྐུལ་བྱེད་རྒྱུ་བཀག་འགོག་བྱེད་དགོས། གཡག་འདྲེན་སྐབས་མོ་ཊར་བརྟན་པོ་ཡོད་དགོས་པ་དང་། སེམས་ཅན་སྐྲག་པ་སྲིད་རྒྱུ་ཚར་གཅོད་བྱེད་དགོས། རྩོད་རྙོག་བྱུང་ཚེ་ཚོང་འདུས་འཛིན་སྐྱོང་བ་དང་རྒྱུས་ལོན་གླེང་སླུང་བྱེད་ཆོག ཉམས་ལེན་གྱིས་བདེ་འཇགས་དང་ཡིད་ཆེས་ཀྱི་ཚོང་འདུས་ཁོར་ཡུག་ཡར་རྒྱས་གཏོང་བ།", + "important": true, + "created_at": "2025-01-13" + } + ] +} \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 3c20c3c..c58a2c2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -210,7 +210,6 @@ onUnmounted(() => { padding: 0 40px; background: url('./images/大标题背景.png') center/contain no-repeat; background-size: auto 84px; - border: 1px solid rgba(64, 158, 255, 0.3); border-radius: 12px; backdrop-filter: blur(10px); position: relative; diff --git a/src/RouterApp.vue b/src/RouterApp.vue new file mode 100644 index 0000000..75b4eac --- /dev/null +++ b/src/RouterApp.vue @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue index ff6b47f..c7b9dd6 100644 --- a/src/components/BaseCard.vue +++ b/src/components/BaseCard.vue @@ -18,15 +18,22 @@ defineProps({ \ No newline at end of file diff --git a/src/components/SupplyDemandData.vue b/src/components/SupplyDemandData.vue index e2726be..f6d8ff9 100644 --- a/src/components/SupplyDemandData.vue +++ b/src/components/SupplyDemandData.vue @@ -410,7 +410,7 @@ onMounted(async () => { .supply-info-content.expanded .table-header, .supply-info-content.expanded .table-row { - grid-template-columns: 140px 140px 100px 160px 160px 140px 160px 140px 100px; + grid-template-columns: 1fr 1fr 0.8fr 1fr 1fr 1fr 1.2fr 1fr 0.6fr; } .supply-info-content.expanded .header-cell, diff --git a/src/components/TV86/MarketAnnouncements.vue b/src/components/TV86/MarketAnnouncements.vue new file mode 100644 index 0000000..cad0cab --- /dev/null +++ b/src/components/TV86/MarketAnnouncements.vue @@ -0,0 +1,264 @@ + + + + + \ No newline at end of file diff --git a/src/components/TV86/PriceTrendChart.vue b/src/components/TV86/PriceTrendChart.vue new file mode 100644 index 0000000..498ac45 --- /dev/null +++ b/src/components/TV86/PriceTrendChart.vue @@ -0,0 +1,613 @@ + + + + + \ No newline at end of file diff --git a/src/components/TV86/YakTradingOverview.vue b/src/components/TV86/YakTradingOverview.vue new file mode 100644 index 0000000..c6ee3d7 --- /dev/null +++ b/src/components/TV86/YakTradingOverview.vue @@ -0,0 +1,225 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index dd6eba3..a662471 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,6 @@ import { createApp } from 'vue' -import App from './App.vue' +import RouterApp from './RouterApp.vue' +import router from './router' import './styles/index.scss' -createApp(App).mount('#app') \ No newline at end of file +createApp(RouterApp).use(router).mount('#app') \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..84251ae --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router' +import Dashboard from '../views/Dashboard.vue' +import TV86Display from '../views/TV86Display.vue' + +const routes = [ + { + path: '/', + name: 'Dashboard', + component: Dashboard + }, + { + path: '/tv86', + name: 'TV86Display', + component: TV86Display + } +] + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +export default router \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 15b1266..cedae4c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,4 @@ -// CSS变量定义 +// CSS变量定义 - 这些变量会被JavaScript动态设置 :root { --screen-width: 5120px; --screen-height: 1440px; @@ -23,39 +23,20 @@ html, body { } #app { - width: var(--screen-width); - height: var(--screen-height); - min-width: var(--screen-width); - min-height: var(--screen-height); + width: 100%; + height: 100%; display: flex; flex-direction: column; position: relative; } -// 固定尺寸布局 - 使用flex布局 -.dashboard-container { - width: var(--screen-width); - height: var(--screen-height); - display: flex; - flex-direction: column; - padding: 16px; - background: radial-gradient(ellipse at center, rgba(64, 158, 255, 0.1) 0%, $bg-primary 70%); - overflow: hidden; - box-sizing: border-box; - gap: 16px; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - linear-gradient(90deg, transparent 0%, rgba(64, 158, 255, 0.02) 50%, transparent 100%), - linear-gradient(0deg, transparent 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%); - pointer-events: none; - z-index: 1; +// 全局背景动画 +@keyframes backgroundShift { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; } } @@ -150,17 +131,4 @@ html, body { animation: pulse 2s infinite; } -// 响应式适配 - 针对4:1宽高比优化 -@media (max-width: 1919px) and (min-width: 1600px) { - .dashboard-container { - padding: 6px; - gap: 6px; - } -} - -@media (max-width: 1599px) { - .dashboard-container { - padding: 5px; - gap: 5px; - } -} \ No newline at end of file +// 响应式适配相关样式已移至各组件内部 \ No newline at end of file diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue new file mode 100644 index 0000000..a8e81ac --- /dev/null +++ b/src/views/Dashboard.vue @@ -0,0 +1,469 @@ + + + + + \ No newline at end of file diff --git a/src/views/TV86Display.vue b/src/views/TV86Display.vue new file mode 100644 index 0000000..b79b9d5 --- /dev/null +++ b/src/views/TV86Display.vue @@ -0,0 +1,287 @@ + + + + + \ No newline at end of file