From 5ae3ad9590a2a4affedffac899c0abeee2983adf Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 15 May 2026 14:27:38 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/活动页/竞品H5与性能优化分析.md              |  2 +-
 src/components/LoadingSpinner.vue                |  2 +-
 src/styles/global.css                            | 16 ++++++++++++++++
 src/views/Activities/DailyRecharge/index.vue     |  8 +++++---
 src/views/Activities/LesserBairam/index.vue      |  6 ++++--
 src/views/Activities/LoginReward/index.vue       |  8 +++++---
 .../Activities/LuckyDollars/Season3/index.vue    |  6 ++++--
 .../Activities/LuckyDollars/Season4/index.vue    |  6 ++++--
 .../Activities/LuckyDollars/Season5/index.vue    |  6 ++++--
 src/views/Activities/PokerAce/index.vue          |  6 ++++--
 src/views/Activities/SpringFestival/index.vue    |  8 +++++---
 src/views/Ranking/Couple/index.vue               |  8 +++++---
 src/views/Ranking/GamesKing/index.vue            | 15 +++++----------
 src/views/Ranking/KingAndQueen/TopList.vue       |  8 +++++---
 src/views/Ranking/Overall/Ranking.vue            |  6 ++++--
 src/views/Ranking/WeeklyStar/WeeklyStar.vue      |  8 +++++---
 16 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/docs/活动页/竞品H5与性能优化分析.md b/docs/活动页/竞品H5与性能优化分析.md
index efbdbd6..0de895a 100644
--- a/docs/活动页/竞品H5与性能优化分析.md
+++ b/docs/活动页/竞品H5与性能优化分析.md
@@ -264,7 +264,7 @@ backdrop-filter
 
 低端机模式和系统“减少动态效果”模式都不再暂停 `.scroll-wrapper` 这类跑马灯动画，避免 iOS 或低端安卓上排行榜、奖励列表、用户昵称等文本滚动完全不动。系统开启“减少动态效果”时，只暂停弹幕这类更重的装饰动画。
 
-同时，多个活动页和榜单页的 `isLoading` 预加载阶段已取消渲染 `BackgroundLayer`，只保留 `LoadingSpinner` 和 loading 文案，避免加载态和正式页面重复创建背景图层。
+同时，多个活动页和榜单页的 `isLoading` 预加载阶段已取消渲染 `BackgroundLayer`、背景图片和其他装饰节点，只保留 `LoadingSpinner` 和 loading 文案。两者统一包在 `.loading-content` 容器中，使用半透明黑底、8px 圆角和 10px 内边距，避免加载态和正式页面重复创建背景图层。
 
 ### 10. 弹幕组件专项优化
 
diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue
index b1ce084..7e84926 100644
--- a/src/components/LoadingSpinner.vue
+++ b/src/components/LoadingSpinner.vue
@@ -17,7 +17,7 @@ defineProps({
   },
   margin: {
     type: String,
-    default: '0 auto 12px',
+    default: '0 auto',
   },
 })
 </script>
diff --git a/src/styles/global.css b/src/styles/global.css
index 62d630e..63f6a79 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -34,3 +34,19 @@ html.reduce-motion-mode .barrage-item {
   transform: none !important;
   will-change: auto !important;
 }
+
+/* 统一 loading 内容容器，避免预加载阶段渲染额外背景或装饰节点。 */
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.loading-content p {
+  margin: 0;
+  text-align: center;
+}
diff --git a/src/views/Activities/DailyRecharge/index.vue b/src/views/Activities/DailyRecharge/index.vue
index c15d232..c715ba9 100644
--- a/src/views/Activities/DailyRecharge/index.vue
+++ b/src/views/Activities/DailyRecharge/index.vue
@@ -2,9 +2,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LesserBairam/index.vue b/src/views/Activities/LesserBairam/index.vue
index fe00c63..8a588d7 100644
--- a/src/views/Activities/LesserBairam/index.vue
+++ b/src/views/Activities/LesserBairam/index.vue
@@ -3,8 +3,10 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LoginReward/index.vue b/src/views/Activities/LoginReward/index.vue
index 12aae3a..3e88137 100644
--- a/src/views/Activities/LoginReward/index.vue
+++ b/src/views/Activities/LoginReward/index.vue
@@ -2,9 +2,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season3/index.vue b/src/views/Activities/LuckyDollars/Season3/index.vue
index 34369b4..5589543 100644
--- a/src/views/Activities/LuckyDollars/Season3/index.vue
+++ b/src/views/Activities/LuckyDollars/Season3/index.vue
@@ -3,8 +3,10 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season4/index.vue b/src/views/Activities/LuckyDollars/Season4/index.vue
index 7c2c482..8f4ce2b 100644
--- a/src/views/Activities/LuckyDollars/Season4/index.vue
+++ b/src/views/Activities/LuckyDollars/Season4/index.vue
@@ -2,8 +2,10 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/LuckyDollars/Season5/index.vue b/src/views/Activities/LuckyDollars/Season5/index.vue
index 0147fdd..78eaa45 100644
--- a/src/views/Activities/LuckyDollars/Season5/index.vue
+++ b/src/views/Activities/LuckyDollars/Season5/index.vue
@@ -2,8 +2,10 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/PokerAce/index.vue b/src/views/Activities/PokerAce/index.vue
index 0039055..e1ca998 100644
--- a/src/views/Activities/PokerAce/index.vue
+++ b/src/views/Activities/PokerAce/index.vue
@@ -2,8 +2,10 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Activities/SpringFestival/index.vue b/src/views/Activities/SpringFestival/index.vue
index 9445222..437c692 100644
--- a/src/views/Activities/SpringFestival/index.vue
+++ b/src/views/Activities/SpringFestival/index.vue
@@ -2,9 +2,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index f122243..09521fb 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -2,9 +2,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
index 21bc450..41b153a 100644
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -3,16 +3,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <img
-        v-smart-img
-        :src="imageUrl('bg2')"
-        alt=""
-        style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: -1"
-      />
-
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index 8ae3c2d..f0b2c5f 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -3,9 +3,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p style="color: #fff">{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p style="color: #fff">{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->
diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index df87772..74fde18 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@@ -5,8 +5,10 @@
     :style="{ backgroundColor: currentRankingConfig.backgroundColor }"
   >
     <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <div class="loading-content">
+        <LoadingSpinner />
+        <p>{{ t('loading') }}...</p>
+      </div>
     </div>
 
     <div v-else style="position: relative; z-index: 4">
diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 7ff396b..5020111 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -3,9 +3,11 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
-      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <div class="loading-content">
+        <!-- 加载动画 -->
+        <LoadingSpinner />
+        <p>{{ $t('loading') }}...</p>
+      </div>
     </div>
 
     <!-- 主要内容 -->