feat(周星榜页面): 使用背景图组件

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -1,6 +1,6 @@
 <!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
 <template>
-  <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+  <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
       <div class="loading-spinner"></div>
@@ -8,7 +8,11 @@
     </div>
 
     <!-- 主要内容 -->
-    <div v-else>
+    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
+
+      <div style="width: 100vw; position: relative">
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -306,7 +310,12 @@
             <!-- top模块 -->
             <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
               <!-- top背景图 -->
-            <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
+              <img
+                v-smart-img
+                :src="imageUrl('topBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
               <!-- 标题 -->
               <div
                 style="
@@ -339,7 +348,10 @@
                   v-for="gift in topItem.propsGroup.activityRewardProps"
                   style="display: flex; flex-direction: column; align-items: center"
                 >
-                <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
+                  <itemCenter
+                    :imgUrl="imageUrl('giftItemBg')"
+                    style="width: 90%; margin-bottom: 3px"
+                  >
                     <!-- gift图 -->
                     <img
                       v-smart-img
@@ -364,7 +376,12 @@
           <div v-show="exchargeShow" style="display: flex; justify-content: center">
             <div style="position: relative; width: 100%">
               <!-- 背景图 -->
-            <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
+              <img
+                v-smart-img
+                :src="imageUrl('longBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
 
               <!-- 标题 -->
               <div
@@ -561,7 +578,12 @@
           <!-- history弹窗 -->
           <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
             <!-- 背景图 -->
-          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
+            <img
+              v-smart-img
+              :src="imageUrl('mediumBg')"
+              alt=""
+              style="width: 100%; display: block"
+            />
             <!-- 标题 -->
             <div
               style="
@@ -606,7 +628,12 @@
                 />
                 <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
                   <div
-                  style="height: 100%; display: flex; justify-content: center; align-items: center"
+                    style="
+                      height: 100%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
                   >
                     <img
                       v-smart-img
@@ -664,7 +691,12 @@
 
               <!-- 历史时间 -->
               <div
-              style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+                style="
+                  width: 50%;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                "
               >
                 <img
                   v-smart-img
@@ -741,7 +773,12 @@
           <!-- 交易商品弹窗 -->
           <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
             <!-- 背景图 -->
-          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
+            <img
+              v-smart-img
+              :src="imageUrl('mediumBg')"
+              alt=""
+              style="width: 100%; display: block"
+            />
             <!-- 标题 -->
             <div
               style="
@@ -794,6 +831,7 @@
         </maskLayer>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -818,6 +856,7 @@ import {
   exchangeGood,
 } from '@/api/weeklyStar.js'
 
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
@@ -1129,7 +1168,7 @@ const updatePageData = async () => {
 // 预加载关键图片
 const preloadCriticalImages = async () => {
   const criticalImages = [
-    // imageUrl('bg'),
+    imageUrl('bg'),
     imageUrl('history'),
     imageUrl('gifts'),
     imageUrl('dayBg'),
@@ -1219,9 +1258,6 @@ onUnmounted(() => {
   width: 100vw;
   min-height: 100vh;
   background-color: #311300;
-  background-image: var(--bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
   position: relative;
 }