优化

2026-03-09 14:27:40 +08:00
parent e05c3ece86
commit c613c2bee4
5 changed files with 281 additions and 79 deletions
--- 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>
+
+<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>
--- 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) {
--- 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);
--- 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);
  }
@@ -112,8 +112,11 @@ onMounted(() => {
    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);
--- a/src/components/PageProduct.vue
+++ b/src/components/PageProduct.vue
@@ -13,15 +13,15 @@
          </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" />
@@ -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>