From f6b2956ac3ab0d0d6336162841e7c095978af130 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Tue, 14 Oct 2025 13:32:13 +0800
Subject: [PATCH] fix email-alerts 375

---
 src/views/email-alerts/size375/index.vue | 325 +++++++++++++++--------
 1 file changed, 215 insertions(+), 110 deletions(-)

diff --git a/src/views/email-alerts/size375/index.vue b/src/views/email-alerts/size375/index.vue
index 6aa1372..aa9fcad 100644
--- a/src/views/email-alerts/size375/index.vue
+++ b/src/views/email-alerts/size375/index.vue
@@ -25,128 +25,233 @@ async function handleSubmit(e) {
 </script>
 
 <template>
-  <main
-    class="min-h-60vh flex flex-col items-center justify-center relative px-4 py-8"
-  >
-    <!-- Card -->
-    <div
-      class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
-    >
-      <template v-if="!submitted">
-        <h2
-          class="text-xl font-bold text-#ff7bac mb-2 text-center tracking-wide"
-        >
-          E-Mail Alerts
-        </h2>
-        <p class="text-xs text-gray-500 mb-4 text-center">* Required Fields</p>
-        <form class="flex flex-col gap-3" @submit="handleSubmit">
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-              >* First Name</label
-            >
-            <input
-              v-model="form.firstName"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+  <main class="email-alerts-375">
+    <!-- Header -->
+    <template v-if="!submitted">
+      <div class="title-block">
+        <div class="title-bar"></div>
+        <h2 class="title">E-Mail Alerts</h2>
+        <p class="subtitle">* Required Fields</p>
+      </div>
+      <!-- Card -->
+      <div class="card">
+        <form class="form" @submit="handleSubmit">
+          <div class="form-field">
+            <label>* First Name</label>
+            <input v-model="form.firstName" type="text" />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-              >* Last Name</label
-            >
-            <input
-              v-model="form.lastName"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-field">
+            <label>* Last Name</label>
+            <input v-model="form.lastName" type="text" />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-              >* Email</label
-            >
-            <input
-              v-model="form.email"
-              type="email"
-              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-field">
+            <label>* Email</label>
+            <input v-model="form.email" type="email" />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-              >* Company</label
-            >
-            <input
-              v-model="form.company"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-field">
+            <label>* Company</label>
+            <input v-model="form.company" type="text" />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-              >Phone</label
-            >
-            <input
-              v-model="form.phone"
-              type="tel"
-              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-field">
+            <label>* Phone</label>
+            <input v-model="form.phone" type="tel" />
           </div>
-          <button
-            type="submit"
-            class="w-full py-3 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2 submit-btn"
-          >
-            Submit
-          </button>
+          <button type="submit" class="submit">Submit</button>
         </form>
-      </template>
-      <template v-else>
-        <div
-          class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in"
-        >
-          <span
-            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
-          ></span>
-          <h2 class="text-lg font-bold text-#ff7bac mb-2">
-            Submitted successfully!
-          </h2>
-          <div class="text-gray-700 text-sm mb-3">
-            The information you submitted is as follows:
+      </div>
+    </template>
+    <template v-else>
+      <div class="success-block">
+        <div class="title-block">
+          <div class="title-bar"></div>
+          <h2 class="title">Submitted successfully!</h2>
+          <p class="subtitle">The information you submitted is as follows:</p>
+        </div>
+
+        <div class="success-card">
+          <div class="success-card-item">
+            <div class="font-semibold success-card-label">First Name：</div>
+            {{ form.firstName || "Not filled in" }}
           </div>
-          <div
-            class="w-full bg-white/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm"
-          >
-            <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 || "(Not filled)" }}
-            </div>
-            <div>
-              <span class="font-semibold">Alert Type：</span
-              >{{
-                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
-              }}
-            </div>
+          <div class="success-card-item">
+            <div class="font-semibold success-card-label">Last Name：</div>
+            {{ form.lastName || "Not filled in" }}
+          </div>
+          <div class="success-card-item">
+            <div class="font-semibold success-card-label">Email：</div>
+            {{ form.email || "Not filled in" }}
+          </div>
+          <div class="success-card-item">
+            <div class="font-semibold success-card-label">Company：</div>
+            {{ form.company || "Not filled in" }}
+          </div>
+          <div class="success-card-item">
+            <div class="font-semibold success-card-label">Phone：</div>
+            {{ form.phone || "Not filled in" }}
           </div>
         </div>
-      </template>
-    </div>
+        <div class="submitted-bg"></div>
+      </div>
+    </template>
   </main>
 </template>
 
 <style scoped lang="scss">
-/* Keep mobile background simple */
-.submit-btn {
-  background: linear-gradient(to right, #ff7bac, #00ffff);
+/* 375*5.12px design exact *5.12px values from Figma */
+.email-alerts-375 {
+  max-width: 343 * 5.12px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24 * 5.12px; /* spacing between header and card */
+}
+
+.title-block {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8 * 5.12px;
+  padding: 0 16 * 5.12px;
+  margin-top: 47 * 5.12px;
+}
+
+.title-bar {
+  width: 58 * 5.12px;
+  height: 7 * 5.12px;
+  background: #ff7bac; /* 主题色-粉色 */
+}
+
+.title {
+  margin: 0;
+  color: #000000; /* 标题色 */
+  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 24 * 5.12px; /* 手机端主标题 */
+  line-height: 24 * 5.12px;
+  text-align: center;
+}
+
+.subtitle {
+  margin: 0;
+  width: 100%;
+  color: #455363; /* 正文色 */
+  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px; /* 移动端正文 */
+  line-height: 14 * 5.12px;
+  letter-spacing: 0.48 * 5.12px;
+  text-align: center;
+}
+
+.card {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16 * 5.12px;
+  box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
+  padding: 24 * 5.12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24 * 5.12px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8 * 5.12px;
+}
+
+.form-field > label {
+  color: #000000;
+  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 14 * 5.12px;
+  line-height: 14 * 5.12px;
+  letter-spacing: 0.48 * 5.12px;
+}
+
+.form-field > input {
+  width: 100%;
+  height: 38 * 5.12px;
+  background: #ffffff;
+  border: 1 * 5.12px solid #e0e0e6;
+  border-radius: 8 * 5.12px;
+  padding: 0 12 * 5.12px;
+  font-size: 14 * 5.12px;
+  outline: none;
+}
+
+.submit {
+  width: 100%;
+  height: 48 * 5.12px;
+  border: none;
+  border-radius: 8 * 5.12px;
+  background: #ff7bac;
+  color: #ffffff;
+  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 20 * 5.12px; /* 手机端三级标题 */
+  line-height: 20 * 5.12px;
+  letter-spacing: 1.2 * 5.12px; /* 按钮字间距 */
+}
+
+/* success view simple alignment */
+.success-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.success-title {
+  margin: 0 0 8 * 5.12px 0;
+  color: #ff7bac;
+  font-weight: 700;
+  font-size: 18 * 5.12px;
+}
+
+.success-subtitle {
+  margin-bottom: 12 * 5.12px;
+  color: #374151;
+  font-size: 14 * 5.12px;
+}
+
+.success-card {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12 * 5.12px;
+  box-shadow: 0 1 * 5.12px 3 * 5.12px rgba(0, 0, 0, 0.08);
+  padding: 56 * 5.12px 38 * 5.12px;
+  min-height: 484 * 5.12px;
+  margin-top: 24 * 5.12px;
+}
+.submitted-bg {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 186 * 5.12px;
+  background-image: url("@/assets/image/375/email-alerts-submit.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100%;
+}
+.success-card-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16 * 5.12px;
+}
+.success-card-label {
+  width: 92 * 5.12px;
 }
 </style>