第一页部分开发

.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm create vite@latest . -- --template vue 2>&1)",
       "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm create vite@latest . -- --template vue --force 2>&1)",
       "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm install 2>&1)",
-      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npx vite build 2>&1)"
+      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npx vite build 2>&1)",
+      "Bash(npm install:*)"
     ]
   }
 }

package-lock.json

@@ -12,6 +12,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
+        "less": "^4.5.1",
         "vite": "^6.3.5"
       }
     },
@@ -980,6 +981,19 @@
       "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
       "license": "MIT"
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
@@ -998,6 +1012,20 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
@@ -1079,6 +1107,77 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/less": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.5.1.tgz",
+      "integrity": "sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -1088,6 +1187,35 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -1106,6 +1234,34 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
@@ -1125,6 +1281,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
@@ -1153,6 +1320,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.59.0.tgz",
@@ -1198,6 +1373,47 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/sax": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.4.tgz",
+      "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "optional": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1224,6 +1440,13 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/vite": {
       "version": "6.4.1",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.4.1.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
+    "less": "^4.5.1",
     "vite": "^6.3.5"
   }
 }

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">
+    <div class="content-wrapper">
-      <h2 class="section-title">核心优势</h2>
+      <div class="image-side">
-      <div class="section-line"></div>
+        <div class="phone-placeholder"><span>手机截图</span></div>
-      <p class="section-desc">我们的独特竞争力</p>
-    </div>
-    <div class="advantage-layout">
-      <div class="advantage-left">
-        <!-- 预留左侧大图位置 -->
-        <div class="left-image-placeholder">
-          <span>展示图片</span>
-        </div>
       </div>
-      <div class="advantage-right">
+      <div class="text-side">
-        <div class="advantage-item" v-for="(item, index) in advantages" :key="index">
+        <h2 class="section-title">
-          <div class="item-icon-placeholder">
+          Every opening is an<br />
-            <span>{{ index + 1 }}</span>
+          unknown encounter
-          </div>
+        </h2>
-          <div class="item-content">
+        <p class="section-desc">
-            <h3>{{ item.title }}</h3>
+          每一次开启都是一场未知的邂逅。探索全新的交互体验，让沟通充满惊喜与期待。
-            <p>{{ item.desc }}</p>
+        </p>
-          </div>
-        </div>
       </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%);
+  background: #ffffff;
-  color: #fff;
+  color: #222;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px;
   position: relative;
   overflow: hidden;
 }
 
-.page-advantage::before {
+.content-wrapper {
-  content: '';
+  display: flex;
-  position: absolute;
+  align-items: center;
-  width: 500px;
+  justify-content: center;
-  height: 500px;
+  gap: @gap-section;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
+  max-width: @content-max;
-  top: 10%;
+  width: 100%;
-  left: -100px;
+  padding: 0 @gap-content;
-  border-radius: 50%;
 }
 
-.section-header {
+.text-side { flex: 1; }
-  text-align: center;
-  margin-bottom: 60px;
-}
 
 .section-title {
-  font-size: 38px;
+  font-size: @font-title;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: 4px;
+  line-height: 1.25;
-  margin-bottom: 16px;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
-}
+  color: #1a1a1a;
-
-.section-line {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  margin: 0 auto 20px;
-  border-radius: 2px;
 }
 
 .section-desc {
-  font-size: 16px;
+  font-size: @font-desc;
-  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.8;
-  letter-spacing: 2px;
+  color: #888;
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-.advantage-layout {
+.image-side {
-  display: flex;
-  gap: 60px;
-  max-width: 1100px;
-  width: 100%;
-  align-items: center;
-}
-
-.advantage-left {
   flex: 1;
+  display: flex;
+  justify-content: center;
 }
 
-.left-image-placeholder {
+.phone-placeholder {
-  width: 100%;
+  width: @phone-w-main;
-  height: 400px;
+  height: @phone-h-main;
-  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border: 2px dashed #ddd;
-  border-radius: 20px;
+  border-radius: clamp(16px, 1.5vw, 36px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
+  color: #bbb;
-  font-size: 16px;
+  font-size: @font-small;
-  background: rgba(255, 255, 255, 0.02);
+  background: #fafafa;
 }
 
-.advantage-right {
+.deco {
-  flex: 1;
+  position: absolute;
-  display: flex;
+  font-size: clamp(24px, 2.5vw, 60px);
-  flex-direction: column;
+  opacity: 0.15;
-  gap: 28px;
+  animation: float 3.5s ease-in-out infinite;
 }
 
-.advantage-item {
+.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; }
-  display: flex;
+.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; }
-  align-items: flex-start;
+
-  gap: 20px;
+@keyframes float {
-  padding: 24px;
+  0%, 100% { transform: translateY(0); }
-  background: rgba(255, 255, 255, 0.04);
+  50% { transform: translateY(-12px); }
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 14px;
-  transition: all 0.3s ease;
 }
 
-.advantage-item:hover {
+@media (max-width: 768px) {
-  background: rgba(255, 255, 255, 0.07);
+  .content-wrapper {
-  border-color: rgba(99, 102, 241, 0.25);
+    flex-direction: column-reverse;
-  transform: translateX(6px);
+    gap: 32px;
-}
+    padding: 0 24px;
-
-.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;
   }
+  .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">
+    <div class="content-wrapper">
-      <h2 class="section-title">联系我们</h2>
+      <div class="text-side">
-      <div class="section-line"></div>
+        <h2 class="section-title">
-      <p class="section-desc">期待与您的合作</p>
+          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="bottom-character">
-      <div class="contact-info">
+      <div class="character-placeholder"><span>3D角色图片</span></div>
-        <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>
     <footer class="footer">
-      <div class="footer-content">
+      <p>© 2026 Key of Love. All Rights Reserved.</p>
-        <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>
     </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%);
+  background: #ffffff;
-  color: #fff;
+  color: #222;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 60px;
   position: relative;
   overflow: hidden;
 }
 
-.section-header {
+.content-wrapper {
-  text-align: center;
+  display: flex;
-  margin-bottom: 48px;
+  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-size: @font-title;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: 4px;
+  line-height: 1.25;
-  margin-bottom: 16px;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
-}
+  color: #1a1a1a;
-
-.section-line {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #6366f1, #a855f7);
-  margin: 0 auto 20px;
-  border-radius: 2px;
 }
 
 .section-desc {
-  font-size: 16px;
+  font-size: @font-desc;
-  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.8;
-  letter-spacing: 2px;
+  color: #888;
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-.contact-layout {
+.image-side {
-  display: flex;
-  gap: 60px;
-  max-width: 1100px;
-  width: 100%;
-  margin-bottom: 48px;
-}
-
-.contact-info {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
-  gap: 20px;
 }
 
-.info-item {
+.phone-placeholder {
-  display: flex;
+  width: @phone-w-main;
-  align-items: center;
+  height: @phone-h-main;
-  gap: 16px;
+  border: 2px dashed #ddd;
-  padding: 18px 20px;
+  border-radius: clamp(16px, 1.5vw, 36px);
-  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);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  color: #bbb;
+  font-size: @font-small;
+  background: #fafafa;
 }
 
-.info-text h4 {
+.bottom-character {
-  font-size: 15px;
+  position: absolute;
-  font-weight: 600;
+  bottom: clamp(24px, 3vh, 60px);
-  margin-bottom: 4px;
+  right: clamp(24px, 3vw, 80px);
-  letter-spacing: 1px;
 }
 
-.info-text p {
+.character-placeholder {
-  font-size: 13px;
+  width: clamp(80px, 8vw, 180px);
-  color: rgba(255, 255, 255, 0.5);
+  height: clamp(90px, 9.5vw, 210px);
-}
+  border: 2px dashed #ddd;
-
+  border-radius: clamp(10px, 1vw, 20px);
-.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;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
+  color: #bbb;
-  font-size: 16px;
+  font-size: @font-small;
-  background: rgba(255, 255, 255, 0.02);
+  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;
-}
+  p {
-
+    font-size: @font-small;
-.qrcode-placeholder {
+    color: #ccc;
-  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;
   }
-  .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图片位置 -->
+        <image src="/src/assets/images/logo-top.png" class="logo-img"></image>
-        <div class="logo-placeholder">LOGO</div>
+        <span class="logo-text">Key of Love</span>
       </div>
       <ul class="nav-links">
-        <li><a href="#" class="active">首页</a></li>
+        <li><a href="#">Home</a></li>
-        <li><a href="#">产品介绍</a></li>
+        <li><a href="#">Privacy Agreement</a></li>
-        <li><a href="#">核心优势</a></li>
-        <li><a href="#">联系我们</a></li>
       </ul>
     </nav>
+    <div class="bg-points"></div>
     <div class="hero">
       <div class="hero-content">
-        <!-- 预留主视觉图片位置 -->
+        <h1 class="hero-title">
-        <div class="hero-image-placeholder">
+          Not just a tool but<br />
-          <span>主视觉图片</span>
+          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="hero-phones">
-    <div class="scroll-hint">
+        <img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
-      <div class="mouse">
-        <div class="wheel"></div>
       </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%);
+  background: url('/src/assets/images/bg-top.png') center center / cover no-repeat;
-  color: #fff;
+  color: #222;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
 }
 
-.page-home::before {
+.bg-points {
-  content: '';
   position: absolute;
-  width: 600px;
+  top: 50%;
-  height: 600px;
+  left: 50%;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
+  transform: translate(-50%, -50%);
-  top: -100px;
+  width: 90%;
-  right: -100px;
+  height: 90%;
-  border-radius: 50%;
+  background: url('/src/assets/images/bg-top-points.png') center center / contain no-repeat;
-}
+  z-index: 0;
-
+  pointer-events: none;
-.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%;
 }
 
 .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 {
+.nav-logo {
-  width: 120px;
-  height: 40px;
-  border: 1px dashed rgba(255, 255, 255, 0.3);
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: clamp(6px, 0.5vw, 12px);
-  font-size: 14px;
+  .logo-img {
-  color: rgba(255, 255, 255, 0.5);
+    height: clamp(28px, 2.5vh, 52px);
-  border-radius: 6px;
+  }
+}
+
+.logo-text {
+  font-weight: 600;
+  color: #333;
+  font-size: @font-nav;
+  font-style: italic;
 }
 
 .nav-links {
   display: flex;
-  gap: 36px;
+  gap: clamp(16px, 2vw, 48px);
-}
+  
-
+  a {
-.nav-links a {
+    font-size: @font-nav;
-  font-size: 15px;
+    color: #000000;
-  color: rgba(255, 255, 255, 0.7);
+    transition: color 0.3s;
-  transition: color 0.3s;
+     font-weight: 600;
-  position: relative;
+    &:hover { color: #00BFA5; }
-}
+  }
-
-.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;
 }
 
 .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 {
+.hero-emoji {
-  width: 280px;
+  font-size: clamp(32px, 3.5vw, 72px);
-  height: 280px;
+  margin-bottom: clamp(8px, 0.8vh, 16px);
-  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-title {
-  font-size: 56px;
+  font-size: @font-hero;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: 4px;
+  line-height: 1.3;
-  margin-bottom: 16px;
+  color: #1a1a1a;
-  background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
+  margin-bottom: clamp(16px, 2vh, 40px);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
 }
 
-.hero-subtitle {
+.hero-buttons {
-  font-size: 20px;
+  display: flex;
-  color: rgba(255, 255, 255, 0.6);
+  gap: clamp(10px, 1vw, 24px);
-  letter-spacing: 8px;
+  justify-content: center;
-  margin-bottom: 48px;
 }
 
-.hero-btn {
+.btn {
-  display: inline-block;
+  display: inline-flex;
-  padding: 14px 48px;
+  align-items: center;
-  background: linear-gradient(135deg, #6366f1, #a855f7);
+  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 {
+.btn-primary {
-  transform: translateY(-2px);
+  background: #00BFA5;
-  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
+  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;
+  display: flex;
-  z-index: 10;
+  justify-content: center;
-  animation: fadeInUp 1.5s ease infinite;
+  align-items: flex-end;
 }
 
-.mouse {
+.phone-main {
-  width: 24px;
+  height: clamp(320px, 52vh, 680px);
-  height: 38px;
+  width: auto;
-  border: 2px solid rgba(255, 255, 255, 0.4);
+  display: block;
-  border-radius: 12px;
-  margin: 0 auto 8px;
-  position: relative;
 }
 
-.wheel {
+.phone-placeholder {
-  width: 4px;
+  border: 2px dashed #ddd;
-  height: 8px;
+  border-radius: clamp(16px, 1.5vw, 32px);
-  background: rgba(255, 255, 255, 0.6);
+  display: flex;
-  border-radius: 2px;
+  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;
+  font-size: clamp(20px, 2.2vw, 52px);
-  left: 50%;
+  z-index: 0;
-  transform: translateX(-50%);
+  animation: float 3s ease-in-out infinite;
-  animation: scrollWheel 1.5s ease infinite;
 }
 
-.scroll-hint p {
+.deco-coin1 { top: 30%; left: 8%; animation-delay: 0s; }
-  font-size: 12px;
+.deco-coin2 { top: 25%; right: 8%; animation-delay: 0.5s; }
-  color: rgba(255, 255, 255, 0.4);
+.deco-star1 { top: 50%; left: 15%; font-size: clamp(16px, 1.6vw, 38px); animation-delay: 1s; }
-  letter-spacing: 2px;
+.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 {
+@media (max-width: 768px) {
-  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  .hero-phones { gap: 8px; }
-  100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
+  .phone-center { width: 140px; height: 260px; }
-}
+  .phone-left, .phone-right { width: 110px; height: 210px; }
-
+  .deco { display: none; }
-@keyframes fadeInUp {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
 }
 </style>

src/components/PageProduct.vue

@@ -1,134 +1,110 @@
 <template>
   <section class="page page-product">
-    <div class="section-header">
+    <div class="content-wrapper">
-      <h2 class="section-title">产品介绍</h2>
+      <div class="text-side">
-      <div class="section-line"></div>
+        <h2 class="section-title">
-      <p class="section-desc">探索我们的核心产品与服务</p>
+          Customize Keyboard<br />
-    </div>
+          Define Chat Style
-    <div class="product-grid">
+        </h2>
-      <div class="product-card" v-for="(item, index) in products" :key="index">
+        <p class="section-desc">
-        <!-- 预留产品图片位置 -->
+          个性化键盘定制，定义你的聊天风格。丰富的主题与样式，让每一次输入都与众不同。
-        <div class="card-image-placeholder">
+        </p>
-          <span>产品图片 {{ index + 1 }}</span>
+      </div>
-        </div>
+      <div class="image-side">
-        <h3 class="card-title">{{ item.title }}</h3>
+        <div class="phone-placeholder"><span>手机截图</span></div>
-        <p class="card-desc">{{ item.desc }}</p>
       </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 {
+.content-wrapper {
-  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;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.25);
+  gap: @gap-section;
-  font-size: 14px;
+  max-width: @content-max;
-  margin-bottom: 24px;
+  width: 100%;
-  background: rgba(255, 255, 255, 0.02);
+  padding: 0 @gap-content;
 }
 
-.card-title {
+.text-side { flex: 1; }
-  font-size: 20px;
+
-  font-weight: 600;
+.section-title {
-  margin-bottom: 12px;
+  font-size: @font-title;
-  letter-spacing: 2px;
+  font-weight: 800;
+  line-height: 1.25;
+  margin-bottom: clamp(12px, 1.2vh, 28px);
+  color: #fff;
 }
 
-.card-desc {
+.section-desc {
-  font-size: 14px;
+  font-size: @font-desc;
-  color: rgba(255, 255, 255, 0.5);
   line-height: 1.8;
+  color: rgba(255, 255, 255, 0.85);
+  max-width: clamp(260px, 22vw, 480px);
 }
 
-@media (max-width: 900px) {
+.image-side {
-  .product-grid {
+  flex: 1;
-    grid-template-columns: repeat(2, 1fr);
+  display: flex;
-  }
+  justify-content: center;
 }
 
-@media (max-width: 560px) {
+.phone-placeholder {
-  .product-grid {
+  width: @phone-w-main;
-    grid-template-columns: 1fr;
+  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>

vite.config.js

@@ -1,6 +1,19 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        additionalData: `@import "@/assets/variables.less";`,
+      },
+    },
+  },
 })