第二页初版

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;
 }