第一页初版

src/components/PageHome.vue

@@ -1,5 +1,8 @@
 <template>
   <section class="page page-home">
+    <!-- 背景图层 -->
+    <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>
@@ -12,27 +15,27 @@
     </nav>
     <div class="bg-points"></div>
     <div class="hero">
-      <div class="hero-content">
-        <h1 class="hero-title">
-          Not just a tool but<br />
-          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>
-      </div>
       <div class="hero-phones">
+        <div class="hero-content">
+          <h1 class="hero-title">
+            Not just a tool but<br />
+            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>
+        </div>
         <img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
       </div>
-      <div class="deco deco-coin1">🪙</div>
+      <!-- <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 class="deco deco-star2">⭐</div> -->
     </div>
   </section>
 </template>
@@ -45,7 +48,7 @@
 .page-home {
   width: 100%;
   height: 100vh;
-  background: url('/src/assets/images/bg-top.png') center center / cover no-repeat;
+  background: none;
   color: #222;
   display: flex;
   flex-direction: column;
@@ -53,15 +56,25 @@
   overflow: hidden;
 }
 
+.bg-main {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .bg-points {
   position: absolute;
-  top: 50%;
+  bottom: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: 90%;
   height: 90%;
-  background: url('/src/assets/images/bg-top-points.png') center center / contain no-repeat;
-  z-index: 0;
+  object-fit: contain;
+  z-index: 1;
   pointer-events: none;
 }
 
@@ -171,8 +184,14 @@
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  justify-content: center;
-  align-items: flex-end;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.hero-content {
+  text-align: center;
+  margin-bottom: clamp(16px, 2vh, 36px);
 }
 
 .phone-main {