From 4a6a0ab0a0c6652432ea656c78262d0fd58220df Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 22 May 2025 19:42:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=B7=AF=E7=94=B1=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=96=B0=E5=A2=9E=E7=94=B5=E5=AD=90=E9=82=AE?=
 =?UTF-8?q?=E4=BB=B6=E6=8F=90=E9=86=92=E9=A1=B5=E9=9D=A2=EF=BC=9B=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=81=94=E7=B3=BB=E4=BA=BA=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=92=8C=E6=A1=8C=E9=9D=A2=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E5=B8=83=E5=B1=80=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                       |  6 ++
 src/views/contacts/size1920/index.vue     |  2 +-
 src/views/contacts/size375/index.vue      |  2 +-
 src/views/email-alerts/index.vue          | 34 ++++++++++
 src/views/email-alerts/size1440/index.vue | 22 +++++++
 src/views/email-alerts/size1920/index.vue | 80 +++++++++++++++++++++++
 src/views/email-alerts/size375/index.vue  | 22 +++++++
 src/views/email-alerts/size768/index.vue  | 22 +++++++
 8 files changed, 188 insertions(+), 2 deletions(-)
 create mode 100644 src/views/email-alerts/index.vue
 create mode 100644 src/views/email-alerts/size1440/index.vue
 create mode 100644 src/views/email-alerts/size1920/index.vue
 create mode 100644 src/views/email-alerts/size375/index.vue
 create mode 100644 src/views/email-alerts/size768/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index ea5f088..b72e60e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,11 +17,17 @@ const routes = [
         //     next()
         // }
     },
+    
     {
         path: '/contacts',
         name: 'contacts',
         component: () => import('@/views/contacts/index.vue'),
     },
+    {
+        path: '/email-alerts',
+        name: 'email-alerts',
+        component: () => import('@/views/email-alerts/index.vue'),
+    },
 ];
 
 const router = createRouter({
diff --git a/src/views/contacts/size1920/index.vue b/src/views/contacts/size1920/index.vue
index 445717d..78c28b5 100644
--- a/src/views/contacts/size1920/index.vue
+++ b/src/views/contacts/size1920/index.vue
@@ -11,7 +11,7 @@ function copyEmail() {
   <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">
+  <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')]">
     <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>
diff --git a/src/views/contacts/size375/index.vue b/src/views/contacts/size375/index.vue
index 1bd47bc..d2e64bf 100644
--- a/src/views/contacts/size375/index.vue
+++ b/src/views/contacts/size375/index.vue
@@ -9,7 +9,7 @@ function copyEmail() {
   <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')]">
+  <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')]">
     <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>
diff --git a/src/views/email-alerts/index.vue b/src/views/email-alerts/index.vue
new file mode 100644
index 0000000..fd8f1ff
--- /dev/null
+++ b/src/views/email-alerts/index.vue
@@ -0,0 +1,34 @@
+<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>
diff --git a/src/views/email-alerts/size1440/index.vue b/src/views/email-alerts/size1440/index.vue
new file mode 100644
index 0000000..427f3d2
--- /dev/null
+++ b/src/views/email-alerts/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>
+
diff --git a/src/views/email-alerts/size1920/index.vue b/src/views/email-alerts/size1920/index.vue
new file mode 100644
index 0000000..8920fad
--- /dev/null
+++ b/src/views/email-alerts/size1920/index.vue
@@ -0,0 +1,80 @@
+<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>
\ No newline at end of file
diff --git a/src/views/email-alerts/size375/index.vue b/src/views/email-alerts/size375/index.vue
new file mode 100644
index 0000000..f3e7467
--- /dev/null
+++ b/src/views/email-alerts/size375/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">
+  375
+  </header>
+  <main ref="main">
+
+  </main>
+  <footer>
+
+  </footer>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+
diff --git a/src/views/email-alerts/size768/index.vue b/src/views/email-alerts/size768/index.vue
new file mode 100644
index 0000000..e7c4364
--- /dev/null
+++ b/src/views/email-alerts/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>
+