feat: 首页图片位置调整

app/components/home/StatsSection.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="stats-container">
-    <section class="stats-section">
-      <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
-      <div class="stat-item">
-        <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
-        <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
-      </div>
-      <div class="stat-item state-other">
-        <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
-        <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
-        <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
-      </div>
-    </section>
+    <div class="stats-bg-wrapper">
+      <img class="stats-bg" src="/images/home/home-bg.png" alt="首页背景" />
+      <section class="stats-section">
+        <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
+        <div class="stat-item">
+          <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
+          <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
+        </div>
+        <div class="stat-item state-other">
+          <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
+          <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
+          <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -48,23 +51,33 @@ const formatNumber = (num) => {
   justify-content: center;
 }
 
+.stats-bg-wrapper {
+  position: relative;
+  width: 100%;
+
+  .stats-bg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}
+
 .stats-section {
   width: 100%;
-  height: 800px;
-  position: relative;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-size: cover;
-  background-position: center top;
   overflow: hidden;
-  background-image: url('/images/home/home-bg.png');
 
   .stats-figure {
     position: absolute;
-    top: 280px;
+    top: 40%;
     left: 50%;
-    transform: translateX(-50%) translateY(0);
+    transform: translateX(-50%) translateY(-50%);
     width: 226.059px;
     height: 305.118px;
     object-fit: contain;
@@ -76,15 +89,15 @@ const formatNumber = (num) => {
 
   @keyframes float {
     0% {
-      transform: translateX(-50%) translateY(0);
+      transform: translateX(-50%) translateY(-50%);
     }
 
     50% {
-      transform: translateX(-50%) translateY(-20px);
+      transform: translateX(-50%) translateY(calc(-50% - 20px));
     }
 
     100% {
-      transform: translateX(-50%) translateY(0);
+      transform: translateX(-50%) translateY(-50%);
     }
   }