feat(游戏王排行榜): 调整默认展示榜单

src/views/Ranking/GamesKing/index.vue

@@ -10,47 +10,28 @@
     <!-- 主要内容 -->
     <div v-else>
       <!-- 新增的背景图层 -->
-      <img
+      <img v-smart-img :src="imageUrl('bg2')" alt=""
-        v-smart-img
+        style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0" />
-        :src="imageUrl('bg2')"
-        alt=""
-        style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
-      />
 
       <div class="bg">
-        <img
+        <img v-smart-img :src="imageUrl('bg')" alt=""
-          v-smart-img
+          style="display: block; width: 100%; position: absolute; z-index: 0" />
-          :src="imageUrl('bg')"
-          alt=""
-          style="display: block; width: 100%; position: absolute; z-index: 0"
-        />
 
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
         <!-- 第一名 -->
         <div style="display: flex; justify-content: center; margin-top: 11vw">
-          <TopUser
+          <TopUser ranking="1" :BorderImgUrl="imageUrl('top1')" :avatarUrl="RankingHasTop10[0].avatar"
-            ranking="1"
+            :name="RankingHasTop10[0].nickname" :distributionValue="RankingHasTop10[0].quantity || ''"
-            :BorderImgUrl="imageUrl('top1')"
+            style="width: 55%" @click="viewUserInfo(RankingHasTop10[0].userId)" />
-            :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
+          <img v-smart-img :src="imageUrl('helpBt')" alt=""
-            v-smart-img
+            style="display: block; position: relative; width: 8vw; margin-right: 4vw" @click="maskLayerShow = true" />
-            :src="imageUrl('helpBt')"
-            alt=""
-            style="display: block; position: relative; width: 8vw; margin-right: 4vw"
-            @click="maskLayerShow = true"
-          />
         </div>
 
         <!-- 倒计时 -->
@@ -85,56 +66,26 @@
           <div style="display: flex; justify-content: space-around; margin-top: 2vw">
             <!-- 历史模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('history')">
-              <img
+              <img v-show="!historyShow" v-smart-img :src="imageUrl(getImgName('historyBt'))" alt=""
-                v-show="!historyShow"
+                style="display: block; width: 100%" />
-                v-smart-img
+              <img v-show="historyShow" v-smart-img :src="imageUrl(getImgName('historyBtActive'))" alt=""
-                :src="imageUrl(getImgName('historyBt'))"
+                style="display: block; width: 100%" />
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="historyShow"
-                v-smart-img
-                :src="imageUrl(getImgName('historyBtActive'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
             </div>
 
             <!-- 排行榜模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('ranking')">
-              <img
+              <img v-show="!rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBt'))" alt=""
-                v-show="!rankingShow"
+                style="display: block; width: 100%" />
-                v-smart-img
+              <img v-show="rankingShow" v-smart-img :src="imageUrl(getImgName('rankingBtActive'))" alt=""
-                :src="imageUrl(getImgName('rankingBt'))"
+                style="display: block; width: 100%" />
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="rankingShow"
-                v-smart-img
-                :src="imageUrl(getImgName('rankingBtActive'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
             </div>
 
             <!-- 奖励模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('rewards')">
-              <img
+              <img v-show="!rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardsBt'))" alt=""
-                v-show="!rewardsShow"
+                style="display: block; width: 100%" />
-                v-smart-img
+              <img v-show="rewardsShow" v-smart-img :src="imageUrl(getImgName('rewardBtActive'))" alt=""
-                :src="imageUrl(getImgName('rewardsBt'))"
+                style="display: block; width: 100%" />
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="rewardsShow"
-                v-smart-img
-                :src="imageUrl(getImgName('rewardBtActive'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
             </div>
           </div>
         </div>
@@ -142,89 +93,59 @@
         <!-- 模块 -->
         <div>
           <!-- history -->
-          <div
+          <div v-show="historyShow" style="display: flex; flex-direction: column; align-items: center">
-            v-show="historyShow"
-            style="display: flex; flex-direction: column; align-items: center"
-          >
             <!-- 历史榜首 -->
-            <itemCenter
+            <itemCenter :imgUrl="imageUrl(getImgName('historyTopBg'))" :contentStyle="`inset: 25vw 5vw 4vw;
-              :imgUrl="imageUrl(getImgName('historyTopBg'))"
-              :contentStyle="`inset: 25vw 5vw 4vw;
                 flex-direction: column;
                 justify-content: center;
-                gap:2vw`"
+                gap:2vw`">
-            >
               <!-- 主要内容 -->
-              <div
+              <div style="
-                style="
                   width: 100%;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
 
                   gap: 2vw;
-                "
+                ">
-              >
                 <!-- 上一周榜首按钮 -->
-                <div
+                <div style="
-                  style="
                     width: 8vw;
                     align-self: stretch;
 
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                  "
+                  ">
-                >
+                  <img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex > 0"
-                  <img
+                    :src="imageUrl('topBackBt')" alt="" class="flipImg"
-                    v-smart-img
+                    style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex--" />
-                    v-show="historyTopList.length > 1 && historyTopIndex > 0"
-                    :src="imageUrl('topBackBt')"
-                    alt=""
-                    class="flipImg"
-                    style="display: block; width: 100%; object-fit: cover"
-                    @click="historyTopIndex--"
-                  />
                 </div>
 
                 <!-- 榜首 -->
-                <TopUser
+                <TopUser :BorderImgUrl="imageUrl('historyTopFrame')"
-                  :BorderImgUrl="imageUrl('historyTopFrame')"
                   :avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
                   :name="historyTopList[historyTopIndex].topUser.nickname"
                   :distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
-                  style="flex: 1; min-width: 0"
+                  style="flex: 1; min-width: 0" @click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)" />
-                  @click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)"
-                />
 
                 <!-- 下一周榜首按钮 -->
-                <div
+                <div style="
-                  style="
                     width: 8vw;
                     align-self: stretch;
 
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                  "
+                  ">
-                >
+                  <img v-smart-img v-show="historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
-                  <img
+                    " :src="imageUrl('topNextBt')" alt="" class="flipImg"
-                    v-smart-img
+                    style="display: block; width: 100%; object-fit: cover" @click="historyTopIndex++" />
-                    v-show="
-                      historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
-                    "
-                    :src="imageUrl('topNextBt')"
-                    alt=""
-                    class="flipImg"
-                    style="display: block; width: 100%; object-fit: cover"
-                    @click="historyTopIndex++"
-                  />
                 </div>
               </div>
 
               <!-- 结算时间 -->
-              <div
+              <div style="
-                style="
                   font-weight: 590;
                   background-image: -webkit-linear-gradient(
                     top,
@@ -233,22 +154,14 @@
                   );
                   background-clip: text;
                   -webkit-text-fill-color: transparent;
-                "
+                ">
-              >
                 {{ historyTopList[historyTopIndex].cycleDisplay }}
               </div>
             </itemCenter>
 
             <!-- 特殊奖励 -->
-            <itemCenter
+            <itemCenter :imgUrl="imageUrl(getImgName('specialRewardsBg'))" :contentStyle="`inset: 43vw 3vw 5vw;`">
-              :imgUrl="imageUrl(getImgName('specialRewardsBg'))"
+              <img :src="specialReward?.cover" alt="" style="display: block; width: 70%; object-fit: cover" />
-              :contentStyle="`inset: 43vw 3vw 5vw;`"
-            >
-              <img
-                :src="specialReward?.cover"
-                alt=""
-                style="display: block; width: 70%; object-fit: cover"
-              />
             </itemCenter>
           </div>
 
@@ -256,97 +169,54 @@
           <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
             <div style="position: relative; z-index: 1">
               <!-- 第2-4名 -->
-              <itemCenter
+              <itemCenter :imgUrl="imageUrl(getImgName('RankingMain'))"
-                :imgUrl="imageUrl(getImgName('RankingMain'))"
+                :contentStyle="`padding: 25% 4% 0;flex-direction: column;`">
-                :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
-              >
                 <div>
                   <!-- 第2名 -->
                   <div style="display: flex; justify-content: center">
-                    <TopUser
+                    <TopUser ranking="2" :BorderImgUrl="imageUrl('top2')" :avatarUrl="RankingHasTop10[1].avatar"
-                      ranking="2"
+                      :name="RankingHasTop10[1].nickname" :distributionValue="RankingHasTop10[1].quantity || ''"
-                      :BorderImgUrl="imageUrl('top2')"
+                      style="width: 40%" @click="viewUserInfo(RankingHasTop10[1].userId)" />
-                      :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
+                    <TopUser ranking="3" :BorderImgUrl="imageUrl('top3')" :avatarUrl="RankingHasTop10[2].avatar"
-                      ranking="3"
+                      :name="RankingHasTop10[2].nickname" :distributionValue="RankingHasTop10[2].quantity || ''"
-                      :BorderImgUrl="imageUrl('top3')"
+                      style="width: 38%" @click="viewUserInfo(RankingHasTop10[2].userId)" />
-                      :avatarUrl="RankingHasTop10[2].avatar"
+                    <TopUser ranking="4" :BorderImgUrl="imageUrl('top4')" :avatarUrl="RankingHasTop10[3].avatar"
-                      :name="RankingHasTop10[2].nickname"
+                      :name="RankingHasTop10[3].nickname" :distributionValue="RankingHasTop10[3].quantity || ''"
-                      :distributionValue="RankingHasTop10[2].quantity || ''"
+                      style="width: 38%" @click="viewUserInfo(RankingHasTop10[3].userId)" />
-                      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>
 
               <!-- 第5-10名 -->
-              <itemCenter
+              <itemCenter :imgUrl="imageUrl('RankingCenterBg')"
-                :imgUrl="imageUrl('RankingCenterBg')"
+                :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`">
-                :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
-              >
                 <!-- 5-7 -->
                 <div style="width: 100%; display: flex; justify-content: space-between">
-                  <TopUser
+                  <TopUser v-for="topUser in RankingHasTop10.slice(4, 7)" :key="topUser.userId" ranking="5-7"
-                    v-for="topUser in RankingHasTop10.slice(4, 7)"
+                    :BorderImgUrl="imageUrl('top5_7')" :avatarUrl="topUser.avatar" :name="topUser.nickname"
-                    :key="topUser.userId"
+                    :distributionValue="topUser.quantity || ''" style="width: 30%"
-                    ranking="5-7"
+                    @click="viewUserInfo(topUser.userId)" />
-                    :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
+                  <TopUser v-for="topUser in RankingHasTop10.slice(7, 10)" :key="topUser.userId" ranking="8-10"
-                    v-for="topUser in RankingHasTop10.slice(7, 10)"
+                    :BorderImgUrl="imageUrl('top8_10')" :avatarUrl="topUser.avatar" :name="topUser.nickname"
-                    :key="topUser.userId"
+                    :distributionValue="topUser.quantity || ''" style="width: 30%"
-                    ranking="8-10"
+                    @click="viewUserInfo(topUser.userId)" />
-                    :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
+                <itemCenter v-for="(listItem, index) in showRanking" :key="listItem.userId"
-                  v-for="(listItem, index) in showRanking"
+                  :imgUrl="imageUrl('RankingItem')" :contentStyle="`padding: 0 10%`" :lazy="true" :immediate="index < 2"
-                  :key="listItem.userId"
+                  @click="viewUserInfo(listItem.userId)">
-                  :imgUrl="imageUrl('RankingItem')"
-                  :contentStyle="`padding: 0 10%`"
-                  :lazy="true"
-                  :immediate="index < 2"
-                  @click="viewUserInfo(listItem.userId)"
-                >
                   <!-- 基本信息 -->
-                  <div
+                  <div style="
-                    style="
                       flex: 1;
                       min-width: 0;
 
@@ -355,31 +225,23 @@
                       align-items: center;
 
                       gap: 8px;
-                    "
+                    ">
-                  >
                     <!-- 排名 -->
                     <div style="color: #ffe601; font-weight: 700">
                       {{ listItem?.rank }}
                     </div>
 
                     <!-- 头像 -->
-                    <img
+                    <img v-smart-img :src="listItem?.avatar || ''" alt="" style="
-                      v-smart-img
-                      :src="listItem?.avatar || ''"
-                      alt=""
-                      style="
                         display: block;
                         width: 13vw;
                         aspect-ratio: 1/1;
                         border-radius: 50%;
                         object-fit: cover;
-                      "
+                      " @error="handleAvatarImageError" />
-                      @error="handleAvatarImageError"
-                    />
 
                     <!-- 名称、id -->
-                    <div
+                    <div style="
-                      style="
                         flex: 1;
                         min-width: 0;
                         align-self: stretch;
@@ -387,18 +249,14 @@
                         display: flex;
                         flex-direction: column;
                         justify-content: space-around;
-                      "
+                      ">
-                    >
+                      <div style="
-                      <div
-                        style="
                           color: #fff;
                           font-weight: 860;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
-                        "
+                        " class="UserNickname">
-                        class="UserNickname"
-                      >
                         {{ listItem?.nickname }}
                       </div>
                       <div style="color: #fff; font-weight: 590" class="UserNickname">
@@ -408,21 +266,15 @@
                   </div>
 
                   <!-- 贡献值 -->
-                  <div
+                  <div style="
-                    style="
                       width: auto;
                       min-width: 0;
 
                       display: flex;
                       align-items: center;
-                    "
+                    ">
-                  >
+                    <img v-smart-img src="/src/assets/icon/coin.png" alt=""
-                    <img
+                      style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover" />
-                      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>
@@ -431,36 +283,19 @@
               </div>
 
               <!-- 底框 -->
-              <img
+              <img v-smart-img :src="imageUrl('RankingBottomBorder')" alt="" width="100%"
-                v-smart-img
+                style="display: block; margin-top: -6vw; position: relative; z-index: 2" />
-                :src="imageUrl('RankingBottomBorder')"
-                alt=""
-                width="100%"
-                style="display: block; margin-top: -6vw; position: relative; z-index: 2"
-              />
             </div>
           </div>
 
           <!-- Rewards -->
-          <div
+          <div v-show="rewardsShow" style="display: flex; flex-direction: column; align-items: center">
-            v-show="rewardsShow"
+            <div v-for="(rewardsTop, top) in rewardsList" :key="top"
-            style="display: flex; flex-direction: column; align-items: center"
+              style="position: relative; width: 100%; margin: 10px 0">
-          >
-            <div
-              v-for="(rewardsTop, top) in rewardsList"
-              :key="top"
-              style="position: relative; width: 100%; margin: 10px 0"
-            >
               <!-- 第一名奖励 -->
-              <itemCenter
+              <itemCenter v-if="top == 0" :imgUrl="topImg[0]"
-                v-if="top == 0"
+                :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`">
-                :imgUrl="topImg[0]"
+                <div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style="
-                :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;
@@ -469,55 +304,43 @@
                     flex-direction: column;
                     justify-content: space-between;
                     align-items: center;
-                  "
+                  ">
-                >
+                  <div style="
-                  <div
-                    style="
                       width: 100%;
                       aspect-ratio: 1/1;
 
                       display: flex;
                       justify-content: center;
                       align-items: center;
-                    "
+                    ">
-                  >
                     <!-- 奖励图片 -->
-                    <img
+                    <img v-smart-img :src="reward.cover || ''" alt=""
-                      v-smart-img
-                      :src="reward.cover || ''"
-                      alt=""
                       style="display: block; width: 70%; object-fit: cover"
-                      @error="(e) => handleRewardImageError(e, reward.type)"
+                      @error="(e) => handleRewardImageError(e, reward.type)" />
-                    />
                   </div>
 
                   <!-- 数值 -->
-                  <div
+                  <div style="
-                    style="
                       width: 100%;
 
                       display: flex;
                       justify-content: center;
                       align-items: center;
-                    "
+                    ">
-                  >
+                    <div style="
-                    <div
-                      style="
                         min-width: 0;
                         color: #f9e447;
                         text-align: center;
                         font-size: 1.2em;
                         font-weight: 900;
-                      "
+                      ">
-                    >
                       {{ showDetail(reward.type, reward) }}
                     </div>
                   </div>
                 </div>
 
                 <!-- 启动时间 -->
-                <div
+                <div style="
-                  style="
                     position: absolute;
                     left: 3.5vw;
                     bottom: 10vw;
@@ -526,67 +349,47 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                  "
+                  ">
-                >
+                  <div style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900">
-                  <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
+              <itemCenter v-else :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
-                v-else
+                :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`">
-                :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
+                <div v-for="(reward, rewardIndex) in rewardsTop.rewards" :key="rewardIndex" style="width: 100%"
-                :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
+                  :style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''">
-              >
+                  <div style="
-                <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
+                    <img v-smart-img :src="reward.cover || ''" alt=""
-                      v-smart-img
-                      :src="reward.cover || ''"
-                      alt=""
                       style="display: block; width: 70%; object-fit: cover"
-                      @error="(e) => handleRewardImageError(e, reward.type)"
+                      @error="(e) => handleRewardImageError(e, reward.type)" />
-                    />
                   </div>
 
                   <!-- 数值 -->
-                  <div
+                  <div style="
-                    style="
                       width: 100%;
 
                       display: flex;
                       justify-content: center;
                       align-items: center;
-                    "
+                    ">
-                  >
+                    <div style="
-                    <div
-                      style="
                         min-width: 0;
                         color: #f9e447;
                         text-align: center;
                         font-size: 1.2em;
                         font-weight: 900;
-                      "
+                      ">
-                    >
                       {{ showDetail(reward.type, reward) }}
                     </div>
                   </div>
@@ -600,15 +403,10 @@
         <div v-if="rankingShow" style="height: 22vw"></div>
 
         <!-- 我的排名 -->
-        <itemCenter
+        <itemCenter v-if="rankingShow" style="position: fixed; bottom: 0; z-index: 3" :imgUrl="imageUrl('myRankingBg')"
-          v-if="rankingShow"
+          :contentStyle="`padding: 0 8%`">
-          style="position: fixed; bottom: 0; z-index: 3"
-          :imgUrl="imageUrl('myRankingBg')"
-          :contentStyle="`padding: 0 8%`"
-        >
           <!-- 基本信息 -->
-          <div
+          <div style="
-            style="
               flex: 1;
               min-width: 0;
 
@@ -617,61 +415,45 @@
               align-items: center;
 
               gap: 8px;
-            "
+            ">
-          >
             <!-- 排名 -->
             <div style="color: #ffe601; font-weight: 700">
               {{ myRanking.rank || 999 }}
             </div>
 
             <!-- 头像 -->
-            <img
+            <img v-smart-img :src="myRanking.avatar || ''" alt="" style="
-              v-smart-img
-              :src="myRanking.avatar || ''"
-              alt=""
-              style="
                 display: block;
                 width: 15vw;
                 aspect-ratio: 1/1;
                 border-radius: 50%;
                 object-fit: cover;
-              "
+              " @error="handleAvatarImageError" />
-              @error="handleAvatarImageError"
-            />
 
             <!-- 名称 -->
             <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
-              <div
+              <div style="
-                style="
                   color: #fff;
                   font-weight: 860;
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;
-                "
+                " class="UserNickname">
-                class="UserNickname"
-              >
                 {{ myRanking.nickname }}
               </div>
             </div>
           </div>
 
           <!-- 贡献值 -->
-          <div
+          <div style="
-            style="
               width: auto;
               min-width: 0;
 
               display: flex;
               align-items: center;
-            "
+            ">
-          >
+            <img v-smart-img src="/src/assets/icon/coin.png" alt=""
-            <img
+              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover" />
-              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>
@@ -682,16 +464,10 @@
         <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
           <!-- help弹窗 -->
           <div style="margin: 10vh 0 5vh" @click.stop>
-            <itemCenter
+            <itemCenter :imgUrl="imageUrl(getImgName('helpBg'))"
-              :imgUrl="imageUrl(getImgName('helpBg'))"
+              :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`">
-              :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" />
-              <img
-                v-smart-img
-                :src="imageUrl(getImgName('helpInfo'))"
-                alt=""
-                style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
-              />
             </itemCenter>
           </div>
         </maskLayer>
@@ -748,8 +524,8 @@ const Second = ref(0)
   let timer = null
 
   // 模块切换展示
-const historyShow = ref(true) //历史榜首
+  const historyShow = ref(false) //历史榜首
-const rankingShow = ref(false) //排行榜
+  const rankingShow = ref(true) //排行榜
   const rewardsShow = ref(false) //奖励模块
   const changeModule = (module) => {
     switch (module) {
@@ -938,18 +714,24 @@ const preloadCriticalImages = async () => {
       imageUrl('helpInfo'),
       imageUrl('historyBt'),
       imageUrl('historyBtActive'),
-    imageUrl('historyTopBg'),
-    imageUrl('historyTopFrame'),
-    imageUrl('specialRewardsBg'),
       imageUrl('myRankingBg'),
       imageUrl('rankingBt'),
       imageUrl('rankingBtActive'),
       imageUrl('rewardBtActive'),
       imageUrl('rewardsBt'),
+      imageUrl('RankingBottomBorder'),
+      imageUrl('RankingCenterBg'),
+      imageUrl('RankingItem'),
+      imageUrl('RankingMain'),
       imageUrl('timeBg'),
       imageUrl('topBackBt'),
       imageUrl('topNextBt'),
       imageUrl('top1'),
+      imageUrl('top2'),
+      imageUrl('top3'),
+      imageUrl('top4'),
+      imageUrl('top5_7'),
+      imageUrl('top8_10'),
     ]
 
     const criticalImages_ar = [
@@ -959,18 +741,24 @@ const preloadCriticalImages = async () => {
       imageUrl('helpInfo_ar'),
       imageUrl('historyBt_ar'),
       imageUrl('historyBtActive_ar'),
-    imageUrl('historyTopBg_ar'),
-    imageUrl('historyTopFrame'),
-    imageUrl('specialRewardsBg_ar'),
       imageUrl('myRankingBg'),
       imageUrl('rankingBt_ar'),
       imageUrl('rankingBtActive_ar'),
       imageUrl('rewardBtActive_ar'),
       imageUrl('rewardsBt_ar'),
+      imageUrl('RankingBottomBorder'),
+      imageUrl('RankingCenterBg'),
+      imageUrl('RankingItem'),
+      imageUrl('RankingMain_ar'),
       imageUrl('timeBg'),
       imageUrl('topBackBt'),
       imageUrl('topNextBt'),
       imageUrl('top1'),
+      imageUrl('top2'),
+      imageUrl('top3'),
+      imageUrl('top4'),
+      imageUrl('top5_7'),
+      imageUrl('top8_10'),
     ]
 
     if (currentLangType.value == 'en') {
@@ -996,35 +784,23 @@ const completePreloading = async () => {
   // 预加载其他图片
   const preloadOtherImages = async () => {
     const criticalImages = [
-    imageUrl('RankingBottomBorder'),
+      imageUrl('historyTopBg'),
-    imageUrl('RankingCenterBg'),
+      imageUrl('historyTopFrame'),
-    imageUrl('RankingItem'),
+      imageUrl('specialRewardsBg'),
-    imageUrl('RankingMain'),
       imageUrl('top1RewardBg'),
       imageUrl('top2_4RewardBg'),
       imageUrl('top5_7RewardBg'),
       imageUrl('top8_10RewardBg'),
-    imageUrl('top2'),
-    imageUrl('top3'),
-    imageUrl('top4'),
-    imageUrl('top5_7'),
-    imageUrl('top8_10'),
     ]
 
     const criticalImages_ar = [
-    imageUrl('RankingBottomBorder'),
+      imageUrl('historyTopBg_ar'),
-    imageUrl('RankingCenterBg'),
+      imageUrl('historyTopFrame'),
-    imageUrl('RankingItem'),
+      imageUrl('specialRewardsBg_ar'),
-    imageUrl('RankingMain_ar'),
       imageUrl('top1RewardBg'),
       imageUrl('top2_4RewardBg'),
       imageUrl('top5_7RewardBg'),
       imageUrl('top8_10RewardBg'),
-    imageUrl('top2'),
-    imageUrl('top3'),
-    imageUrl('top4'),
-    imageUrl('top5_7'),
-    imageUrl('top8_10'),
     ]
 
     if (currentLangType.value == 'en') {
@@ -1141,6 +917,7 @@ onUnmounted(() => {
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }