feat(国王皇后榜页面): 使用背景图组件

src/views/Ranking/KingAndQueen/TopList.vue

@@ -8,8 +8,11 @@
     </div>
 
     <!-- 主要内容 -->
-    <div v-else style="width: 100vw; overflow: hidden">
-      <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
+
+      <div class="bg">
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -364,7 +367,7 @@
                 "
                 :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
               >
-                <!-- 内容 -->
+                <!-- 国王皇后榜首 -->
                 <div
                   style="
                     width: 100%;
@@ -448,6 +451,8 @@
                     </div>
                   </div>
                 </div>
+
+                <!-- 时间 -->
                 <div
                   style="
                     display: flex;
@@ -784,6 +789,7 @@ import {
 } from '@/api/topList.js'
 import { getMemberProfile } from '@/api/wallet'
 
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import borderImg from './components/borderImg.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
@@ -1077,8 +1083,8 @@ const updatePageData = async () => {
 const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bg'),
-    // imageUrl('border-item'),  // 这个是用在background-image的，无法使用v-smart-img指令
-    // imageUrl('border-item-user'),  // 这个是用在background-image的，无法使用v-smart-img指令
+    imageUrl('border-item'),
+    imageUrl('border-item-user'),
     imageUrl('help'),
     imageUrl('history'),
     imageUrl('listTitle'),
@@ -1154,9 +1160,6 @@ onUnmounted(() => {
 
 .bg {
   width: 100vw;
-  background-image: var(--bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
   position: relative;
 }