完整初版'

src/components/PageAdvantage.vue

@@ -161,6 +161,7 @@
     text-align: center;
     margin-left: 0;
     font-size: clamp(24px, 6vw, 36px);
+    width: 80vw;
   }
 
   .section-card {

src/components/PageContact.vue

@@ -4,19 +4,19 @@
       <div class="text-side">
         <h2 class="section-title">
           Customize Keyboard<br />
-          AI Reply
+          AI Reply .
         </h2>
         <p class="section-desc">
-          AI智能回复，让键盘不仅是输入工具。智能理解语境，一键生成精准回复，提升沟通效率。
+          Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
         </p>
       </div>
       <div class="image-side">
-        <div class="phone-placeholder"><span>手机截图</span></div>
+        <img src="/src/assets/images/four-phone.png" class="phone-img" />
       </div>
     </div>
-    <div class="bottom-character">
-      <div class="character-placeholder"><span>3D角色图片</span></div>
-    </div>
+
+    <img src="/src/assets/images/four-left.png" class="four-left" />
+    <img src="/src/assets/images/four-right.png" class="four-right" />
     <footer class="footer">
       <p>© 2026 Key of Love. All Rights Reserved.</p>
     </footer>
@@ -31,7 +31,7 @@
 .page-contact {
   width: 100%;
   height: 100vh;
-  background: #ffffff;
+  background: #F9F9F9;
   color: #222;
   display: flex;
   flex-direction: column;
@@ -45,35 +45,41 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: @gap-section;
+  gap: clamp(16px, 2vw, 48px);
   max-width: @content-max;
   width: 100%;
   padding: 0 @gap-content;
 }
 
-.text-side { flex: 1; }
+.text-side { flex: 5; max-width: clamp(320px, 60vw, 1000px); }
 
 .section-title {
-  font-size: @font-title;
+  font-size: clamp(34px, 3.2vw, 72px);
   font-weight: 800;
-  line-height: 1.25;
+  line-height: 1.2;
   margin-bottom: clamp(12px, 1.2vh, 28px);
   color: #1a1a1a;
 }
 
 .section-desc {
-  font-size: @font-desc;
+  font-size: clamp(15px, 1.2vw, 26px);
   line-height: 1.8;
   color: #888;
-  max-width: clamp(260px, 22vw, 480px);
+  max-width: 90%;
 }
 
 .image-side {
-  flex: 1;
+  flex: 4;
   display: flex;
   justify-content: center;
 }
 
+.phone-img {
+  height: clamp(320px, 75vh, 800px);
+  width: auto;
+  display: block;
+}
+
 .phone-placeholder {
   width: @phone-w-main;
   height: @phone-h-main;
@@ -106,6 +112,24 @@
   background: #fafafa;
 }
 
+.four-left {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: clamp(120px, 10vw, 380px);
+  height: auto;
+  pointer-events: none;
+}
+
+.four-right {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: clamp(120px, 10vw, 380px);
+  height: auto;
+  pointer-events: none;
+}
+
 .footer {
   position: absolute;
   bottom: clamp(10px, 1.2vh, 24px);
@@ -126,8 +150,16 @@
   }
   .section-title { text-align: center; }
   .section-desc { text-align: center; }
-  .phone-placeholder { width: 180px; height: 333px; }
+  .phone-img {
+    height: clamp(220px, 38vh, 420px);
+    width: auto;
+    display: block;
+  }
   .bottom-character { right: 16px; bottom: 40px; }
   .character-placeholder { width: 70px; height: 82px; }
+  .four-left,
+  .four-right {
+    width: clamp(70px, 20vw, 140px);
+  }
 }
 </style>