style(总排行榜页): 调整背景图的切换方式

src/views/Ranking/Overall/Ranking.vue

@@ -1,5 +1,29 @@
 <template>
-  <div class="fullPage" :style="{ backgroundColor, backgroundImage }">
+  <div class="fullPage" :style="{ backgroundColor }">
+    <!-- 背景图 -->
+    <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: 3">
+      <img
+        v-show="rankingType == 'Wealth'"
+        :src="images.bgWealth"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+      <img
+        v-show="rankingType == 'Charm'"
+        :src="images.bgCharm"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+      <img
+        v-show="rankingType == 'Room'"
+        :src="images.bgRoom"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+    </div>
+
+    <!-- 主要内容 -->
+    <div style="position: relative; z-index: 4">
       <!-- 哨兵元素 -->
       <div ref="sentinel"></div>
 
@@ -296,6 +320,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -422,7 +447,6 @@ const RankingFromTop4 = computed(() => {
 
 // 动态样式
 const backgroundColor = ref('') //页面样式
-const backgroundImage = ref('') //页面样式
 const border = ref('') //时间标签样式
 const background = ref('') //时间标签样式
 const rankItemBackground = ref('') //排名项背景
@@ -438,7 +462,6 @@ const stickyHeader = ref(null)
 watchEffect(() => {
   if (rankingType.value == 'Wealth') {
     backgroundColor.value = '#230F0A'
-    backgroundImage.value = `url(${images.bgWealth})`
     topBorderBg.value = images['top1-wealth']
     top2BorderBg.value = images['top2']
     top3BorderBg.value = images['top3']
@@ -452,7 +475,6 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Charm') {
     backgroundColor.value = '#112C1E'
-    backgroundImage.value = `url(${images.bgCharm})`
     topBorderBg.value = images['top1-charm']
     top2BorderBg.value = images['top2']
     top3BorderBg.value = images['top3']
@@ -466,7 +488,6 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Room') {
     backgroundColor.value = '#211031'
-    backgroundImage.value = `url(${images.bgRoom})`
     topBorderBg.value = images['top1-room']
     top2BorderBg.value = images['top2-room']
     top3BorderBg.value = images['top3-room']

src/views/Ranking/Overall/components/topUser.vue

@@ -4,6 +4,7 @@
       <img
         v-smart-img
         :src="BorderImgUrl"
+        :key="BorderImgUrl"
         alt=""
         width="100%"
         style="display: block; position: relative; z-index: 2"