feat(总排行榜): 使用背景图组件

src/views/Ranking/Overall/Ranking.vue

@@ -10,29 +10,12 @@
     <!-- 主要内容 -->
     <div v-show="!isLoading" style="position: relative; z-index: 4">
       <!-- 背景图 -->
-      <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: -1">
-        <img
-          v-show="rankingType == 'Wealth'"
-          v-smart-img
-          :src="imageUrl('bgWealth')"
-          alt=""
-          style="display: block; width: 100%; object-fit: cover"
-        />
-        <img
-          v-show="rankingType == 'Charm'"
-          v-smart-img
-          :src="imageUrl('bgCharm')"
-          alt=""
-          style="display: block; width: 100%; object-fit: cover"
-        />
-        <img
-          v-show="rankingType == 'Room'"
-          v-smart-img
-          :src="imageUrl('bgRoom')"
-          alt=""
-          style="display: block; width: 100%; object-fit: cover"
-        />
-      </div>
+      <BackgroundLayer
+        :backgroundImages="[currentBgImage]"
+        :layerStyle="{
+          zIndex: -1,
+        }"
+      />
 
       <!-- 哨兵元素 -->
       <div ref="sentinel"></div>
@@ -415,6 +398,7 @@ import { useThrottle } from '@/utils/useDebounce'
 
 import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
 
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import TopUser from './components/topUser.vue'
 
 const route = useRoute()
@@ -438,6 +422,17 @@ const myRanking = ref({}) //我的排名
 // 预加载状态
 const isLoading = ref(true)
 
+const currentBgImage = computed(() => {
+  if (rankingType.value == 'Wealth') {
+    return imageUrl('bgWealth')
+  } else if (rankingType.value == 'Charm') {
+    return imageUrl('bgCharm')
+  } else if (rankingType.value == 'Room') {
+    return imageUrl('bgRoom')
+  }
+  return '' // 默认返回空字符串
+})
+
 // 预加载关键图片
 const preloadCriticalImages = async () => {
   const criticalImages = [