第二页初版

src/App.vue

@@ -1,10 +1,22 @@
 <template>
+  <div class="app-wrapper">
+    <nav class="global-nav">
+      <div class="nav-logo">
+        <img src="/src/assets/images/logo-top.png" class="logo-img" />
+        <span class="logo-text">Key of Love</span>
+      </div>
+      <ul class="nav-links">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Privacy Agreement</a></li>
+      </ul>
+    </nav>
     <FullPage ref="fullpageRef">
       <PageHome @navigate="handleNavigate" />
       <PageProduct />
       <PageAdvantage />
       <PageContact />
     </FullPage>
+  </div>
 </template>
 
 <script setup>
@@ -21,3 +33,57 @@ function handleNavigate(index) {
   fullpageRef.value?.goTo(index)
 }
 </script>
+
+<style lang="less">
+@import '@/assets/variables.less';
+
+.app-wrapper {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
+
+.global-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: @nav-h;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 @nav-px;
+  z-index: 1000;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: clamp(6px, 0.5vw, 12px);
+  .logo-img {
+    height: clamp(28px, 2.5vh, 52px);
+    width: auto;
+  }
+}
+
+.logo-text {
+  font-weight: 600;
+  color: #333;
+  font-size: clamp(12px, 1vw, 18px);
+  font-style: italic;
+}
+
+.nav-links {
+  display: flex;
+  gap: clamp(16px, 2vw, 48px);
+  list-style: none;
+  a {
+    font-size: clamp(12px, 1vw, 18px);
+    color: #000;
+    font-weight: 600;
+    text-decoration: none;
+    transition: color 0.3s;
+    &:hover { color: #00BFA5; }
+  }
+}
+</style>

src/assets/variables.less

@@ -3,9 +3,9 @@
 // clamp(min, preferred, max) 在 1280px~3840px 间线性缩放
 
 // 字体
-@font-hero: clamp(28px, 2.5vw, 64px); // 首页大标题
+@font-hero: clamp(22px, 2.7vw, 72px); // 首页大标题
 @font-title: clamp(24px, 2.2vw, 52px); // 各页标题
-@font-desc: clamp(13px, 0.9vw, 20px); // 描述文字
+@font-desc: clamp(13px, 1.3vw, 30px); // 描述文字
 @font-nav: clamp(12px, 1vw, 18px); // 导航文字
 @font-btn: clamp(12px, 1vw, 18px); // 按钮文字
 @font-small: clamp(11px, 0.65vw, 15px); // 小字

src/components/PageHome.vue

@@ -3,17 +3,6 @@
     <!-- 背景图层 -->
     <img src="/src/assets/images/bg-top.png" class="bg-main" />
     <img src="/src/assets/images/bg-top-points.png" class="bg-points" />
-    <nav class="nav">
-      <div class="nav-logo">
-        <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="#">Home</a></li>
-        <li><a href="#">Privacy Agreement</a></li>
-      </ul>
-    </nav>
-    <div class="bg-points"></div>
     <div class="hero">
       <div class="hero-phones">
         <div class="hero-content">
@@ -22,12 +11,8 @@
             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>
+            <a href="#"><img src="/src/assets/images/android.png" class="btn-img" /></a>
+            <a href="#"><img src="/src/assets/images/appStore.png" class="btn-img" /></a>
           </div>
         </div>
         <img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
@@ -71,8 +56,8 @@
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 90%;
-  height: 90%;
+  width: 96%;
+  height: 96%;
   object-fit: contain;
   z-index: 1;
   pointer-events: none;
@@ -150,10 +135,20 @@
 
 .hero-buttons {
   display: flex;
-  gap: clamp(10px, 1vw, 24px);
+  gap: clamp(10px, 3vw, 35px);
   justify-content: center;
 }
 
+.btn-img {
+  height: clamp(36px, 6.6vh, 120px);
+  width: auto;
+  display: block;
+  transition: transform 0.3s;
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -195,7 +190,7 @@
 }
 
 .phone-main {
-  height: clamp(320px, 52vh, 680px);
+  height: clamp(330px, 58vh, 780px);
   width: auto;
   display: block;
 }

src/components/PageProduct.vue

@@ -1,21 +1,36 @@
 <template>
   <section class="page page-product">
+    <div class="card">
       <div class="content-wrapper">
         <div class="text-side">
+          <div class="title-wrap">
             <h2 class="section-title">
               Customize Keyboard<br />
               Define Chat Style
             </h2>
+            <img src="/src/assets/images/two-1.png" class="deco-1" />
+            <img src="/src/assets/images/two-2.png" class="deco-2" />
+          </div>
+          <div class="desc-wrap">
             <p class="section-desc">
-          个性化键盘定制，定义你的聊天风格。丰富的主题与样式，让每一次输入都与众不同。
+              Spice up your keyboard with one-of-a-kind skins and customize its look to the fullest—your chat style is one-of-a-kind, and your keyboard should be too.
             </p>
+            
           </div>
-      <div class="image-side">
-        <div class="phone-placeholder"><span>手机截图</span></div>
+          <div class="btns-wrap">
+            <div class="download-btns">
+              <a href="#"><img src="/src/assets/images/android-two.png" class="btn-img" /></a>
+              <a href="#"><img src="/src/assets/images/appStore-two.png" class="btn-img" /></a>
+              
+            </div>
+            
+            <img src="/src/assets/images/two-3.png" class="deco-3" />
           </div>
         </div>
-    <div class="deco deco-1">🎨</div>
-    <div class="deco deco-2">⌨️</div>
+      
+      </div>
+    </div>
+    <img src="/src/assets/images/two-phone.png" class="two-phone" />
   </section>
 </template>
 
@@ -27,31 +42,80 @@
 .page-product {
   width: 100%;
   height: 100vh;
-  background: #00BFA5;
-  color: #fff;
+  background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 10vh 6vw 12vh 6vw;
+  box-sizing: border-box;
   position: relative;
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  background: #02BEAC;
+  border-radius: clamp(16px, 2vw, 40px);
+  display: flex;
+  align-items: center;
   overflow: hidden;
+  position: relative;
 }
 
 .content-wrapper {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: @gap-section;
   max-width: @content-max;
   width: 100%;
-  padding: 0 @gap-content;
+  padding: 0 clamp(30px, 3vw, 100px);
 }
 
-.text-side { flex: 1; }
+.text-side { flex: 1; max-width: clamp(300px, 38vw, 680px); }
+
+.title-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.desc-wrap {
+  position: relative;
+}
+
+.btns-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.deco-1 {
+  position: absolute;
+  bottom: 0;
+  right: -10%;
+  width: clamp(40px, 6vw, 140px);
+  pointer-events: none;
+}
+
+.deco-2 {
+  position: absolute;
+bottom: -200%;
+  right: -10%;
+  width: clamp(50px, 14vw, 400px);
+  pointer-events: none;
+}
+
+.deco-3 {
+  position: absolute;
+  bottom: -200%;
+  left: 0;
+  width: clamp(50px, 8vw, 200px);
+  pointer-events: none;
+}
 
 .section-title {
-  font-size: @font-title;
+  font-size: clamp(30px, 3.4vw, 170px);
   font-weight: 800;
-  line-height: 1.25;
+  line-height: 1.2;
   margin-bottom: clamp(12px, 1.2vh, 28px);
   color: #fff;
 }
@@ -59,8 +123,21 @@
 .section-desc {
   font-size: @font-desc;
   line-height: 1.8;
-  color: rgba(255, 255, 255, 0.85);
-  max-width: clamp(260px, 22vw, 480px);
+  color: rgb(255, 255, 255);
+  margin-bottom: clamp(16px, 5vh, 60px);
+}
+
+.download-btns {
+  display: flex;
+  gap: clamp(10px, 3vw, 35px);
+}
+
+.btn-img {
+  height: clamp(36px, 6.6vh, 120px);
+  width: auto;
+  display: block;
+  transition: transform 0.3s;
+  &:hover { transform: translateY(-2px); }
 }
 
 .image-side {
@@ -82,19 +159,13 @@
   background: rgba(255, 255, 255, 0.08);
 }
 
-.deco {
+.two-phone {
   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); }
+  right: 8vh;
+  bottom: -9vh;
+  height: clamp(200px, 100vh, 2000px);
+  width: auto;
+  pointer-events: none;
 }
 
 @media (max-width: 768px) {
@@ -106,5 +177,6 @@
   .section-title { text-align: center; }
   .section-desc { text-align: center; }
   .phone-placeholder { width: 180px; height: 333px; }
+  
 }
 </style>