From 46238542f26bf209fdfffe836080fc2d7bbcf997 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 25 Dec 2025 14:33:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BD=E7=8E=8B=E7=9A=87=E5=90=8E?=
 =?UTF-8?q?=E6=89=93=E6=A6=9C=E9=A1=B5):=20=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=EF=BC=8C=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=8C=89=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/KingAndQueen/TopList.vue | 1350 +++++++++++---------
 1 file changed, 714 insertions(+), 636 deletions(-)

diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index aa7b317..4c29bdc 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -1,218 +1,310 @@
 <!-- src/views/Ranking/KingAndQueen/TopList.vue -->
 <template>
   <div class="fullPage">
-    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
-      <!-- 状态栏占位区域（仅在APP中显示） -->
-      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p style="color: #fff">{{ $t('loading') }}...</p>
+    </div>
 
-      <!-- 帮助按钮 -->
-      <img
-        v-smart-img
-        :src="imageUrl('help')"
-        alt=""
-        style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
-        @click="helpInfoShow = true"
-      />
+    <!-- 主要内容 -->
+    <div v-else>
+      <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+        <!-- 状态栏占位区域（仅在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"
-      />
-
-      <!-- 每周榜首 -->
-      <div style="display: flex; flex-direction: column; align-items: center">
-        <!-- 主标题 -->
-        <img v-smart-img :src="imageUrl('listTitle')" alt="" style="width: 90%" />
-        <!-- 榜首 -->
-        <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
-          <div
-            style="width: 40%"
-            v-for="(topUser, index) in listTop"
-            :key="index"
-            @click="viewUserInfo(topUser.userInfo.userId)"
-          >
-            <div
-              style="
-                position: relative;
-                width: 100%;
-                min-height: max-content;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
-            >
-              <!-- 头像框 -->
-              <img v-smart-img :src="topUser.Frame" alt="" style="width: 100%; z-index: 1" />
-              <!-- 头像 -->
-              <div
-                style="
-                  position: absolute;
-                  left: 0;
-                  right: 0;
-                  top: 0;
-                  bottom: 0;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  z-index: 0;
-                "
-              >
-                <img
-                  v-smart-img
-                  v-if="topUser.userInfo.userAvatar"
-                  :src="topUser.userInfo.userAvatar || ''"
-                  alt=""
-                  width="70%"
-                  style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
-                  @click="viewUserInfo(topUser.userInfo.userId)"
-                />
-              </div>
-              <div
-                style="
-                  height: 10%;
-                  width: 50%;
-                  position: absolute;
-                  z-index: 2;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-                :style="{ bottom: topUser.type == 'topKing' ? '9.3%' : '7%' }"
-              >
-                <div
-                  style="
-                    color: #fff;
-                    font-size: 0.8em;
-                    font-weight: 860;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  {{ topUser.userInfo.userNickname }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 刷新倒计时 -->
-      <div style="display: flex; justify-content: center; margin-top: 20px">
-        <!-- 天数 -->
-        <itemCenter :imgUrl="imageUrl('dayBg')" style="width: 12vw; margin-right: 10px">
-          <div class="time">{{ Days }}D</div>
-        </itemCenter>
-
-        <!-- 当天时间倒计时 -->
-        <itemCenter :imgUrl="imageUrl('timeBg')" style="width: 28.5%">
-          <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
-        </itemCenter>
-      </div>
-
-      <!-- rewards按钮 -->
-      <div style="display: flex; justify-content: flex-end; margin-top: -8%">
+        <!-- 帮助按钮 -->
         <img
           v-smart-img
-          :src="imageUrl('rewards')"
+          :src="imageUrl('help')"
           alt=""
-          style="width: 20%"
-          @click="rewardsShow = true"
+          style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+          @click="helpInfoShow = true"
         />
-      </div>
 
-      <!-- 每周礼物 -->
-      <div
-        style="display: flex; justify-content: center; width: 108vw; position: relative; left: -4vw"
-      >
-        <itemCenter :imgUrl="imageUrl('eventGifts')">
-          <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
+        <!-- history按钮 -->
+        <img
+          v-smart-img
+          :src="imageUrl('history')"
+          alt=""
+          style="width: 20%; margin-top: 20px"
+          @click="historyShow = true"
+        />
+
+        <!-- 每周榜首 -->
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <!-- 主标题 -->
+          <img v-smart-img :src="imageUrl('listTitle')" alt="" style="width: 90%" />
+          <!-- 榜首 -->
+          <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
             <div
-              v-for="(gift, index) in gifts"
+              style="width: 40%"
+              v-for="(topUser, index) in listTop"
               :key="index"
-              style="width: 30%; display: flex; flex-direction: column"
+              @click="viewUserInfo(topUser.userInfo.userId)"
             >
-              <itemCenter :imgUrl="imageUrl('gift')">
-                <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
-              </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"
-                />
-                <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
-                  {{ gift.giftCandy }}
+              <div
+                style="
+                  position: relative;
+                  width: 100%;
+                  min-height: max-content;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
+                <!-- 头像框 -->
+                <img v-smart-img :src="topUser.Frame" alt="" style="width: 100%; z-index: 1" />
+                <!-- 头像 -->
+                <div
+                  style="
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    z-index: 0;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    v-if="topUser.userInfo.userAvatar"
+                    :src="topUser.userInfo.userAvatar || ''"
+                    alt=""
+                    width="70%"
+                    style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+                    @click="viewUserInfo(topUser.userInfo.userId)"
+                  />
+                </div>
+                <div
+                  style="
+                    height: 10%;
+                    width: 50%;
+                    position: absolute;
+                    z-index: 2;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  :style="{ bottom: topUser.type == 'topKing' ? '9.3%' : '7%' }"
+                >
+                  <div
+                    style="
+                      color: #fff;
+                      font-size: 0.8em;
+                      font-weight: 860;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ topUser.userInfo.userNickname }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </itemCenter>
-      </div>
-
-      <!-- 排行榜模块 -->
-      <div style="width: 100vw">
-        <!-- 排行榜切换按钮 -->
-        <div style="width: 100%">
-          <div
-            v-show="visibleKingList"
-            style="width: 100%; display: flex; justify-content: space-around"
-          >
-            <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
-            <img
-              v-smart-img
-              :src="imageUrl('queenBt')"
-              alt=""
-              style="width: 40%"
-              @click="visibleKingList = false"
-            />
-          </div>
-
-          <div
-            v-show="!visibleKingList"
-            style="width: 100%; display: flex; justify-content: space-around"
-          >
-            <img
-              v-smart-img
-              :src="imageUrl('kingBt')"
-              alt=""
-              style="width: 40%"
-              @click="visibleKingList = true"
-            />
-            <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
-          </div>
         </div>
 
-        <!-- 排行榜 -->
-        <div style="width: 100%; width: 108vw; position: relative; left: -4vw">
-          <borderImg title="Ranking">
-            <itemCenter
-              :imgUrl="imageUrl('border-item-user')"
-              style="margin: -2px 0"
-              :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
-              v-for="(listItem, index) in topList"
-              :key="index"
-              @click="viewUserInfo(listItem.userId)"
-            >
-              <!-- 基本信息 -->
-              <div
-                style="
-                  flex: 1;
-                  min-width: 0;
-                  align-self: stretch;
+        <!-- 刷新倒计时 -->
+        <div style="display: flex; justify-content: center; margin-top: 20px">
+          <!-- 天数 -->
+          <itemCenter :imgUrl="imageUrl('dayBg')" style="width: 12vw; margin-right: 10px">
+            <div class="time">{{ Days }}D</div>
+          </itemCenter>
 
-                  display: flex;
-                  justify-content: space-around;
-                  align-items: center;
-                  gap: 8px;
-                "
+          <!-- 当天时间倒计时 -->
+          <itemCenter :imgUrl="imageUrl('timeBg')" style="width: 28.5%">
+            <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
+          </itemCenter>
+        </div>
+
+        <!-- rewards按钮 -->
+        <div style="display: flex; justify-content: flex-end; margin-top: -8%">
+          <img
+            v-smart-img
+            :src="imageUrl('rewards')"
+            alt=""
+            style="width: 20%"
+            @click="rewardsShow = true"
+          />
+        </div>
+
+        <!-- 每周礼物 -->
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            width: 108vw;
+            position: relative;
+            left: -4vw;
+          "
+        >
+          <itemCenter :imgUrl="imageUrl('eventGifts')">
+            <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
+              <div
+                v-for="(gift, index) in gifts"
+                :key="index"
+                style="width: 30%; display: flex; flex-direction: column"
               >
-                <!-- 排名 -->
+                <itemCenter :imgUrl="imageUrl('gift')">
+                  <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
+                </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"
+                  />
+                  <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
+                    {{ gift.giftCandy }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 排行榜模块 -->
+        <div style="width: 100vw">
+          <!-- 排行榜切换按钮 -->
+          <div style="width: 100%">
+            <div
+              v-show="visibleKingList"
+              style="width: 100%; display: flex; justify-content: space-around"
+            >
+              <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
+              <img
+                v-smart-img
+                :src="imageUrl('queenBt')"
+                alt=""
+                style="width: 40%"
+                @click="visibleKingList = false"
+              />
+            </div>
+
+            <div
+              v-show="!visibleKingList"
+              style="width: 100%; display: flex; justify-content: space-around"
+            >
+              <img
+                v-smart-img
+                :src="imageUrl('kingBt')"
+                alt=""
+                style="width: 40%"
+                @click="visibleKingList = true"
+              />
+              <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
+            </div>
+          </div>
+
+          <!-- 排行榜 -->
+          <div style="width: 100%; width: 108vw; position: relative; left: -4vw">
+            <borderImg title="Ranking">
+              <itemCenter
+                :imgUrl="imageUrl('border-item-user')"
+                style="margin: -2px 0"
+                :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
+                v-for="(listItem, index) in topList"
+                :key="index"
+                @click="viewUserInfo(listItem.userId)"
+              >
+                <!-- 基本信息 -->
+                <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-weight: 700">{{ listItem.rank }}</div>
+                  </div>
+
+                  <!-- 头像 -->
+                  <div
+                    style="
+                      width: 25%;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      background: linear-gradient(
+                        to bottom,
+                        rgba(255, 224, 60, 1),
+                        rgba(255, 189, 19, 1)
+                      );
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      :src="listItem.userAvatar || ''"
+                      alt=""
+                      style="
+                        display: block;
+                        width: 90%;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                        object-fit: cover;
+                      "
+                      @error="handleAvatarImageError"
+                    />
+                  </div>
+
+                  <!-- 名称 -->
+                  <div
+                    style="
+                      flex: 1;
+                      min-width: 0;
+                      padding: 0 2px;
+
+                      display: flex;
+                      flex-direction: column;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 100%;
+
+                        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;
@@ -220,416 +312,420 @@
                     align-self: stretch;
 
                     display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
-                </div>
-
-                <!-- 头像 -->
-                <div
-                  style="
-                    width: 25%;
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                    background: linear-gradient(
-                      to bottom,
-                      rgba(255, 224, 60, 1),
-                      rgba(255, 189, 19, 1)
-                    );
-
-                    display: flex;
-                    justify-content: center;
                     align-items: center;
                   "
                 >
                   <img
                     v-smart-img
-                    :src="listItem.userAvatar || ''"
+                    src="/src/assets/icon/coin.png"
                     alt=""
-                    style="
-                      display: block;
-                      width: 90%;
-                      aspect-ratio: 1/1;
-                      border-radius: 50%;
-                      object-fit: cover;
-                    "
-                    @error="handleAvatarImageError"
+                    style="display: block; width: 1.3em; aspect-ratio: 1/1"
                   />
-                </div>
-
-                <!-- 名称 -->
-                <div
-                  style="
-                    flex: 1;
-                    min-width: 0;
-                    padding: 0 2px;
-
-                    display: flex;
-                    flex-direction: column;
-                  "
-                >
-                  <div
-                    style="
-                      width: 100%;
-
-                      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 style="color: #edb247; font-weight: 700">
+                    {{ listItem.quantity }}
                   </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="kingListLoadmore" v-show="showKingLoading && visibleKingList"></div>
-            <!-- 触发加载功能 -->
-            <div ref="queenListloadmore" v-show="showQueenLoading && !visibleKingList"></div>
-          </borderImg>
-        </div>
-      </div>
-    </div>
-
-    <!-- 弹窗遮罩层 -->
-    <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: 108vw; position: relative; left: -4vw"
-        />
-      </div>
-
-      <!-- history弹窗 -->
-      <div v-show="historyShow" style="margin: 20% 0" @click.stop>
-        <div style="width: 108vw; position: relative; left: -4vw">
-          <borderImg title="History">
-            <div
-              style="
-                background-size: 100% 100%;
-                min-height: 20px;
-                margin: -10px 0;
-                padding: 10px 10%;
-              "
-              :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
-            >
-              <!-- 内容 -->
-              <div
-                style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
-              >
-                <div
-                  style="width: 40%"
-                  v-for="(topOne, topIndex) in showTopOne.top"
-                  :key="topIndex"
-                >
-                  <div
-                    style="
-                      position: relative;
-                      width: 100%;
-                      min-height: max-content;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                    "
-                  >
-                    <!-- 头像框 -->
-                    <img v-smart-img :src="topOne.Frame" alt="" style="width: 100%; z-index: 1" />
-                    <!-- 头像 -->
-                    <div
-                      style="
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        top: 0;
-                        bottom: 0;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        z-index: 0;
-                      "
-                    >
-                      <img
-                        v-smart-img
-                        :src="topOne.userInfo.userAvatar"
-                        alt=""
-                        width="70%"
-                        style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
-                      />
-                    </div>
-                    <div
-                      style="
-                        height: 10%;
-                        width: 50%;
-                        color: #fff;
-                        position: absolute;
-                        z-index: 2;
-
-                        font-weight: 860;
-                        font-size: 12px;
-
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                      "
-                      :style="{ bottom: topOne.type == 'topKing' ? '9.3%' : '7%' }"
-                    >
-                      <div
-                        style="
-                          color: #fff;
-                          font-size: 0.7em;
-                          font-weight: 860;
-                          overflow: hidden;
-                          white-space: nowrap;
-                          text-overflow: ellipsis;
-                        "
-                      >
-                        {{ topOne.userInfo.userNickname }}
-                      </div>
-                    </div>
-                  </div>
-                  <div style="color: #fff; font-weight: 590; text-align: center">
-                    {{ $t('user_id_prefix') }} {{ topOne.userInfo.account }}
-                  </div>
-                </div>
-              </div>
-              <div
-                style="
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  margin-top: 20px;
-                "
-              >
-                <img
-                  v-smart-img
-                  :src="imageUrl('timeBack')"
-                  alt=""
-                  width="18px"
-                  height="18px"
-                  @click="changeHistoryIndex(1)"
-                />
-                <div
-                  style="
-                    width: 40%;
-                    text-align: center;
-                    font-size: 14px;
-                    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;
-                  "
-                >
-                  {{ showTopOne.group }}
-                </div>
-                <img
-                  v-smart-img
-                  :src="imageUrl('timeNext')"
-                  alt=""
-                  width="18px"
-                  height="18px"
-                  @click="changeHistoryIndex(-1)"
-                />
-              </div>
-            </div>
-          </borderImg>
+              </itemCenter>
+              <!-- 触发加载功能 -->
+              <div ref="kingListLoadmore" v-show="showKingLoading && visibleKingList"></div>
+              <!-- 触发加载功能 -->
+              <div ref="queenListloadmore" v-show="showQueenLoading && !visibleKingList"></div>
+            </borderImg>
+          </div>
         </div>
       </div>
 
-      <!-- rewards弹窗 -->
-      <div v-show="rewardsShow" style="padding: 20% 0" @click.stop>
-        <div style="width: 108vw; position: relative; left: -4vw">
-          <!-- 取消按钮 -->
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- help弹窗 -->
+        <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
           <img
             v-smart-img
-            :src="imageUrl('cancel')"
+            :src="imageUrl('helpInfo')"
             alt=""
-            style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
-            @click="closedPopup"
+            style="width: 108vw; position: relative; left: -4vw"
           />
-          <div style="width: 100%">
-            <borderImg title="Rewards">
+        </div>
+
+        <!-- history弹窗 -->
+        <div v-show="historyShow" style="margin: 20% 0" @click.stop>
+          <div style="width: 108vw; position: relative; left: -4vw">
+            <borderImg title="History">
               <div
                 style="
                   background-size: 100% 100%;
                   min-height: 20px;
-                  margin: -20px 0;
-                  padding: 20px 10%;
+                  margin: -10px 0;
+                  padding: 10px 10%;
                 "
                 :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
               >
-                <!-- 奖励榜切换按钮 -->
-                <div style="width: 100%">
+                <!-- 内容 -->
+                <div
+                  style="
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    margin-top: 16px;
+                  "
+                >
                   <div
-                    v-show="visibleKingRewards"
-                    style="width: 100%; display: flex; justify-content: space-around"
+                    style="width: 40%"
+                    v-for="(topOne, topIndex) in showTopOne.top"
+                    :key="topIndex"
                   >
-                    <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
-                    <img
-                      v-smart-img
-                      :src="imageUrl('queenBt')"
-                      alt=""
-                      style="width: 40%"
-                      @click="visibleKingRewards = false"
-                    />
-                  </div>
-                  <div
-                    v-show="!visibleKingRewards"
-                    style="width: 100%; display: flex; justify-content: space-around"
-                  >
-                    <img
-                      v-smart-img
-                      :src="imageUrl('kingBt')"
-                      alt=""
-                      style="width: 40%"
-                      @click="visibleKingRewards = true"
-                    />
-                    <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
-                  </div>
-                </div>
-
-                <!-- 奖励榜 -->
-                <div v-for="(rewardsTop, top) in rewardsList" :key="top">
-                  <div
-                    style="display: flex; flex-direction: column; align-items: center"
-                    v-if="rewardsTop.rewards.length > 0"
-                  >
-                    <img
-                      v-smart-img
-                      :src="topImg[Number(rewardsTop.rankRange) - 1]"
-                      alt=""
-                      style="width: 40%; margin: 24px 0"
-                    />
                     <div
                       style="
+                        position: relative;
                         width: 100%;
-                        display: grid;
-                        grid-template-columns: repeat(3, 1fr);
-                        gap: 3%;
-                        margin-bottom: 3%;
+                        min-height: max-content;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
                       "
                     >
+                      <!-- 头像框 -->
+                      <img v-smart-img :src="topOne.Frame" alt="" style="width: 100%; z-index: 1" />
+                      <!-- 头像 -->
                       <div
-                        v-for="(reward, rewardIndex) in rewardsTop.rewards"
-                        :key="rewardIndex"
-                        style="width: 100%"
+                        style="
+                          position: absolute;
+                          left: 0;
+                          right: 0;
+                          top: 0;
+                          bottom: 0;
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+                          z-index: 0;
+                        "
                       >
-                        <itemCenter :imgUrl="imageUrl('gift')">
-                          <img
-                            v-smart-img
-                            :src="reward.cover || ''"
-                            alt=""
-                            width="50%"
-                            style="aspect-ratio: 1/1"
-                            @error="(e) => handleRewardImageError(e, reward.type)"
-                          />
-                        </itemCenter>
+                        <img
+                          v-smart-img
+                          :src="topOne.userInfo.userAvatar"
+                          alt=""
+                          width="70%"
+                          style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+                        />
+                      </div>
+                      <div
+                        style="
+                          height: 10%;
+                          width: 50%;
+                          color: #fff;
+                          position: absolute;
+                          z-index: 2;
 
+                          font-weight: 860;
+                          font-size: 12px;
+
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+                        "
+                        :style="{ bottom: topOne.type == 'topKing' ? '9.3%' : '7%' }"
+                      >
                         <div
                           style="
-                            color: rgba(255, 255, 255, 1);
-                            font-weight: 590;
-                            text-align: center;
+                            color: #fff;
+                            font-size: 0.7em;
+                            font-weight: 860;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
                           "
                         >
-                          {{ showDetail(reward.type, reward) }}
+                          {{ topOne.userInfo.userNickname }}
                         </div>
                       </div>
                     </div>
+                    <div style="color: #fff; font-weight: 590; text-align: center">
+                      {{ $t('user_id_prefix') }} {{ topOne.userInfo.account }}
+                    </div>
                   </div>
                 </div>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-top: 20px;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    :src="imageUrl('timeBack')"
+                    alt=""
+                    width="18px"
+                    height="18px"
+                    @click="changeHistoryIndex(1)"
+                  />
+                  <div
+                    style="
+                      width: 40%;
+                      text-align: center;
+                      font-size: 14px;
+                      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;
+                    "
+                  >
+                    {{ showTopOne.group }}
+                  </div>
+                  <img
+                    v-smart-img
+                    :src="imageUrl('timeNext')"
+                    alt=""
+                    width="18px"
+                    height="18px"
+                    @click="changeHistoryIndex(-1)"
+                  />
+                </div>
               </div>
             </borderImg>
           </div>
         </div>
-      </div>
-    </maskLayer>
 
-    <!-- 我的排名占位 -->
-    <div style="height: 25vw"></div>
+        <!-- rewards弹窗 -->
+        <div v-show="rewardsShow" style="padding: 20% 0" @click.stop>
+          <div style="width: 108vw; position: relative; left: -4vw">
+            <!-- 取消按钮 -->
+            <img
+              v-smart-img
+              :src="imageUrl('cancel')"
+              alt=""
+              style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
+              @click="closedPopup"
+            />
+            <div style="width: 100%">
+              <borderImg title="Rewards">
+                <div
+                  style="
+                    background-size: 100% 100%;
+                    min-height: 20px;
+                    margin: -20px 0;
+                    padding: 20px 10%;
+                  "
+                  :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
+                >
+                  <!-- 奖励榜切换按钮 -->
+                  <div style="width: 100%">
+                    <div
+                      v-show="visibleKingRewards"
+                      style="width: 100%; display: flex; justify-content: space-around"
+                    >
+                      <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
+                      <img
+                        v-smart-img
+                        :src="imageUrl('queenBt')"
+                        alt=""
+                        style="width: 40%"
+                        @click="visibleKingRewards = false"
+                      />
+                    </div>
+                    <div
+                      v-show="!visibleKingRewards"
+                      style="width: 100%; display: flex; justify-content: space-around"
+                    >
+                      <img
+                        v-smart-img
+                        :src="imageUrl('kingBt')"
+                        alt=""
+                        style="width: 40%"
+                        @click="visibleKingRewards = true"
+                      />
+                      <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
+                    </div>
+                  </div>
 
-    <!-- 我的排名 -->
-    <div
-      style="
-        position: fixed;
-        bottom: 0;
-        width: 100vw;
-        background-color: rgba(77, 30, 22, 1);
-        display: flex;
-        justify-content: center;
-        margin-top: 10px;
-      "
-    >
-      <img
-        v-smart-img
-        :src="imageUrl('myRankingBg')"
-        alt=""
-        style="width: calc(100% - 1px); display: block"
-      />
+                  <!-- 奖励榜 -->
+                  <div v-for="(rewardsTop, top) in rewardsList" :key="top">
+                    <div
+                      style="display: flex; flex-direction: column; align-items: center"
+                      v-if="rewardsTop.rewards.length > 0"
+                    >
+                      <img
+                        v-smart-img
+                        :src="topImg[Number(rewardsTop.rankRange) - 1]"
+                        alt=""
+                        style="width: 40%; margin: 24px 0"
+                      />
+                      <div
+                        style="
+                          width: 100%;
+                          display: grid;
+                          grid-template-columns: repeat(3, 1fr);
+                          gap: 3%;
+                          margin-bottom: 3%;
+                        "
+                      >
+                        <div
+                          v-for="(reward, rewardIndex) in rewardsTop.rewards"
+                          :key="rewardIndex"
+                          style="width: 100%"
+                        >
+                          <itemCenter :imgUrl="imageUrl('gift')">
+                            <img
+                              v-smart-img
+                              :src="reward.cover || ''"
+                              alt=""
+                              width="50%"
+                              style="aspect-ratio: 1/1"
+                              @error="(e) => handleRewardImageError(e, reward.type)"
+                            />
+                          </itemCenter>
 
+                          <div
+                            style="
+                              color: rgba(255, 255, 255, 1);
+                              font-weight: 590;
+                              text-align: center;
+                            "
+                          >
+                            {{ showDetail(reward.type, reward) }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </borderImg>
+            </div>
+          </div>
+        </div>
+      </maskLayer>
+
+      <!-- 我的排名占位 -->
+      <div style="height: 25vw"></div>
+
+      <!-- 我的排名 -->
       <div
         style="
-          position: absolute;
-          inset: 0;
-
-          padding: 2vw 4vw 0;
-
+          position: fixed;
+          bottom: 0;
+          width: 100vw;
+          background-color: rgba(77, 30, 22, 1);
           display: flex;
-          align-items: center;
-          justify-content: space-around;
-          gap: 4px;
+          justify-content: center;
+          margin-top: 10px;
         "
       >
-        <!-- 基本信息 -->
+        <img
+          v-smart-img
+          :src="imageUrl('myRankingBg')"
+          alt=""
+          style="width: calc(100% - 1px); display: block"
+        />
+
         <div
           style="
-            flex: 1;
-            min-width: 0;
-            align-self: stretch;
+            position: absolute;
+            inset: 0;
+
+            padding: 2vw 4vw 0;
 
             display: flex;
             align-items: center;
-            gap: 8px;
+            justify-content: space-around;
+            gap: 4px;
           "
         >
-          <!-- 排名 -->
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              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.userSex == 1 ? myRanking.wealthRank : myRanking.charmRank) || 999 }}
+              </div>
+            </div>
+
+            <!-- 头像 -->
+            <div
+              style="
+                width: 22%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                background: linear-gradient(
+                  to bottom,
+                  rgba(255, 224, 60, 1),
+                  rgba(255, 189, 19, 1)
+                );
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img
+                v-smart-img
+                :src="myRanking.userAvatar || ''"
+                alt=""
+                style="
+                  display: block;
+                  width: 90%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  object-fit: cover;
+                "
+                @error="handleAvatarImageError"
+              />
+            </div>
+
+            <!-- 名称 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                font-weight: 700;
+                padding: 0 4px;
+
+                display: flex;
+                flex-direction: column;
+              "
+            >
+              <div
+                style="
+                  color: #fff;
+                  font-size: 1.1em;
+                  font-weight: 860;
+
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+              >
+                {{ myRanking.userNickname }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
           <div
             style="
               width: auto;
@@ -637,97 +733,25 @@
               align-self: stretch;
 
               display: flex;
-              justify-content: center;
-              align-items: center;
-            "
-          >
-            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
-              {{ (myRanking.userSex == 1 ? myRanking.wealthRank : myRanking.charmRank) || 999 }}
-            </div>
-          </div>
-
-          <!-- 头像 -->
-          <div
-            style="
-              width: 22%;
-              aspect-ratio: 1/1;
-              border-radius: 50%;
-              background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
-
-              display: flex;
-              justify-content: center;
               align-items: center;
             "
           >
             <img
               v-smart-img
-              :src="myRanking.userAvatar || ''"
+              src="/src/assets/icon/coin.png"
               alt=""
-              style="
-                display: block;
-                width: 90%;
-                aspect-ratio: 1/1;
-                border-radius: 50%;
-                object-fit: cover;
-              "
-              @error="handleAvatarImageError"
+              style="display: block; width: 1.5em; aspect-ratio: 1/1"
             />
-          </div>
-
-          <!-- 名称 -->
-          <div
-            style="
-              flex: 1;
-              min-width: 0;
-              font-weight: 700;
-              padding: 0 4px;
-
-              display: flex;
-              flex-direction: column;
-            "
-          >
+            <!-- 1:男,0:女 -->
             <div
-              style="
-                color: #fff;
-                font-size: 1.1em;
-                font-weight: 860;
-
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              "
+              v-if="myRanking.userSex == 1"
+              style="color: #edb247; font-size: 1.1em; font-weight: 700"
             >
-              {{ myRanking.userNickname }}
+              {{ myRanking.wealthQuantity }}
+            </div>
+            <div v-else style="color: #edb247; font-size: 1.1em; font-weight: 700">
+              {{ myRanking.charmQuantity }}
             </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.5em; aspect-ratio: 1/1"
-          />
-          <!-- 1:男,0:女 -->
-          <div
-            v-if="myRanking.userSex == 1"
-            style="color: #edb247; font-size: 1.1em; font-weight: 700"
-          >
-            {{ myRanking.wealthQuantity }}
-          </div>
-          <div v-else style="color: #edb247; font-size: 1.1em; font-weight: 700">
-            {{ myRanking.charmQuantity }}
           </div>
         </div>
       </div>
@@ -756,6 +780,9 @@ import borderImg from './components/borderImg.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
+// 预加载状态
+const isLoading = ref(true)
+
 // 获取OSS图片URL的函数
 const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
 
@@ -763,9 +790,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    getUserInfo()
-    updatePageData() // 刷新页面数据
-    preloadCriticalImages() // 预加载关键图片
+    completePreloading() // 完成预加载
   })
 }
 
@@ -1023,17 +1048,29 @@ const observer = new IntersectionObserver((entries) => {
 })
 
 // 刷新页面数据
-const updatePageData = () => {
-  getTopList(kingListParams.value) // 获取国王榜单
-  getTopList(queenListParams.value) // 获取女王榜单
-  getRewardsAndGifts() //获取本周的礼物和国王和皇后top奖励列表
-  getAllTopOne() //获取近几个月的榜首国王女王
+const updatePageData = async () => {
+  // 重置数据
+  kingList.value = []
+  queenList.value = []
+  kingListCurrent.value = 1
+  queenListCurrent.value = 1
+  showKingLoading.value = true
+  showQueenLoading.value = true
+
+  await Promise.all([
+    getTopList(kingListParams.value), // 获取国王榜单
+    getTopList(queenListParams.value), // 获取女王榜单
+    getRewardsAndGifts(), //获取本周的礼物和国王和皇后top奖励列表
+    getAllTopOne(), //获取近几个月的榜首国王女王
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
     imageUrl('bg'),
+    // imageUrl('border-item'),  // 这个是用在background-image的，无法使用v-smart-img指令
+    // imageUrl('border-item-user'),  // 这个是用在background-image的，无法使用v-smart-img指令
     imageUrl('help'),
     imageUrl('history'),
     imageUrl('listTitle'),
@@ -1046,9 +1083,7 @@ const preloadCriticalImages = () => {
     imageUrl('queenBt'),
     imageUrl('kingBt'),
     imageUrl('queenBtActive'),
-    imageUrl('border-item-user'),
     imageUrl('helpInfo'),
-    imageUrl('border-item'),
     imageUrl('timeBack'),
     imageUrl('timeNext'),
     imageUrl('cancel'),
@@ -1060,7 +1095,20 @@ const preloadCriticalImages = () => {
     imageUrl('top3'),
   ]
 
-  preloadImages(criticalImages)
+  await preloadImages(criticalImages)
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
 }
 
 // 组件挂载时检测环境
@@ -1116,6 +1164,36 @@ onUnmounted(() => {
   font-weight: 860;
 }
 
+/* 添加加载动画样式 */
+.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;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;