Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

# Conflicts:
#	src/router/index.js

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
         //     next()
         // }
     },
+    {
+        path: '/contacts',
+        name: 'contacts',
+        component: () => import('@/views/contacts/index.vue'),
+    },
     // {
     //     path: '/companyprofil',
     //     name: 'Companyprofil',

src/views/contacts/index.vue

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

src/views/contacts/size1440/index.vue

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

src/views/contacts/size1920/index.vue

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

src/views/contacts/size375/index.vue

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

src/views/contacts/size768/index.vue

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

uno.config.js

@@ -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',