From f2c89996ac53a3659e58832c237adb85c6af679b Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 5 Jan 2026 18:10:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=BB=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=83=8C=E6=99=AF=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Overall/Ranking.vue | 41 ++++++++++++---------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 4a619da..6a17a1b 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/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 = [