From 268adf5c315bf9f24156db2e4ad889cfeb3b667c Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 25 Dec 2025 14:22:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B8=B8=E6=88=8F=E7=8E=8B=E6=89=93?=
 =?UTF-8?q?=E6=A6=9C=E9=A1=B5):=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/GamesKing/index.vue | 1081 +++++++++++++------------
 1 file changed, 563 insertions(+), 518 deletions(-)

diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
index c27fd33..9850d35 100644
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -1,574 +1,579 @@
 <!-- src/views/Activities/Game/index.vue -->
 <template>
   <div class="fullPage">
-    <!-- 新增的背景图层 -->
-    <img
-      v-smart-img
-      :src="imageUrl('bg2')"
-      alt=""
-      style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
-      @click="maskLayerShow = true"
-    />
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
 
-    <div class="bg">
+    <!-- 主要内容 -->
+    <div v-else>
+      <!-- 新增的背景图层 -->
       <img
         v-smart-img
-        :src="imageUrl('bg')"
+        :src="imageUrl('bg2')"
         alt=""
-        style="display: block; width: 100%; position: absolute; z-index: 0"
+        style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
         @click="maskLayerShow = true"
       />
 
-      <!-- 状态栏占位区域（仅在APP中显示） -->
-      <div v-if="isInAppEnvironment" style="height: 30px"></div>
-
-      <!-- 第一名 -->
-      <div style="display: flex; justify-content: center; margin-top: 11vw">
-        <TopUser
-          ranking="1"
-          :BorderImgUrl="imageUrl('top1')"
-          :avatarUrl="RankingHasTop10[0].avatar"
-          :name="RankingHasTop10[0].nickname"
-          :distributionValue="RankingHasTop10[0].quantity || ''"
-          style="width: 55%"
-          @click="viewUserInfo(RankingHasTop10[0].userId)"
-        />
-      </div>
-
-      <!-- 按钮 -->
-      <div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
-        <!-- 帮助按钮 -->
+      <div class="bg">
         <img
           v-smart-img
-          :src="imageUrl('helpBt')"
+          :src="imageUrl('bg')"
           alt=""
-          style="display: block; position: relative; width: 8vw; margin-right: 4vw"
+          style="display: block; width: 100%; position: absolute; z-index: 0"
           @click="maskLayerShow = true"
         />
-      </div>
 
-      <!-- 倒计时 -->
-      <div class="timeBox">
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeBg')">
-            <div class="timeText" style="">{{ Days }}D</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap"></div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeBg')">
-            <div class="timeText" style="">{{ Hours }}</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap">:</div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeBg')">
-            <div class="timeText" style="">{{ Minutes }}</div>
-          </itemCenter>
-        </div>
-        <div class="timeText timeGap">:</div>
-        <div style="width: 20%">
-          <itemCenter :imgUrl="imageUrl('timeBg')">
-            <div class="timeText" style="">{{ Second }}</div>
-          </itemCenter>
-        </div>
-      </div>
+        <!-- 状态栏占位区域（仅在APP中显示） -->
+        <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
-      <!-- 切换按钮 -->
-      <div>
-        <div style="display: flex; justify-content: space-around; margin-top: 2vw">
-          <!-- 排行榜按钮 -->
-          <div style="width: 40%; position: relative">
-            <img
-              v-smart-img
-              :src="imageUrl(getImgName('rankingBt'))"
-              alt=""
-              style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = true"
-            />
-            <img
-              v-smart-img
-              :src="imageUrl(getImgName('rankingBtActive'))"
-              alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = true"
-            />
+        <!-- 第一名 -->
+        <div style="display: flex; justify-content: center; margin-top: 11vw">
+          <TopUser
+            ranking="1"
+            :BorderImgUrl="imageUrl('top1')"
+            :avatarUrl="RankingHasTop10[0].avatar"
+            :name="RankingHasTop10[0].nickname"
+            :distributionValue="RankingHasTop10[0].quantity || ''"
+            style="width: 55%"
+            @click="viewUserInfo(RankingHasTop10[0].userId)"
+          />
+        </div>
+
+        <!-- 按钮 -->
+        <div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
+          <!-- 帮助按钮 -->
+          <img
+            v-smart-img
+            :src="imageUrl('helpBt')"
+            alt=""
+            style="display: block; position: relative; width: 8vw; margin-right: 4vw"
+            @click="maskLayerShow = true"
+          />
+        </div>
+
+        <!-- 倒计时 -->
+        <div class="timeBox">
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('timeBg')">
+              <div class="timeText" style="">{{ Days }}D</div>
+            </itemCenter>
           </div>
-
-          <!-- 奖励按钮 -->
-          <div style="width: 40%; position: relative">
-            <img
-              v-smart-img
-              :src="imageUrl(getImgName('rewardsBt'))"
-              alt=""
-              style="display: block; width: 100%"
-              :style="{ opacity: rankingShow ? 1 : 0 }"
-              @click="rankingShow = false"
-            />
-            <img
-              v-smart-img
-              :src="imageUrl(getImgName('rewardBtActive'))"
-              alt=""
-              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-              :style="{ opacity: rankingShow ? 0 : 1 }"
-              @click="rankingShow = false"
-            />
+          <div class="timeText timeGap"></div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('timeBg')">
+              <div class="timeText" style="">{{ Hours }}</div>
+            </itemCenter>
+          </div>
+          <div class="timeText timeGap">:</div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('timeBg')">
+              <div class="timeText" style="">{{ Minutes }}</div>
+            </itemCenter>
+          </div>
+          <div class="timeText timeGap">:</div>
+          <div style="width: 20%">
+            <itemCenter :imgUrl="imageUrl('timeBg')">
+              <div class="timeText" style="">{{ Second }}</div>
+            </itemCenter>
           </div>
         </div>
-      </div>
 
-      <!-- 展示内容 -->
-      <div>
-        <!-- Ranking -->
-        <div v-show="rankingShow" style="position: relative; width: 100%">
-          <!-- 背景图 -->
-          <!-- <div
-            class="ranking-bg"
-            :style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
-          ></div> -->
+        <!-- 切换按钮 -->
+        <div>
+          <div style="display: flex; justify-content: space-around; margin-top: 2vw">
+            <!-- 排行榜按钮 -->
+            <div style="width: 40%; position: relative" @click="rankingShow = true">
+              <img
+                v-show="!rankingShow"
+                v-smart-img
+                class="toggle-image"
+                :src="imageUrl(getImgName('rankingBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="rankingShow"
+                v-smart-img
+                class="toggle-image"
+                :src="imageUrl(getImgName('rankingBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
 
-          <div style="position: relative; z-index: 1">
-            <!-- 第2-4名 -->
-            <itemCenter
-              :imgUrl="imageUrl(getImgName('RankingMain'))"
-              :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
-            >
-              <div>
-                <!-- 第2名 -->
-                <div style="display: flex; justify-content: center">
-                  <TopUser
-                    ranking="2"
-                    :BorderImgUrl="imageUrl('top2')"
-                    :avatarUrl="RankingHasTop10[1].avatar"
-                    :name="RankingHasTop10[1].nickname"
-                    :distributionValue="RankingHasTop10[1].quantity || ''"
-                    style="width: 40%"
-                    @click="viewUserInfo(RankingHasTop10[1].userId)"
-                  />
-                </div>
-                <!-- 第3-4名 -->
-                <div style="display: flex; justify-content: space-between; margin-top: -5vw">
-                  <TopUser
-                    ranking="3"
-                    :BorderImgUrl="imageUrl('top3')"
-                    :avatarUrl="RankingHasTop10[2].avatar"
-                    :name="RankingHasTop10[2].nickname"
-                    :distributionValue="RankingHasTop10[2].quantity || ''"
-                    style="width: 38%"
-                    @click="viewUserInfo(RankingHasTop10[2].userId)"
-                  />
-                  <TopUser
-                    ranking="4"
-                    :BorderImgUrl="imageUrl('top4')"
-                    :avatarUrl="RankingHasTop10[3].avatar"
-                    :name="RankingHasTop10[3].nickname"
-                    :distributionValue="RankingHasTop10[3].quantity || ''"
-                    style="width: 38%"
-                    @click="viewUserInfo(RankingHasTop10[3].userId)"
-                  />
-                </div>
-              </div>
-            </itemCenter>
+            <!-- 奖励按钮 -->
+            <div style="width: 40%; position: relative" @click="rankingShow = false">
+              <img
+                v-show="rankingShow"
+                v-smart-img
+                class="toggle-image"
+                :src="imageUrl(getImgName('rewardsBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="!rankingShow"
+                v-smart-img
+                class="toggle-image"
+                :src="imageUrl(getImgName('rewardBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
+          </div>
+        </div>
 
-            <!-- 第5-10名 -->
-            <itemCenter
-              :imgUrl="imageUrl('RankingCenterBg')"
-              :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
-            >
-              <!-- 5-7 -->
-              <div style="width: 100%; display: flex; justify-content: space-between">
-                <TopUser
-                  v-for="topUser in RankingHasTop10.slice(4, 7)"
-                  :key="topUser.userId"
-                  ranking="5-7"
-                  :BorderImgUrl="imageUrl('top5_7')"
-                  :avatarUrl="topUser.avatar"
-                  :name="topUser.nickname"
-                  :distributionValue="topUser.quantity || ''"
-                  style="width: 30%"
-                  @click="viewUserInfo(topUser.userId)"
-                />
-              </div>
-
-              <!-- 8-10 -->
-              <div style="width: 100%; display: flex; justify-content: space-between">
-                <TopUser
-                  v-for="topUser in RankingHasTop10.slice(7, 10)"
-                  :key="topUser.userId"
-                  ranking="8-10"
-                  :BorderImgUrl="imageUrl('top8_10')"
-                  :avatarUrl="topUser.avatar"
-                  :name="topUser.nickname"
-                  :distributionValue="topUser.quantity || ''"
-                  style="width: 30%"
-                  @click="viewUserInfo(topUser.userId)"
-                />
-              </div>
-            </itemCenter>
-
-            <!-- 第11名开始 -->
-            <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
+        <!-- 展示内容 -->
+        <div>
+          <!-- Ranking -->
+          <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
+            <div style="position: relative; z-index: 1">
+              <!-- 第2-4名 -->
               <itemCenter
-                v-for="(listItem, index) in showRanking"
-                :key="listItem.userId"
-                :imgUrl="imageUrl('RankingItem')"
-                :contentStyle="`padding: 0 10%`"
-                :lazy="true"
-                :immediate="index < 2"
-                @click="viewUserInfo(listItem.userId)"
+                :imgUrl="imageUrl(getImgName('RankingMain'))"
+                :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
               >
-                <!-- 基本信息 -->
-                <div
-                  style="
-                    flex: 1;
-                    min-width: 0;
-
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-
-                    gap: 8px;
-                  "
-                >
-                  <!-- 排名 -->
-                  <div style="color: #ffe601; font-weight: 700">
-                    {{ listItem?.rank }}
+                <div>
+                  <!-- 第2名 -->
+                  <div style="display: flex; justify-content: center">
+                    <TopUser
+                      ranking="2"
+                      :BorderImgUrl="imageUrl('top2')"
+                      :avatarUrl="RankingHasTop10[1].avatar"
+                      :name="RankingHasTop10[1].nickname"
+                      :distributionValue="RankingHasTop10[1].quantity || ''"
+                      style="width: 40%"
+                      @click="viewUserInfo(RankingHasTop10[1].userId)"
+                    />
                   </div>
+                  <!-- 第3-4名 -->
+                  <div style="display: flex; justify-content: space-between; margin-top: -5vw">
+                    <TopUser
+                      ranking="3"
+                      :BorderImgUrl="imageUrl('top3')"
+                      :avatarUrl="RankingHasTop10[2].avatar"
+                      :name="RankingHasTop10[2].nickname"
+                      :distributionValue="RankingHasTop10[2].quantity || ''"
+                      style="width: 38%"
+                      @click="viewUserInfo(RankingHasTop10[2].userId)"
+                    />
+                    <TopUser
+                      ranking="4"
+                      :BorderImgUrl="imageUrl('top4')"
+                      :avatarUrl="RankingHasTop10[3].avatar"
+                      :name="RankingHasTop10[3].nickname"
+                      :distributionValue="RankingHasTop10[3].quantity || ''"
+                      style="width: 38%"
+                      @click="viewUserInfo(RankingHasTop10[3].userId)"
+                    />
+                  </div>
+                </div>
+              </itemCenter>
 
-                  <!-- 头像 -->
-                  <img
-                    v-smart-img
-                    :src="listItem?.avatar || ''"
-                    alt=""
-                    style="
-                      display: block;
-                      width: 13vw;
-                      aspect-ratio: 1/1;
-                      border-radius: 50%;
-                      object-fit: cover;
-                    "
-                    @error="handleAvatarImageError"
+              <!-- 第5-10名 -->
+              <itemCenter
+                :imgUrl="imageUrl('RankingCenterBg')"
+                :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
+              >
+                <!-- 5-7 -->
+                <div style="width: 100%; display: flex; justify-content: space-between">
+                  <TopUser
+                    v-for="topUser in RankingHasTop10.slice(4, 7)"
+                    :key="topUser.userId"
+                    ranking="5-7"
+                    :BorderImgUrl="imageUrl('top5_7')"
+                    :avatarUrl="topUser.avatar"
+                    :name="topUser.nickname"
+                    :distributionValue="topUser.quantity || ''"
+                    style="width: 30%"
+                    @click="viewUserInfo(topUser.userId)"
                   />
+                </div>
 
-                  <!-- 名称、id -->
+                <!-- 8-10 -->
+                <div style="width: 100%; display: flex; justify-content: space-between">
+                  <TopUser
+                    v-for="topUser in RankingHasTop10.slice(7, 10)"
+                    :key="topUser.userId"
+                    ranking="8-10"
+                    :BorderImgUrl="imageUrl('top8_10')"
+                    :avatarUrl="topUser.avatar"
+                    :name="topUser.nickname"
+                    :distributionValue="topUser.quantity || ''"
+                    style="width: 30%"
+                    @click="viewUserInfo(topUser.userId)"
+                  />
+                </div>
+              </itemCenter>
+
+              <!-- 第11名开始 -->
+              <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
+                <itemCenter
+                  v-for="(listItem, index) in showRanking"
+                  :key="listItem.userId"
+                  :imgUrl="imageUrl('RankingItem')"
+                  :contentStyle="`padding: 0 10%`"
+                  :lazy="true"
+                  :immediate="index < 2"
+                  @click="viewUserInfo(listItem.userId)"
+                >
+                  <!-- 基本信息 -->
                   <div
                     style="
                       flex: 1;
                       min-width: 0;
-                      align-self: stretch;
 
                       display: flex;
-                      flex-direction: column;
                       justify-content: space-around;
+                      align-items: center;
+
+                      gap: 8px;
+                    "
+                  >
+                    <!-- 排名 -->
+                    <div style="color: #ffe601; font-weight: 700">
+                      {{ listItem?.rank }}
+                    </div>
+
+                    <!-- 头像 -->
+                    <img
+                      v-smart-img
+                      :src="listItem?.avatar || ''"
+                      alt=""
+                      style="
+                        display: block;
+                        width: 13vw;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                        object-fit: cover;
+                      "
+                      @error="handleAvatarImageError"
+                    />
+
+                    <!-- 名称、id -->
+                    <div
+                      style="
+                        flex: 1;
+                        min-width: 0;
+                        align-self: stretch;
+
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                      "
+                    >
+                      <div
+                        style="
+                          color: #fff;
+                          font-weight: 860;
+                          overflow: hidden;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                        "
+                        class="UserNickname"
+                      >
+                        {{ listItem?.nickname }}
+                      </div>
+                      <div style="color: #fff; font-weight: 590" class="UserNickname">
+                        {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 贡献值 -->
+                  <div
+                    style="
+                      width: auto;
+                      min-width: 0;
+
+                      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; object-fit: cover"
+                    />
+                    <div style="color: #ffe601; font-weight: 700" class="UserNickname">
+                      {{ listItem?.quantity }}
+                    </div>
+                  </div>
+                </itemCenter>
+              </div>
+
+              <!-- 底框 -->
+              <img
+                v-smart-img
+                :src="imageUrl('RankingBottomBorder')"
+                alt=""
+                width="100%"
+                style="display: block; margin-top: -6vw; position: relative; z-index: 2"
+              />
+            </div>
+          </div>
+
+          <!-- Rewards -->
+          <div
+            v-show="!rankingShow"
+            style="display: flex; flex-direction: column; align-items: center"
+          >
+            <div
+              v-for="(rewardsTop, top) in rewardsList"
+              :key="top"
+              style="position: relative; width: 100%; margin: 10px 0"
+            >
+              <!-- 第一名奖励 -->
+              <itemCenter
+                v-if="top == 0"
+                :imgUrl="topImg[0]"
+                :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
+              >
+                <div
+                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
+                  :key="rewardIndex"
+                  style="
+                    width: 100%;
+                    min-width: 0;
+                    align-self: stretch;
+
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
+                  <div
+                    style="
+                      width: 100%;
+                      aspect-ratio: 1/1;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <!-- 奖励图片 -->
+                    <img
+                      v-smart-img
+                      :src="reward.cover || ''"
+                      alt=""
+                      style="display: block; width: 70%; object-fit: cover"
+                      @error="(e) => handleRewardImageError(e, reward.type)"
+                    />
+                  </div>
+
+                  <!-- 数值 -->
+                  <div
+                    style="
+                      width: 100%;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
                     "
                   >
                     <div
                       style="
-                        color: #fff;
-                        font-weight: 860;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
+                        min-width: 0;
+                        color: #f9e447;
+                        text-align: center;
+                        font-size: 1.2em;
+                        font-weight: 900;
+                        font-family: Atma;
                       "
-                      class="UserNickname"
                     >
-                      {{ listItem?.nickname }}
-                    </div>
-                    <div style="color: #fff; font-weight: 590" class="UserNickname">
-                      {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                      {{ showDetail(reward.type, reward) }}
                     </div>
                   </div>
                 </div>
 
-                <!-- 贡献值 -->
+                <!-- 启动时间 -->
                 <div
                   style="
-                    width: auto;
-                    min-width: 0;
+                    position: absolute;
+                    left: 3.5vw;
+                    bottom: 10vw;
+                    width: 28vw;
 
                     display: flex;
+                    justify-content: center;
                     align-items: center;
                   "
                 >
-                  <img
-                    v-smart-img
-                    src="/src/assets/icon/coin.png"
-                    alt=""
-                    style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
-                  />
-                  <div style="color: #ffe601; font-weight: 700" class="UserNickname">
-                    {{ listItem?.quantity }}
+                  <div
+                    style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900"
+                  >
+                    7Days
+                  </div>
+                </div>
+              </itemCenter>
+
+              <!-- 第2-4、5-7、8-10名奖励 -->
+              <itemCenter
+                v-else
+                :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
+                :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
+              >
+                <div
+                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
+                  :key="rewardIndex"
+                  style="width: 100%"
+                  :style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"
+                >
+                  <div
+                    style="
+                      width: 100%;
+                      aspect-ratio: 1/1;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <!-- 奖励图片 -->
+                    <img
+                      v-smart-img
+                      :src="reward.cover || ''"
+                      alt=""
+                      style="display: block; width: 70%; object-fit: cover"
+                      @error="(e) => handleRewardImageError(e, reward.type)"
+                    />
+                  </div>
+
+                  <!-- 数值 -->
+                  <div
+                    style="
+                      width: 100%;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        min-width: 0;
+                        color: #f9e447;
+                        text-align: center;
+                        font-size: 1.2em;
+                        font-weight: 900;
+                        font-family: Atma;
+                      "
+                    >
+                      {{ showDetail(reward.type, reward) }}
+                    </div>
                   </div>
                 </div>
               </itemCenter>
             </div>
+          </div>
+        </div>
 
-            <!-- 底框 -->
+        <!-- 我的排名占位 -->
+        <div style="height: 25vw"></div>
+
+        <!-- 我的排名 -->
+        <itemCenter
+          style="position: fixed; bottom: 0; z-index: 2"
+          :imgUrl="imageUrl('myRankingBg')"
+          :contentStyle="`padding: 0 8%`"
+        >
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              gap: 8px;
+            "
+          >
+            <!-- 排名 -->
+            <div style="color: #ffe601; font-weight: 700">
+              {{ myRanking.rank || 999 }}
+            </div>
+
+            <!-- 头像 -->
             <img
               v-smart-img
-              :src="imageUrl('RankingBottomBorder')"
+              :src="myRanking.avatar || ''"
               alt=""
-              width="100%"
-              style="display: block; margin-top: -6vw; position: relative; z-index: 2"
-            />
-          </div>
-        </div>
-
-        <!-- Rewards -->
-        <div
-          v-show="!rankingShow"
-          style="display: flex; flex-direction: column; align-items: center"
-        >
-          <div
-            v-for="(rewardsTop, top) in rewardsList"
-            :key="top"
-            style="position: relative; width: 100%; margin: 10px 0"
-          >
-            <!-- 第一名奖励 -->
-            <itemCenter
-              v-if="top == 0"
-              :imgUrl="topImg[0]"
-              :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
-            >
-              <div
-                v-for="(reward, rewardIndex) in rewardsTop.rewards"
-                :key="rewardIndex"
-                style="
-                  width: 100%;
-                  min-width: 0;
-                  align-self: stretch;
-
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: space-between;
-                  align-items: center;
-                "
-              >
-                <div
-                  style="
-                    width: 100%;
-                    aspect-ratio: 1/1;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <!-- 奖励图片 -->
-                  <img
-                    v-smart-img
-                    :src="reward.cover || ''"
-                    alt=""
-                    style="display: block; width: 70%; object-fit: cover"
-                    @error="(e) => handleRewardImageError(e, reward.type)"
-                  />
-                </div>
-
-                <!-- 数值 -->
-                <div
-                  style="
-                    width: 100%;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <div
-                    style="
-                      min-width: 0;
-                      color: #f9e447;
-                      text-align: center;
-                      font-size: 1.2em;
-                      font-weight: 900;
-                      font-family: Atma;
-                    "
-                  >
-                    {{ showDetail(reward.type, reward) }}
-                  </div>
-                </div>
-              </div>
-
-              <!-- 启动时间 -->
-              <div
-                style="
-                  position: absolute;
-                  left: 3.5vw;
-                  bottom: 10vw;
-                  width: 28vw;
-
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                <div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
-                  7Days
-                </div>
-              </div>
-            </itemCenter>
-
-            <!-- 第2-4、5-7、8-10名奖励 -->
-            <itemCenter
-              v-else
-              :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
-              :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
-            >
-              <div
-                v-for="(reward, rewardIndex) in rewardsTop.rewards"
-                :key="rewardIndex"
-                style="width: 100%"
-                :style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"
-              >
-                <div
-                  style="
-                    width: 100%;
-                    aspect-ratio: 1/1;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <!-- 奖励图片 -->
-                  <img
-                    v-smart-img
-                    :src="reward.cover || ''"
-                    alt=""
-                    style="display: block; width: 70%; object-fit: cover"
-                    @error="(e) => handleRewardImageError(e, reward.type)"
-                  />
-                </div>
-
-                <!-- 数值 -->
-                <div
-                  style="
-                    width: 100%;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <div
-                    style="
-                      min-width: 0;
-                      color: #f9e447;
-                      text-align: center;
-                      font-size: 1.2em;
-                      font-weight: 900;
-                      font-family: Atma;
-                    "
-                  >
-                    {{ showDetail(reward.type, reward) }}
-                  </div>
-                </div>
-              </div>
-            </itemCenter>
-          </div>
-        </div>
-      </div>
-
-      <!-- 我的排名占位 -->
-      <div style="height: 25vw"></div>
-
-      <!-- 我的排名 -->
-      <itemCenter
-        style="position: fixed; bottom: 0; z-index: 2"
-        :imgUrl="imageUrl('myRankingBg')"
-        :contentStyle="`padding: 0 8%`"
-      >
-        <!-- 基本信息 -->
-        <div
-          style="
-            flex: 1;
-            min-width: 0;
-
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            gap: 8px;
-          "
-        >
-          <!-- 排名 -->
-          <div style="color: #ffe601; font-weight: 700">
-            {{ myRanking.rank || 999 }}
-          </div>
-
-          <!-- 头像 -->
-          <img
-            v-smart-img
-            :src="myRanking.avatar || ''"
-            alt=""
-            style="
-              display: block;
-              width: 15vw;
-              aspect-ratio: 1/1;
-              border-radius: 50%;
-              object-fit: cover;
-            "
-            @error="handleAvatarImageError"
-          />
-
-          <!-- 名称 -->
-          <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
-            <div
               style="
-                color: #fff;
-                font-weight: 860;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
+                display: block;
+                width: 15vw;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
               "
-              class="UserNickname"
-            >
-              {{ myRanking.nickname }}
+              @error="handleAvatarImageError"
+            />
+
+            <!-- 名称 -->
+            <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+              <div
+                style="
+                  color: #fff;
+                  font-weight: 860;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+                class="UserNickname"
+              >
+                {{ myRanking.nickname }}
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 贡献值 -->
-        <div
-          style="
-            width: auto;
-            min-width: 0;
+          <!-- 贡献值 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
 
-            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; object-fit: cover"
-          />
-          <div style="color: #ffe601; font-weight: 700">
-            {{ myRanking.quantity || 0 }}
-          </div>
-        </div>
-      </itemCenter>
-
-      <!-- 弹窗遮罩层 -->
-      <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
-        <!-- help弹窗 -->
-        <div style="margin: 10vh 0 5vh" @click.stop>
-          <itemCenter
-            :imgUrl="imageUrl(getImgName('helpBg'))"
-            :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
+              display: flex;
+              align-items: center;
+            "
           >
             <img
               v-smart-img
-              :src="imageUrl(getImgName('helpInfo'))"
+              src="/src/assets/icon/coin.png"
               alt=""
-              style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
             />
-          </itemCenter>
-        </div>
-      </maskLayer>
+            <div style="color: #ffe601; font-weight: 700">
+              {{ myRanking.quantity || 0 }}
+            </div>
+          </div>
+        </itemCenter>
+
+        <!-- 弹窗遮罩层 -->
+        <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+          <!-- help弹窗 -->
+          <div style="margin: 10vh 0 5vh" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl(getImgName('helpBg'))"
+              :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
+            >
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('helpInfo'))"
+                alt=""
+                style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+              />
+            </itemCenter>
+          </div>
+        </maskLayer>
+      </div>
     </div>
   </div>
 </template>
@@ -591,6 +596,9 @@ import maskLayer from '@/components/MaskLayer.vue'
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const maskLayerShow = ref(false) //帮助模块
 
+// 预加载状态
+const isLoading = ref(true)
+
 const langStore = useLangStore()
 // 当前语言类型
 const currentLangType = computed(() => {
@@ -741,13 +749,15 @@ const getRewardsAndGifts = async () => {
 }
 
 // 刷新页面数据
-const initData = () => {
-  getListAndMy() // 获取排行榜和我的排名
-  getRewardsAndGifts() //获取本周的礼物和奖励列表
+const initData = async () => {
+  await Promise.all([
+    getListAndMy(), // 获取排行榜和我的排名
+    getRewardsAndGifts(), //获取本周的礼物和奖励列表
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bg'),
     imageUrl('bg2'),
@@ -803,9 +813,22 @@ const preloadCriticalImages = () => {
   ]
 
   if (currentLangType.value == 'en') {
-    preloadImages(criticalImages)
+    await preloadImages(criticalImages)
   } else if (currentLangType.value == 'ar') {
-    preloadImages(criticalImages_ar)
+    await preloadImages(criticalImages_ar)
+  }
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
   }
 }
 
@@ -813,8 +836,7 @@ const preloadCriticalImages = () => {
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    initData() //初始化数据
-    preloadCriticalImages() //预加载关键图片
+    completePreloading() // 完成预加载
   })
 }
 
@@ -850,17 +872,6 @@ onUnmounted(() => {
   z-index: 1;
 }
 
-.ranking-bg {
-  background-color: #400000;
-  background-image: var(--ranking-bg-url);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-
-  position: absolute;
-  inset: 10vw 2% 1vw;
-  z-index: 1;
-}
-
 .timeText {
   color: #fff;
   font-weight: 590;
@@ -903,6 +914,40 @@ onUnmounted(() => {
   margin-top: 10vw;
 }
 
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+.toggle-image {
+  transition: opacity 0.3s ease-in-out;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;