From c613c2bee4156ca850b11142871a26e59cba6cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Mon, 9 Mar 2026 14:27:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                       |  25 ++++---
 src/components/PageAdvantage.vue |  63 +++++++++++++----
 src/components/PageContact.vue   |  53 +++++++++++---
 src/components/PageHome.vue      | 105 +++++++++++++++++++++++-----
 src/components/PageProduct.vue   | 114 +++++++++++++++++++++++--------
 5 files changed, 281 insertions(+), 79 deletions(-)
diff --git a/index.html b/index.html
index 6e79ab0..6e61924 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>LoveKeyOW</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LoveKey</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/PageAdvantage.vue b/src/components/PageAdvantage.vue
index 3c7f8bb..5b4b68c 100644
--- a/src/components/PageAdvantage.vue
+++ b/src/components/PageAdvantage.vue
@@ -15,8 +15,8 @@
             Every moment you open it, you embark on a poetic encounter with the unknown, and meet the unexpected beauty.
           </p>
           <div class="hero-buttons">
-            <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a>
-            <a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="btn-img" /></a>
+            <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> -->
+            <span class="coming-soon-btn">Coming Soon</span>
           </div>
         </div>
       </div>
@@ -31,7 +31,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
 </script>
 
 <style scoped lang="less">
-
 .page-advantage {
   width: 100%;
   height: 100vh;
@@ -54,7 +53,9 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   padding: 0 @gap-content;
 }
 
-.text-side { flex: 1; }
+.text-side {
+  flex: 1;
+}
 
 .section-title {
   font-size: @font-title;
@@ -64,21 +65,23 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   color: #1a1a1a;
   margin-left: -25%;
 }
-.section-card{
+
+.section-card {
   position: relative;
-  width: clamp(400px, 32vw, 1600px);;
+  width: clamp(400px, 32vw, 1600px);
+  ;
   height: clamp(200px, 16vw, 800px);
   background: #FFFFFF;
-  box-shadow: 0px 39px 113px 0px rgba(2,190,172,0.2);
+  box-shadow: 0px 39px 113px 0px rgba(2, 190, 172, 0.2);
   border-radius: 2px 100px 2px 2px;
-  padding: 10% ;
+  padding: 10%;
   margin-left: -38%;
 
   font-size: @font-desc;
   line-height: 1.8;
   color: #888;
 
-  .douhao-img{
+  .douhao-img {
     position: absolute;
     height: 20%;
     left: 40%;
@@ -92,15 +95,33 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   gap: clamp(10px, 3vw, 35px);
   margin-top: 20px;
 }
+
 .btn-img {
   height: clamp(36px, 6.6vh, 120px);
   width: auto;
   display: block;
   transition: transform 0.3s;
+
   &:hover {
     transform: translateY(-2px);
   }
 }
+
+.coming-soon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: clamp(36px, 6.6vh, 120px);
+  padding: 0 clamp(24px, 3vw, 60px);
+  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
+  color: #fff;
+  font-size: clamp(14px, 1.1vw, 24px);
+  font-weight: 600;
+  border-radius: clamp(8px, 1vw, 16px);
+  cursor: default;
+  white-space: nowrap;
+}
+
 .image-side {
   flex: 1;
   display: flex;
@@ -134,12 +155,28 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   animation: float 3.5s ease-in-out infinite;
 }
 
-.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; }
-.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; }
+.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); }
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-12px);
+  }
 }
 
 @media (min-width: 1921px) {
diff --git a/src/components/PageContact.vue b/src/components/PageContact.vue
index f7656fd..665cebf 100644
--- a/src/components/PageContact.vue
+++ b/src/components/PageContact.vue
@@ -10,8 +10,8 @@
           Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
         </p>
         <div class="download-btns anim-item">
-          <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="store-btn-img" /></a>
-          <a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="store-btn-img" /></a>
+          <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="store-btn-img" /></a> -->
+          <span class="coming-soon-btn">Coming Soon</span>
         </div>
       </div>
       <div class="image-side">
@@ -32,7 +32,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
 </script>
 
 <style scoped lang="less">
-
 .page-contact {
   width: 100%;
   height: 100vh;
@@ -56,7 +55,10 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   padding: 0 @gap-content;
 }
 
-.text-side { flex: 5; max-width: clamp(320px, 60vw, 1000px); }
+.text-side {
+  flex: 5;
+  max-width: clamp(320px, 60vw, 1000px);
+}
 
 .section-title {
   font-size: clamp(34px, 3.2vw, 72px);
@@ -91,6 +93,21 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   }
 }
 
+.coming-soon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: clamp(36px, 6.2vh, 110px);
+  padding: 0 clamp(24px, 3vw, 60px);
+  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
+  color: #fff;
+  font-size: clamp(14px, 1.1vw, 24px);
+  font-weight: 600;
+  border-radius: clamp(8px, 1vw, 16px);
+  cursor: default;
+  white-space: nowrap;
+}
+
 .image-side {
   flex: 4;
   display: flex;
@@ -159,6 +176,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   left: 0;
   width: 100%;
   text-align: center;
+
   p {
     font-size: @font-small;
     color: #ccc;
@@ -217,26 +235,45 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
     gap: 32px;
     padding: 0 24px;
   }
-  .section-title { text-align: center; }
-  .section-desc { text-align: center; }
+
+  .section-title {
+    text-align: center;
+  }
+
+  .section-desc {
+    text-align: center;
+  }
+
   .text-side {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
+
   .download-btns {
     justify-content: center;
   }
+
   .store-btn-img {
     height: clamp(34px, 6vh, 56px);
   }
+
   .phone-img {
     height: clamp(220px, 38vh, 420px);
     width: auto;
     display: block;
   }
-  .bottom-character { right: 16px; bottom: 40px; }
-  .character-placeholder { width: 70px; height: 82px; }
+
+  .bottom-character {
+    right: 16px;
+    bottom: 40px;
+  }
+
+  .character-placeholder {
+    width: 70px;
+    height: 82px;
+  }
+
   .four-left,
   .four-right {
     width: clamp(70px, 20vw, 140px);
diff --git a/src/components/PageHome.vue b/src/components/PageHome.vue
index 21998b7..f1e61e5 100644
--- a/src/components/PageHome.vue
+++ b/src/components/PageHome.vue
@@ -11,8 +11,8 @@
             giving meaning to every click
           </h1>
           <div class="hero-buttons anim-item">
-            <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a>
-            <a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="btn-img" /></a>
+            <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> -->
+            <span class="coming-soon-btn">Coming Soon</span>
           </div>
         </div>
         <img src="/src/assets/images/bg-top-phone.png" class="phone-main anim-item" />
@@ -42,7 +42,6 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-
 .page-home {
   width: 100%;
   height: 100vh;
@@ -92,6 +91,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: clamp(6px, 0.5vw, 12px);
+
   .logo-img {
     height: clamp(28px, 2.5vh, 52px);
   }
@@ -107,13 +107,16 @@ onMounted(() => {
 .nav-links {
   display: flex;
   gap: clamp(16px, 2vw, 48px);
-  
+
   a {
     font-size: @font-nav;
     color: #000000;
     transition: color 0.3s;
-     font-weight: 600;
-    &:hover { color: #00BFA5; }
+    font-weight: 600;
+
+    &:hover {
+      color: #00BFA5;
+    }
   }
 }
 
@@ -167,12 +170,28 @@ onMounted(() => {
   width: auto;
   display: block;
   transition: transform 0.3s, filter 0.3s;
+
   &:hover {
     transform: translateY(-3px) scale(1.04);
-    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
+    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
   }
 }
 
+.coming-soon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: clamp(36px, 6.6vh, 120px);
+  padding: 0 clamp(24px, 3vw, 60px);
+  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
+  color: #fff;
+  font-size: clamp(14px, 1.1vw, 24px);
+  font-weight: 600;
+  border-radius: clamp(8px, 1vw, 16px);
+  cursor: default;
+  white-space: nowrap;
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -188,6 +207,7 @@ onMounted(() => {
 .btn-primary {
   background: #00BFA5;
   color: #fff;
+
   &:hover {
     background: #00A98E;
     transform: translateY(-2px);
@@ -195,7 +215,9 @@ onMounted(() => {
   }
 }
 
-.btn-icon { font-size: 0.85em; }
+.btn-icon {
+  font-size: 0.85em;
+}
 
 .hero-phones {
   position: absolute;
@@ -229,6 +251,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateX(-120vw);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -240,6 +263,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateX(120vw);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -251,6 +275,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateY(120vh);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -295,25 +320,69 @@ onMounted(() => {
   animation: float 3s ease-in-out infinite;
 }
 
-.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; }
+.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); }
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
 }
 
 @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; }
+  .hero-phones {
+    gap: 8px;
+  }
+
+  .phone-center {
+    width: 140px;
+    height: 260px;
+  }
+
+  .phone-left,
+  .phone-right {
+    width: 110px;
+    height: 210px;
+  }
+
+  .deco {
+    display: none;
+  }
+
   .phone-main {
     height: clamp(330px, 58vh, 780px);
     width: auto;
   }
+
   .hero-content {
     text-align: center;
     margin-bottom: clamp(16px, 6vh, 60px);
diff --git a/src/components/PageProduct.vue b/src/components/PageProduct.vue
index d0a64bb..9816b10 100644
--- a/src/components/PageProduct.vue
+++ b/src/components/PageProduct.vue
@@ -13,22 +13,22 @@
           </div>
           <div class="desc-wrap">
             <p class="section-desc anim-item">
-              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.
+              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="btns-wrap">
             <div class="download-btns anim-item">
-              <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android-two.png" class="btn-img" /></a>
-              <a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore-two.png" class="btn-img" /></a>
-              
+              <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android-two.png" class="btn-img" /></a> -->
+              <span class="coming-soon-btn">Coming Soon</span>
             </div>
-            
+
             <img src="/src/assets/images/two-3.png" class="deco-3" />
           </div>
         </div>
       </div>
-     
+
     </div>
     <img src="/src/assets/images/two-phone.png" class="two-phone anim-item " />
   </section>
@@ -39,7 +39,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
 </script>
 
 <style scoped lang="less">
-
 .page-product {
   width: 100%;
   height: 100vh;
@@ -50,6 +49,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   padding: 10vh 6vw 12vh 6vw;
   box-sizing: border-box;
   position: relative;
+
   @media (max-width: 768px) {
     padding: 12vh 4vw 8vh 4vw;
   }
@@ -76,7 +76,10 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
   padding: 0 clamp(30px, 3vw, 100px);
 }
 
-.text-side { flex: 1; max-width: clamp(300px, 38vw, 680px); }
+.text-side {
+  flex: 1;
+  max-width: clamp(300px, 38vw, 680px);
+}
 
 .title-wrap {
   position: relative;
@@ -102,7 +105,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
 
 .deco-2 {
   position: absolute;
-bottom: -200%;
+  bottom: -200%;
   right: -10%;
   width: clamp(50px, 14vw, 400px);
   pointer-events: none;
@@ -141,7 +144,26 @@ bottom: -200%;
   width: auto;
   display: block;
   transition: transform 0.3s;
-  &:hover { transform: translateY(-2px); }
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+
+.coming-soon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: clamp(36px, 6.6vh, 120px);
+  padding: 0 clamp(24px, 3vw, 60px);
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: clamp(14px, 1.1vw, 24px);
+  font-weight: 600;
+  border-radius: clamp(8px, 1vw, 16px);
+  cursor: default;
+  white-space: nowrap;
+  border: 1px solid rgba(255, 255, 255, 0.25);
 }
 
 .image-side {
@@ -219,6 +241,7 @@ bottom: -200%;
     position: relative;
     z-index: 2;
   }
+
   .text-side {
     max-width: 100%;
     width: 100%;
@@ -226,14 +249,46 @@ bottom: -200%;
     flex-direction: column;
     align-items: center;
   }
-  .title-wrap { display: block; width: 100%; text-align: center; }
-  .btns-wrap { display: block; width: 100%; text-align: center; }
-  .section-title { text-align: center; font-size: clamp(24px, 6vw, 40px); }
-  .section-desc { text-align: center; margin-bottom: clamp(12px, 3vh, 32px); }
-  .download-btns { justify-content: center; }
-  .deco-1 { width: clamp(28px, 8vw, 60px); right: -5%; }
-  .deco-2 { display: none; }
-  .deco-3 { display: none; }
+
+  .title-wrap {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .btns-wrap {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .section-title {
+    text-align: center;
+    font-size: clamp(24px, 6vw, 40px);
+  }
+
+  .section-desc {
+    text-align: center;
+    margin-bottom: clamp(12px, 3vh, 32px);
+  }
+
+  .download-btns {
+    justify-content: center;
+  }
+
+  .deco-1 {
+    width: clamp(28px, 8vw, 60px);
+    right: -5%;
+  }
+
+  .deco-2 {
+    display: none;
+  }
+
+  .deco-3 {
+    display: none;
+  }
+
   .two-phone {
     display: block;
     height: clamp(160px, 38vh, 320px);
@@ -241,17 +296,18 @@ bottom: -200%;
     bottom: 5%;
     z-index: 1;
   }
+
   .card {
-  width: 100%;
-  height: 100%;
-  background: #02BEAC;
-  border-radius: clamp(16px, 2vw, 40px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
+    width: 100%;
+    height: 100%;
+    background: #02BEAC;
+    border-radius: clamp(16px, 2vw, 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+  }
 
 }
 </style>
