From 1e4c2a72497b53274ca1bcb428c9f00298c0f143 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 18 Dec 2025 16:53:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E5=B8=B8=E9=A9=BB=E6=B4=BB?=
 =?UTF-8?q?=E5=8A=A8=E9=A1=B5):=20=E6=B8=B8=E6=88=8F=E6=A6=9C=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   6 +
 src/utils/permissionManager.js                |   1 +
 src/utils/routeGuard.js                       |   1 +
 .../Ranking/GamesKing/components/topUser.vue  | 232 +++++
 src/views/Ranking/GamesKing/index.vue         | 941 ++++++++++++++++++
 5 files changed, 1181 insertions(+)
 create mode 100644 src/views/Ranking/GamesKing/components/topUser.vue
 create mode 100644 src/views/Ranking/GamesKing/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 64995d2..8b69ee4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -349,6 +349,12 @@ const router = createRouter({
       component: () => import('../views/Ranking/Overall/Ranking.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/games-king',
+      name: 'games-king',
+      component: () => import('../views/Ranking/GamesKing/index.vue'),
+      meta: { requiresAuth: true },
+    },
 
     // 限时活动
     {
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 7b20590..419f3d1 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -49,6 +49,7 @@ const RANKING_PAGES = [
   '/top-list', //排行榜
   '/weekly-star', //每周明星
   '/ranking', //总排行榜
+  '/games-king', //游戏排行榜
 ]
 
 // 活动页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index f3f821b..ae89df7 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -400,6 +400,7 @@ class RouteGuard {
       '/top-list', //排行榜
       '/weekly-star', //每周明星
       '/ranking', //总排行榜
+      '/games-king', //游戏排行榜
     ]
 
     // 活动页面
diff --git a/src/views/Ranking/GamesKing/components/topUser.vue b/src/views/Ranking/GamesKing/components/topUser.vue
new file mode 100644
index 0000000..4526f2a
--- /dev/null
+++ b/src/views/Ranking/GamesKing/components/topUser.vue
@@ -0,0 +1,232 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        v-smart-img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        :style="{ height: avatarContainerHeight }"
+      >
+        <div :style="{ width: avatarWidth }">
+          <img
+            v-smart-img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="handleAvatarImageError"
+          />
+        </div>
+      </div>
+
+      <!-- 用户名和贡献值 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <div
+          style="display: flex; justify-content: center; align-items: center"
+          :style="usernameAreaStyle"
+        >
+          <div style="font-weight: 700" class="showText" :class="textSizeClass">
+            {{ name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+
+const props = defineProps({
+  // 排名
+  ranking: {
+    type: String,
+    default: '1',
+  },
+
+  // 头像
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  // 头像框
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  // 名字
+  name: {
+    type: String,
+    default: '',
+  },
+
+  // 贡献值
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '93%'
+    case '2':
+      return '93%'
+    case '3':
+      return '90%'
+    case '4':
+      return '90%'
+    case '5-7':
+      return '85%'
+    case '8-10':
+      return '85%'
+    default:
+      return '90%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '36%'
+    case '2':
+      return '50%'
+    case '3':
+      return '41%'
+    case '4':
+      return '41%'
+    case '5-7':
+      return '45%'
+    case '8-10':
+      return '45%'
+    default:
+      return '48%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '23%'
+    case '2':
+      return '37%'
+    case '3':
+      return '39%'
+    case '4':
+      return '39%'
+    case '5-7':
+      return '43%'
+    case '8-10':
+      return '41%'
+    default:
+      return '30%'
+  }
+})
+
+// 用户名区域样式
+const usernameAreaStyle = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return 'height: 50%; width: 36%;'
+    case '2':
+      return 'height: 39%; width: 90%;'
+    case '3':
+      return 'height: 26%; width: 75%;'
+    case '4':
+      return 'height: 26%; width: 75%;'
+    case '5-7':
+      return 'height: 23%; width: 78%;'
+    case '8-10':
+      return 'height: 27%; width: 78%;'
+    default:
+      return 'height: 30%; width: 40%;'
+  }
+})
+
+// 文字大小类
+const textSizeClass = computed(() => {
+  return props.ranking === '1' ? 'top1Text' : 'text'
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-family: 'SF Pro';
+  color: black;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue
new file mode 100644
index 0000000..a03a63b
--- /dev/null
+++ b/src/views/Ranking/GamesKing/index.vue
@@ -0,0 +1,941 @@
+<!-- src/views/Activities/Game/index.vue -->
+<template>
+  <div class="fullPage">
+    <!-- 新增的背景图层 -->
+    <div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
+
+    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+      <!-- 状态栏占位区域（仅在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"
+          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="/src/assets/icon/helpAct.png"
+          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 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 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>
+
+          <!-- 奖励按钮 -->
+          <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>
+        </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 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"
+                    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"
+                    style="width: 38%"
+                    @click="viewUserInfo(RankingHasTop10[2].userId)"
+                  />
+                  <TopUser
+                    ranking="4"
+                    :BorderImgUrl="imageUrl('top4')"
+                    :avatarUrl="RankingHasTop10[3].avatar"
+                    :name="RankingHasTop10[3].nickname"
+                    style="width: 38%"
+                    @click="viewUserInfo(RankingHasTop10[3].userId)"
+                  />
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 第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"
+                  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"
+                  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;
+
+                    display: flex;
+                    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="
+                      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;
+              "
+              class="UserNickname"
+            >
+              {{ myRanking.nickname }}
+            </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">
+            {{ myRanking.quantity || 0 }}
+          </div>
+        </div>
+      </itemCenter>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+        <!-- help弹窗 -->
+        <div style="margin: 20% 0" @click.stop>
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('helpInfo'))"
+            alt=""
+            style="display: block; width: 100%"
+          />
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { useLangStore } from '@/stores/lang'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+
+import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+import TopUser from './components/topUser.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const maskLayerShow = ref(false) //帮助模块
+
+const current = ref(1) //排行榜第几页
+const RankingLoadmore = ref(null) //触底模块
+const showRankingLoading = ref(true) //触底加载功能
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+// 倒计时
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Second = ref(0)
+let timer = null
+
+// 模块切换展示
+const rankingShow = ref(true) //排行榜
+
+const Ranking = ref([]) // 排行榜
+const myRanking = ref({}) // 我的排名
+const rewardsList = ref([]) // 奖励列表
+
+const topImg = ref([
+  imageUrl('top1RewardBg'),
+  imageUrl('top2_4RewardBg'),
+  imageUrl('top5_7RewardBg'),
+  imageUrl('top8_10RewardBg'),
+]) // top奖励背景
+
+// 处理排行榜小于10人时的情况
+const RankingHasTop10 = computed(() => {
+  let RankingShow = [...Ranking.value]
+  if (Ranking.value.length < 10) {
+    let addNullUser = Array.from({ length: 10 - Ranking.value.length }, () => ({
+      avatar: '',
+      nickname: '',
+      quantity: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return Ranking.value.filter((_, index) => index >= 10)
+  // return []
+})
+
+// 获取北京时间下周一早上5点的时间戳
+const getNextMondayInBeijing = () => {
+  const now = new Date()
+  const beijingDay = (now.getUTCDay() + 6) % 7
+  //  UTC 时间的星期几 (0=周日, 1=周一, ..., 6=周六)转换为北京时间的星期几 (0=周一, 6=周日)
+
+  // 计算到下周一的所需天数
+  const daysToAdd = beijingDay === 0 ? 7 : 7 - beijingDay
+  const nextMondayBeijing = new Date(now)
+
+  // 增加到下周一
+  nextMondayBeijing.setUTCDate(now.getUTCDate() + daysToAdd)
+
+  // 设置为北京时间下周一早上5点 (UTC时间是前一天21点)
+  nextMondayBeijing.setUTCHours(21, 0, 0, 0)
+
+  return nextMondayBeijing.getTime()
+}
+
+const targetTime = ref(getNextMondayInBeijing()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    initData()
+    resetPage()
+
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  Second.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 重置数据
+const resetPage = () => {
+  current.value = 1 //排行榜第几页
+  showRankingLoading.value = true //触底加载功能
+  Ranking.value = [] // 排行榜
+}
+
+// 格式化奖励的展示信息
+const showDetail = (type, reward) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(type)) {
+    return reward.content
+  } else if (type === 'DOLLARS') {
+    return `$${reward.content}`
+  } else {
+    return `${reward.quantity}Days`
+  }
+}
+
+// 获取排行榜和我的排名
+const getListAndMy = async () => {
+  let data = {
+    activityType: 9999,
+  }
+  const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
+  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
+  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
+    myRanking.value = resMyWeekStarRanking.body.currentUserRank
+    Ranking.value = resMyWeekStarRanking.body.rankingList
+  }
+}
+
+// 获取每周奖励列表和礼物
+const getRewardsAndGifts = async () => {
+  const resRewardsAndGifts = await getThisWeekRewardsAndGifts('1996796468800196610')
+  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
+    rewardsList.value = resRewardsAndGifts.body.butOneRewards
+    if (rewardsList.value[0]) {
+      rewardsList.value[0].rewards.push({
+        type: 'DOLLARS',
+        content: 50,
+      })
+    }
+
+    if (rewardsList.value[1]) {
+      rewardsList.value[1].rewards.push({
+        type: 'DOLLARS',
+        content: 30,
+      })
+    }
+
+    if (rewardsList.value[2]) {
+      rewardsList.value[2].rewards.push({
+        type: 'DOLLARS',
+        content: 10,
+      })
+    }
+
+    // 补齐第四名奖励
+    if (!rewardsList.value[3]) {
+      rewardsList.value[3] = rewardsList.value[2]
+    }
+  }
+}
+
+// 刷新页面数据
+const initData = () => {
+  getListAndMy() // 获取排行榜和我的排名
+  getRewardsAndGifts() //获取本周的礼物和奖励列表
+}
+
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('bg'),
+    imageUrl('bg2'),
+    imageUrl('helpInfo'),
+    imageUrl('myRankingBg'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('rankingBt'),
+    imageUrl('rankingBtActive'),
+    imageUrl('RankingCenterBg'),
+    imageUrl('RankingItem'),
+    imageUrl('RankingMain'),
+    imageUrl('rewardBtActive'),
+    imageUrl('rewardsBt'),
+    imageUrl('timeBg'),
+    imageUrl('top1RewardBg'),
+    imageUrl('top2_4RewardBg'),
+    imageUrl('top5_7RewardBg'),
+    imageUrl('top8_10RewardBg'),
+    imageUrl('top1'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+    imageUrl('top4'),
+    imageUrl('top5_7'),
+    imageUrl('top8_10'),
+  ]
+
+  const criticalImages_ar = [
+    imageUrl('bg'),
+    imageUrl('bg2'),
+    imageUrl('helpInfo_ar'),
+    imageUrl('myRankingBg'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('rankingBt_ar'),
+    imageUrl('rankingBtActive_ar'),
+    imageUrl('RankingCenterBg'),
+    imageUrl('RankingItem'),
+    imageUrl('RankingMain_ar'),
+    imageUrl('rewardBtActive_ar'),
+    imageUrl('rewardsBt_ar'),
+    imageUrl('timeBg'),
+    imageUrl('top1RewardBg'),
+    imageUrl('top2_4RewardBg'),
+    imageUrl('top5_7RewardBg'),
+    imageUrl('top8_10RewardBg'),
+    imageUrl('top1'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+    imageUrl('top4'),
+    imageUrl('top5_7'),
+    imageUrl('top8_10'),
+  ]
+
+  if (currentLangType.value == 'en') {
+    preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    preloadImages(criticalImages_ar)
+  }
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    initData() //初始化数据
+    preloadCriticalImages() //预加载关键图片
+  })
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  connectToAppHandler()
+  isInAppEnvironment.value = isInApp()
+
+  getCountdown()
+  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  position: relative;
+  background: #5d0c00;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: var(--bg-url);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+  z-index: 1;
+}
+
+.background-overlay {
+  position: absolute;
+  inset: 80vw 0 0;
+  background-image: var(--bg2-url);
+  background-repeat: repeat-y;
+  background-position: top center;
+  background-size: 100% auto;
+  z-index: 0; /* 确保在.bg之下 */
+}
+
+.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;
+  font-size: 1.5em;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btTitle {
+  color: #fff;
+  font-weight: 700;
+}
+
+.topTitle {
+  font-size: 1.5em;
+}
+
+.history-name {
+  font-size: 0.8em;
+}
+
+.history-time {
+  font-size: 0.8em;
+}
+
+.UserNickname {
+  font-size: 0.8em;
+}
+
+.timeBox {
+  display: flex;
+  justify-content: center;
+  margin-top: 10vw;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
+[dir='rtl'] .timeBox {
+  flex-direction: row-reverse;
+}
+</style>