fiee-official-website/src/views/contacts/size1920/index.vue

51 lines
1.7 KiB
Vue
Raw Normal View History

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