Merge branch 'xingyy'
# Conflicts: # src/router/index.js resolved by xingyy version
This commit is contained in:
Phoenix
commit
14492e1782
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
// name: 'Companyprofil',
|
||||
// component: () => import('@/views/companyprofil/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'),
|
||||
// },
|
||||
{
|
||||
path: '/email-alerts',
|
||||
name: 'email-alerts',
|
||||
component: () => import('@/views/email-alerts/index.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
20
src/store/stock-quote/index.js
Normal file
20
src/store/stock-quote/index.js
Normal file
@ -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
|
||||
}
|
||||
})
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
34
src/views/email-alerts/index.vue
Normal file
34
src/views/email-alerts/index.vue
Normal file
@ -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>
|
||||
22
src/views/email-alerts/size1440/index.vue
Normal file
22
src/views/email-alerts/size1440/index.vue
Normal file
@ -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>
|
||||
|
||||
80
src/views/email-alerts/size1920/index.vue
Normal file
80
src/views/email-alerts/size1920/index.vue
Normal file
@ -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>
|
||||
22
src/views/email-alerts/size375/index.vue
Normal file
22
src/views/email-alerts/size375/index.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/email-alerts/size768/index.vue
Normal file
22
src/views/email-alerts/size768/index.vue
Normal file
@ -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>
|
||||
|
||||
34
src/views/historic-stock/index.vue
Normal file
34
src/views/historic-stock/index.vue
Normal file
@ -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>
|
||||
22
src/views/historic-stock/size1440/index.vue
Normal file
22
src/views/historic-stock/size1440/index.vue
Normal file
@ -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>
|
||||
|
||||
96
src/views/historic-stock/size1920/index.vue
Normal file
96
src/views/historic-stock/size1920/index.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/historic-stock/size375/index.vue
Normal file
22
src/views/historic-stock/size375/index.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/historic-stock/size768/index.vue
Normal file
22
src/views/historic-stock/size768/index.vue
Normal file
@ -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>
|
||||
|
||||
34
src/views/stock-quote/index.vue
Normal file
34
src/views/stock-quote/index.vue
Normal file
@ -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>
|
||||
22
src/views/stock-quote/size1440/index.vue
Normal file
22
src/views/stock-quote/size1440/index.vue
Normal file
@ -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>
|
||||
|
||||
62
src/views/stock-quote/size1920/index.vue
Normal file
62
src/views/stock-quote/size1920/index.vue
Normal file
@ -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>
|
||||
22
src/views/stock-quote/size375/index.vue
Normal file
22
src/views/stock-quote/size375/index.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/stock-quote/size768/index.vue
Normal file
22
src/views/stock-quote/size768/index.vue
Normal file
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user