From 4ee8f035c72fce11661ef6b1b4b163c3a8193579 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Thu, 26 Feb 2026 20:41:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E9=A1=B5=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageHome.vue | 65 ++++++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/PageHome.vue b/src/components/PageHome.vue
index 3841844..b696161 100644
--- a/src/components/PageHome.vue
+++ b/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 {