Compare commits
No commits in common. "6d1d22171a840828721fc892b7d59fab42838d63" and "5defd0e4d0408a713d3828d2de23dd56fd7a33e0" have entirely different histories.
6d1d22171a
...
5defd0e4d0
@ -17,7 +17,6 @@
|
|||||||
"@vicons/utils": "^0.1.4",
|
"@vicons/utils": "^0.1.4",
|
||||||
"axios": "^1.7.3",
|
"axios": "^1.7.3",
|
||||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||||
"echarts": "^5.6.0",
|
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
"jsdom": "^24.0.0",
|
"jsdom": "^24.0.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|||||||
@ -26,9 +26,6 @@ importers:
|
|||||||
cnjm-postcss-px-to-viewport:
|
cnjm-postcss-px-to-viewport:
|
||||||
specifier: ^1.0.1
|
specifier: ^1.0.1
|
||||||
version: 1.0.1(postcss@8.4.40)
|
version: 1.0.1(postcss@8.4.40)
|
||||||
echarts:
|
|
||||||
specifier: ^5.6.0
|
|
||||||
version: 5.6.0
|
|
||||||
gsap:
|
gsap:
|
||||||
specifier: ^3.12.5
|
specifier: ^3.12.5
|
||||||
version: 3.12.7
|
version: 3.12.7
|
||||||
@ -1988,9 +1985,6 @@ packages:
|
|||||||
duplexer@0.1.2:
|
duplexer@0.1.2:
|
||||||
resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
|
resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
|
||||||
|
|
||||||
echarts@5.6.0:
|
|
||||||
resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
|
|
||||||
|
|
||||||
electron-to-chromium@1.5.4:
|
electron-to-chromium@1.5.4:
|
||||||
resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
|
resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
|
||||||
|
|
||||||
@ -3558,9 +3552,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
|
resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
tslib@2.3.0:
|
|
||||||
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
|
||||||
|
|
||||||
tslib@2.6.3:
|
tslib@2.6.3:
|
||||||
resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
|
resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
|
||||||
|
|
||||||
@ -3852,9 +3843,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
||||||
zrender@5.6.1:
|
|
||||||
resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
|
|
||||||
|
|
||||||
snapshots:
|
snapshots:
|
||||||
|
|
||||||
'@ampproject/remapping@2.3.0':
|
'@ampproject/remapping@2.3.0':
|
||||||
@ -5998,11 +5986,6 @@ snapshots:
|
|||||||
|
|
||||||
duplexer@0.1.2: {}
|
duplexer@0.1.2: {}
|
||||||
|
|
||||||
echarts@5.6.0:
|
|
||||||
dependencies:
|
|
||||||
tslib: 2.3.0
|
|
||||||
zrender: 5.6.1
|
|
||||||
|
|
||||||
electron-to-chromium@1.5.4: {}
|
electron-to-chromium@1.5.4: {}
|
||||||
|
|
||||||
end-of-stream@1.4.4:
|
end-of-stream@1.4.4:
|
||||||
@ -7638,8 +7621,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
escape-string-regexp: 1.0.5
|
escape-string-regexp: 1.0.5
|
||||||
|
|
||||||
tslib@2.3.0: {}
|
|
||||||
|
|
||||||
tslib@2.6.3: {}
|
tslib@2.6.3: {}
|
||||||
|
|
||||||
tsx@4.16.5:
|
tsx@4.16.5:
|
||||||
@ -7957,7 +7938,3 @@ snapshots:
|
|||||||
fd-slicer: 1.1.0
|
fd-slicer: 1.1.0
|
||||||
|
|
||||||
yocto-queue@0.1.0: {}
|
yocto-queue@0.1.0: {}
|
||||||
|
|
||||||
zrender@5.6.1:
|
|
||||||
dependencies:
|
|
||||||
tslib: 2.3.0
|
|
||||||
|
|||||||
@ -17,33 +17,6 @@ const routes = [
|
|||||||
path: 'home',
|
path: 'home',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('@/views/home/index.vue'),
|
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: 'press-releases',
|
path: 'press-releases',
|
||||||
|
|||||||
@ -1,20 +0,0 @@
|
|||||||
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 className="header">
|
||||||
|
|
||||||
</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 bg-[url('@/assets/image/bg-pc.png')]">
|
<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">
|
||||||
<div class="w-full flex flex-col items-center gap-6 py-16 px-8">
|
<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>
|
<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>
|
<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 class="header-mobile">
|
||||||
<!-- 可根据需要添加移动端头部内容 -->
|
<!-- 可根据需要添加移动端头部内容 -->
|
||||||
</header>
|
</header>
|
||||||
<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')]">
|
<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')]">
|
||||||
<div class="w-full flex flex-col items-center gap-4 px-2">
|
<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>
|
<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>
|
<div class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||||
|
|||||||
@ -1,34 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<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