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

---
 src/views/Ranking/WeeklyStar/WeeklyStar.vue | 1388 ++++++++++---------
 1 file changed, 712 insertions(+), 676 deletions(-)

diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 42cd1ce..ef358b9 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -1,6 +1,6 @@
 <!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
 <template>
-  <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+  <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
       <div class="loading-spinner"></div>
@@ -8,210 +8,274 @@
     </div>
 
     <!-- 主要内容 -->
-    <div v-else>
-      <!-- 状态栏占位区域（仅在APP中显示） -->
-      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
-      <!-- 帮助按钮 -->
-      <img
-        v-smart-img
-        src="../../../assets/icon/helpAct.png"
-        alt=""
-        style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
-        @click="helpInfoShow = true"
-      />
+      <div style="width: 100vw; position: relative">
+        <!-- 状态栏占位区域（仅在APP中显示） -->
+        <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
-      <!-- history按钮 -->
-      <img
-        v-smart-img
-        :src="imageUrl('history')"
-        alt=""
-        style="width: 20%; margin-top: 20px"
-        @click="historyShow = true"
-      />
-
-      <!-- gifts -->
-      <div
-        style="display: flex; justify-content: flex-end; width: 100%"
-        :style="{
-          marginTop: isInAppEnvironment
-            ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
-            : 'calc(65vw - 10vw - 10vw - 20px)',
-        }"
-      >
+        <!-- 帮助按钮 -->
         <img
           v-smart-img
-          :src="imageUrl('gifts')"
+          src="../../../assets/icon/helpAct.png"
           alt=""
-          style="width: 20%"
-          @click="giftsShow = true"
+          style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+          @click="helpInfoShow = true"
         />
-      </div>
 
-      <!-- 倒计时 -->
-      <div style="display: flex; justify-content: center; margin-top: 0%">
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('dayBg')">
-            <div class="timeText">{{ Days }}D</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap" style="width: 6px"></div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
-            <div class="timeText">{{ Hours }}</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap">:</div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
-            <div class="timeText">{{ Minutes }}</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap">:</div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('secBg')">
-            <div class="timeText">{{ Second }}</div>
-          </itemCenter>
-        </div>
-      </div>
+        <!-- history按钮 -->
+        <img
+          v-smart-img
+          :src="imageUrl('history')"
+          alt=""
+          style="width: 20%; margin-top: 20px"
+          @click="historyShow = true"
+        />
 
-      <!-- 切换按钮 -->
-      <div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
-        <div style="width: 30%" @click="handleBt('Ranking')">
-          <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-            <div class="btTitle">Ranking</div>
-          </itemCenter>
-        </div>
-        <div style="width: 30%" @click="handleBt('Rewards')">
-          <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-            <div class="btTitle">Rewards</div>
-          </itemCenter>
-        </div>
-        <div style="width: 30%" @click="handleBt('Exchange')">
-          <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-            <div class="btTitle">Exchange</div>
-          </itemCenter>
-        </div>
-      </div>
-
-      <!-- 展示内容 -->
-      <div>
-        <!-- Ranking -->
+        <!-- gifts -->
         <div
-          v-show="rankingShow"
-          style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
+          style="display: flex; justify-content: flex-end; width: 100%"
+          :style="{
+            marginTop: isInAppEnvironment
+              ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
+              : 'calc(65vw - 10vw - 10vw - 20px)',
+          }"
         >
-          <!-- 背景板 -->
-          <div>
-            <!-- 头部背景 -->
-            <img
-              v-smart-img
-              :src="imageUrl('RankingMain')"
-              alt=""
-              width="100%"
-              style="display: block"
-            />
-            <!-- 用户项 -->
-            <img
-              v-smart-img
-              :src="imageUrl('RankingItem')"
-              alt=""
-              width="100%"
-              style="display: block; margin-top: -2px"
-              v-for="value in showRanking.length - 1"
-              v-if="showRanking.length > 1"
-            />
-            <!-- 底框 -->
-            <img
-              v-smart-img
-              :src="imageUrl('RankingBottomBorder')"
-              alt=""
-              width="100%"
-              style="display: block; margin-top: -9%"
-            />
+          <img
+            v-smart-img
+            :src="imageUrl('gifts')"
+            alt=""
+            style="width: 20%"
+            @click="giftsShow = true"
+          />
+        </div>
+
+        <!-- 倒计时 -->
+        <div style="display: flex; justify-content: center; margin-top: 0%">
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('dayBg')">
+              <div class="timeText">{{ Days }}D</div>
+            </itemCenter>
           </div>
+          <div class="timeText timeGap" style="width: 6px"></div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+              <div class="timeText">{{ Hours }}</div>
+            </itemCenter>
+          </div>
+          <div class="timeText timeGap">:</div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+              <div class="timeText">{{ Minutes }}</div>
+            </itemCenter>
+          </div>
+          <div class="timeText timeGap">:</div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('secBg')">
+              <div class="timeText">{{ Second }}</div>
+            </itemCenter>
+          </div>
+        </div>
 
-          <!-- 主体内容 -->
+        <!-- 切换按钮 -->
+        <div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
+          <div style="width: 30%" @click="handleBt('Ranking')">
+            <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+              <div class="btTitle">Ranking</div>
+            </itemCenter>
+          </div>
+          <div style="width: 30%" @click="handleBt('Rewards')">
+            <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+              <div class="btTitle">Rewards</div>
+            </itemCenter>
+          </div>
+          <div style="width: 30%" @click="handleBt('Exchange')">
+            <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+              <div class="btTitle">Exchange</div>
+            </itemCenter>
+          </div>
+        </div>
+
+        <!-- 展示内容 -->
+        <div>
+          <!-- Ranking -->
           <div
-            style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
+            v-show="rankingShow"
+            style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
           >
-            <!-- 前3名 -->
-            <div style="margin-top: 3%">
-              <!-- 第一 -->
-              <div style="display: flex; justify-content: center">
-                <TopUser
-                  :BorderImgUrl="imageUrl('topOne')"
-                  :avatarUrl="RankingHasTop3[0].userAvatar"
-                  :name="RankingHasTop3[0].userNickname"
-                  :distributionValue="RankingHasTop3[0].quantity"
-                  style="width: 70%"
-                  @click="viewUserInfo(RankingHasTop3[0].userId)"
-                />
-              </div>
-              <!-- 第二三 -->
-              <div
-                style="
-                  position: relative;
-                  z-index: 3;
-
-                  display: flex;
-                  justify-content: space-between;
-                  margin-top: -20%;
-                  pointer-events: none;
-                "
-              >
-                <div
-                  style="pointer-events: auto; width: 35%"
-                  @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
-                >
-                  <TopUser
-                    :isTopOne="false"
-                    :BorderImgUrl="imageUrl('topTwo')"
-                    :avatarUrl="RankingHasTop3[1].userAvatar"
-                    :name="RankingHasTop3[1].userNickname"
-                    :distributionValue="RankingHasTop3[1].quantity"
-                    style="width: 100%"
-                  />
-                </div>
-
-                <div
-                  style="pointer-events: auto; width: 35%"
-                  @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
-                >
-                  <TopUser
-                    :isTopOne="false"
-                    :BorderImgUrl="imageUrl('topThree')"
-                    :avatarUrl="RankingHasTop3[2].userAvatar"
-                    :name="RankingHasTop3[2].userNickname"
-                    :distributionValue="RankingHasTop3[2].quantity"
-                    style="width: 100%"
-                  />
-                </div>
-              </div>
+            <!-- 背景板 -->
+            <div>
+              <!-- 头部背景 -->
+              <img
+                v-smart-img
+                :src="imageUrl('RankingMain')"
+                alt=""
+                width="100%"
+                style="display: block"
+              />
+              <!-- 用户项 -->
+              <img
+                v-smart-img
+                :src="imageUrl('RankingItem')"
+                alt=""
+                width="100%"
+                style="display: block; margin-top: -2px"
+                v-for="value in showRanking.length - 1"
+                v-if="showRanking.length > 1"
+              />
+              <!-- 底框 -->
+              <img
+                v-smart-img
+                :src="imageUrl('RankingBottomBorder')"
+                alt=""
+                width="100%"
+                style="display: block; margin-top: -9%"
+              />
             </div>
 
-            <!-- 第四名开始 -->
-            <itemCenter
-              v-for="listItem in showRanking"
-              style="margin-top: 3.3vw; position: relative"
-              @click="viewUserInfo(listItem.userId)"
-              :imgUrl="imageUrl('itemUser')"
-              :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
+            <!-- 主体内容 -->
+            <div
+              style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
             >
-              <!-- 基本信息 -->
-              <div
-                style="
-                  flex: 1;
-                  min-width: 0;
-                  align-self: stretch;
+              <!-- 前3名 -->
+              <div style="margin-top: 3%">
+                <!-- 第一 -->
+                <div style="display: flex; justify-content: center">
+                  <TopUser
+                    :BorderImgUrl="imageUrl('topOne')"
+                    :avatarUrl="RankingHasTop3[0].userAvatar"
+                    :name="RankingHasTop3[0].userNickname"
+                    :distributionValue="RankingHasTop3[0].quantity"
+                    style="width: 70%"
+                    @click="viewUserInfo(RankingHasTop3[0].userId)"
+                  />
+                </div>
+                <!-- 第二三 -->
+                <div
+                  style="
+                    position: relative;
+                    z-index: 3;
 
-                  display: flex;
-                  justify-content: space-around;
-                  align-items: center;
-                  gap: 4px;
-                "
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: -20%;
+                    pointer-events: none;
+                  "
+                >
+                  <div
+                    style="pointer-events: auto; width: 35%"
+                    @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
+                  >
+                    <TopUser
+                      :isTopOne="false"
+                      :BorderImgUrl="imageUrl('topTwo')"
+                      :avatarUrl="RankingHasTop3[1].userAvatar"
+                      :name="RankingHasTop3[1].userNickname"
+                      :distributionValue="RankingHasTop3[1].quantity"
+                      style="width: 100%"
+                    />
+                  </div>
+
+                  <div
+                    style="pointer-events: auto; width: 35%"
+                    @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
+                  >
+                    <TopUser
+                      :isTopOne="false"
+                      :BorderImgUrl="imageUrl('topThree')"
+                      :avatarUrl="RankingHasTop3[2].userAvatar"
+                      :name="RankingHasTop3[2].userNickname"
+                      :distributionValue="RankingHasTop3[2].quantity"
+                      style="width: 100%"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 第四名开始 -->
+              <itemCenter
+                v-for="listItem in showRanking"
+                style="margin-top: 3.3vw; position: relative"
+                @click="viewUserInfo(listItem.userId)"
+                :imgUrl="imageUrl('itemUser')"
+                :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
               >
-                <!-- 排名 -->
+                <!-- 基本信息 -->
+                <div
+                  style="
+                    flex: 1;
+                    min-width: 0;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    gap: 4px;
+                  "
+                >
+                  <!-- 排名 -->
+                  <div
+                    style="
+                      width: auto;
+                      min-width: 0;
+                      align-self: stretch;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
+                  </div>
+
+                  <!-- 头像 -->
+                  <img
+                    v-smart-img
+                    :src="listItem.userAvatar || ''"
+                    alt=""
+                    style="
+                      display: block;
+                      width: 3em;
+
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      object-fit: cover;
+                    "
+                    @error="handleAvatarImageError"
+                  />
+
+                  <!-- 名称、id -->
+                  <div
+                    style="
+                      flex: 1;
+                      min-width: 0;
+                      padding: 0 2px;
+
+                      display: flex;
+                      flex-direction: column;
+                    "
+                  >
+                    <div
+                      style="
+                        color: #fff;
+                        font-weight: 860;
+
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                      "
+                    >
+                      {{ listItem.userNickname }}
+                    </div>
+                    <div style="color: #fff; font-weight: 590">
+                      {{ $t('user_id_prefix') }} {{ listItem.account }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 贡献值 -->
                 <div
                   style="
                     width: auto;
@@ -219,161 +283,315 @@
                     align-self: stretch;
 
                     display: flex;
-                    justify-content: center;
                     align-items: center;
                   "
                 >
-                  <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
-                </div>
-
-                <!-- 头像 -->
-                <img
-                  v-smart-img
-                  :src="listItem.userAvatar || ''"
-                  alt=""
-                  style="
-                    display: block;
-                    width: 3em;
-
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                    object-fit: cover;
-                  "
-                  @error="handleAvatarImageError"
-                />
-
-                <!-- 名称、id -->
-                <div
-                  style="
-                    flex: 1;
-                    min-width: 0;
-                    padding: 0 2px;
-
-                    display: flex;
-                    flex-direction: column;
-                  "
-                >
-                  <div
-                    style="
-                      color: #fff;
-                      font-weight: 860;
-
-                      overflow: hidden;
-                      white-space: nowrap;
-                      text-overflow: ellipsis;
-                    "
-                  >
-                    {{ listItem.userNickname }}
-                  </div>
-                  <div style="color: #fff; font-weight: 590">
-                    {{ $t('user_id_prefix') }} {{ listItem.account }}
-                  </div>
-                </div>
-              </div>
-
-              <!-- 贡献值 -->
-              <div
-                style="
-                  width: auto;
-                  min-width: 0;
-                  align-self: stretch;
-
-                  display: flex;
-                  align-items: center;
-                "
-              >
-                <img
-                  v-smart-img
-                  src="/src/assets/icon/coin.png"
-                  alt=""
-                  style="display: block; width: 1.3em; aspect-ratio: 1/1"
-                />
-                <div style="color: #edb247; font-weight: 700">
-                  {{ listItem.quantity }}
-                </div>
-              </div>
-            </itemCenter>
-            <!-- 触发加载功能 -->
-            <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
-          </div>
-        </div>
-
-        <!-- Rewards -->
-        <div
-          v-show="rewardShow"
-          style="display: flex; flex-direction: column; align-items: center; gap: 20px"
-        >
-          <!-- top模块 -->
-          <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
-            <!-- top背景图 -->
-            <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
-            <!-- 标题 -->
-            <div
-              style="
-                position: absolute;
-                top: 7%;
-                left: 25%;
-                right: 25%;
-                height: 8.5%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #fff;
-                font-weight: 860;
-              "
-              class="topTitle"
-            >
-              TOP{{ topItem.rule.sort }}
-            </div>
-            <!-- 主体内容 -->
-            <div
-              style="
-                position: absolute;
-                inset: 0;
-                padding: 30% 6% 13%;
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-              "
-            >
-              <div
-                v-for="gift in topItem.propsGroup.activityRewardProps"
-                style="display: flex; flex-direction: column; align-items: center"
-              >
-                <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
-                  <!-- gift图 -->
                   <img
                     v-smart-img
-                    :src="gift.cover || ''"
+                    src="/src/assets/icon/coin.png"
                     alt=""
-                    style="width: 50%; display: block"
-                    @error="(e) => handleRewardImageError(e, gift.type)"
+                    style="display: block; width: 1.3em; aspect-ratio: 1/1"
                   />
-                </itemCenter>
-
-                <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
-                  <div style="font-weight: 700">
-                    {{ showDetail(gift.type, gift.quantity) }}
+                  <div style="color: #edb247; font-weight: 700">
+                    {{ listItem.quantity }}
                   </div>
-                </itemCenter>
+                </div>
+              </itemCenter>
+              <!-- 触发加载功能 -->
+              <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
+            </div>
+          </div>
+
+          <!-- Rewards -->
+          <div
+            v-show="rewardShow"
+            style="display: flex; flex-direction: column; align-items: center; gap: 20px"
+          >
+            <!-- top模块 -->
+            <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
+              <!-- top背景图 -->
+              <img
+                v-smart-img
+                :src="imageUrl('topBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
+              <!-- 标题 -->
+              <div
+                style="
+                  position: absolute;
+                  top: 7%;
+                  left: 25%;
+                  right: 25%;
+                  height: 8.5%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: #fff;
+                  font-weight: 860;
+                "
+                class="topTitle"
+              >
+                TOP{{ topItem.rule.sort }}
+              </div>
+              <!-- 主体内容 -->
+              <div
+                style="
+                  position: absolute;
+                  inset: 0;
+                  padding: 30% 6% 13%;
+                  display: grid;
+                  grid-template-columns: repeat(2, 1fr);
+                "
+              >
+                <div
+                  v-for="gift in topItem.propsGroup.activityRewardProps"
+                  style="display: flex; flex-direction: column; align-items: center"
+                >
+                  <itemCenter
+                    :imgUrl="imageUrl('giftItemBg')"
+                    style="width: 90%; margin-bottom: 3px"
+                  >
+                    <!-- gift图 -->
+                    <img
+                      v-smart-img
+                      :src="gift.cover || ''"
+                      alt=""
+                      style="width: 50%; display: block"
+                      @error="(e) => handleRewardImageError(e, gift.type)"
+                    />
+                  </itemCenter>
+
+                  <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
+                    <div style="font-weight: 700">
+                      {{ showDetail(gift.type, gift.quantity) }}
+                    </div>
+                  </itemCenter>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Exchange -->
+          <div v-show="exchargeShow" style="display: flex; justify-content: center">
+            <div style="position: relative; width: 100%">
+              <!-- 背景图 -->
+              <img
+                v-smart-img
+                :src="imageUrl('longBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
+
+              <!-- 标题 -->
+              <div
+                style="
+                  position: absolute;
+                  top: 6%;
+                  left: 25%;
+                  right: 25%;
+                  height: 11%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: #fff;
+                  font-weight: 860;
+                "
+                class="topTitle"
+              >
+                Props
+              </div>
+
+              <!-- 内容 -->
+              <div
+                style="
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  padding: 30% 7% 13%;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                "
+              >
+                <!-- 碎片 -->
+                <div style="display: flex; align-items: center">
+                  <img
+                    v-smart-img
+                    :src="imageUrl('debris')"
+                    alt=""
+                    style="width: 15%; display: block; margin-right: 5px"
+                  />
+                  <div style="font-weight: 590; font-size: 1.3em">
+                    :{{ myFragment.quantity || 0 }}
+                  </div>
+                </div>
+
+                <!-- 礼品 -->
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
+                  <div
+                    v-for="(goods, goodsIndex) in exchangeGoodsList"
+                    :key="goodsIndex"
+                    style="display: flex; flex-direction: column; align-items: center"
+                  >
+                    <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                      <!-- gift图 -->
+                      <img
+                        v-smart-img
+                        :src="goods.propsGroup.activityRewardProps[0].cover"
+                        alt=""
+                        style="width: 68%; display: block; margin-bottom: 7%"
+                      />
+                    </itemCenter>
+                    <div class="needDebris">
+                      Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
+                    </div>
+
+                    <itemCenter
+                      style="width: 75%"
+                      @click="selectGood(goods)"
+                      :imgUrl="imageUrl('btBg')"
+                    >
+                      <div style="font-weight: 700" class="needDebris">Redeem</div>
+                    </itemCenter>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- Exchange -->
-        <div v-show="exchargeShow" style="display: flex; justify-content: center">
-          <div style="position: relative; width: 100%">
-            <!-- 背景图 -->
-            <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
+        <!-- 我的排名占位 -->
+        <div style="height: 25vw"></div>
 
+        <!-- 我的排名 -->
+        <itemCenter
+          style="
+            width: 100vw;
+            background-color: #311300;
+            margin-top: 10px;
+
+            position: fixed;
+            bottom: 0;
+            z-index: 999;
+          "
+          :imgUrl="imageUrl('myRankingBg')"
+          :contentStyle="`padding: 4vw;gap: 8px;`"
+        >
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              gap: 8px;
+            "
+          >
+            <!-- 排名 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+                {{ myRanking.rank || 999 }}
+              </div>
+            </div>
+
+            <!-- 头像 -->
+            <img
+              v-smart-img
+              :src="myRanking.userAvatar || ''"
+              alt=""
+              style="
+                display: block;
+                width: 20%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+              "
+              @error="handleAvatarImageError"
+            />
+
+            <!-- 名称 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+
+                color: #fff;
+                font-size: 1.1em;
+                font-weight: 860;
+                padding: 0 4px;
+
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ myRanking.userNickname || '' }}
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 1.5em; aspect-ratio: 1/1"
+            />
+            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+              {{ myRanking.quantity || 0 }}
+            </div>
+          </div>
+        </itemCenter>
+
+        <!-- 弹窗遮罩层 -->
+        <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+          <!-- help弹窗 -->
+          <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
+            <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
+          </div>
+
+          <!-- history弹窗 -->
+          <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
+            <!-- 背景图 -->
+            <img
+              v-smart-img
+              :src="imageUrl('mediumBg')"
+              alt=""
+              style="width: 100%; display: block"
+            />
             <!-- 标题 -->
             <div
               style="
                 position: absolute;
-                top: 6%;
+                top: 10%;
                 left: 25%;
                 right: 25%;
-                height: 11%;
+                height: 13%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -382,9 +600,8 @@
               "
               class="topTitle"
             >
-              Props
+              History
             </div>
-
             <!-- 内容 -->
             <div
               style="
@@ -393,405 +610,226 @@
                 bottom: 0;
                 left: 0;
                 right: 0;
-                padding: 30% 7% 13%;
+                padding: 31% 7% 15%;
                 display: flex;
                 flex-direction: column;
-                justify-content: space-around;
+                justify-content: space-between;
+                align-items: center;
               "
             >
-              <!-- 碎片 -->
-              <div style="display: flex; align-items: center">
+              <!-- 头像 -->
+              <div style="position: relative; width: 75%">
+                <!-- 头像框 -->
                 <img
                   v-smart-img
-                  :src="imageUrl('debris')"
+                  :src="imageUrl('topOneHistory')"
                   alt=""
-                  style="width: 15%; display: block; margin-right: 5px"
+                  style="width: 100%; display: block; position: relative; z-index: 1"
                 />
-                <div style="font-weight: 590; font-size: 1.3em">
-                  :{{ myFragment.quantity || 0 }}
-                </div>
-              </div>
-
-              <!-- 礼品 -->
-              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
-                <div
-                  v-for="(goods, goodsIndex) in exchangeGoodsList"
-                  :key="goodsIndex"
-                  style="display: flex; flex-direction: column; align-items: center"
-                >
-                  <itemCenter :imgUrl="imageUrl('giftItemBg')">
-                    <!-- gift图 -->
+                <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
+                  <div
+                    style="
+                      height: 100%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
                     <img
                       v-smart-img
-                      :src="goods.propsGroup.activityRewardProps[0].cover"
+                      :src="showTopOne.userAvatar || ''"
                       alt=""
-                      style="width: 68%; display: block; margin-bottom: 7%"
+                      style="
+                        width: 50%;
+                        display: block;
+                        border-radius: 50%;
+                        aspect-ratio: 1/1;
+                        object-fit: cover;
+                      "
+                      @error="handleAvatarImageError"
                     />
-                  </itemCenter>
-                  <div class="needDebris">
-                    Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                   </div>
-
-                  <itemCenter
-                    style="width: 75%"
-                    @click="selectGood(goods)"
-                    :imgUrl="imageUrl('btBg')"
-                  >
-                    <div style="font-weight: 700" class="needDebris">Redeem</div>
-                  </itemCenter>
                 </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- 我的排名占位 -->
-      <div style="height: 25vw"></div>
-
-      <!-- 我的排名 -->
-      <itemCenter
-        style="
-          width: 100vw;
-          background-color: #311300;
-          margin-top: 10px;
-
-          position: fixed;
-          bottom: 0;
-          z-index: 999;
-        "
-        :imgUrl="imageUrl('myRankingBg')"
-        :contentStyle="`padding: 4vw;gap: 8px;`"
-      >
-        <!-- 基本信息 -->
-        <div
-          style="
-            flex: 1;
-            min-width: 0;
-            align-self: stretch;
-
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            gap: 8px;
-          "
-        >
-          <!-- 排名 -->
-          <div
-            style="
-              width: auto;
-              min-width: 0;
-              align-self: stretch;
-
-              display: flex;
-              justify-content: center;
-              align-items: center;
-            "
-          >
-            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
-              {{ myRanking.rank || 999 }}
-            </div>
-          </div>
-
-          <!-- 头像 -->
-          <img
-            v-smart-img
-            :src="myRanking.userAvatar || ''"
-            alt=""
-            style="
-              display: block;
-              width: 20%;
-              aspect-ratio: 1/1;
-              border-radius: 50%;
-              object-fit: cover;
-            "
-            @error="handleAvatarImageError"
-          />
-
-          <!-- 名称 -->
-          <div
-            style="
-              flex: 1;
-              min-width: 0;
-
-              color: #fff;
-              font-size: 1.1em;
-              font-weight: 860;
-              padding: 0 4px;
-
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            "
-          >
-            {{ myRanking.userNickname || '' }}
-          </div>
-        </div>
-
-        <!-- 贡献值 -->
-        <div
-          style="
-            width: auto;
-            min-width: 0;
-            align-self: stretch;
-
-            display: flex;
-            align-items: center;
-          "
-        >
-          <img
-            v-smart-img
-            src="/src/assets/icon/coin.png"
-            alt=""
-            style="display: block; width: 1.5em; aspect-ratio: 1/1"
-          />
-          <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
-            {{ myRanking.quantity || 0 }}
-          </div>
-        </div>
-      </itemCenter>
-
-      <!-- 弹窗遮罩层 -->
-      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
-        <!-- help弹窗 -->
-        <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
-          <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
-        </div>
-
-        <!-- history弹窗 -->
-        <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
-          <!-- 背景图 -->
-          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
-          <!-- 标题 -->
-          <div
-            style="
-              position: absolute;
-              top: 10%;
-              left: 25%;
-              right: 25%;
-              height: 13%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: #fff;
-              font-weight: 860;
-            "
-            class="topTitle"
-          >
-            History
-          </div>
-          <!-- 内容 -->
-          <div
-            style="
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              padding: 31% 7% 15%;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              align-items: center;
-            "
-          >
-            <!-- 头像 -->
-            <div style="position: relative; width: 75%">
-              <!-- 头像框 -->
-              <img
-                v-smart-img
-                :src="imageUrl('topOneHistory')"
-                alt=""
-                style="width: 100%; display: block; position: relative; z-index: 1"
-              />
-              <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
+              <!-- 名字 -->
+              <div style="position: relative; width: 25%">
+                <!-- 背景图 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('nameBg')"
+                  alt=""
+                  style="width: 100%; display: block"
+                />
                 <div
-                  style="height: 100%; display: flex; justify-content: center; align-items: center"
+                  style="
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    padding-bottom: 1%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
                 >
-                  <img
-                    v-smart-img
-                    :src="showTopOne.userAvatar || ''"
-                    alt=""
+                  <div
                     style="
-                      width: 50%;
-                      display: block;
-                      border-radius: 50%;
-                      aspect-ratio: 1/1;
-                      object-fit: cover;
+                      width: 90%;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                      text-align: center;
                     "
-                    @error="handleAvatarImageError"
-                  />
+                    class="history-name"
+                  >
+                    {{ showTopOne.userNickname }}
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <!-- 名字 -->
-            <div style="position: relative; width: 25%">
-              <!-- 背景图 -->
-              <img
-                v-smart-img
-                :src="imageUrl('nameBg')"
-                alt=""
-                style="width: 100%; display: block"
-              />
+              <!-- 历史时间 -->
               <div
                 style="
-                  position: absolute;
-                  top: 0;
-                  bottom: 0;
-                  left: 0;
-                  right: 0;
-                  padding-bottom: 1%;
+                  width: 50%;
                   display: flex;
-                  justify-content: center;
+                  justify-content: space-between;
                   align-items: center;
                 "
               >
+                <img
+                  v-smart-img
+                  :src="imageUrl('timeBack')"
+                  alt=""
+                  width="13%"
+                  @click="changeHistoryIndex(1)"
+                />
                 <div
                   style="
-                    width: 90%;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
+                    flex: 1;
                     text-align: center;
+                    font-weight: 590;
+                    background-image: -webkit-linear-gradient(
+                      top,
+                      rgba(243, 183, 0, 1),
+                      rgba(255, 238, 198, 1)
+                    );
+                    background-clip: text;
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
                   "
-                  class="history-name"
+                  class="history-time"
                 >
-                  {{ showTopOne.userNickname }}
+                  {{ showTopOne.group }}
+                </div>
+                <img
+                  v-smart-img
+                  :src="imageUrl('timeNext')"
+                  alt=""
+                  width="13%"
+                  @click="changeHistoryIndex(-1)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- gifts弹窗 -->
+          <itemCenter
+            v-show="giftsShow"
+            style="margin: 20% 0"
+            @click.stop
+            :imgUrl="imageUrl('giftsBg')"
+            :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
+          >
+            <!-- 礼物单元 -->
+            <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
+              <!-- 礼物背景 -->
+              <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                <!-- 礼物 -->
+                <img
+                  v-smart-img
+                  :src="gift.giftPhoto"
+                  alt=""
+                  style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+                />
+              </itemCenter>
+
+              <!-- 礼物价值 -->
+              <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
+                <img
+                  v-smart-img
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
+                />
+                <div style="color: #fff; font-weight: 590">
+                  {{ gift.giftCandy }}
                 </div>
               </div>
             </div>
+          </itemCenter>
 
-            <!-- 历史时间 -->
+          <!-- 交易商品弹窗 -->
+          <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
+            <!-- 背景图 -->
+            <img
+              v-smart-img
+              :src="imageUrl('mediumBg')"
+              alt=""
+              style="width: 100%; display: block"
+            />
+            <!-- 标题 -->
             <div
-              style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+              style="
+                position: absolute;
+                top: 10%;
+                left: 25%;
+                right: 25%;
+                height: 13%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+                font-weight: 860;
+              "
+              class="topTitle"
+            >
+              Exchange
+            </div>
+            <!-- 内容 -->
+            <div
+              style="
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 30% 7% 15%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: center;
+              "
             >
               <img
                 v-smart-img
-                :src="imageUrl('timeBack')"
+                :src="selectedGood.propsGroup.activityRewardProps[0].cover"
                 alt=""
-                width="13%"
-                @click="changeHistoryIndex(1)"
+                style="width: 50%; display: block"
               />
-              <div
-                style="
-                  flex: 1;
-                  text-align: center;
-                  font-weight: 590;
-                  background-image: -webkit-linear-gradient(
-                    top,
-                    rgba(243, 183, 0, 1),
-                    rgba(255, 238, 198, 1)
-                  );
-                  background-clip: text;
-                  -webkit-background-clip: text;
-                  -webkit-text-fill-color: transparent;
-                "
-                class="history-time"
-              >
-                {{ showTopOne.group }}
-              </div>
+              <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
               <img
                 v-smart-img
-                :src="imageUrl('timeNext')"
+                :src="imageUrl('ConfirmBt')"
                 alt=""
-                width="13%"
-                @click="changeHistoryIndex(-1)"
+                style="width: 30%; display: block"
+                @click="exchangeSelectedGood(selectedGood.rule.id)"
               />
             </div>
           </div>
-        </div>
-
-        <!-- gifts弹窗 -->
-        <itemCenter
-          v-show="giftsShow"
-          style="margin: 20% 0"
-          @click.stop
-          :imgUrl="imageUrl('giftsBg')"
-          :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
-        >
-          <!-- 礼物单元 -->
-          <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
-            <!-- 礼物背景 -->
-            <itemCenter :imgUrl="imageUrl('giftItemBg')">
-              <!-- 礼物 -->
-              <img
-                v-smart-img
-                :src="gift.giftPhoto"
-                alt=""
-                style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-              />
-            </itemCenter>
-
-            <!-- 礼物价值 -->
-            <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
-              <img
-                v-smart-img
-                src="/src/assets/icon/coin.png"
-                alt=""
-                style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
-              />
-              <div style="color: #fff; font-weight: 590">
-                {{ gift.giftCandy }}
-              </div>
-            </div>
-          </div>
-        </itemCenter>
-
-        <!-- 交易商品弹窗 -->
-        <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
-          <!-- 背景图 -->
-          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
-          <!-- 标题 -->
-          <div
-            style="
-              position: absolute;
-              top: 10%;
-              left: 25%;
-              right: 25%;
-              height: 13%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: #fff;
-              font-weight: 860;
-            "
-            class="topTitle"
-          >
-            Exchange
-          </div>
-          <!-- 内容 -->
-          <div
-            style="
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              padding: 30% 7% 15%;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              align-items: center;
-            "
-          >
-            <img
-              v-smart-img
-              :src="selectedGood.propsGroup.activityRewardProps[0].cover"
-              alt=""
-              style="width: 50%; display: block"
-            />
-            <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
-            <img
-              v-smart-img
-              :src="imageUrl('ConfirmBt')"
-              alt=""
-              style="width: 30%; display: block"
-              @click="exchangeSelectedGood(selectedGood.rule.id)"
-            />
-          </div>
-        </div>
-      </maskLayer>
+        </maskLayer>
+      </div>
     </div>
   </div>
 </template>
@@ -818,6 +856,7 @@ import {
   exchangeGood,
 } from '@/api/weeklyStar.js'
 
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
@@ -1129,7 +1168,7 @@ const updatePageData = async () => {
 // 预加载关键图片
 const preloadCriticalImages = async () => {
   const criticalImages = [
-    // imageUrl('bg'),
+    imageUrl('bg'),
     imageUrl('history'),
     imageUrl('gifts'),
     imageUrl('dayBg'),
@@ -1219,9 +1258,6 @@ onUnmounted(() => {
   width: 100vw;
   min-height: 100vh;
   background-color: #311300;
-  background-image: var(--bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
   position: relative;
 }