添加自定义动画效果并更新路由配置,移除不必要的公司和投资相关页面,新增联系人页面。

This commit is contained in:
Phoenix 2025-05-22 19:02:50 +08:00
parent 6da1c79b55
commit f6eee146d9
9 changed files with 231 additions and 23 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

BIN
src/assets/image/bg-pc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -18,29 +18,9 @@ const routes = [
// } // }
}, },
{ {
path: '/companyprofil', path: '/contacts',
name: 'Companyprofil', name: 'contacts',
component: () => import('@/views/companyprofil/index.vue'), component: () => import('@/views/contacts/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'),
}, },
]; ];

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -21,6 +21,57 @@ export default defineConfig({
[/^focus:(.*)$/, ([, style]) => ({ ':focus': { ...parseStyle(style) } })], [/^focus:(.*)$/, ([, style]) => ({ ':focus': { ...parseStyle(style) } })],
// 处理 placeholder 伪元素 // 处理 placeholder 伪元素
[/^placeholder:(.*)$/, ([, style]) => ({ '::placeholder': { ...parseStyle(style) } })], [/^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: { shortcuts: {
'flex-center': 'flex justify-center items-center', 'flex-center': 'flex justify-center items-center',