第一页部分开发

src/assets/variables.less

@@ -0,0 +1,29 @@
+// 响应式尺寸工具
+// 基准设计稿宽度 1920px
+// clamp(min, preferred, max) 在 1280px~3840px 间线性缩放
+
+// 字体
+@font-hero: clamp(28px, 2.5vw, 64px); // 首页大标题
+@font-title: clamp(24px, 2.2vw, 52px); // 各页标题
+@font-desc: clamp(13px, 0.9vw, 20px); // 描述文字
+@font-nav: clamp(12px, 1vw, 18px); // 导航文字
+@font-btn: clamp(12px, 1vw, 18px); // 按钮文字
+@font-small: clamp(11px, 0.65vw, 15px); // 小字
+
+// 间距
+@gap-section: clamp(40px, 5vw, 120px); // 左右两侧间距
+@gap-content: clamp(30px, 4vw, 100px); // 内容区左右内边距
+@gap-items: clamp(16px, 1.5vw, 40px); // 元素间距
+
+// 手机图片尺寸（保持约 1:1.85 比例）
+@phone-w-main: clamp(160px, 14vw, 320px);
+@phone-h-main: clamp(296px, 25.9vw, 592px);
+@phone-w-side: clamp(130px, 11vw, 260px);
+@phone-h-side: clamp(240px, 20.4vw, 480px);
+
+// 内容区最大宽度（4K下不超过屏幕70%）
+@content-max: min(1400px, 72vw);
+
+// 导航高度
+@nav-h: clamp(56px, 8vh, 90px);
+@nav-px: clamp(24px, 8vw, 200px);

src/components/FullPage.vue

@@ -94,14 +94,16 @@ defineExpose({ currentIndex, goTo })
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.4);
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.3s ease;
 }
 
 .dot.active {
-  background: #fff;
+  background: #00BFA5;
+  border-color: #00BFA5;
   transform: scale(1.3);
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 8px rgba(0, 191, 165, 0.4);
 }
 </style>

src/components/PageAdvantage.vue

@@ -1,174 +1,110 @@
 <template>
   <section class="page page-advantage">
-    <div class="section-header">
-      <h2 class="section-title">核心优势</h2>
-      <div class="section-line"></div>
-      <p class="section-desc">我们的独特竞争力</p>
-    </div>
-    <div class="advantage-layout">
-      <div class="advantage-left">
-        <!-- 预留左侧大图位置 -->
-        <div class="left-image-placeholder">
-          <span>展示图片</span>
-        </div>
+    <div class="content-wrapper">
+      <div class="image-side">
+        <div class="phone-placeholder"><span>手机截图</span></div>
       </div>
-      <div class="advantage-right">
-        <div class="advantage-item" v-for="(item, index) in advantages" :key="index">
-          <div class="item-icon-placeholder">
-            <span>{{ index + 1 }}</span>
-          </div>
-          <div class="item-content">
-            <h3>{{ item.title }}</h3>
-            <p>{{ item.desc }}</p>
-          </div>
-        </div>
+      <div class="text-side">
+        <h2 class="section-title">
+          Every opening is an<br />
+          unknown encounter
+        </h2>
+        <p class="section-desc">
+          每一次开启都是一场未知的邂逅。探索全新的交互体验，让沟通充满惊喜与期待。
+        </p>
       </div>
     </div>
+    <div class="deco deco-1">💎</div>
+    <div class="deco deco-2">🎁</div>
   </section>
 </template>
 
 <script setup>
-const advantages = [
-  { title: '技术领先', desc: '持续投入研发，掌握行业核心技术，保持产品竞争力' },
-  { title: '品质保障', desc: '严格的质量管控体系，从设计到交付全流程把控' },
-  { title: '快速响应', desc: '敏捷的服务团队，7×24小时响应客户需求' },
-  { title: '生态完善', desc: '开放的合作生态，携手伙伴共建行业解决方案' },
-]
 </script>
 
-<style scoped>
+<style scoped lang="less">
+
 .page-advantage {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(180deg, #0a0e27 0%, #111538 50%, #0d1137 100%);
-  color: #fff;
+  background: #ffffff;
+  color: #222;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px;
   position: relative;
   overflow: hidden;
 }
 
-.page-advantage::before {
-  content: '';
-  position: absolute;
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
-  top: 10%;
-  left: -100px;
-  border-radius: 50%;
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: @gap-section;
+  max-width: @content-max;
+  width: 100%;
+  padding: 0 @gap-content;
 }
 
-.section-header {
-  text-align: center;
-  margin-bottom: 60px;
-}
+.text-side { flex: 1; }
 
 .section-title {
-  font-size: 38px;
-  font-weight: 700;
-  letter-spacing: 4px;
-  margin-bottom: 16px;
-}
-
-.section-line {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  margin: 0 auto 20px;
-  border-radius: 2px;
+  font-size: @font-title;
+  font-weight: 800;
+  line-height: 1.25;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
+  color: #1a1a1a;
 }
 
 .section-desc {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
-  letter-spacing: 2px;
+  font-size: @font-desc;
+  line-height: 1.8;
+  color: #888;
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-.advantage-layout {
-  display: flex;
-  gap: 60px;
-  max-width: 1100px;
-  width: 100%;
-  align-items: center;
-}
-
-.advantage-left {
+.image-side {
   flex: 1;
+  display: flex;
+  justify-content: center;
 }
 
-.left-image-placeholder {
-  width: 100%;
-  height: 400px;
-  border: 2px dashed rgba(255, 255, 255, 0.15);
-  border-radius: 20px;
+.phone-placeholder {
+  width: @phone-w-main;
+  height: @phone-h-main;
+  border: 2px dashed #ddd;
+  border-radius: clamp(16px, 1.5vw, 36px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 16px;
-  background: rgba(255, 255, 255, 0.02);
+  color: #bbb;
+  font-size: @font-small;
+  background: #fafafa;
 }
 
-.advantage-right {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
+.deco {
+  position: absolute;
+  font-size: clamp(24px, 2.5vw, 60px);
+  opacity: 0.15;
+  animation: float 3.5s ease-in-out infinite;
 }
 
-.advantage-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  padding: 24px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 14px;
-  transition: all 0.3s ease;
+.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; }
+.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
 }
 
-.advantage-item:hover {
-  background: rgba(255, 255, 255, 0.07);
-  border-color: rgba(99, 102, 241, 0.25);
-  transform: translateX(6px);
-}
-
-.item-icon-placeholder {
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #6366f1, #a855f7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.item-content h3 {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-}
-
-.item-content p {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
-  line-height: 1.7;
-}
-
-@media (max-width: 800px) {
-  .advantage-layout {
-    flex-direction: column;
-  }
-  .left-image-placeholder {
-    height: 240px;
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column-reverse;
+    gap: 32px;
+    padding: 0 24px;
   }
+  .section-title { text-align: center; }
+  .section-desc { text-align: center; }
+  .phone-placeholder { width: 180px; height: 333px; }
 }
 </style>

src/components/PageContact.vue

@@ -1,269 +1,133 @@
 <template>
   <section class="page page-contact">
-    <div class="section-header">
-      <h2 class="section-title">联系我们</h2>
-      <div class="section-line"></div>
-      <p class="section-desc">期待与您的合作</p>
+    <div class="content-wrapper">
+      <div class="text-side">
+        <h2 class="section-title">
+          Customize Keyboard<br />
+          AI Reply
+        </h2>
+        <p class="section-desc">
+          AI智能回复，让键盘不仅是输入工具。智能理解语境，一键生成精准回复，提升沟通效率。
+        </p>
+      </div>
+      <div class="image-side">
+        <div class="phone-placeholder"><span>手机截图</span></div>
+      </div>
     </div>
-    <div class="contact-layout">
-      <div class="contact-info">
-        <div class="info-item" v-for="(item, index) in contactList" :key="index">
-          <div class="info-icon-placeholder">
-            <span>{{ item.icon }}</span>
-          </div>
-          <div class="info-text">
-            <h4>{{ item.label }}</h4>
-            <p>{{ item.value }}</p>
-          </div>
-        </div>
-      </div>
-      <div class="contact-map">
-        <!-- 预留地图或图片位置 -->
-        <div class="map-placeholder">
-          <span>地图 / 公司图片</span>
-        </div>
-      </div>
+    <div class="bottom-character">
+      <div class="character-placeholder"><span>3D角色图片</span></div>
     </div>
     <footer class="footer">
-      <div class="footer-content">
-        <div class="footer-left">
-          <!-- 预留底部Logo -->
-          <div class="footer-logo-placeholder">LOGO</div>
-          <p class="footer-slogan">用心创造，为爱而生</p>
-        </div>
-        <div class="footer-links">
-          <a href="#">首页</a>
-          <a href="#">产品介绍</a>
-          <a href="#">核心优势</a>
-          <a href="#">联系我们</a>
-        </div>
-        <div class="footer-right">
-          <!-- 预留二维码图片位置 -->
-          <div class="qrcode-placeholder">
-            <span>二维码</span>
-          </div>
-          <p class="qr-text">扫码关注</p>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <p>© 2026 LoveKeyOW. All Rights Reserved.</p>
-      </div>
+      <p>© 2026 Key of Love. All Rights Reserved.</p>
     </footer>
   </section>
 </template>
 
 <script setup>
-const contactList = [
-  { icon: '📍', label: '公司地址', value: '请填写公司地址信息' },
-  { icon: '📞', label: '联系电话', value: '请填写联系电话' },
-  { icon: '✉️', label: '电子邮箱', value: '请填写邮箱地址' },
-  { icon: '🕐', label: '工作时间', value: '周一至周五 9:00 - 18:00' },
-]
 </script>
 
-<style scoped>
+<style scoped lang="less">
+
 .page-contact {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(180deg, #0d1137 0%, #0a0e27 60%, #080b1f 100%);
-  color: #fff;
+  background: #ffffff;
+  color: #222;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 60px;
   position: relative;
   overflow: hidden;
 }
 
-.section-header {
-  text-align: center;
-  margin-bottom: 48px;
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: @gap-section;
+  max-width: @content-max;
+  width: 100%;
+  padding: 0 @gap-content;
 }
 
+.text-side { flex: 1; }
+
 .section-title {
-  font-size: 38px;
-  font-weight: 700;
-  letter-spacing: 4px;
-  margin-bottom: 16px;
-}
-
-.section-line {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  margin: 0 auto 20px;
-  border-radius: 2px;
+  font-size: @font-title;
+  font-weight: 800;
+  line-height: 1.25;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
+  color: #1a1a1a;
 }
 
 .section-desc {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
-  letter-spacing: 2px;
+  font-size: @font-desc;
+  line-height: 1.8;
+  color: #888;
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-.contact-layout {
-  display: flex;
-  gap: 60px;
-  max-width: 1100px;
-  width: 100%;
-  margin-bottom: 48px;
-}
-
-.contact-info {
+.image-side {
   flex: 1;
   display: flex;
-  flex-direction: column;
-  gap: 20px;
+  justify-content: center;
 }
 
-.info-item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 18px 20px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 12px;
-  transition: all 0.3s;
-}
-
-.info-item:hover {
-  background: rgba(255, 255, 255, 0.07);
-  border-color: rgba(99, 102, 241, 0.2);
-}
-
-.info-icon-placeholder {
-  width: 42px;
-  height: 42px;
-  min-width: 42px;
-  border-radius: 10px;
-  background: rgba(99, 102, 241, 0.15);
+.phone-placeholder {
+  width: @phone-w-main;
+  height: @phone-h-main;
+  border: 2px dashed #ddd;
+  border-radius: clamp(16px, 1.5vw, 36px);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  color: #bbb;
+  font-size: @font-small;
+  background: #fafafa;
 }
 
-.info-text h4 {
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 4px;
-  letter-spacing: 1px;
+.bottom-character {
+  position: absolute;
+  bottom: clamp(24px, 3vh, 60px);
+  right: clamp(24px, 3vw, 80px);
 }
 
-.info-text p {
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.contact-map {
-  flex: 1;
-}
-
-.map-placeholder {
-  width: 100%;
-  height: 100%;
-  min-height: 260px;
-  border: 2px dashed rgba(255, 255, 255, 0.15);
-  border-radius: 16px;
+.character-placeholder {
+  width: clamp(80px, 8vw, 180px);
+  height: clamp(90px, 9.5vw, 210px);
+  border: 2px dashed #ddd;
+  border-radius: clamp(10px, 1vw, 20px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 16px;
-  background: rgba(255, 255, 255, 0.02);
+  color: #bbb;
+  font-size: @font-small;
+  background: #fafafa;
 }
 
 .footer {
+  position: absolute;
+  bottom: clamp(10px, 1.2vh, 24px);
+  left: 0;
   width: 100%;
-  max-width: 1100px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  padding-top: 32px;
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.footer-logo-placeholder {
-  width: 80px;
-  height: 30px;
-  border: 1px dashed rgba(255, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.footer-slogan {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.35);
-  letter-spacing: 2px;
-}
-
-.footer-links {
-  display: flex;
-  gap: 28px;
-}
-
-.footer-links a {
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.45);
-  transition: color 0.3s;
-}
-
-.footer-links a:hover {
-  color: #fff;
-}
-
-.footer-right {
   text-align: center;
-}
-
-.qrcode-placeholder {
-  width: 72px;
-  height: 72px;
-  border: 1px dashed rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
-  margin-bottom: 6px;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.qr-text {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.35);
-}
-
-.footer-bottom {
-  text-align: center;
-  padding-top: 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.footer-bottom p {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.25);
-}
-
-@media (max-width: 800px) {
-  .contact-layout {
-    flex-direction: column;
+  p {
+    font-size: @font-small;
+    color: #ccc;
   }
-  .footer-content {
+}
+
+@media (max-width: 768px) {
+  .content-wrapper {
     flex-direction: column;
-    gap: 20px;
+    gap: 32px;
+    padding: 0 24px;
   }
+  .section-title { text-align: center; }
+  .section-desc { text-align: center; }
+  .phone-placeholder { width: 180px; height: 333px; }
+  .bottom-character { right: 16px; bottom: 40px; }
+  .character-placeholder { width: 70px; height: 82px; }
 }
 </style>

src/components/PageHome.vue

@@ -2,228 +2,237 @@
   <section class="page page-home">
     <nav class="nav">
       <div class="nav-logo">
-        <!-- 预留Logo图片位置 -->
-        <div class="logo-placeholder">LOGO</div>
+        <image src="/src/assets/images/logo-top.png" class="logo-img"></image>
+        <span class="logo-text">Key of Love</span>
       </div>
       <ul class="nav-links">
-        <li><a href="#" class="active">首页</a></li>
-        <li><a href="#">产品介绍</a></li>
-        <li><a href="#">核心优势</a></li>
-        <li><a href="#">联系我们</a></li>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Privacy Agreement</a></li>
       </ul>
     </nav>
+    <div class="bg-points"></div>
     <div class="hero">
       <div class="hero-content">
-        <!-- 预留主视觉图片位置 -->
-        <div class="hero-image-placeholder">
-          <span>主视觉图片</span>
+        <h1 class="hero-title">
+          Not just a tool but<br />
+          giving meaning to every click
+        </h1>
+        <div class="hero-buttons">
+          <a href="#" class="btn btn-primary">
+            <span class="btn-icon">▶</span> Android
+          </a>
+          <a href="#" class="btn btn-primary">
+            <span class="btn-icon">🍎</span> App Store
+          </a>
         </div>
-        <h1 class="hero-title">LoveKeyOW</h1>
-        <p class="hero-subtitle">用心创造，为爱而生</p>
-        <div class="hero-btn" @click="$emit('navigate', 1)">了解更多</div>
       </div>
-    </div>
-    <div class="scroll-hint">
-      <div class="mouse">
-        <div class="wheel"></div>
+      <div class="hero-phones">
+        <img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
       </div>
-      <p>滚动探索</p>
+      <div class="deco deco-coin1">🪙</div>
+      <div class="deco deco-coin2">🏆</div>
+      <div class="deco deco-star1">✨</div>
+      <div class="deco deco-star2">⭐</div>
     </div>
   </section>
 </template>
 
 <script setup>
-defineEmits(['navigate'])
 </script>
 
-<style scoped>
+<style scoped lang="less">
+
 .page-home {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 50%, #0d1137 100%);
-  color: #fff;
+  background: url('/src/assets/images/bg-top.png') center center / cover no-repeat;
+  color: #222;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
 }
 
-.page-home::before {
-  content: '';
+.bg-points {
   position: absolute;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
-  top: -100px;
-  right: -100px;
-  border-radius: 50%;
-}
-
-.page-home::after {
-  content: '';
-  position: absolute;
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
-  bottom: -50px;
-  left: -50px;
-  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  height: 90%;
+  background: url('/src/assets/images/bg-top-points.png') center center / contain no-repeat;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24px 60px;
+  padding: 0 @nav-px;
+  height: @nav-h;
   position: relative;
   z-index: 10;
+  flex-shrink: 0;
+
 }
 
-.logo-placeholder {
-  width: 120px;
-  height: 40px;
-  border: 1px dashed rgba(255, 255, 255, 0.3);
+.nav-logo {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
-  border-radius: 6px;
+  gap: clamp(6px, 0.5vw, 12px);
+  .logo-img {
+    height: clamp(28px, 2.5vh, 52px);
+  }
+}
+
+.logo-text {
+  font-weight: 600;
+  color: #333;
+  font-size: @font-nav;
+  font-style: italic;
 }
 
 .nav-links {
   display: flex;
-  gap: 36px;
-}
-
-.nav-links a {
-  font-size: 15px;
-  color: rgba(255, 255, 255, 0.7);
-  transition: color 0.3s;
-  position: relative;
-}
-
-.nav-links a:hover,
-.nav-links a.active {
-  color: #fff;
-}
-
-.nav-links a.active::after {
-  content: '';
-  position: absolute;
-  bottom: -6px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  border-radius: 1px;
+  gap: clamp(16px, 2vw, 48px);
+  
+  a {
+    font-size: @font-nav;
+    color: #000000;
+    transition: color 0.3s;
+     font-weight: 600;
+    &:hover { color: #00BFA5; }
+  }
 }
 
 .hero {
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  padding-top: clamp(10px, 1.5vh, 30px);
   position: relative;
-  z-index: 10;
+  z-index: 1;
 }
 
 .hero-content {
   text-align: center;
+  margin-bottom: clamp(20px, 2.5vh, 50px);
 }
 
-.hero-image-placeholder {
-  width: 280px;
-  height: 280px;
-  margin: 0 auto 40px;
-  border: 2px dashed rgba(255, 255, 255, 0.2);
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(255, 255, 255, 0.3);
-  font-size: 16px;
-  background: rgba(255, 255, 255, 0.03);
+.hero-emoji {
+  font-size: clamp(32px, 3.5vw, 72px);
+  margin-bottom: clamp(8px, 0.8vh, 16px);
 }
 
 .hero-title {
-  font-size: 56px;
-  font-weight: 700;
-  letter-spacing: 4px;
-  margin-bottom: 16px;
-  background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  font-size: @font-hero;
+  font-weight: 800;
+  line-height: 1.3;
+  color: #1a1a1a;
+  margin-bottom: clamp(16px, 2vh, 40px);
 }
 
-.hero-subtitle {
-  font-size: 20px;
-  color: rgba(255, 255, 255, 0.6);
-  letter-spacing: 8px;
-  margin-bottom: 48px;
+.hero-buttons {
+  display: flex;
+  gap: clamp(10px, 1vw, 24px);
+  justify-content: center;
 }
 
-.hero-btn {
-  display: inline-block;
-  padding: 14px 48px;
-  background: linear-gradient(135deg, #6366f1, #a855f7);
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: clamp(6px, 0.5vw, 10px);
+  padding: clamp(10px, 0.8vh, 18px) clamp(20px, 1.8vw, 40px);
   border-radius: 50px;
-  font-size: 16px;
+  font-size: @font-btn;
+  font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
-  letter-spacing: 2px;
 }
 
-.hero-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
+.btn-primary {
+  background: #00BFA5;
+  color: #fff;
+  &:hover {
+    background: #00A98E;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 191, 165, 0.35);
+  }
 }
 
-.scroll-hint {
+.btn-icon { font-size: 0.85em; }
+
+.hero-phones {
   position: absolute;
-  bottom: 40px;
+  bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  text-align: center;
-  z-index: 10;
-  animation: fadeInUp 1.5s ease infinite;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
 }
 
-.mouse {
-  width: 24px;
-  height: 38px;
-  border: 2px solid rgba(255, 255, 255, 0.4);
-  border-radius: 12px;
-  margin: 0 auto 8px;
-  position: relative;
+.phone-main {
+  height: clamp(320px, 52vh, 680px);
+  width: auto;
+  display: block;
 }
 
-.wheel {
-  width: 4px;
-  height: 8px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 2px;
+.phone-placeholder {
+  border: 2px dashed #ddd;
+  border-radius: clamp(16px, 1.5vw, 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #bbb;
+  font-size: @font-small;
+  background: #fafafa;
+}
+
+.phone-center {
+  width: @phone-w-main;
+  height: @phone-h-main;
+  z-index: 2;
+}
+
+.phone-left {
+  width: @phone-w-side;
+  height: @phone-h-side;
+  transform: rotate(-6deg);
+  z-index: 1;
+}
+
+.phone-right {
+  width: @phone-w-side;
+  height: @phone-h-side;
+  transform: rotate(6deg);
+  z-index: 1;
+}
+
+.deco {
   position: absolute;
-  top: 6px;
-  left: 50%;
-  transform: translateX(-50%);
-  animation: scrollWheel 1.5s ease infinite;
+  font-size: clamp(20px, 2.2vw, 52px);
+  z-index: 0;
+  animation: float 3s ease-in-out infinite;
 }
 
-.scroll-hint p {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
-  letter-spacing: 2px;
+.deco-coin1 { top: 30%; left: 8%; animation-delay: 0s; }
+.deco-coin2 { top: 25%; right: 8%; animation-delay: 0.5s; }
+.deco-star1 { top: 50%; left: 15%; font-size: clamp(16px, 1.6vw, 38px); animation-delay: 1s; }
+.deco-star2 { top: 45%; right: 15%; font-size: clamp(14px, 1.3vw, 32px); animation-delay: 1.5s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
 }
 
-@keyframes scrollWheel {
-  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
-}
-
-@keyframes fadeInUp {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
+@media (max-width: 768px) {
+  .hero-phones { gap: 8px; }
+  .phone-center { width: 140px; height: 260px; }
+  .phone-left, .phone-right { width: 110px; height: 210px; }
+  .deco { display: none; }
 }
 </style>

src/components/PageProduct.vue

@@ -1,134 +1,110 @@
 <template>
   <section class="page page-product">
-    <div class="section-header">
-      <h2 class="section-title">产品介绍</h2>
-      <div class="section-line"></div>
-      <p class="section-desc">探索我们的核心产品与服务</p>
-    </div>
-    <div class="product-grid">
-      <div class="product-card" v-for="(item, index) in products" :key="index">
-        <!-- 预留产品图片位置 -->
-        <div class="card-image-placeholder">
-          <span>产品图片 {{ index + 1 }}</span>
-        </div>
-        <h3 class="card-title">{{ item.title }}</h3>
-        <p class="card-desc">{{ item.desc }}</p>
+    <div class="content-wrapper">
+      <div class="text-side">
+        <h2 class="section-title">
+          Customize Keyboard<br />
+          Define Chat Style
+        </h2>
+        <p class="section-desc">
+          个性化键盘定制，定义你的聊天风格。丰富的主题与样式，让每一次输入都与众不同。
+        </p>
+      </div>
+      <div class="image-side">
+        <div class="phone-placeholder"><span>手机截图</span></div>
       </div>
     </div>
+    <div class="deco deco-1">🎨</div>
+    <div class="deco deco-2">⌨️</div>
   </section>
 </template>
 
 <script setup>
-const products = [
-  { title: '智能硬件', desc: '融合前沿科技与精致工艺，打造极致用户体验的智能设备' },
-  { title: '软件平台', desc: '强大的云端平台，提供稳定可靠的数据服务与智能分析' },
-  { title: '解决方案', desc: '针对不同场景定制专属方案，满足多元化业务需求' },
-  { title: '技术服务', desc: '专业团队全程支持，确保项目顺利落地与持续运营' },
-]
 </script>
 
-<style scoped>
+<style scoped lang="less">
+
 .page-product {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(180deg, #0d1137 0%, #121640 50%, #0a0e27 100%);
+  background: #00BFA5;
   color: #fff;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px;
   position: relative;
   overflow: hidden;
 }
 
-.section-header {
-  text-align: center;
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 38px;
-  font-weight: 700;
-  letter-spacing: 4px;
-  margin-bottom: 16px;
-}
-
-.section-line {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  margin: 0 auto 20px;
-  border-radius: 2px;
-}
-
-.section-desc {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
-  letter-spacing: 2px;
-}
-
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 30px;
-  max-width: 1200px;
-  width: 100%;
-}
-
-.product-card {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
-  padding: 32px 24px;
-  text-align: center;
-  transition: all 0.4s ease;
-  backdrop-filter: blur(10px);
-}
-
-.product-card:hover {
-  transform: translateY(-8px);
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(99, 102, 241, 0.3);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-}
-
-.card-image-placeholder {
-  width: 100%;
-  height: 160px;
-  border: 1px dashed rgba(255, 255, 255, 0.15);
-  border-radius: 12px;
+.content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 14px;
-  margin-bottom: 24px;
-  background: rgba(255, 255, 255, 0.02);
+  gap: @gap-section;
+  max-width: @content-max;
+  width: 100%;
+  padding: 0 @gap-content;
 }
 
-.card-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  letter-spacing: 2px;
+.text-side { flex: 1; }
+
+.section-title {
+  font-size: @font-title;
+  font-weight: 800;
+  line-height: 1.25;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
+  color: #fff;
 }
 
-.card-desc {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
+.section-desc {
+  font-size: @font-desc;
   line-height: 1.8;
+  color: rgba(255, 255, 255, 0.85);
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-@media (max-width: 900px) {
-  .product-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.image-side {
+  flex: 1;
+  display: flex;
+  justify-content: center;
 }
 
-@media (max-width: 560px) {
-  .product-grid {
-    grid-template-columns: 1fr;
+.phone-placeholder {
+  width: @phone-w-main;
+  height: @phone-h-main;
+  border: 2px dashed rgba(255, 255, 255, 0.4);
+  border-radius: clamp(16px, 1.5vw, 36px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: @font-small;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.deco {
+  position: absolute;
+  font-size: clamp(24px, 2.5vw, 60px);
+  opacity: 0.3;
+  animation: float 3.5s ease-in-out infinite;
+}
+
+.deco-1 { top: 12%; right: 10%; animation-delay: 0s; }
+.deco-2 { bottom: 15%; left: 8%; animation-delay: 1s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+    gap: 32px;
+    padding: 0 24px;
   }
+  .section-title { text-align: center; }
+  .section-desc { text-align: center; }
+  .phone-placeholder { width: 180px; height: 333px; }
 }
 </style>