添加自定义动画效果并更新路由配置，移除不必要的公司和投资相关页面，新增联系人页面。
This commit is contained in:
Phoenix
parent
6da1c79b55
commit
f6eee146d9
BIN
src/assets/image/bg-mobile.png
Normal file
BIN
src/assets/image/bg-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
src/assets/image/bg-pc.png
Normal file
BIN
src/assets/image/bg-pc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
@ -18,29 +18,9 @@ const routes = [
|
||||
// }
|
||||
},
|
||||
{
|
||||
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: '/contacts',
|
||||
name: 'contacts',
|
||||
component: () => import('@/views/contacts/index.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
34
src/views/contacts/index.vue
Normal file
34
src/views/contacts/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "@/views/contacts/size375/index.vue";
|
||||
import size768 from "@/views/contacts/size768/index.vue";
|
||||
import size1440 from "@/views/contacts/size1440/index.vue";
|
||||
import size1920 from "@/views/contacts/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/contacts/size1440/index.vue
Normal file
22
src/views/contacts/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>
|
||||
|
||||
50
src/views/contacts/size1920/index.vue
Normal file
50
src/views/contacts/size1920/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<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>
|
||||
<div class="text-2xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/**** UnoCSS 动画补充（如未全局引入可在 uno.config.js 添加）****/
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
</style>
|
||||
|
||||
49
src/views/contacts/size375/index.vue
Normal file
49
src/views/contacts/size375/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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')]">
|
||||
<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>
|
||||
<div class="text-base text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600">
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer-mobile">
|
||||
<!-- 可根据需要添加移动端底部内容 -->
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
|
||||
.max-w-343px { max-width: 343px; }
|
||||
</style>
|
||||
|
||||
22
src/views/contacts/size768/index.vue
Normal file
22
src/views/contacts/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>
|
||||
|
||||
@ -21,6 +21,57 @@ export default defineConfig({
|
||||
[/^focus:(.*)$/, ([, style]) => ({ ':focus': { ...parseStyle(style) } })],
|
||||
// 处理 placeholder 伪元素
|
||||
[/^placeholder:(.*)$/, ([, style]) => ({ '::placeholder': { ...parseStyle(style) } })],
|
||||
// 自定义动画
|
||||
['animate-bounce-in', { 'animation': 'bounce-in 0.9s cubic-bezier(0.23,1,0.32,1) both' }],
|
||||
['animate-icon-in', { 'animation': 'icon-in 1s cubic-bezier(0.23,1,0.32,1) both' }],
|
||||
['animate-bg-move', { 'animation': 'bg-move 8s linear infinite alternate', 'background-size': '200% 200%' }],
|
||||
['animate-blob', { 'animation': 'blob 7s ease-in-out infinite alternate' }],
|
||||
['animate-blob2', { 'animation': 'blob2 9s ease-in-out infinite alternate' }],
|
||||
['animate-bubble-pop', { 'animation': 'bubble-pop 0.5s cubic-bezier(0.23,1,0.32,1) both' }],
|
||||
// 动画延迟
|
||||
['animate-delay-0', { 'animation-delay': '0s' }],
|
||||
['animate-delay-200', { 'animation-delay': '0.2s' }],
|
||||
['animate-delay-400', { 'animation-delay': '0.4s' }],
|
||||
['animate-delay-600', { 'animation-delay': '0.6s' }],
|
||||
],
|
||||
// 自定义keyframes
|
||||
safelist: [
|
||||
'animate-bounce-in', 'animate-icon-in', 'animate-bg-move', 'animate-blob', 'animate-blob2', 'animate-bubble-pop',
|
||||
'animate-delay-0', 'animate-delay-200', 'animate-delay-400', 'animate-delay-600',
|
||||
],
|
||||
preflights: [
|
||||
{
|
||||
getCSS: () => `
|
||||
@keyframes bounce-in {
|
||||
0% { opacity: 0; transform: scale(0.7) translateY(-40px); }
|
||||
60% { opacity: 1; transform: scale(1.1) translateY(10px); }
|
||||
100% { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
@keyframes icon-in {
|
||||
0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
|
||||
80% { opacity: 1; transform: scale(1.2) rotate(10deg); }
|
||||
100% { opacity: 1; transform: scale(1) rotate(0); }
|
||||
}
|
||||
@keyframes bg-move {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 100% 50%; }
|
||||
}
|
||||
@keyframes blob {
|
||||
0%,100% { transform: scale(1) translate(0,0); }
|
||||
33% { transform: scale(1.1,0.9) translate(20px,10px); }
|
||||
66% { transform: scale(0.9,1.1) translate(-10px,-20px); }
|
||||
}
|
||||
@keyframes blob2 {
|
||||
0%,100% { transform: scale(1) translate(0,0); }
|
||||
50% { transform: scale(1.2) translate(10px,20px); }
|
||||
}
|
||||
@keyframes bubble-pop {
|
||||
0% { opacity: 0; transform: scale(0.5) translateY(10px); }
|
||||
60% { opacity: 1; transform: scale(1.1) translateY(-4px); }
|
||||
100% { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
`
|
||||
}
|
||||
],
|
||||
shortcuts: {
|
||||
'flex-center': 'flex justify-center items-center',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user