From e3196f5619be9d9f7a5252aab83bcc6502ccc28c Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Fri, 10 Oct 2025 10:15:19 +0800
Subject: [PATCH] fix 1440

---
 src/views/contacts/size1440/index.vue         |   4 +-
 src/views/email-alerts/size1440/index.vue     | 329 +++++++++++++-----
 src/views/email-alerts/size1920/index.vue     |  10 +-
 src/views/press-releases/size1440/index.vue   |   3 +-
 .../product-introduction/size1440/index.vue   |  66 ++--
 src/views/stock-quote/size1440/index.vue      |   4 +-
 6 files changed, 290 insertions(+), 126 deletions(-)

diff --git a/src/views/contacts/size1440/index.vue b/src/views/contacts/size1440/index.vue
index 279a22a..30c79a4 100644
--- a/src/views/contacts/size1440/index.vue
+++ b/src/views/contacts/size1440/index.vue
@@ -66,8 +66,8 @@ function copyEmail() {
 
 .contact-card {
   display: flex;
-  width: 1240px;
-  height: 860px;
+  width: 100%;
+  height: 771px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/src/views/email-alerts/size1440/index.vue b/src/views/email-alerts/size1440/index.vue
index e814860..46bf360 100644
--- a/src/views/email-alerts/size1440/index.vue
+++ b/src/views/email-alerts/size1440/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from "vue";
+
 import axios from "axios";
 const form = ref({
   firstName: "",
@@ -7,7 +8,6 @@ const form = ref({
   email: "",
   company: "",
   phone: "",
-  alertType: "all",
 });
 const submitted = ref(false);
 
@@ -25,124 +25,269 @@ async function handleSubmit(e) {
 </script>
 
 <template>
-  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
-    <!-- 粒子背景 -->
-    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
-    <!-- 表单卡片/提交成功卡片 -->
+  <div class="alerts-container">
+    <!-- Title Section -->
+    <!-- 未提交 -->
+    <div v-if="!submitted" class="title-section">
+      <div class="title-decoration"></div>
+      <div class="title">E-Mail Alerts</div>
+      <div class="subtitle">* Required Fields</div>
+    </div>
+    <!-- 已提交 -->
+    <div v-else class="title-section mt-[60px]">
+      <div class="title-decoration"></div>
+      <div class="title">Submitted successfully!</div>
+      <div class="subtitle">The information you submitted is as follows:</div>
+    </div>
+    <!-- Form Card -->
     <div
-      class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in"
+      class="form-card relative"
+      :style="{
+        width: submitted ? '678px' : '100%',
+        height: submitted ? '428px' : 'auto',
+      }"
     >
       <template v-if="!submitted">
-        <h2 class="text-2xl font-bold text-#ff7bac mb-2 tracking-wide">
-          E-Mail Alerts
-        </h2>
-        <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
-        <form class="space-y-3" @submit="handleSubmit">
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* First Name</label
-            >
+        <form class="form-content" @submit="handleSubmit">
+          <div class="form-group">
+            <label for="firstName">* First Name</label>
             <input
+              id="firstName"
               v-model="form.firstName"
               type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              required
             />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Last Name</label
-            >
-            <input
-              v-model="form.lastName"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="lastName">* Last Name</label>
+            <input id="lastName" v-model="form.lastName" type="text" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Email</label
-            >
-            <input
-              v-model="form.email"
-              type="email"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="email">* Email</label>
+            <input id="email" v-model="form.email" type="email" required />
           </div>
-          <div>
-            <label class="block text-gray-700 font-semibold mb-1"
-              >* Company</label
-            >
-            <input
-              v-model="form.company"
-              type="text"
-              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="company">* Company</label>
+            <input id="company" v-model="form.company" type="text" required />
           </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-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-            />
+          <div class="form-group">
+            <label for="phone">* Phone</label>
+            <input id="phone" v-model="form.phone" type="tel" required />
           </div>
-          <button
-            type="submit"
-            class="w-full py-2.5 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
-          >
-            Submit
-          </button>
+          <button type="submit" class="submit-btn">Submit</button>
         </form>
       </template>
       <template v-else>
-        <div
-          class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in"
-        >
-          <span
-            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
-          ></span>
-          <h2 class="text-xl 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>
-          <div
-            class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm"
-          >
-            <div>
-              <span class="font-semibold">First Name：</span
-              >{{ form.firstName }}
+        <div class="submitted-data">
+          <div class="submitted-data-content">
+            <div class="submitted-row">
+              <span class="label">First Name：</span>
+              <span class="value">{{ form.firstName || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
+            <div class="submitted-row">
+              <span class="label">Last Name：</span>
+              <span class="value">{{ form.lastName || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Email：</span>{{ form.email }}
+            <div class="submitted-row">
+              <span class="label">Email：</span>
+              <span class="value">{{ form.email || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Company：</span>{{ form.company }}
+            <div class="submitted-row">
+              <span class="label">Company：</span>
+              <span class="value">{{ form.company || "Not filled in" }}</span>
             </div>
-            <div>
-              <span class="font-semibold">Phone：</span
-              >{{ form.phone || "Not filled in" }}
-            </div>
-            <div>
-              <span class="font-semibold">Alert Type：</span
-              >{{
-                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
-              }}
+            <div class="submitted-row">
+              <span class="label">Phone：</span>
+              <span class="value">{{ form.phone || "Not filled in" }}</span>
             </div>
           </div>
         </div>
+        <div class="submitted-bg"></div>
       </template>
     </div>
-  </main>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/* 可选：自定义粒子或渐变动画背景 */
+.alerts-container {
+  width: 1240px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 16px;
+  margin-bottom: 40px;
+  align-self: center;
+}
+
+.title-decoration {
+  width: 58px;
+  height: 7px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43px;
+  align-self: center;
+}
+
+.title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 56px;
+  color: #000000;
+  letter-spacing: 1.2px;
+}
+
+.subtitle {
+  font-family: "PingFang SC", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  align-self: center;
+}
+
+.form-card {
+  background-color: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  label {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    color: #000000;
+    letter-spacing: 0.48px;
+  }
+
+  input {
+    height: 56px;
+    border: 1px solid #e0e0e6;
+    border-radius: 8px;
+    padding: 0 12px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+
+    &:focus {
+      border-color: #ff7bac;
+    }
+  }
+}
 .submit-btn {
-  background: linear-gradient(to right, #ff7bac, #00ffff);
+  height: 60px;
+  background: #ff7bac;
+  border-radius: 8px;
+  border: none;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+  color: white;
+  letter-spacing: 1.2px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  margin-top: 8px; // 16px (from figma form-group gap) + 8px = 24px
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.success-info {
+  margin-bottom: 24px;
+  color: #455363;
+}
+
+.submitted-data {
+  padding: 36px 24px 24px;
+  border-radius: 16px;
+  width: 678px;
+  height: 428px;
+  flex-shrink: 0;
+}
+.submitted-bg {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("@/assets/image/1920/email-alerts-submit.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100%;
+}
+
+.submitted-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+}
+
+.submitted-row {
+  display: flex;
+  font-family: "PingFang SC", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  width: 280px;
+}
+
+.label {
+  font-weight: 500;
+  color: #000000;
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.value {
+  font-weight: 400;
+  color: #455363;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>
diff --git a/src/views/email-alerts/size1920/index.vue b/src/views/email-alerts/size1920/index.vue
index 49c5b4a..7bbf53a 100644
--- a/src/views/email-alerts/size1920/index.vue
+++ b/src/views/email-alerts/size1920/index.vue
@@ -40,7 +40,13 @@ async function handleSubmit(e) {
       <div class="subtitle">The information you submitted is as follows:</div>
     </div>
     <!-- Form Card -->
-    <div class="form-card relative">
+    <div
+      class="form-card relative"
+      :style="{
+        width: submitted ? '70%' : '100%',
+        height: submitted ? '448px' : 'auto',
+      }"
+    >
       <template v-if="!submitted">
         <form class="form-content" @submit="handleSubmit">
           <div class="form-group">
@@ -65,7 +71,7 @@ async function handleSubmit(e) {
             <input id="company" v-model="form.company" type="text" required />
           </div>
           <div class="form-group">
-            <label for="phone">Phone</label>
+            <label for="phone">* Phone</label>
             <input id="phone" v-model="form.phone" type="tel" />
           </div>
           <button type="submit" class="submit-btn">Submit</button>
diff --git a/src/views/press-releases/size1440/index.vue b/src/views/press-releases/size1440/index.vue
index 254468f..cd0bcc3 100644
--- a/src/views/press-releases/size1440/index.vue
+++ b/src/views/press-releases/size1440/index.vue
@@ -3,7 +3,7 @@
     <main class="mx-auto">
       <div class="title-section">
         <div class="title-decoration"></div>
-        <div class="title mb-[20px]">
+        <div class="title">
           {{ t("press_releases.title") }}
         </div>
       </div>
@@ -655,7 +655,6 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  margin-top: 20px;
   justify-content: flex-end;
   margin-bottom: 30px;
   gap: 21px;
diff --git a/src/views/product-introduction/size1440/index.vue b/src/views/product-introduction/size1440/index.vue
index 4c138fe..2db9a42 100644
--- a/src/views/product-introduction/size1440/index.vue
+++ b/src/views/product-introduction/size1440/index.vue
@@ -33,7 +33,7 @@
         </div>
       </div>
       <img
-        src="@/assets/image/1920/product-introduction-img2.png"
+        src="@/assets/image/1440/product-introduction-img2.png"
         alt="background"
         class="hero-bg-img"
       />
@@ -109,7 +109,7 @@
         <div class="solutions-list">
           <div class="solution-item">
             <img
-              src="@/assets/image/1920/product-introduction-icon1.png"
+              src="@/assets/image/1440/product-introduction-icon1.png"
               alt="KOL Brand Promotion"
               class="solution-icon"
             />
@@ -125,7 +125,7 @@
           </div>
           <div class="solution-item">
             <img
-              src="@/assets/image/1920/product-introduction-icon2.png"
+              src="@/assets/image/1440/product-introduction-icon2.png"
               alt="Content Creation Support"
               class="solution-icon"
             />
@@ -141,7 +141,7 @@
           </div>
           <div class="solution-item">
             <img
-              src="@/assets/image/1920/product-introduction-icon3.png"
+              src="@/assets/image/1440/product-introduction-icon3.png"
               alt="Account Operation"
               class="solution-icon"
             />
@@ -158,9 +158,10 @@
         </div>
         <div class="solution-image-container">
           <img
-            src="@/assets/image/1920/product-introduction-img1.png"
+            src="@/assets/image/1440/product-introduction-img1.png"
             alt="Value Added Solutions"
             class="solution-image"
+            style="width: 434px"
           />
         </div>
       </div>
@@ -228,7 +229,7 @@
 
     <section class="cta-section">
       <img
-        src="@/assets/image/1920/product-introduction-img5.png"
+        src="@/assets/image/1440/product-introduction-img5.png"
         alt="background"
         class="cta-bg-img"
       />
@@ -253,7 +254,7 @@
         </div>
         <div class="cta-qr-code">
           <img
-            src="@/assets/image/1920/product-introduction-img6.png"
+            src="@/assets/image/1440/product-introduction-img6.png"
             alt="QR Code"
           />
         </div>
@@ -274,7 +275,7 @@
 .hero-section {
   text-align: center;
   position: relative;
-  background-image: url("@/assets/image/1920/product-introduction-img3.png");
+  background-image: url("@/assets/image/1440/product-introduction-img3.png");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: top;
@@ -296,10 +297,9 @@
 }
 .hero-bg-img {
   position: absolute;
-  bottom: -84px;
+  bottom: -204px;
   left: 0;
   width: 100%;
-  /* height: 100%; */
   z-index: 1;
 }
 .core-value-card {
@@ -317,7 +317,7 @@
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 32px;
 }
 
 .card-title {
@@ -361,7 +361,7 @@
 .features-list {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 32px;
 }
 
 .feature-item {
@@ -385,6 +385,8 @@
   color: #455363;
   letter-spacing: 0.48px;
   padding: 0 16px;
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
 }
 
 .solutions-section {
@@ -394,13 +396,13 @@
 }
 .solutions-content {
   display: flex;
-  gap: 24px;
+  gap: 16px;
 }
 .solutions-list {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  width: 466px;
+  width: 620px;
 }
 .solution-item {
   text-align: left;
@@ -425,15 +427,27 @@
   margin-bottom: 16px;
 }
 .solution-description {
-  font-size: 16px;
-  line-height: 22px;
+  align-self: stretch;
   color: #455363;
-  letter-spacing: 0.48px;
   padding: 0 16px;
+
+  text-align: justify;
+  font-feature-settings: "liga" off, "clig" off;
+  /* 正文 */
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+  letter-spacing: 0.48px;
 }
 .solution-image-container {
-  width: 434px;
+  width: 50%;
   border-radius: 16px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .solution-image {
   width: 100%;
@@ -445,7 +459,7 @@
 .advantages-section {
   margin-top: 80px;
   padding: 80px 0;
-  background-image: url("@/assets/image/1920/product-introduction-img4.png");
+  background-image: url("@/assets/image/1440/product-introduction-img4.png");
   background-size: cover;
   background-position: center;
   color: #fff;
@@ -456,7 +470,7 @@
   width: 1240px;
   margin: 0 auto;
   display: flex;
-  gap: 16px;
+  justify-content: space-between;
   position: relative;
   z-index: 1;
 }
@@ -469,7 +483,7 @@
   width: 466px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 32px;
 }
 .advantage-item {
   display: flex;
@@ -541,7 +555,7 @@
 .cta-bg-img {
   position: absolute;
   top: 80px;
-  left: 201px;
+  left: 355px;
   width: 530px;
   height: 268px;
   opacity: 0.8;
@@ -549,7 +563,7 @@
 }
 .vertical-line {
   width: 1px;
-  height: 20px;
+  height: 19px;
   background: #ff7bac;
   flex-shrink: 0;
   margin-top: 6px;
@@ -586,13 +600,13 @@
   left: 0;
 }
 .grid-lines .line-2 {
-  left: 233px;
+  left: 310px;
 }
 .grid-lines .line-3 {
-  left: 466px;
+  left: 620px;
 }
 .grid-lines .line-4 {
-  left: 699px;
+  left: 930px;
 }
 .grid-lines .line-5 {
   right: 0;
diff --git a/src/views/stock-quote/size1440/index.vue b/src/views/stock-quote/size1440/index.vue
index 31f19a9..d5776b8 100644
--- a/src/views/stock-quote/size1440/index.vue
+++ b/src/views/stock-quote/size1440/index.vue
@@ -84,7 +84,7 @@ getStockQuate();
   flex-direction: column;
   gap: 16px;
   padding: 0 16px;
-  margin-top: 40px;
+  margin-top: 60px;
 }
 
 .title-decoration {
@@ -126,7 +126,7 @@ getStockQuate();
 
 .price-card {
   width: 616px;
-  height: 555px;
+  height: 600px;
   border-radius: 16px;
   background: #ffffff;
   box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);