From 2648393357353c1d95a520b5a7625bbecb264c98 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 19 Mar 2026 18:12:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E6=B4=BB=E5=8A=A8):=20=E5=BC=80?=
 =?UTF-8?q?=E6=96=8B=E8=8A=82=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ar.json                           |    4 +
 src/locales/bn.json                           |    4 +
 src/locales/en.json                           |    4 +
 src/locales/tr.json                           |    4 +
 src/locales/zh.json                           |    4 +
 src/router/index.js                           |    8 +-
 src/utils/permissionManager.js                |    1 +
 src/utils/routeGuard.js                       |    1 +
 .../LesserBairam/components/topUser.vue       |  331 ++
 src/views/Activities/LesserBairam/index.vue   | 3753 +++++++++++++++++
 10 files changed, 4113 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Activities/LesserBairam/components/topUser.vue
 create mode 100644 src/views/Activities/LesserBairam/index.vue

diff --git a/src/locales/ar.json b/src/locales/ar.json
index c78d9a4..a5e8e6c 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "أ) تعليقات خبيثة أو شائعات أو تلميحات وما إلى ذلك للاعبين المشاركين أثناء الحدث",
   "ranking_help_rule_6": "ب) الحصول على العملات والهدايا المحددة بشكل غير قانوني",
 
+  "recharge_help_rule_1": "١. ستعمل حدث مكافأة إعادة الشحن من الآن حتى ٤ أبريل ٢٠٢٦.",
+  "recharge_help_rule_2": "٢. إذا وصل مبلغ إعادة الشحن التراكمي للمستخدم إلى المبلغ المحدد المطلوب لصنع العناصر الحصرية خلال هذا الحدث، يجب على المستخدم الاتصال فورًا بالموظفين الرسميين (ID: 10086, ID: 10000, ID: 10003, ID: 10001)، وإرسال لقطة شاشة من الحدث ومعرف المستخدم الخاص بهم إلى الموظفين، وتقديم المواد أو المتطلبات للعناصر الحصرية.",
+  "recharge_help_rule_3": "٣. قد ينشئ المستخدمون الذين يستخدمون نفس الجهاز أو عنوان IP حسابات متعددة بأي طريقة، لذا يمكن المطالبة بالمهمة كمكافأة مرة واحدة فقط.",
+
   "withdrawal_help_rule_1": "١. يمكن للمستخدمين سحب النقود عندما تصل أرباحهم بالدولار إلى ١٠ دولارات.",
   "withdrawal_help_rule_2": "٢. يمكن للمستخدمين أيضًا التبادل أو التحويل إلى وكيل إعادة الشحن للحصول على عوائد أعلى من السحوبات النقدية.",
   "withdrawal_help_rule_3": "٣. إذا لم يقم المستخدم بأي عملية قبل نهاية الحدث، فسيعتبر أنه قد تخلى عن فرصة استلام الدولارات، وسيتم مسح الدولارات التي تلقاها بواسطة النظام.",
diff --git a/src/locales/bn.json b/src/locales/bn.json
index e067239..a49067e 100644
--- a/src/locales/bn.json
+++ b/src/locales/bn.json
@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "ক) ইভেন্ট চলাকালীন অংশগ্রহণকারী খেলোয়াড়দের প্রতি বিদ্বেষপূর্ণ মন্তব্য, গুজব, ইঙ্গিত ইত্যাদি",
   "ranking_help_rule_6": "খ) অবৈধভাবে কয়েন এবং নির্দিষ্ট গিফট সংগ্রহ",
 
+  "recharge_help_rule_1": "১. রিচার্জ পুরস্কার ইভেন্ট এখন থেকে ২০২৬ সালের ৪ এপ্রিল পর্যন্ত চলবে।",
+  "recharge_help_rule_2": "২. যদি এই ইভেন্ট চলাকালীন কোনো ব্যবহারকারীর সঞ্চিত রিচার্জ পরিমাণ এক্সক্লুসিভ আইটেম তৈরির জন্য নির্দিষ্ট পরিমাণে পৌঁছায়, তবে ব্যবহারকারীর দ্রুত অফিসিয়াল স্টাফের সাথে যোগাযোগ করা উচিত (ID: 10086, ID: 10000, ID: 10003, ID: 10001), স্টাফের কাছে ইভেন্টের একটি স্ক্রিনশট এবং তাদের ব্যবহারকারী আইডি পাঠানো উচিত, এবং এক্সক্লুসিভ আইটেমের জন্য উপকরণ বা প্রয়োজনীয়তা প্রদান করা উচিত।",
+  "recharge_help_rule_3": "৩. একই ডিভাইস বা IP ঠিকানা ব্যবহারকারীরা যেকোনো উপায়ে একাধিক অ্যাকাউন্ট তৈরি করতে পারে, তাই টাস্কটি শুধুমাত্র একবার পুরস্কার হিসাবে দাবি করা যাবে।",
+
   "withdrawal_help_rule_1": "১. ব্যবহারকারীরা তাদের ডলার আয় $10 এ পৌঁছালে নগদ উত্তোলন করতে পারে।",
   "withdrawal_help_rule_2": "২. ব্যবহারকারীরা নগদ উত্তোলনের চেয়ে উচ্চতর রিটার্ন পেতে বিনিময় বা রিচার্জ এজেন্টের কাছে স্থানান্তরও করতে পারে।",
   "withdrawal_help_rule_3": "৩. যদি ব্যবহারকারী ইভেন্ট শেষ হওয়ার আগে কোনো অপারেশন না করে, তবে তাদের ডলার পাওয়ার সুযোগ ত্যাগ করেছে বলে গণ্য করা হবে, এবং তাদের প্রাপ্ত ডলার সিস্টেম দ্বারা মুছে ফেলা হবে।",
diff --git a/src/locales/en.json b/src/locales/en.json
index ee62b03..3e58ea3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) Malicious comments, rumors, insinuations, etc. to participating players during the event",
   "ranking_help_rule_6": "b) Illegally obtaining coins and designated gifts",
 
+  "recharge_help_rule_1": "1. The recharge reward event will run from now until April 4th, 2026.",
+  "recharge_help_rule_2": "2. If a user's cumulative recharge amount reaches the specified amount required to craft exclusive items during this event, the user should promptly contact official staff (ID: 10086, ID: 10000, ID: 10003, ID: 10001), send a screenshot of the event and their user ID to the staff, and provide the materials or requirements for the exclusive items.",
+  "recharge_help_rule_3": "3. Users using the same device or IP address may create multiple accounts in any way, so the task can only be claimed as a reward once.",
+
   "withdrawal_help_rule_1": "1. Users can cash out when their dollar earnings reach $10.",
   "withdrawal_help_rule_2": "2. Users can also exchange or transfer to a recharge agent to obtain higher returns than cash withdrawals.",
   "withdrawal_help_rule_3": "3. If the user does not perform any operation before the end of the event, it will be deemed that they have given up the opportunity to receive the dollars, and the dollars they have received will be cleared by the system.",
diff --git a/src/locales/tr.json b/src/locales/tr.json
index b8c3283..5d11988 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) Etkinlik sırasında katılımcı oyunculara kötü niyetli yorumlar, dedikodular, ima vb.",
   "ranking_help_rule_6": "b) Coin ve belirli hediyeleri yasa dışı yollarla elde etme",
 
+  "recharge_help_rule_1": "1. Yükleme ödülü etkinliği şu andan 4 Nisan 2026'ya kadar sürecektir.",
+  "recharge_help_rule_2": "2. Bu etkinlik sırasında bir kullanıcının kümülatif yükleme miktarı özel öğeler oluşturmak için gereken belirtilen miktara ulaşırsa, kullanıcı derhal resmi personelle iletişime geçmelidir (ID: 10086, ID: 10000, ID: 10003, ID: 10001), etkinliğin ekran görüntüsünü ve kullanıcı ID'sini personele göndermelidir ve özel öğeler için malzemeleri veya gereksinimleri sağlamalıdır.",
+  "recharge_help_rule_3": "3. Aynı cihazı veya IP adresini kullanan kullanıcılar herhangi bir şekilde birden fazla hesap oluşturabilir, bu nedenle görev sadece bir kez ödül olarak talep edilebilir.",
+
   "withdrawal_help_rule_1": "1. Kullanıcılar dolar kazançları $10'a ulaştığında nakit çekebilir.",
   "withdrawal_help_rule_2": "2. Kullanıcılar nakit çekimlerinden daha yüksek getiri elde etmek için bozdurabilir veya yeniden yükleme acentesine transfer edebilir.",
   "withdrawal_help_rule_3": "3. Kullanıcı etkinlik bitmeden önce herhangi bir işlem yapmazsa, dolarları alma fırsatından vazgeçmiş sayılacak ve aldıkları dolarlar sistem tarafından temizlenecektir.",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 1dbd307..10f0291 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) 活动期间对参与玩家进行恶意评论、造谣、暗示等",
   "ranking_help_rule_6": "b) 非法获取硬币和指定礼物",
 
+  "recharge_help_rule_1": "1. 充值奖励活动将从现在持续到 2026 年 4 月 4 日。",
+  "recharge_help_rule_2": "2. 如果用户在此期间累计充值金额达到制作专属物品所需的指定金额，用户应及时联系官方工作人员（ID: 10086, ID: 10000, ID: 10003, ID: 10001），向工作人员发送活动截图和用户 ID，并提供专属物品的材料或要求。",
+  "recharge_help_rule_3": "3. 使用相同设备或 IP 地址的用户可能以任何方式创建多个账户，因此该任务只能作为奖励领取一次。",
+
   "withdrawal_help_rule_1": "1. 当用户的美元收益达到$10 时可以提现。",
   "withdrawal_help_rule_2": "2. 用户也可以兑换或转账给充值代理以获得比现金提现更高的回报。",
   "withdrawal_help_rule_3": "3. 如果用户在活动结束前未进行任何操作，将被视为放弃领取美元的机会，已获得的美元将被系统清空。",
diff --git a/src/router/index.js b/src/router/index.js
index ecbbb25..b1d9d2c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -389,12 +389,18 @@ const router = createRouter({
     },
 
     // 限时活动
+    {
+      path: '/activities/lesser-bairam',
+      name: 'lesser-bairam',
+      component: () => import('../views/Activities/LesserBairam/index.vue'),
+      meta: { requiresAuth: true },
+    }, //2026年4月4日上午5点结束
     {
       path: '/activities/lucky-dollars-season3',
       name: 'lucky-dollars-season3',
       component: () => import('../views/Activities/LuckyDollars/Season3/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年3月19日上午5点结束
+    }, //2026年3月19日上午5点结束（每周倒计时直到最后一周截止时间）
     {
       path: '/activities/spring-festival',
       name: 'spring-festival',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 1e89379..1c0ac8c 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -60,6 +60,7 @@ const ACTIVITIES = [
   '/recharge-reward', //充值奖励
   '/login-reward', // 登录奖励
 
+  '/activities/lesser-bairam', // 开斋节打榜
   '/activities/lucky-dollars-season3', // 斋月打榜
   '/activities/spring-festival', // 春节打榜
 ]
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index b809aa5..97a4632 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -411,6 +411,7 @@ class RouteGuard {
       '/recharge-reward', //充值奖励
       '/login-reward', // 登录奖励
 
+      '/activities/lesser-bairam', // 开斋节打榜
       '/activities/lucky-dollars-season3', // 斋月打榜
       '/activities/spring-festival', // 春节打榜
     ]
diff --git a/src/views/Activities/LesserBairam/components/topUser.vue b/src/views/Activities/LesserBairam/components/topUser.vue
new file mode 100644
index 0000000..7a4a672
--- /dev/null
+++ b/src/views/Activities/LesserBairam/components/topUser.vue
@@ -0,0 +1,331 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative" :style="{ minHeight: ranking == '1' ? '68.75vw' : '45vw' }">
+      <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
+            :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: 1vw;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <!-- 名字 -->
+        <itemCenter
+          :imgUrl="imageUrl('userNameBorder')"
+          :contentStyle="``"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div
+            style="font-weight: 700; direction: ltr"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+          >
+            {{ name }}
+          </div>
+        </itemCenter>
+
+        <!-- 贡献值 -->
+        <div
+          style="
+            border-radius: 40px;
+            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
+            border: 0.64px solid #ffdf36;
+            padding: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            width: distributionValueWidth,
+            background:
+              ranking == '1'
+                ? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
+                : ranking == '2'
+                  ? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
+                  : `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
+          }"
+        >
+          <div v-if="rankingType == 'activity'" style="display: flex">
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block"
+              :style="{ width: coinWidth }"
+            />
+            <div
+              style="font-weight: 590"
+              class="showText"
+              :class="isTopOne ? 'top1Text' : 'text'"
+              :style="{
+                color: ranking == '1' ? `#FFE601` : '#FFF',
+              }"
+            >
+              {{ distributionValue }}
+            </div>
+          </div>
+          <div
+            v-if="rankingType == 'recharge'"
+            style="font-weight: 590"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+            :style="{
+              color: ranking == '1' ? `#FFE601` : '#FFF',
+            }"
+          >
+            $*
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/LesserBairam/', filename)
+
+const props = defineProps({
+  rankingType: {
+    type: String,
+    default: 'activity',
+  },
+
+  ranking: {
+    type: String,
+    default: '',
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '65%'
+    case '2':
+      return '65%'
+    case '3':
+      return '65%'
+    default:
+      return '65%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '50%'
+    case '2':
+      return '50%'
+    case '3':
+      return '50%'
+    default:
+      return '50%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '37%'
+    case '2':
+      return '42%'
+    case '3':
+      return '43%'
+    default:
+      return '37%'
+  }
+})
+
+// 名称宽度
+const nameValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '60%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '60%'
+  }
+})
+
+// 名称高度
+const nameValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '30%'
+    case '2':
+      return '45%'
+    case '3':
+      return '45%'
+    default:
+      return '30%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '50%'
+    case '2':
+      return '50%'
+    case '3':
+      return '50%'
+    default:
+      return '50%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '35%'
+    case '2':
+      return '20%'
+    case '3':
+      return '20%'
+    default:
+      return '20%'
+  }
+})
+
+// 金币图标宽度
+const coinWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '1em'
+    case '2':
+      return '0.9em'
+    case '3':
+      return '0.9em'
+    default:
+      return '0.9em'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  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/Activities/LesserBairam/index.vue b/src/views/Activities/LesserBairam/index.vue
new file mode 100644
index 0000000..2f9aa76
--- /dev/null
+++ b/src/views/Activities/LesserBairam/index.vue
@@ -0,0 +1,3753 @@
+<!-- src/views/Activities/Game/index.vue -->
+<template>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
+
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-if="!isLoading" class="bg" style="">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
+      <!-- 重复的背景图层 -->
+      <div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg3')})` }"></div>
+
+      <!-- 页面内容 -->
+      <div
+        style="
+          position: relative;
+          z-index: 2;
+          margin-top: 145vw;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        "
+      >
+        <!-- 倒计时 -->
+        <itemCenter
+          style="width: 87%; min-height: 16.76vw"
+          :imgUrl="imageUrl('timeBg')"
+          :contentStyle="`direction:ltr;`"
+        >
+          <div style="width: 44%; padding: 0 22.5vw 0 5vw; display: flex; justify-content: center">
+            <div class="timeText" style="padding-bottom: 2vw">{{ Days }}</div>
+          </div>
+          <div
+            style="
+              padding-top: 2vw;
+              flex: 1;
+              min-width: 0;
+              display: flex;
+              justify-content: space-between;
+            "
+          >
+            <div style="width: 30%; display: flex; justify-content: center">
+              <div class="timeText" style="">{{ Hours }}</div>
+            </div>
+            <div style="width: 30%; display: flex; justify-content: center">
+              <div class="timeText" style="">{{ Minutes }}</div>
+            </div>
+            <div style="width: 30%; display: flex; justify-content: center">
+              <div class="timeText" style="">{{ Second }}</div>
+            </div>
+          </div>
+        </itemCenter>
+
+        <!-- 切换按钮 -->
+        <div
+          style="min-height: 14.58vw; display: flex; justify-content: space-around; margin-top: 2vw"
+        >
+          <!-- 排行榜按钮 -->
+          <div
+            style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
+            @click="handleBt('ranking')"
+          >
+            <img
+              v-show="!rankShow"
+              v-smart-img
+              :src="imageUrl('rankBt')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+            <img
+              v-show="rankShow"
+              v-smart-img
+              :src="imageUrl('rankBtActive')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+          </div>
+
+          <!-- 充值榜按钮 -->
+          <div
+            style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
+            @click="handleBt('recharge')"
+          >
+            <img
+              v-show="!rechargeShow"
+              v-smart-img
+              :src="imageUrl('rechargeBt')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+            <img
+              v-show="rechargeShow"
+              v-smart-img
+              :src="imageUrl('rechargeBtActive')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+          </div>
+
+          <!-- 抽奖按钮 -->
+          <div
+            style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
+            @click="handleBt('lottery')"
+          >
+            <img
+              v-show="!lotteryShow"
+              v-smart-img
+              :src="imageUrl('lotteryBt')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+            <img
+              v-show="lotteryShow"
+              v-smart-img
+              :src="imageUrl('lotteryBtActive')"
+              alt=""
+              style="display: block; width: 100%"
+            />
+          </div>
+        </div>
+
+        <!-- 展示内容 -->
+        <div style="width: 100%">
+          <!-- 排行榜模块 -->
+          <div v-show="rankShow" style="padding-top: 4vw">
+            <!-- 模块按钮 -->
+            <div
+              style="
+                width: 100vw;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                gap: 10vw;
+              "
+            >
+              <!-- 排行榜模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('ranking')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rankingBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !rankingShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+
+              <!-- 奖励模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('rewards')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rewardsBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !rewardsShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+            </div>
+
+            <!-- 每周礼物 -->
+            <itemCenter
+              v-show="rankingShow"
+              style="min-height: 73.86vw"
+              :imgUrl="imageUrl('eventGiftsBg')"
+            >
+              <div
+                style="width: 90%; display: flex; justify-content: space-around; margin-top: 10%"
+              >
+                <div
+                  v-for="(gift, index) in giftsList"
+                  :key="index"
+                  style="width: 30%; display: flex; flex-direction: column"
+                >
+                  <itemCenter style="min-height: 27vw" :imgUrl="imageUrl('giftBg')">
+                    <img
+                      :src="gift.giftPhoto"
+                      alt=""
+                      width="60%"
+                      style="display: block; object-fit: cover"
+                    />
+                  </itemCenter>
+                  <div
+                    style="display: flex; justify-content: center; align-items: center; gap: 2px"
+                  >
+                    <img
+                      v-smart-img
+                      src="/src/assets/icon/coin.png"
+                      alt=""
+                      style="display: block; width: 1.3em; aspect-ratio: 1/1"
+                    />
+                    <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
+                      {{ gift.giftCandy }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 排行榜模块 -->
+            <div v-show="rankingShow" style="padding-top: 4vw">
+              <!-- 排行榜 -->
+              <div
+                style="
+                  padding: 30vw 5vw 10vw;
+                  position: relative;
+                  z-index: 0;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 2vw;
+                "
+              >
+                <!-- 页面背景 -->
+                <div style="position: absolute; inset: 15vw 3vw 3vw; overflow: hidden">
+                  <img
+                    v-smart-img
+                    :src="imageUrl('rankingImgBg')"
+                    alt=""
+                    style="
+                      position: absolute;
+                      inset: 0;
+                      z-index: -1;
+
+                      width: 94vw;
+                    "
+                  />
+                </div>
+
+                <!-- 背景图 -->
+                <div
+                  style="
+                    position: absolute;
+                    z-index: 0;
+                    inset: 0;
+                    display: flex;
+                    flex-direction: column;
+                  "
+                >
+                  <!-- 边框头部 -->
+                  <img
+                    v-smart-img
+                    :src="imageUrl('RankingTopBorder')"
+                    alt=""
+                    style="display: block; width: 100%; min-width: 0"
+                  />
+                  <!-- 边框中部占位 -->
+                  <div style="flex: 1; min-width: 0"></div>
+                  <!-- 边框尾部 -->
+                  <img
+                    v-smart-img
+                    :src="imageUrl('RankingBottomBorder')"
+                    alt=""
+                    style="display: block; width: 100%; min-width: 0"
+                  />
+
+                  <!-- 边框中部 -->
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: -1;
+                      inset: 11vw 0 2vw;
+                      display: flex;
+                      flex-direction: column;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      :src="imageUrl('RankingBorder')"
+                      alt=""
+                      style="display: block; width: 100%; height: 100%; min-width: 0"
+                    />
+                  </div>
+                </div>
+
+                <!-- 排行榜规则按钮 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('historyBt')"
+                  alt=""
+                  style="width: 6vw; position: absolute; z-index: 2; top: 32vw; right: 7vw"
+                  @click="openPopup('rankingHelp')"
+                />
+
+                <!-- 前三 -->
+                <div>
+                  <!-- 第一 -->
+                  <div style="display: flex; justify-content: center">
+                    <TopUser
+                      rankingType="activity"
+                      ranking="1"
+                      :BorderImgUrl="imageUrl('top1')"
+                      :avatarUrl="RankingHasTop3[0].avatar"
+                      :name="RankingHasTop3[0].nickname"
+                      :distributionValue="RankingHasTop3[0].quantity"
+                      style="width: 45%"
+                      @click="viewUserInfo(RankingHasTop3[0].userId)"
+                    />
+                  </div>
+
+                  <!-- 第二三 -->
+                  <div
+                    style="
+                      position: relative;
+                      z-index: 3;
+
+                      display: flex;
+                      justify-content: space-between;
+                      margin-top: -40vw;
+                      pointer-events: none;
+                    "
+                  >
+                    <div
+                      style="pointer-events: auto; width: 30%"
+                      @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
+                    >
+                      <TopUser
+                        rankingType="activity"
+                        ranking="2"
+                        :BorderImgUrl="imageUrl('top2')"
+                        :avatarUrl="RankingHasTop3[1].avatar"
+                        :name="RankingHasTop3[1].nickname"
+                        :distributionValue="RankingHasTop3[1].quantity"
+                        style="width: 100%"
+                      />
+                    </div>
+
+                    <div
+                      style="pointer-events: auto; width: 30%"
+                      @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
+                    >
+                      <TopUser
+                        rankingType="activity"
+                        ranking="3"
+                        :BorderImgUrl="imageUrl('top3')"
+                        :avatarUrl="RankingHasTop3[2].avatar"
+                        :name="RankingHasTop3[2].nickname"
+                        :distributionValue="RankingHasTop3[2].quantity"
+                        style="width: 100%"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 排行榜 -->
+                <div
+                  v-for="(listItem, index) in showRanking"
+                  :key="listItem.userId"
+                  style="display: flex; flex-direction: column; gap: 1vw"
+                >
+                  <!-- 基本信息 -->
+                  <itemCenter
+                    style="min-height: 20.43vw"
+                    :imgUrl="imageUrl('itemFrom4Bg')"
+                    :contentStyle="`padding: 0 2vw`"
+                    :lazy="true"
+                    @click="viewUserInfo(listItem.userId)"
+                  >
+                    <!-- 基本信息 -->
+                    <div
+                      style="
+                        flex: 1;
+                        min-width: 0;
+
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        gap: 4px;
+                      "
+                    >
+                      <!-- 排名 -->
+                      <div style="width: 9vw; display: flex; justify-content: center">
+                        <div style="color: #ffe601; font-weight: 700">
+                          {{ listItem?.rank }}
+                        </div>
+                      </div>
+
+                      <!-- 头像 -->
+                      <div style="width: 3.5em; margin: 0 1vw; position: relative; z-index: 0">
+                        <img
+                          :src="listItem?.avatar || ''"
+                          alt=""
+                          style="
+                            display: block;
+                            width: 100%;
+
+                            aspect-ratio: 1/1;
+                            border-radius: 50%;
+                            object-fit: cover;
+                          "
+                          @error="handleAvatarImageError"
+                        />
+                      </div>
+
+                      <!-- 名称、id -->
+                      <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+                        <!-- 滚动名称 -->
+                        <itemCenter
+                          style="width: 30vw; height: 10vw; min-width: 0"
+                          :imgUrl="imageUrl('userNameBorder')"
+                          :contentStyle="`padding:0;`"
+                          :lazy="true"
+                        >
+                          <div style="width: 100%; margin-top: 1vw">
+                            <div
+                              style="
+                                height: 100%;
+                                display: flex;
+                                align-items: center;
+                                /* justify-content: center; */
+                                overflow: hidden;
+                              "
+                            >
+                              <!-- 滚动容器 -->
+                              <div
+                                v-if="isTextOverflow(listItem?.nickname || '')"
+                                class="scroll-wrapper"
+                              >
+                                <!-- 2套内容 -->
+                                <div class="scroll-content" v-for="value in 2">
+                                  <div
+                                    style="
+                                      color: #fff;
+                                      font-size: 1em;
+                                      font-weight: 860;
+                                      white-space: nowrap;
+                                    "
+                                  >
+                                    {{ listItem?.nickname }}
+                                  </div>
+                                </div>
+                              </div>
+
+                              <div v-else style="width: 100%; text-align: center">
+                                <div
+                                  style="
+                                    color: #fff;
+                                    font-size: 1em;
+                                    font-weight: 860;
+                                    white-space: nowrap;
+                                  "
+                                >
+                                  {{ listItem?.nickname }}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </itemCenter>
+
+                        <!-- ID -->
+                        <div style="color: #fff; font-weight: 590" class="Textlittle">
+                          {{ $t('user_id_prefix') }}
+                          {{ listItem?.specialAccount || 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="Textlittle">
+                        {{ listItem?.quantity || 0 }}
+                      </div>
+                    </div>
+                  </itemCenter>
+                </div>
+              </div>
+
+              <!-- 触发加载功能 -->
+              <!-- <div ref="RankingLoadmore"></div> -->
+            </div>
+
+            <!-- 奖励模块 -->
+            <div
+              v-show="rewardsShow"
+              style="display: flex; flex-direction: column; gap: 4vw; padding: 4vw 0 10vw"
+            >
+              <itemCenter
+                v-for="(rewardsTop, index) in showRewardsTop3"
+                style=""
+                :style="{ minHeight: index < 3 ? '112.26vw' : '142.39vw' }"
+                :imgUrl="imageUrl(`rewardTop${index + 1}`)"
+                :contentStyle="`
+                inset: 30vw 9vw 14vw;
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                grid-template-rows: repeat(2, 1fr);
+                gap:2vw 4vw;
+                `"
+              >
+                <div
+                  v-for="(reward, index) in rewardsTop.rewards"
+                  style="height: 100%; display: flex; flex-direction: column; align-items: center"
+                >
+                  <!-- 奖励图 -->
+                  <itemCenter style="min-height: 27.13vw; width: 100%" :imgUrl="imageUrl('giftBg')">
+                    <img
+                      :src="reward.cover || ''"
+                      alt=""
+                      width="70%"
+                      @error="(e) => handleRewardImageError(e, reward.type)"
+                    />
+                  </itemCenter>
+
+                  <!-- 奖励信息 -->
+                  <div
+                    style="display: flex; justify-content: center; align-items: center; gap: 2px"
+                  >
+                    <div style="font-weight: 700; color: #f9e447">
+                      {{ formatRewardDisplay(reward.type, reward) }}
+                    </div>
+                  </div>
+                </div>
+              </itemCenter>
+            </div>
+          </div>
+
+          <!-- 充值排行模块 -->
+          <div v-show="rechargeShow" style="padding-top: 4vw">
+            <!-- 模块按钮 -->
+            <div
+              style="
+                width: 100vw;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                gap: 10vw;
+              "
+            >
+              <!-- 充值排行榜模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRank')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rechargeRankBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !rechargeRankShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+
+              <!-- 奖励模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRewards')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rewardsBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !rechargeRewardsShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+            </div>
+
+            <!-- 排行榜模块 -->
+            <div v-show="rechargeRankShow" style="padding-top: 4vw">
+              <!-- 排行榜 -->
+              <div
+                style="
+                  padding: 30vw 5vw 10vw;
+                  position: relative;
+                  z-index: 0;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 2vw;
+                "
+              >
+                <!-- 页面背景 -->
+                <div style="position: absolute; inset: 15vw 3vw 3vw; overflow: hidden">
+                  <img
+                    v-smart-img
+                    :src="imageUrl('rankingImgBg')"
+                    alt=""
+                    style="
+                      position: absolute;
+                      inset: 0;
+                      z-index: -1;
+
+                      width: 94vw;
+                    "
+                  />
+                </div>
+
+                <!-- 背景图 -->
+                <div
+                  style="
+                    position: absolute;
+                    z-index: 0;
+                    inset: 0;
+                    display: flex;
+                    flex-direction: column;
+                  "
+                >
+                  <!-- 边框头部 -->
+                  <img
+                    v-smart-img
+                    :src="imageUrl('RankingTopBorder')"
+                    alt=""
+                    style="display: block; width: 100%; min-width: 0"
+                  />
+                  <!-- 边框中部占位 -->
+                  <div style="flex: 1; min-width: 0"></div>
+                  <!-- 边框尾部 -->
+                  <img
+                    v-smart-img
+                    :src="imageUrl('RankingBottomBorder')"
+                    alt=""
+                    style="display: block; width: 100%; min-width: 0"
+                  />
+
+                  <!-- 边框中部 -->
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: -1;
+                      inset: 11vw 0 2vw;
+                      display: flex;
+                      flex-direction: column;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      :src="imageUrl('RankingBorder')"
+                      alt=""
+                      style="display: block; width: 100%; height: 100%; min-width: 0"
+                    />
+                  </div>
+                </div>
+
+                <!-- 前三 -->
+                <div>
+                  <!-- 第一 -->
+                  <div style="display: flex; justify-content: center">
+                    <TopUser
+                      rankingType="recharge"
+                      ranking="1"
+                      :BorderImgUrl="imageUrl('top1')"
+                      :avatarUrl="rechargeRankingHasTop3[0].userAvatar"
+                      :name="rechargeRankingHasTop3[0].userName"
+                      distributionValue=""
+                      style="width: 45%"
+                      @click="viewUserInfo(rechargeRankingHasTop3[0].userId)"
+                    />
+                  </div>
+
+                  <!-- 第二三 -->
+                  <div
+                    style="
+                      position: relative;
+                      z-index: 3;
+
+                      display: flex;
+                      justify-content: space-between;
+                      margin-top: -40vw;
+                      pointer-events: none;
+                    "
+                  >
+                    <div
+                      style="pointer-events: auto; width: 30%"
+                      @click.stop="viewUserInfo(rechargeRankingHasTop3[1].userId)"
+                    >
+                      <TopUser
+                        rankingType="recharge"
+                        ranking="2"
+                        :BorderImgUrl="imageUrl('top2')"
+                        :avatarUrl="rechargeRankingHasTop3[1].userAvatar"
+                        :name="rechargeRankingHasTop3[1].userName"
+                        distributionValue=""
+                        style="width: 100%"
+                      />
+                    </div>
+
+                    <div
+                      style="pointer-events: auto; width: 30%"
+                      @click.stop="viewUserInfo(rechargeRankingHasTop3[2].userId)"
+                    >
+                      <TopUser
+                        rankingType="recharge"
+                        ranking="3"
+                        :BorderImgUrl="imageUrl('top3')"
+                        :avatarUrl="rechargeRankingHasTop3[2].userAvatar"
+                        :name="rechargeRankingHasTop3[2].userName"
+                        distributionValue=""
+                        style="width: 100%"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 排行榜 -->
+                <div
+                  v-for="(listItem, index) in showRechargeRanking"
+                  :key="listItem.userId"
+                  style="display: flex; flex-direction: column; gap: 1vw"
+                >
+                  <!-- 基本信息 -->
+                  <itemCenter
+                    style="min-height: 20.43vw"
+                    :imgUrl="imageUrl('itemFrom4Bg')"
+                    :contentStyle="`padding: 0 2vw`"
+                    :lazy="true"
+                    @click="viewUserInfo(listItem.userId)"
+                  >
+                    <!-- 基本信息 -->
+                    <div
+                      style="
+                        flex: 1;
+                        min-width: 0;
+
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        gap: 4px;
+                      "
+                    >
+                      <!-- 排名 -->
+                      <div style="width: 9vw; display: flex; justify-content: center">
+                        <div style="color: #ffe601; font-weight: 700">
+                          {{ listItem?.rank }}
+                        </div>
+                      </div>
+
+                      <!-- 头像 -->
+                      <div style="width: 3.5em; margin: 0 1vw; position: relative; z-index: 0">
+                        <img
+                          :src="listItem?.userAvatar || ''"
+                          alt=""
+                          style="
+                            display: block;
+                            width: 100%;
+
+                            aspect-ratio: 1/1;
+                            border-radius: 50%;
+                            object-fit: cover;
+                          "
+                          @error="handleAvatarImageError"
+                        />
+                      </div>
+
+                      <!-- 名称、id -->
+                      <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+                        <!-- 滚动名称 -->
+                        <itemCenter
+                          style="width: 30vw; height: 10vw; min-width: 0"
+                          :imgUrl="imageUrl('userNameBorder')"
+                          :contentStyle="`padding:0;`"
+                          :lazy="true"
+                        >
+                          <div style="width: 100%; margin-top: 1vw">
+                            <div
+                              style="
+                                height: 100%;
+                                display: flex;
+                                align-items: center;
+                                /* justify-content: center; */
+                                overflow: hidden;
+                              "
+                            >
+                              <!-- 滚动容器 -->
+                              <div
+                                v-if="isTextOverflow(listItem?.userName || '')"
+                                class="scroll-wrapper"
+                              >
+                                <!-- 2套内容 -->
+                                <div class="scroll-content" v-for="value in 2">
+                                  <div
+                                    style="
+                                      color: #fff;
+                                      font-size: 1em;
+                                      font-weight: 860;
+                                      white-space: nowrap;
+                                    "
+                                  >
+                                    {{ listItem?.userName }}
+                                  </div>
+                                </div>
+                              </div>
+
+                              <div v-else style="width: 100%; text-align: center">
+                                <div
+                                  style="
+                                    color: #fff;
+                                    font-size: 1em;
+                                    font-weight: 860;
+                                    white-space: nowrap;
+                                  "
+                                >
+                                  {{ listItem?.userName }}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </itemCenter>
+
+                        <!-- ID -->
+                        <div style="color: #fff; font-weight: 590" class="Textlittle">
+                          {{ $t('user_id_prefix') }}
+                          {{ listItem?.specialAccount || listItem?.account }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 贡献值 -->
+                    <div
+                      style="
+                        width: auto;
+                        min-width: 0;
+
+                        display: flex;
+                        align-items: center;
+                      "
+                    >
+                      <div style="color: #fff; font-weight: 700">${{ listItem?.amount }}</div>
+                    </div>
+                  </itemCenter>
+                </div>
+
+                <!-- 触发加载功能 -->
+                <div ref="RankingLoadmore"></div>
+              </div>
+            </div>
+
+            <!-- 充值奖励模块 -->
+            <div
+              v-show="rechargeRewardsShow"
+              style="display: flex; flex-direction: column; gap: 2vw; padding: 4vw 0 10vw"
+            >
+              <!-- 个人充值信息 -->
+              <div style="padding: 0 4vw">
+                <itemCenter
+                  style="min-height: 39.05vw; z-index: 0"
+                  :imgUrl="imageUrl('earningInfoBg')"
+                  :flip="true"
+                  :contentStyle="`inset:7vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
+                >
+                  <!-- 头像 -->
+                  <img
+                    :src="myRechargeRecode?.userAvatar || ''"
+                    alt=""
+                    style="
+                      position: relative;
+                      z-index: -1;
+                      width: 23vw;
+                      min-width: 0;
+
+                      border-radius: 50%;
+                      aspect-ratio: 1/1;
+                      object-fit: cover;
+                    "
+                    @error="handleAvatarImageError"
+                  />
+
+                  <!-- 基本信息 -->
+                  <div
+                    style="
+                      position: relative;
+                      flex: 1;
+                      min-width: 0;
+                      height: 80%;
+
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: center;
+                      gap: 1vw;
+                    "
+                  >
+                    <!-- 充值帮助按钮 -->
+                    <img
+                      v-smart-img
+                      src="/src/assets/icon/helpWhite.png"
+                      alt=""
+                      class="ruleBt"
+                      @click="openPopup('rechargeRankingHelp')"
+                    />
+
+                    <!-- 名称 -->
+                    <div
+                      style="
+                        max-width: 70%;
+                        min-width: 0;
+                        font-weight: 500;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                      "
+                    >
+                      {{ myRechargeRecode?.userName || '' }}
+                    </div>
+
+                    <!-- 账号 -->
+                    <div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
+
+                    <!-- 总充值 -->
+                    <div
+                      style="
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        white-space: nowrap;
+                      "
+                    >
+                      <div>
+                        {{ t('Accumulated recharge') }}:${{
+                          formatRechargeAmount(myRechargeRecode?.totalAmount)
+                        }}
+                      </div>
+
+                      <img
+                        v-show="rechargehidden"
+                        v-smart-img
+                        :src="imageUrl('rechargeNumHidden')"
+                        alt=""
+                        style="width: 5vw; display: block; object-fit: cover"
+                        @click="rechargehidden = !rechargehidden"
+                      />
+                      <img
+                        v-show="!rechargehidden"
+                        v-smart-img
+                        :src="imageUrl('rechargeNumShow')"
+                        alt=""
+                        style="width: 5vw; display: block; object-fit: cover"
+                        @click="rechargehidden = !rechargehidden"
+                      />
+                    </div>
+                  </div>
+                </itemCenter>
+              </div>
+
+              <!-- 充值奖励 -->
+              <itemCenter
+                :style="{ minHeight: index <= 2 ? '112.26vw' : '142.39vw' }"
+                v-for="(rewardsTop, index) in RechargeRewards"
+                style=""
+                :imgUrl="topImg[index]"
+                :contentStyle="rewardContentLayer(index)"
+              >
+                <!-- 奖励列表 -->
+                <div
+                  v-for="(reward, rewardIndex) in rewardsTop.rewardProps"
+                  :key="rewardIndex"
+                  style="
+                    width: 100%;
+                    align-self: stretch;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                  "
+                >
+                  <!-- 奖品图 -->
+                  <div
+                    style="
+                      width: 80%;
+                      height: 75%;
+                      padding: 6vw 0 2vw;
+                      min-width: 0;
+                      aspect-ratio: 1/1;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <!-- 奖励图片 -->
+                    <img
+                      :src="reward.cover || ''"
+                      alt=""
+                      style="
+                        display: block;
+                        min-width: 0;
+                        width: 80%;
+                        height: 100%;
+                        object-fit: contain;
+                      "
+                      @error="(e) => handleRewardImageError(e, reward.type)"
+                    />
+                  </div>
+
+                  <!-- 数值 -->
+                  <div
+                    style="
+                      width: 80%;
+                      height: 5.5vw;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
+                      {{ formatRewardDisplay(reward.type, reward) }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 领取按钮 -->
+                <div
+                  style="
+                    position: absolute;
+                    bottom: 7vw;
+                    left: 0;
+                    right: 0;
+                    width: 100%;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    v-if="rewardsTop.claimStatus == -1"
+                    class="grayscale-container"
+                    :src="imageUrl('receiveBt')"
+                    alt=""
+                    style="width: 40vw; display: block; object-fit: cover"
+                  />
+                  <img
+                    v-smart-img
+                    v-if="rewardsTop.claimStatus == 0"
+                    :src="imageUrl('receiveBt')"
+                    alt=""
+                    style="width: 40vw; display: block; object-fit: cover"
+                    @click="receiveReward(rewardsTop)"
+                  />
+                  <img
+                    v-smart-img
+                    v-if="rewardsTop.claimStatus == 1"
+                    :src="imageUrl('receivedBt')"
+                    alt=""
+                    style="width: 40vw; display: block; object-fit: cover"
+                  />
+                </div>
+              </itemCenter>
+            </div>
+          </div>
+
+          <!-- 抽奖模块 -->
+          <div v-show="lotteryShow" style="padding: 4vw 0 10vw">
+            <!-- 模块按钮 -->
+            <div
+              style="
+                width: 100vw;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                gap: 10vw;
+              "
+            >
+              <!-- 抽奖&任务模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('task')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('taskBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !taskShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+
+              <!-- 提现模块按钮 -->
+              <div style="width: 30vw; min-width: 0" @click="changeModule('withdraw')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('withdrawBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !withdrawShow,
+                  }"
+                  style="width: 100%; display: block; object-fit: cover"
+                />
+              </div>
+            </div>
+
+            <!-- 抽奖模块 -->
+            <div
+              v-show="taskShow"
+              style="
+                width: 100vw;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                gap: 3vw;
+              "
+            >
+              <!-- 中奖历史按钮 -->
+              <img
+                v-smart-img
+                :src="imageUrl('resultBt')"
+                alt=""
+                style="width: 6vw; position: absolute; z-index: 2; top: 19.5vw; right: 1vw"
+                @click="openPopup('history')"
+              />
+
+              <!-- 奖池 -->
+              <itemCenter
+                style="min-height: 99.73vw; margin-top: 6vw"
+                :imgUrl="imageUrl('lottery')"
+                :contentStyle="`
+                  inset:9vw 10.5vw 10vw 10vw;
+
+                  display: grid;
+                  grid-template-columns: repeat(3, 1fr);
+                  grid-template-rows: repeat(3, 1fr);
+                  gap: 1.2vw 2.5vw;
+
+                  direction: ltr;`"
+              >
+                <!-- 抽奖转盘 -->
+                <div
+                  v-for="(prize, index) in activity.prizeList"
+                  style="
+                    align-self: stretch;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    position: relative;
+                    padding: 0;
+                  "
+                  :style="[getGridPosition(index)]"
+                >
+                  <!-- 奖品图 -->
+                  <div
+                    style="
+                      width: 70%;
+                      flex: 1;
+                      min-width: 0;
+                      min-height: 0;
+                      padding-top: 20%;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      :src="prize.prizeImage || ''"
+                      :alt="prize.prizeName || ''"
+                      style="width: 70%; display: block; object-fit: cover"
+                    />
+                  </div>
+
+                  <!-- 奖励详情 -->
+                  <div
+                    style="
+                      width: 100%;
+                      height: 25%;
+                      min-width: 0;
+                      min-height: 0;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        font-size: 0.9em;
+                        font-weight: 700;
+                        color: #fff;
+                        text-shadow: 0 1px 0 #339370;
+                        white-space: nowrap;
+                      "
+                    >
+                      {{ prize.prizeName }}
+                    </div>
+                  </div>
+
+                  <!-- 转到的奖品项 -->
+                  <img
+                    v-smart-img
+                    v-show="activeIndex === index"
+                    :src="imageUrl('prizeActiveFrame')"
+                    alt=""
+                    style="
+                      display: block;
+                      width: 105%;
+
+                      position: absolute;
+                      inset: 50% 0 0 50%;
+                      transform: translate(-50%, -50%);
+                    "
+                  />
+                </div>
+              </itemCenter>
+
+              <!-- 我的抽奖券数量 -->
+              <div style="display: flex; justify-content: center">
+                <div style="font-size: 1.3em; font-weight: 600">
+                  {{ $t('remaining_lottery_tickets') }}: {{ rollTimes }}
+                </div>
+              </div>
+
+              <!-- 抽奖按钮 -->
+              <div style="display: flex; justify-content: center; gap: 4vw" class="drawBts">
+                <!-- 单抽 -->
+                <itemCenter
+                  style="min-height: 20.11vw; width: 45vw"
+                  :imgUrl="imageUrl('draw1BtBg')"
+                  :contentStyle="``"
+                  @click="sweepstakes(1)"
+                >
+                  <div style="color: #fff; font-size: 2em; font-weight: 600">
+                    {{ $t('single_spin') }}
+                  </div>
+                </itemCenter>
+
+                <!-- 10连抽 -->
+                <itemCenter
+                  style="min-height: 20.11vw; width: 45vw"
+                  :imgUrl="imageUrl('draw10BtBg')"
+                  :contentStyle="``"
+                  @click="sweepstakes(10)"
+                >
+                  <div style="color: #fff; font-size: 2em; font-weight: 600">
+                    {{ $t('ten_spin') }}
+                  </div>
+                </itemCenter>
+              </div>
+
+              <!-- 任务列表 -->
+              <div
+                style="
+                  position: relative;
+                  z-index: 2;
+                  margin: 0 4vw;
+                  border-radius: 12px;
+                  background:
+                    linear-gradient(
+                      99deg,
+                      rgba(211, 212, 213, 0.15) 12.86%,
+                      rgba(139, 145, 147, 0.15) 15.34%,
+                      rgba(87, 95, 99, 0.15) 17.82%,
+                      rgba(55, 65, 69, 0.15) 18.64%,
+                      rgba(43, 54, 58, 0.15) 19.47%,
+                      rgba(52, 62, 66, 0.15) 22.77%,
+                      rgba(77, 85, 89, 0.15) 26.9%,
+                      rgba(117, 123, 126, 0.15) 32.68%,
+                      rgba(173, 176, 177, 0.15) 38.46%,
+                      rgba(205, 205, 206, 0.15) 41.76%,
+                      rgba(198, 199, 200, 0.15) 43.41%,
+                      rgba(180, 182, 184, 0.15) 45.06%,
+                      rgba(151, 156, 158, 0.15) 46.71%,
+                      rgba(111, 118, 122, 0.15) 49.19%,
+                      rgba(72, 83, 87, 0.15) 50.84%,
+                      rgba(76, 86, 90, 0.15) 52.49%,
+                      rgba(89, 98, 102, 0.15) 54.97%,
+                      rgba(112, 117, 120, 0.15) 57.45%,
+                      rgba(143, 144, 146, 0.15) 59.1%,
+                      rgba(152, 152, 154, 0.15) 59.92%,
+                      rgba(165, 165, 166, 0.15) 63.23%,
+                      rgba(199, 199, 200, 0.15) 70.66%,
+                      rgba(255, 255, 255, 0.15) 78.91%,
+                      rgba(209, 209, 210, 0.15) 81.39%,
+                      rgba(79, 79, 83, 0.15) 87.17%,
+                      rgba(27, 27, 32, 0.15) 90.47%,
+                      rgba(49, 49, 54, 0.15) 91.3%,
+                      rgba(77, 77, 81, 0.15) 92.12%,
+                      rgba(116, 116, 118, 0.15) 92.95%,
+                      rgba(165, 165, 167, 0.15) 94.6%,
+                      rgba(233, 233, 233, 0.15) 95.43%
+                    ),
+                    linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
+                  background-blend-mode: hard-light, normal, normal;
+
+                  padding: 12px;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 12px;
+                "
+              >
+                <div style="font-weight: 590">{{ t('Task for tickets') }}</div>
+                <div
+                  v-for="task in taskList"
+                  style="
+                    border-radius: 8px;
+                    border: 1px solid rgba(64, 64, 64, 0.5);
+                    background: rgba(240, 240, 240, 0.3);
+                    box-shadow:
+                      -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                      -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                      -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                      -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                      -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                    backdrop-filter: blur(7.5px);
+
+                    display: flex;
+                    padding: 8px;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
+                  <!-- 图标 -->
+                  <div style="width: 20%">
+                    <img
+                      v-if="task.taskType == 1"
+                      v-smart-img
+                      :src="imageUrl('taskTalk')"
+                      alt=""
+                      width="100%"
+                      style="display: block"
+                    />
+                    <img
+                      v-if="task.taskType == 2"
+                      v-smart-img
+                      :src="imageUrl('taskGift')"
+                      alt=""
+                      width="100%"
+                      style="display: block"
+                    />
+                    <img
+                      v-if="task.taskType == 4"
+                      v-smart-img
+                      :src="imageUrl('taskGame')"
+                      alt=""
+                      width="100%"
+                      style="display: block"
+                    />
+                    <img
+                      v-if="task.taskType == 5"
+                      v-smart-img
+                      :src="imageUrl('taskRecharge')"
+                      alt=""
+                      width="100%"
+                      style="display: block"
+                    />
+                  </div>
+
+                  <!-- 内容 -->
+                  <div style="width: 60%">
+                    <!-- 任务进度 -->
+                    <div style="color: #fff; font-weight: 590; font-size: 0.9em">
+                      {{ showTarget(task) }}
+                    </div>
+
+                    <!-- 任务奖励 -->
+                    <div style="display: flex; align-items: center; gap: 8px">
+                      <div style="color: #fff; font-weight: 590">{{ t('Rewards:') }}</div>
+                      <img
+                        v-smart-img
+                        :src="imageUrl('ticket')"
+                        :alt="t('ticket')"
+                        width="15%"
+                        style="display: block"
+                      />
+                      <div style="color: #fff; font-weight: 590">*{{ task.rewardValue }}</div>
+                    </div>
+                  </div>
+
+                  <!-- 按钮 -->
+                  <div style="width: 20%">
+                    <!-- 前往任务 -->
+                    <itemCenter
+                      v-if="task.taskStatus == 0"
+                      style="min-height: 7.79vw"
+                      :imgUrl="imageUrl('taskBtGo')"
+                    >
+                      <div style="font-size: 1em; font-weight: 600; white-space: nowrap">
+                        {{ t('task_go') }}
+                      </div>
+                    </itemCenter>
+
+                    <!-- 领取抽奖券 -->
+                    <itemCenter
+                      v-else-if="task.taskStatus === 1"
+                      style="min-height: 7.79vw"
+                      :imgUrl="imageUrl('taskBtReceive')"
+                      @click="receiveTaskReward(task.taskCode)"
+                    >
+                      <div style="font-size: 1em; font-weight: 600; white-space: nowrap">
+                        {{ t('task_receive') }}
+                      </div>
+                    </itemCenter>
+
+                    <!-- 已完成 -->
+                    <itemCenter
+                      v-else
+                      style="min-height: 7.79vw"
+                      :imgUrl="imageUrl('taskBtReceived')"
+                    >
+                      <div style="font-size: 0.9em; font-weight: 600; white-space: nowrap">
+                        {{ t('task_received') }}
+                      </div>
+                    </itemCenter>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 收益模块 -->
+            <div
+              v-show="withdrawShow"
+              style="width: 100%; padding: 4vw; display: flex; flex-direction: column; gap: 3vw"
+            >
+              <!-- 个人信息 -->
+              <div
+                style="
+                  border-radius: 12px;
+                  background:
+                    linear-gradient(
+                      99deg,
+                      rgba(211, 212, 213, 0.15) 12.86%,
+                      rgba(139, 145, 147, 0.15) 15.34%,
+                      rgba(87, 95, 99, 0.15) 17.82%,
+                      rgba(55, 65, 69, 0.15) 18.64%,
+                      rgba(43, 54, 58, 0.15) 19.47%,
+                      rgba(52, 62, 66, 0.15) 22.77%,
+                      rgba(77, 85, 89, 0.15) 26.9%,
+                      rgba(117, 123, 126, 0.15) 32.68%,
+                      rgba(173, 176, 177, 0.15) 38.46%,
+                      rgba(205, 205, 206, 0.15) 41.76%,
+                      rgba(198, 199, 200, 0.15) 43.41%,
+                      rgba(180, 182, 184, 0.15) 45.06%,
+                      rgba(151, 156, 158, 0.15) 46.71%,
+                      rgba(111, 118, 122, 0.15) 49.19%,
+                      rgba(72, 83, 87, 0.15) 50.84%,
+                      rgba(76, 86, 90, 0.15) 52.49%,
+                      rgba(89, 98, 102, 0.15) 54.97%,
+                      rgba(112, 117, 120, 0.15) 57.45%,
+                      rgba(143, 144, 146, 0.15) 59.1%,
+                      rgba(152, 152, 154, 0.15) 59.92%,
+                      rgba(165, 165, 166, 0.15) 63.23%,
+                      rgba(199, 199, 200, 0.15) 70.66%,
+                      rgba(255, 255, 255, 0.15) 78.91%,
+                      rgba(209, 209, 210, 0.15) 81.39%,
+                      rgba(79, 79, 83, 0.15) 87.17%,
+                      rgba(27, 27, 32, 0.15) 90.47%,
+                      rgba(49, 49, 54, 0.15) 91.3%,
+                      rgba(77, 77, 81, 0.15) 92.12%,
+                      rgba(116, 116, 118, 0.15) 92.95%,
+                      rgba(165, 165, 167, 0.15) 94.6%,
+                      rgba(233, 233, 233, 0.15) 95.43%
+                    ),
+                    linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
+                  background-blend-mode: hard-light, normal, normal;
+
+                  padding: 16px 12px;
+
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+
+                  position: relative;
+                "
+              >
+                <!-- 头像 -->
+                <img
+                  :src="userInfo.userAvatar || ''"
+                  alt=""
+                  style="
+                    width: 12vw;
+                    min-width: 0;
+
+                    border-radius: 50%;
+                    aspect-ratio: 1/1;
+                    object-fit: cover;
+                  "
+                  @error="handleAvatarImageError"
+                />
+
+                <!-- 基本信息 -->
+                <div
+                  style="
+                    flex: 1;
+                    min-width: 0;
+                    align-self: stretch;
+
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    gap: 4px;
+                  "
+                >
+                  <!-- 帮助按钮 -->
+                  <img
+                    v-smart-img
+                    src="/src/assets/icon/helpWhite.png"
+                    alt=""
+                    class="ruleBt"
+                    @click="openPopup('withdrawalHelp')"
+                  />
+                  <!-- 名称 -->
+                  <div
+                    style="
+                      max-width: 70%;
+                      min-width: 0;
+                      font-weight: 500;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ userInfo.userNickname || '' }}
+                  </div>
+                  <div style="display: flex; justify-content: space-between; align-items: center">
+                    <div style="min-width: 0">
+                      {{ $t('user_id_prefix') }} {{ userInfo.account || '' }}
+                    </div>
+                    <div style="width: auto; font-weight: 600">
+                      {{ t('current_earnings', { amount: currentAmount.availableAmount }) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 操作抽屉 -->
+              <div
+                style="
+                  border-radius: 12px;
+                  background:
+                    linear-gradient(
+                      99deg,
+                      rgba(211, 212, 213, 0.15) 12.86%,
+                      rgba(139, 145, 147, 0.15) 15.34%,
+                      rgba(87, 95, 99, 0.15) 17.82%,
+                      rgba(55, 65, 69, 0.15) 18.64%,
+                      rgba(43, 54, 58, 0.15) 19.47%,
+                      rgba(52, 62, 66, 0.15) 22.77%,
+                      rgba(77, 85, 89, 0.15) 26.9%,
+                      rgba(117, 123, 126, 0.15) 32.68%,
+                      rgba(173, 176, 177, 0.15) 38.46%,
+                      rgba(205, 205, 206, 0.15) 41.76%,
+                      rgba(198, 199, 200, 0.15) 43.41%,
+                      rgba(180, 182, 184, 0.15) 45.06%,
+                      rgba(151, 156, 158, 0.15) 46.71%,
+                      rgba(111, 118, 122, 0.15) 49.19%,
+                      rgba(72, 83, 87, 0.15) 50.84%,
+                      rgba(76, 86, 90, 0.15) 52.49%,
+                      rgba(89, 98, 102, 0.15) 54.97%,
+                      rgba(112, 117, 120, 0.15) 57.45%,
+                      rgba(143, 144, 146, 0.15) 59.1%,
+                      rgba(152, 152, 154, 0.15) 59.92%,
+                      rgba(165, 165, 166, 0.15) 63.23%,
+                      rgba(199, 199, 200, 0.15) 70.66%,
+                      rgba(255, 255, 255, 0.15) 78.91%,
+                      rgba(209, 209, 210, 0.15) 81.39%,
+                      rgba(79, 79, 83, 0.15) 87.17%,
+                      rgba(27, 27, 32, 0.15) 90.47%,
+                      rgba(49, 49, 54, 0.15) 91.3%,
+                      rgba(77, 77, 81, 0.15) 92.12%,
+                      rgba(116, 116, 118, 0.15) 92.95%,
+                      rgba(165, 165, 167, 0.15) 94.6%,
+                      rgba(233, 233, 233, 0.15) 95.43%
+                    ),
+                    linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
+                  background-blend-mode: hard-light, normal, normal;
+
+                  padding: 12px;
+                  font-weight: 600;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 8px;
+                "
+              >
+                <!-- 转账功能 -->
+                <div
+                  style="display: flex; justify-content: space-between; align-items: center"
+                  @click="drawerShowBt('transfer')"
+                  v-if="userIdentity.anchor"
+                >
+                  <div>{{ t('transfer_to_recharge_agent') }}</div>
+                  <img
+                    v-smart-img
+                    class="flipImg"
+                    src="/src/assets/icon/arrowWhite.png"
+                    alt=""
+                    style="width: 1em; display: block; transition: all 0.2s ease"
+                    :class="{ rotated: transferShow }"
+                  />
+                </div>
+
+                <!-- 转账抽屉 -->
+                <transition name="drawer">
+                  <div
+                    v-if="transferShow"
+                    style="
+                      background-color: transparent;
+                      display: flex;
+                      flex-direction: column;
+                      gap: 12px;
+                    "
+                  >
+                    <!-- 转账对象 -->
+                    <div
+                      v-if="selectedPayee.id"
+                      style="
+                        border-radius: 8px;
+                        border: 1px solid rgba(64, 64, 64, 0.5);
+                        background: rgba(240, 240, 240, 0.3);
+                        box-shadow:
+                          -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                          -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                          -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                          -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                          -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                        backdrop-filter: blur(7.5px);
+                        padding: 12px;
+                      "
+                    >
+                      <!-- 基本信息 -->
+                      <div style="display: flex; align-items: center">
+                        <!-- 头像 -->
+                        <div style="position: relative; width: 50px; margin-right: 12px">
+                          <img
+                            :src="selectedPayee.avatar || ''"
+                            :alt="selectedPayee.name || ''"
+                            style="width: 100%; object-fit: cover; border-radius: 50%"
+                            @error="handleAvatarImageError"
+                          />
+                        </div>
+                        <!-- 个人信息 -->
+                        <div style="flex: 1">
+                          <div style="margin: 0 0 4px 0; font-weight: 700">
+                            {{ selectedPayee.name || '' }}
+                          </div>
+                          <div style="margin: 0; font-size: 0.9em; font-weight: 500">
+                            {{ $t('user_id_prefix') }} {{ selectedPayee.account || '' }}
+                          </div>
+                        </div>
+                        <!-- 换人按钮 -->
+                        <button
+                          style="
+                            border-radius: 12px;
+                            background: linear-gradient(
+                              152deg,
+                              rgba(198, 112, 255, 0.6) 7.01%,
+                              rgba(119, 38, 255, 0.6) 92.99%
+                            );
+                            border: none;
+                            font-weight: 500;
+                            padding: 2px 8px;
+                          "
+                          @click="searchPayee"
+                        >
+                          {{ t('change') }}
+                        </button>
+                      </div>
+                      <!-- 身份图标 -->
+                      <div style="margin-left: 50px; display: flex; gap: 5px">
+                        <img
+                          v-if="selectedPayee.isHost"
+                          v-smart-img
+                          src="/src/assets/icon/identity/host.png"
+                          alt=""
+                          width="30%"
+                        />
+                        <img
+                          v-if="selectedPayee.isAgency"
+                          v-smart-img
+                          src="/src/assets/icon/identity/agency.png"
+                          alt=""
+                          width="30%"
+                          style="display: block"
+                        />
+                        <img
+                          v-if="selectedPayee.hasSalary"
+                          v-smart-img
+                          src="/src/assets/icon/identity/coinSeller.png"
+                          alt=""
+                          width="30%"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- 空状态 - 默认显示 -->
+                    <div
+                      v-else
+                      style="
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        border-radius: 8px;
+                        border: 1px solid rgba(64, 64, 64, 0.5);
+                        background: rgba(240, 240, 240, 0.3);
+                        box-shadow:
+                          -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                          -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                          -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                          -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                          -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                        backdrop-filter: blur(7.5px);
+
+                        padding: 12px 0;
+                      "
+                    >
+                      <div
+                        style="
+                          font-weight: 590;
+                          padding: 16px 24px;
+
+                          border-radius: 20px;
+                          border: 1px solid rgba(156, 156, 156, 0.5);
+                          background: rgba(240, 240, 240, 0.1);
+                          box-shadow:
+                            0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                            -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                            -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                            -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                            -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                          backdrop-filter: blur(10px);
+                        "
+                        @click="searchPayee"
+                      >
+                        {{ t('select') }}
+                      </div>
+                    </div>
+
+                    <!-- 转账金额选择 -->
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
+                      <div
+                        v-for="coin in coinOptions"
+                        :key="coin.id"
+                        @click="selectCoin(coin)"
+                        :class="['coin-item', { selected: selectedCoin?.id === coin.id }]"
+                      >
+                        <img
+                          v-smart-img
+                          src="/src/assets/icon/dollar.png"
+                          alt=""
+                          style="width: 40%"
+                        />
+                        <div style="font-weight: 500; color: #fff">${{ coin.price }}</div>
+                      </div>
+                    </div>
+
+                    <!-- 转账按钮 -->
+                    <div style="display: flex; justify-content: center; align-items: center">
+                      <div
+                        style="
+                          width: 70%;
+                          padding: 12px;
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+
+                          border-radius: 20px;
+                          border: 1px solid rgba(156, 156, 156, 0.5);
+                          background: rgba(240, 240, 240, 0.3);
+                          box-shadow:
+                            0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                            -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                            -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                            -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                            -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                          backdrop-filter: blur(10px);
+
+                          font-weight: 590;
+                        "
+                        @click="transfer"
+                        :disabled="!selectedCoin || !selectedPayee.value?.id"
+                      >
+                        {{ t('transfer') }}
+                      </div>
+                    </div>
+                  </div>
+                </transition>
+
+                <!-- 兑换金币 -->
+                <div
+                  style="display: flex; justify-content: space-between; align-items: center"
+                  @click="drawerShowBt('exchange')"
+                >
+                  <div>{{ t('exchange_gold_coins') }}</div>
+                  <img
+                    v-smart-img
+                    class="flipImg"
+                    src="/src/assets/icon/arrowWhite.png"
+                    alt=""
+                    style="width: 1em; display: block; transition: all 0.2s ease"
+                    :class="{ rotated: exchangeShow }"
+                  />
+                </div>
+
+                <!-- 兑换金币抽屉 -->
+                <transition name="drawer">
+                  <div
+                    v-if="exchangeShow"
+                    style="
+                      background-color: transparent;
+                      display: flex;
+                      flex-direction: column;
+                      gap: 12px;
+                    "
+                  >
+                    <!-- 转账金额选择 -->
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
+                      <div
+                        v-for="coin in coinOptions"
+                        :key="coin.id"
+                        @click="selectCoin(coin)"
+                        :class="['coin-item', { selected: selectedCoin?.id == coin.id }]"
+                      >
+                        <img
+                          v-smart-img
+                          src="/src/assets/icon/coin.png"
+                          alt=""
+                          style="width: 40%"
+                        />
+                        <div style="font-size: 0.7em">{{ coin.amount }} coins x1</div>
+                        <div style="font-weight: 500; color: #fff">${{ coin.price }}</div>
+                      </div>
+                    </div>
+
+                    <!-- 转账按钮 -->
+                    <div style="display: flex; justify-content: center; align-items: center">
+                      <div
+                        style="
+                          width: 70%;
+                          padding: 12px;
+
+                          display: flex;
+                          justify-content: center;
+                          align-items: center;
+
+                          border-radius: 20px;
+                          border: 1px solid rgba(156, 156, 156, 0.5);
+                          background: rgba(240, 240, 240, 0.3);
+                          box-shadow:
+                            0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
+                            -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                            -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                            -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                            -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                            -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                          backdrop-filter: blur(10px);
+
+                          font-weight: 590;
+                        "
+                        :disabled="!selectedCoin || !selectedPayee.value?.id"
+                        @click="exchangeCoinBt"
+                      >
+                        {{ t('exchange') }}
+                      </div>
+                    </div>
+                  </div>
+                </transition>
+
+                <!-- 提取现金 -->
+                <div
+                  style="display: flex; justify-content: space-between; align-items: center"
+                  @click="goToWithdraw"
+                  v-if="currentAmount.availableAmount >= 10"
+                >
+                  <div>{{ t('go_to_withdraw') }}</div>
+                  <img
+                    v-smart-img
+                    class="flipImg"
+                    src="/src/assets/icon/arrowWhite.png"
+                    alt=""
+                    style="width: 1em; display: block"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 我的排名占位 -->
+        <div
+          v-show="(rankShow && rankingShow) || (rechargeShow && rechargeRankShow)"
+          style="height: 25vw"
+        ></div>
+
+        <!-- 我的排名 -->
+        <itemCenter
+          v-show="(rankShow && rankingShow) || (rechargeShow && rechargeRankShow)"
+          style="min-height: 22.3vw; position: fixed; bottom: -1px; z-index: 3"
+          :imgUrl="imageUrl('myRankingBg')"
+          :contentStyle="`padding: 1vw 3vw 0`"
+        >
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              gap: 8px;
+            "
+          >
+            <!-- 排名 -->
+            <div style="width: 10vw; display: flex; justify-content: center">
+              <div style="color: #ffe601; font-weight: 700">
+                {{ (rankShow ? myRanking.rank : myRechargeRanking.rank) || 999 }}
+              </div>
+            </div>
+
+            <!-- 头像 -->
+            <img
+              :src="(rankShow ? myRanking.avatar : myRechargeRanking.userAvatar) || ''"
+              alt=""
+              style="
+                display: block;
+                width: 4em;
+                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="display: flex; min-width: 0">
+                <div
+                  style="
+                    color: #fff;
+                    font-size: 1em;
+                    font-weight: 860;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    direction: ltr;
+                  "
+                >
+                  {{ rankShow ? myRanking.nickname : myRechargeRanking.userName }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+
+              display: flex;
+              align-items: center;
+            "
+          >
+            <div
+              v-if="rankShow"
+              style="display: flex; justify-content: center; align-items: center"
+            >
+              <img
+                v-smart-img
+                src="/src/assets/icon/coin.png"
+                alt=""
+                style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+              />
+              <div style="color: #ffe601; font-weight: 700">
+                {{ myRanking.quantity || 0 }}
+              </div>
+            </div>
+            <div v-else style="color: #fff; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
+          </div>
+        </itemCenter>
+
+        <!-- 弹窗遮罩层 -->
+        <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+          <!-- 居中弹窗 -->
+          <div
+            style="
+              width: 100vw;
+              height: 100vh;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            @click="closedPopup"
+          >
+            <!-- 抽奖结果 -->
+            <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
+              <itemCenter
+                style="min-height: 92.39vw"
+                :imgUrl="imageUrl('resultBg')"
+                :contentStyle="`inset: 20vw 7vw 8vw;
+                flex-direction: column;
+                justify-content: space-between;
+                gap:2vw`"
+              >
+                <!-- 奖品图展示 -->
+                <div
+                  style="
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 45vw;
+                  "
+                >
+                  <!-- 上一个奖品 -->
+                  <div
+                    style="
+                      width: 8vw;
+                      align-self: stretch;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      class="flipImg"
+                      v-show="result.length > 1 && resultShowIndex > 0"
+                      :src="imageUrl('resultBack')"
+                      alt=""
+                      style="display: block; width: 80%; object-fit: cover"
+                      @click="resultShowIndex--"
+                    />
+                  </div>
+
+                  <!-- 奖品 -->
+                  <img
+                    :src="result[resultShowIndex]?.prize?.prizeImage"
+                    alt=""
+                    width="50%"
+                    style="display: block"
+                  />
+
+                  <!-- 下一个奖品 -->
+                  <div
+                    style="
+                      width: 8vw;
+                      align-self: stretch;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      class="flipImg"
+                      v-show="result.length > 1 && resultShowIndex + 1 < result.length"
+                      :src="imageUrl('resultNext')"
+                      alt=""
+                      style="display: block; width: 80%; object-fit: cover"
+                      @click="resultShowIndex++"
+                    />
+                  </div>
+                </div>
+
+                <!-- 奖品说明 -->
+                <div
+                  style="
+                    width: 100%;
+                    height: 5vw;
+                    text-align: center;
+                    font-size: 1.2em;
+                    font-weight: 590;
+
+                    position: relative;
+                    color: #efd47a;
+                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+                  "
+                >
+                  {{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
+                  <div v-if="result.length > 1" class="resultNum">
+                    {{ resultShowIndex + 1 }} / {{ result.length }}
+                  </div>
+                </div>
+
+                <!-- 关闭弹窗按钮 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('resultGoOnBt')"
+                  alt=""
+                  style="display: block; width: 30vw; object-fit: cover"
+                  @click="closedPopup"
+                />
+              </itemCenter>
+            </div>
+
+            <!-- 中奖历史 -->
+            <div v-show="historyShow" style="position: relative; width: 95%" @click.stop>
+              <itemCenter
+                style="min-height: 97.53vw"
+                :imgUrl="imageUrl('historyBg')"
+                :contentStyle="`padding: 22vw 6vw 11vw;`"
+              >
+                <div
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    overflow-y: auto;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                  "
+                  class="scrollY"
+                >
+                  <div
+                    v-for="(record, index) in myRecords"
+                    style="
+                      border-radius: 8px;
+                      border: 1px solid rgba(64, 64, 64, 0.5);
+                      background: rgba(240, 240, 240, 0.3);
+                      box-shadow:
+                        -42px 103px 31px 0 rgba(145, 145, 145, 0),
+                        -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+                        -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+                        -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+                        -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+                      backdrop-filter: blur(7.5px);
+
+                      display: flex;
+                      padding: 12px;
+                      justify-content: space-between;
+                      align-items: center;
+                    "
+                  >
+                    <div style="display: flex; align-items: center; gap: 4px">
+                      <img
+                        :src="record?.prize?.prizeImage || ''"
+                        alt=""
+                        style="width: 10vw; min-width: 0; object-fit: cover; display: block"
+                      />
+                      <div
+                        style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left"
+                      >
+                        {{ record?.prize?.prizeName }}
+                      </div>
+                    </div>
+                    <div
+                      style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left"
+                    >
+                      {{ formatUTCCustom(record.drawTime) }}
+                    </div>
+                  </div>
+                </div>
+              </itemCenter>
+            </div>
+
+            <!-- 排行榜帮助弹窗 -->
+            <div v-show="rankingHelpShow" @click.stop>
+              <itemCenter
+                style="min-height: 142.39vw"
+                :imgUrl="imageUrl(getImgName('helpBg'))"
+                :contentStyle="`inset:27vw 6vw 10vw;overflow-y: auto;display:block;`"
+              >
+                <div class="helpInfo">
+                  <p>{{ $t('ranking_help_rule_1') }}</p>
+                  <p>{{ $t('ranking_help_rule_2') }}</p>
+                  <p>{{ $t('ranking_help_rule_3') }}</p>
+                  <p>{{ $t('ranking_help_rule_4') }}</p>
+                  <p>{{ $t('ranking_help_rule_5') }}</p>
+                  <p>{{ $t('ranking_help_rule_6') }}</p>
+                </div>
+              </itemCenter>
+            </div>
+
+            <!-- 充值奖励帮助弹窗 -->
+            <div v-show="rechargeRankingHelpShow" @click.stop>
+              <itemCenter
+                style="min-height: 112.26vw"
+                :imgUrl="imageUrl('rechargeHelpBg')"
+                :contentStyle="`inset:27vw 6vw 10vw;overflow-y: auto;display:block;`"
+              >
+                <div class="helpInfo">
+                  <p>{{ $t('recharge_help_rule_1') }}</p>
+                  <p>{{ $t('recharge_help_rule_2') }}</p>
+                  <p>{{ $t('recharge_help_rule_3') }}</p>
+                </div>
+              </itemCenter>
+            </div>
+
+            <!-- 兑换规则弹窗 -->
+            <div v-show="withdrawalHelpShow" @click.stop>
+              <itemCenter
+                style="min-height: 103.46vw"
+                :imgUrl="imageUrl('withdrawHelpBg')"
+                :contentStyle="`inset:27vw 6vw 10vw;overflow-y: auto;display:block;`"
+              >
+                <div class="helpInfo">
+                  <p>{{ $t('withdrawal_help_rule_1') }}</p>
+                  <p>{{ $t('withdrawal_help_rule_2') }}</p>
+                  <p>{{ $t('withdrawal_help_rule_3') }}</p>
+                </div>
+              </itemCenter>
+            </div>
+          </div>
+        </maskLayer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { connectToApp } from '@/utils/appConnector.js'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { useLangStore } from '@/stores/lang'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/image/imagePreloader.js'
+import { setUserInfo } from '@/utils/userStore.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
+import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
+import { useThrottle } from '@/utils/useDebounce'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+
+import { getMemberProfile, getUserIdentity } from '@/api/wallet'
+import {
+  getThisWeekRewardsAndGifts,
+  getRankingListAndMyRanking,
+  getOverallRankingTop3, // 获取总榜前三
+} from '@/api/activity.js'
+import {
+  ranklist, //获取排行榜
+  activityDetail, // 获取活动详情
+  myRecharge, // 获取充值记录
+  activityRewardConfigs, // 获取活动奖励配置列表
+  myTickets, // 获取剩余中奖券
+  myTotalDrawCount, // 获取我的累计抽奖次数
+  onceDraw, // 执行单次抽奖
+  multiDraw, // 执行连抽
+  drawRecords, // 获取中奖记录
+  ActTaskList, // 获取任务列表
+  rewardConfigsBadge, // 获取累计抽奖-徽章信息
+  receiveTickets, // 领取任务奖励
+  receiveRechargeReward, // 领取充值奖励
+  receiveRewardBadge, // 领取累计抽奖奖励-徽章
+  winnerHistory, //获取历史中奖用户
+  withdrawableAmount, //获取可提现金额
+  transferActivityDollar, // 转账活动美金
+  exchangeCoin, //兑换代币
+} from '@/api/lottery'
+
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import TopUser from './components/topUser.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const isLoading = ref(true) // 预加载状态
+
+const { t, locale } = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/LesserBairam/', 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 rankingHelpShow = ref(false) // 排行榜帮助弹窗
+const rechargeRankingHelpShow = ref(false) // 充值排行榜帮助弹窗
+const withdrawalHelpShow = ref(false) // 提现帮助弹窗
+const resultShow = ref(false) // 抽奖结果
+const historyShow = ref(false) // 历史
+
+const maskLayerShow = computed(() => {
+  return (
+    rankingHelpShow.value ||
+    rechargeRankingHelpShow.value ||
+    withdrawalHelpShow.value ||
+    resultShow.value ||
+    historyShow.value
+  )
+})
+
+// 模块切换展示
+const rankShow = ref(true) // 排行榜标签页
+const rechargeShow = ref(false) // 充值标签页
+const lotteryShow = ref(false) // 抽奖标签页
+
+// 标签页切换
+const rankingShow = ref(true) // 排行标签页
+const rewardsShow = ref(false) // 奖励标签页
+const rechargeRankShow = ref(true) // 充值排行标签页
+const rechargeRewardsShow = ref(false) // 充值奖励标签页
+const taskShow = ref(true) // 抽奖&任务标签页
+const withdrawShow = ref(false) // 提现标签页
+
+// 抽屉展示
+const transferShow = ref(false) //转账
+const exchangeShow = ref(false) //兑换
+
+const selectedCoin = ref(null) // 选择的币种
+
+const barrageList = ref([]) // 弹幕数据
+
+// 排名模块
+const Ranking = ref([]) // 原始排行榜
+const myRanking = ref({}) // 我的排名
+const rankingPageNo = ref(1) //分页页码
+const rankingAdd = ref([]) //加载排行榜项
+
+// 完整排行榜
+const rankingTotal = computed(() => {
+  return [...Ranking.value, ...rankingAdd.value]
+})
+
+// 排行榜前3名
+const RankingHasTop3 = computed(() => {
+  let RankingTop3 = rankingTotal.value.filter((_, index) => index < 3)
+  if (RankingTop3.length < 3) {
+    let addNullUser = Array.from({ length: 3 - RankingTop3.length }, () => ({
+      avatar: '',
+      nickname: '',
+      account: '',
+      amount: '',
+    }))
+    RankingTop3.push(...addNullUser)
+  }
+  return RankingTop3
+})
+
+// 排行榜4名开始
+const showRanking = computed(() => {
+  return rankingTotal.value.filter((_, index) => index >= 3)
+  // return []
+})
+
+const rewardsTop3 = ref([]) // 原前3名奖励列表
+// 处理后的前3名奖励列表
+const showRewardsTop3 = computed(() => {
+  let newRewardsTop3 = JSON.parse(JSON.stringify(rewardsTop3.value)) // 对 rewardsTop3 进行深拷贝，避免引用问题
+  return newRewardsTop3
+})
+
+const myRankingData = computed(() => {
+  return myRanking.value
+})
+
+// 充值排名模块
+const rechargePageNo = ref(1) // 充值排名页码
+const rechargeRanking = ref([]) // 充值排名
+const addRechargeRanking = ref([]) // 补充的充值排名
+const RankingLoadmore = ref(null) //触底模块
+const myRechargeRanking = ref({}) // 我的充值排名
+
+// 完整充值排行榜
+const rechargeRankingTotal = computed(() => {
+  return [...rechargeRanking.value, ...addRechargeRanking.value]
+})
+
+// 充值排行榜前3名
+const rechargeRankingHasTop3 = computed(() => {
+  let RankingTop3 = rechargeRankingTotal.value.filter((_, index) => index < 3)
+  if (RankingTop3.length < 3) {
+    let addNullUser = Array.from({ length: 3 - RankingTop3.length }, () => ({
+      userAvatar: '',
+      userName: '',
+      amount: '',
+    }))
+    RankingTop3.push(...addNullUser)
+  }
+  return RankingTop3
+})
+
+// 排行榜4名开始
+const showRechargeRanking = computed(() => {
+  return rechargeRankingTotal.value.filter((_, index) => index >= 3)
+  // return []
+})
+
+const myRechargeRankingData = computed(() => {
+  return myRechargeRanking.value
+})
+
+// 充值奖池模块
+const myRechargeRecode = ref([]) // 我的充值记录
+const RechargeRewards = ref([]) // 充值奖池
+
+const giftsList = ref([]) // 礼物列表
+
+const activity = ref({}) //活动详情和奖池
+const activeIndex = ref(0) // 当前高亮格子
+const isRolling = ref(false) // 抽奖状态
+const rollTimes = ref(0) // 拥有抽奖券量
+const totalDraw = ref({}) // 我的总抽奖次数
+const currentAmount = ref({ availableAmount: 0 }) //可提现金额
+const result = ref([]) // 抽奖结果
+const resultShowIndex = ref(0)
+const myRecords = ref([]) // 抽奖记录
+
+const userInfo = ref({}) //用户信息
+const userIdentity = ref({}) //用户身份
+
+const taskList = ref([]) //任务列表
+
+// 活动截止时间（北京时间 3 月 19 号早上 5 点）
+const ACTIVITY_END_TIME = new Date('2026-04-04 05:00:00').getTime()
+
+// 获取每周一早上5点的时间戳（沙特时间0点 = 北京时间5点）
+const getNextMondayInBeijing = () => {
+  const now = new Date()
+  const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象
+
+  // 转换为北京时间来判断星期几
+  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
+  const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8
+
+  const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
+  const beijingHour = beijingTime.getHours()
+
+  // 转换为 0=周一, 1=周二, ..., 6=周日
+  const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1
+
+  let daysToAdd
+  if (normalizedDay === 0) {
+    // 今天是周一
+    if (beijingHour >= 5) {
+      daysToAdd = 7 // 超过5点，计算到下周一的所需时间
+    } else {
+      daysToAdd = 0 // 今天
+    }
+  } else {
+    daysToAdd = 7 - normalizedDay // 到下周一的天数
+  }
+
+  // 正确地添加天数
+  targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
+  targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳
+
+  return targetDate.getTime()
+}
+
+// 判断是否进入最后一周（下周一超过截止时间）
+const isLastWeek = () => {
+  const nextMonday = getNextMondayInBeijing()
+  return nextMonday > ACTIVITY_END_TIME
+}
+
+// 获取倒计时目标时间
+const getTargetTime = () => {
+  // // 最后一周：使用活动截止时间
+  // if (isLastWeek()) {
+  //   return ACTIVITY_END_TIME
+  // }
+  // // 普通周：使用下周一早上 5 点
+  // return getNextMondayInBeijing()
+
+  return ACTIVITY_END_TIME
+}
+
+const targetTime = ref(getTargetTime()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    initData()
+
+    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 handleBt = (type) => {
+  rankShow.value = type == 'ranking' ? true : false
+  rechargeShow.value = type == 'recharge' ? true : false
+  lotteryShow.value = type == 'lottery' ? true : false
+  drawerShowBt('') // 收起抽屉
+  selectedCoin.value = null // 清除选择币种
+}
+
+// 切换标签页
+const changeModule = (module) => {
+  switch (module) {
+    case 'ranking':
+      rankingShow.value = true
+      rewardsShow.value = false
+      break
+    case 'rewards':
+      rankingShow.value = false
+      rewardsShow.value = true
+      break
+    case 'rechargeRank':
+      rechargeRankShow.value = true
+      rechargeRewardsShow.value = false
+      break
+    case 'rechargeRewards':
+      rechargeRankShow.value = false
+      rechargeRewardsShow.value = true
+      break
+    case 'task':
+      taskShow.value = true
+      withdrawShow.value = false
+      break
+    case 'withdraw':
+      taskShow.value = false
+      withdrawShow.value = true
+      break
+  }
+}
+
+// 抽屉展示
+const drawerShowBt = (type) => {
+  transferShow.value = type == 'transfer' ? !transferShow.value : false
+  exchangeShow.value = type == 'exchange' ? !exchangeShow.value : false
+  selectedCoin.value = null
+}
+
+const rechargehidden = ref(true) //金额是否隐藏
+// 根据隐藏状态处理金额显示的方法
+const formatRechargeAmount = (amount) => {
+  if (rechargehidden.value) {
+    // 如果隐藏，则将数字替换为*
+    return String(amount || '0').replace(/\d/g, '*')
+  } else {
+    // 如果不隐藏，则正常显示
+    return amount || '0'
+  }
+}
+
+const topImg = ref([
+  imageUrl('rechargeReward100'),
+  imageUrl('rechargeReward500'),
+  imageUrl('rechargeReward1000'),
+  imageUrl('rechargeReward3000'),
+  imageUrl('rechargeReward5000'),
+  imageUrl('rechargeReward10000'),
+]) // top图片
+
+//充值奖励的内容样式
+const rewardContentLayer = (index) => {
+  let gridStyle = ''
+  if (currentLangType.value == 'ar') {
+    gridStyle = 'direction: ltr;'
+  }
+  if (index == 0) {
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}`
+  } else if (index == 1 || index == 2) {
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}`
+  } else if (index == 3 || index == 4 || index == 5) {
+    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 5vw 26vw 8vw;${gridStyle}`
+  }
+}
+
+// 前往搜索代理页
+const searchPayee = () => {
+  router.push({
+    path: '/search-payee',
+    query: { from: '/activities/lesser-bairam', activeAction: 'withdraw' },
+  })
+}
+
+// 前往提现页
+const goToWithdraw = () => {
+  router.push({ path: '/cash-out', query: { activityId: '2033805289592926210' } })
+}
+
+// 判断文本是否溢出（需要滚动）
+const isTextOverflow = (text) => {
+  // 创建临时元素来测量文本宽度
+  const tempDiv = document.createElement('div')
+  tempDiv.style.position = 'absolute'
+  tempDiv.style.fontSize = '1em'
+  tempDiv.style.fontWeight = '860'
+  tempDiv.textContent = text
+  document.body.appendChild(tempDiv) // 将临时元素添加到文档中
+
+  const containerWidth = window.innerWidth * 0.3 // 所在容器宽度
+  const textWidth = tempDiv.getBoundingClientRect().width // 文本宽度
+
+  document.body.removeChild(tempDiv) // 删除临时元素
+
+  // 如果文本宽度超过容器宽度，则需要滚动
+  return textWidth > containerWidth
+}
+
+// 转账金币选项
+const coinOptions = ref([
+  { id: 1, amount: 10500, price: 1 },
+  { id: 2, amount: 52500, price: 5 },
+  { id: 3, amount: 105000, price: 10 },
+])
+
+//选择金币
+const selectCoin = (coin) => {
+  // 单选逻辑：如果已经选中相同的金币，则取消选择；否则选中新的金币
+  if (selectedCoin.value?.id == coin.id) {
+    selectedCoin.value = null
+  } else {
+    selectedCoin.value = coin
+  }
+}
+
+// 转账
+const transfer = async () => {
+  if (!selectedCoin.value) {
+    showError(t('please_select_amount'))
+    return
+  }
+
+  if (!selectedPayee.value?.id) {
+    showError(t('please_select_payee'))
+    return
+  }
+
+  // 构造请求参数
+  const transferData = {
+    amount: selectedCoin.value.price,
+    acceptUserId: selectedPayee.value?.id,
+    activityId: '2033805289592926210',
+  }
+
+  try {
+    // 调用转账接口
+    const response = await transferActivityDollar(transferData)
+    if (response.status) {
+      showSuccess(
+        t('transfer_dollar_success', {
+          price: selectedCoin.value.price,
+          name: selectedPayee.value?.name,
+        }),
+      )
+    } else {
+      showError(t('transfer_dollar_failed', { price: selectedCoin.value.price }))
+    }
+
+    selectedCoin.value = null // 重置选择
+
+    getDrawableAmount() //刷新可提现金额
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+//兑换代币
+const exchangeCoinBt = async () => {
+  if (!selectedCoin.value) {
+    showError(t('please_select_amount'))
+    return
+  }
+
+  // 构造请求参数
+  const transferData = {
+    amount: selectedCoin.value.price,
+    activityId: '2033805289592926210',
+  }
+
+  try {
+    // 调用转账接口
+    const response = await exchangeCoin(transferData)
+    if (response.status) {
+      showSuccess(t('exchange_success_coins', { amount: selectedCoin.value.amount }))
+    } else {
+      showError(t('exchange_failed_coins', { amount: selectedCoin.value.amount }))
+    }
+
+    // 重置选择
+    selectedCoin.value = null
+
+    getDrawableAmount() //刷新可提现金额
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 打开弹窗
+const openPopup = (type) => {
+  closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
+  switch (type) {
+    case 'rankingHelp':
+      rankingHelpShow.value = true
+      break
+    case 'rechargeRankingHelp':
+      rechargeRankingHelpShow.value = true
+      break
+    case 'withdrawalHelp':
+      withdrawalHelpShow.value = true
+      break
+    case 'result':
+      resultShow.value = true
+      break
+    case 'history':
+      historyShow.value = true
+      break
+    default:
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  rankingHelpShow.value = false
+  rechargeRankingHelpShow.value = false
+  withdrawalHelpShow.value = false
+  resultShow.value = false
+  historyShow.value = false
+  if (clear) {
+    result.value = []
+  }
+  resultShowIndex.value = 0
+}
+
+//奖盘布局
+const getGridPosition = (index) => {
+  //顺时针位置
+  const positions = [
+    { gridArea: '1/1' }, //上左
+    { gridArea: '1/2' }, //上中
+    { gridArea: '1/3' }, //上右
+    { gridArea: '2/3' }, //中右
+    { gridArea: '3/3' }, //下右
+    { gridArea: '3/2' }, //下中
+    { gridArea: '3/1' }, //下左
+    { gridArea: '2/1' }, //中左
+  ]
+  return positions[index]
+}
+
+// 抽奖动画
+const startLottery = (resultIndex) => {
+  console.log('开始抽奖动画')
+
+  return new Promise((resolve) => {
+    activeIndex.value = -1
+
+    let speed = 200 // 初始速度
+    let currentCycle = 0 // 当前圈数
+    let constantSpeedCycle = 0 // 当前匀速圈数
+    let totalCycles = 1 // 至少旋转2圈数
+
+    const roll = () => {
+      activeIndex.value = (activeIndex.value + 1) % activity.value.prizeList.length
+      console.log('当前索引:', activeIndex.value)
+
+      if (activeIndex.value === resultIndex && speed > 200) {
+        setTimeout(() => {
+          resolve() // 抽奖结束
+        }, 500)
+      } else {
+        if (activeIndex.value === activity.value.prizeList.length - 1) {
+          currentCycle++
+        }
+        // 加速旋转
+        if (currentCycle < totalCycles) {
+          speed -= 20
+        } else {
+          // 匀速旋转
+          if (activeIndex.value === activity.value.prizeList.length - 1) {
+            constantSpeedCycle++
+          }
+          if (constantSpeedCycle > 2) {
+            // 最后减速效果
+            speed += 20
+          }
+        }
+        setTimeout(roll, speed)
+      }
+    }
+
+    roll()
+  })
+}
+
+// 连抽
+const sweepstakes = async (consecutive = 1) => {
+  if (isRolling.value) return // 防止重复点击
+  // 检查抽奖次数
+  if (rollTimes.value >= consecutive) {
+    isRolling.value = true
+    let data = {
+      activityId: '2033805289592926210',
+      drawCount: consecutive,
+    }
+    try {
+      // 单抽
+      if (consecutive == 1) {
+        const resOnceDraw = await onceDraw(data)
+        if (resOnceDraw.status && resOnceDraw.body) {
+          getTotalDrawCount() //刷新累计抽奖次数
+          // getConfigsBadgeInfo() //刷新累计抽奖-徽章信息
+          getTickets() //重新获取拥有的抽奖券
+          getDrawableAmount() //刷新可提现金额
+
+          result.value = [resOnceDraw.body] // 中奖结果赋值
+
+          const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
+          //取抽奖结果的位置
+          const index = activity.value.prizeList.findIndex(
+            (prize) => prize.prizeName == resItem?.prize.prizeName,
+          ) //转盘第几位停下
+          console.log('index:', index)
+          await startLottery(index)
+        }
+      }
+      //连抽
+      else {
+        const resMultiDraw = await multiDraw(data)
+        if (resMultiDraw.status && resMultiDraw.body) {
+          getTotalDrawCount() //刷新累计抽奖次数
+          // getConfigsBadgeInfo() //刷新累计抽奖-徽章信息
+          getTickets() //重新获取拥有的抽奖券
+          getDrawableAmount() //刷新可提现金额
+
+          result.value = resMultiDraw.body.results // 中奖结果赋值
+
+          //取第一个抽奖结果的位置
+          let index = activity.value.prizeList.findIndex(
+            (prize) => prize.prizeName == result.value[0]?.prize.prizeName,
+          )
+          console.log('index:', index)
+          await startLottery(index)
+        }
+      }
+      getDrawRecords() // 获取中奖记录
+      openPopup('result') //打开中奖结果弹窗
+      isRolling.value = false
+    } catch (error) {
+      isRolling.value = false
+      if (error.response.errorCode == 3274) {
+        showError('Device has been used by another account')
+      }
+    }
+  }
+}
+
+// 展示任务目标
+const showTarget = (task) => {
+  if (task.targetType == 'MIC_TIME') {
+    let timeType = task.targetValue < 60
+    let currentValue = timeType ? task.currentValue : task.currentValue / 60
+    let targetValue = timeType ? task.targetValue : task.targetValue / 60
+    // 直接去除小数部分（向下取整）
+    currentValue = Math.floor(currentValue * 10) / 10
+    targetValue = Math.floor(targetValue * 10) / 10
+    let timeUnit = timeType ? t('minutes_short') : t('hours_short')
+
+    return t('on_mic_progress', {
+      current: currentValue,
+      total: targetValue,
+      unit: timeUnit,
+    })
+  } else if (task.targetType == 'SEND_GIFT') {
+    if (task.taskCode == 'SP_SEND_GIFT_5') {
+      return t('Send 5 Ramadan gifts ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    }
+  } else if (task.targetType == 'SAVE_COINS') {
+    if (task.taskCode == 'SP_SAVE_50000') {
+      return t('Win 50,000 coins in total across any games ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SP_SAVE_100000') {
+      return t('Win 100,000 coins in total across any games ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SP_SAVE_500000') {
+      return t('Win 500,000 coins in total across any games ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    }
+  } else if (task.targetType == 'RECHARGE_AMOUNT') {
+    if (task.taskCode == 'SP_RECHARGE_1') {
+      return t('Daily total recharge amount: $1 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SP_RECHARGE_10') {
+      return t('Daily total recharge amount: $10 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SP_RECHARGE_50') {
+      return t('Daily total recharge amount: $50 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SP_RECHARGE_100') {
+      return t('Daily total recharge amount: $100 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    }
+  } else {
+    return `${task.taskName}(${task.currentValue}/${task.targetValue})`
+  }
+}
+
+// 选中的收款人
+const selectedPayee = ref({})
+
+// 初始化收款人信息
+const initializePayee = () => {
+  const savedPayee = getSelectedPayee()
+  if (savedPayee) {
+    Object.assign(selectedPayee.value, savedPayee)
+    handleBt('lottery') // 抽奖模块
+    changeModule('withdraw') // 提现标签页
+    drawerShowBt('transfer') // 转账抽屉
+  }
+}
+
+// 清除当前选中的收款人
+const clearPayee = () => {
+  Object.assign(selectedPayee.value, {
+    id: null,
+    account: '',
+    name: '',
+    avatar: '',
+    type: '',
+    isHost: false,
+    isAgency: false,
+    hasSalary: false,
+  })
+  clearSelectedPayee()
+}
+
+// 获取中奖用户列表
+const getWinners = async () => {
+  const resWinners = await winnerHistory('2033805289592926210')
+  if (resWinners.status && resWinners.body) {
+    barrageList.value = resWinners.body
+  }
+}
+
+// 获取用户信息
+const getUserInfo = async () => {
+  if (Object.keys(userInfo.value).length === 0) {
+    const resUserInfo = await getMemberProfile()
+    if (resUserInfo.status && resUserInfo.body) {
+      setUserInfo(resUserInfo.body, null)
+      userInfo.value = resUserInfo.body
+    }
+  }
+  const resIdentity = await getUserIdentity()
+  if (resIdentity.status && resIdentity.body) {
+    userIdentity.value = resIdentity.body
+  }
+}
+
+// 获取排行榜
+const getRanking = async () => {
+  let data = {
+    activityType: 16,
+  }
+  const resRanking = await getRankingListAndMyRanking(data)
+  if (resRanking.status && resRanking.body) {
+    myRanking.value = resRanking.body?.currentUserRank //我的排名信息
+    Ranking.value = resRanking.body?.rankingList
+    getRewardsAndGifts() // 获取前十名奖励列表
+  } else {
+    Ranking.value = []
+    myRanking.value = {}
+  }
+}
+
+// 获取前3名奖励列表
+const getRewardsAndGifts = async () => {
+  const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2033805143824084994')
+  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
+    giftsList.value = resRewardsAndGifts.body.gifts // 每周礼物
+    let tempRewardsTop3 = resRewardsAndGifts.body.butOneRewards // 前3奖励
+
+    rewardsTop3.value = tempRewardsTop3.filter((_, index) => index < 3)
+  }
+}
+
+// 获取充值排行榜
+const getRechargeRanking = async () => {
+  if (rechargePageNo.value == 0) {
+    rechargePageNo.value = 1
+  }
+  let data = {
+    activityId: '2006671533912581569',
+    pageNo: rechargePageNo.value,
+    pageSize: 20,
+  }
+  const resRanking = await ranklist(data)
+  if (resRanking.status && resRanking.body) {
+    myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
+
+    if (resRanking.body.topList.length > 0) {
+      if (resRanking.body.topList.length == 20) {
+        addRechargeRanking.value = []
+        rechargeRanking.value.push(...resRanking.body?.topList)
+        rechargePageNo.value++
+      } else {
+        addRechargeRanking.value = resRanking.body?.topList
+      }
+    }
+  } else {
+    myRechargeRanking.value = {}
+    rechargeRanking.value = []
+    addRechargeRanking.value = []
+    rechargePageNo.value = 1
+  }
+}
+
+// 获取充值记录
+const getMyRecharge = async () => {
+  const resMyRecharge = await myRecharge('2006671533912581569')
+  if (resMyRecharge.status && resMyRecharge.body) {
+    myRechargeRecode.value = resMyRecharge.body
+  } else {
+    myRechargeRecode.value = {}
+  }
+}
+
+// 获取充值奖励列表
+const getRechargeReward = async () => {
+  let data = {
+    activityType: 'CONSUMPTION_ACTIVITY',
+    activityId: '2006671533912581569',
+  }
+  const resActivityReward = await activityRewardConfigs(data)
+  if (resActivityReward.status && resActivityReward.body) {
+    RechargeRewards.value = resActivityReward.body.map((rewards) => {
+      let jsonData = JSON.parse(rewards.jsonData)
+      let addReward = []
+
+      if (rewards.sort == 1) {
+        addReward = []
+      } else if (rewards.sort == 2) {
+        addReward = []
+      } else if (rewards.sort == 3) {
+        addReward = []
+      } else if (rewards.sort == 4) {
+        addReward = [
+          {
+            type: 'GIFT',
+            cover: imageUrl('reward_gift'),
+            content: 1,
+          },
+        ]
+      } else if (rewards.sort == 5) {
+        addReward = [
+          {
+            type: 'GIFT',
+            cover: imageUrl('reward_gift'),
+            content: 1,
+          },
+        ]
+      } else if (rewards.sort == 6) {
+        addReward = [
+          {
+            type: 'GIFT',
+            cover: imageUrl('reward_gift'),
+            content: 1,
+          },
+          {
+            type: 'PROPS',
+            detailType: 'AVATAR_FRAME',
+            cover: imageUrl('reward_frame'),
+            quantity: 365,
+          },
+          {
+            type: 'PROPS',
+            detailType: 'RIDE',
+            cover: imageUrl('reward_ride'),
+            quantity: 60,
+          },
+        ]
+      }
+
+      rewards.rewardProps.push(...addReward) //补充奖励项
+
+      rewards = {
+        ...rewards,
+        ...jsonData,
+      }
+      return rewards
+    })
+  } else {
+    RechargeRewards.value = []
+  }
+}
+
+// 领取充值奖励
+const receiveReward = async (rewards) => {
+  let data = {
+    activityType: rewards.activityType,
+    activityId: '2006671533912581569',
+    ruleId: rewards.ruleId,
+  }
+  try {
+    const resReceive = await receiveRechargeReward(data)
+    if (resReceive.status && resReceive.body) {
+      getRechargeReward() // 刷新充值奖励
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 获取抽奖奖池
+const getActivityDetail = async () => {
+  getDrawableAmount() //获取可提现金额
+  const resDetail = await activityDetail('81569')
+  if (resDetail.status && resDetail.body) {
+    activity.value = resDetail.body
+  } else {
+    activity.value = {}
+  }
+}
+
+// 格式化奖励的展示信息
+const showDetail = (type, reward) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS', 'TICKET']
+  if (showamount.includes(type)) {
+    return `*${reward.content}`
+  } else if (type === 'DOLLARS') {
+    return `$${reward.content}`
+  } else {
+    return `${reward.quantity}Days`
+  }
+}
+
+// 获取拥有的抽奖券
+const getTickets = async () => {
+  const resTickets = await myTickets('2033805289592926210')
+  if (resTickets.status && resTickets.body) {
+    rollTimes.value = resTickets.body
+  } else {
+    rollTimes.value = 0
+  }
+}
+
+// 获取累计抽奖次数
+const getTotalDrawCount = async () => {
+  const resTotalDrawCount = await myTotalDrawCount('2033805289592926210')
+  if (resTotalDrawCount.status && resTotalDrawCount.body) {
+    totalDraw.value = resTotalDrawCount.body
+  }
+}
+
+// 可提现金额
+const getDrawableAmount = async () => {
+  const resDrawableAmount = await withdrawableAmount('2033805289592926210')
+  if (resDrawableAmount.status && resDrawableAmount.body) {
+    currentAmount.value = resDrawableAmount.body
+  }
+}
+
+// 获取任务列表
+const getTaskList = async () => {
+  const resTaskList = await ActTaskList('2006671533912581569')
+  if (resTaskList.status && resTaskList.body) {
+    taskList.value = resTaskList.body
+  }
+}
+
+// 获取中奖记录
+const getDrawRecords = async () => {
+  const resDrawRecords = await drawRecords('81569')
+  if (resDrawRecords.status && resDrawRecords.body) {
+    myRecords.value = resDrawRecords.body?.records || []
+  }
+}
+
+// 领取任务奖励
+const receiveTaskReward = async (code) => {
+  let data = {
+    activityId: '2033805289592926210',
+    taskCode: code,
+  }
+  try {
+    const resReceive = await receiveTickets(data)
+    if (resReceive.status && resReceive.body) {
+      getTaskList() //获取任务列表
+      getTickets() //获取拥有的抽奖券
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([
+    getUserInfo(), //获取用户信息
+    initializePayee(), //获取收款人信息
+    getWinners(), //获取历史中奖用户
+    getRanking(), //获取排行榜
+
+    getRechargeRanking(), // 获取充值排行榜
+    getMyRecharge(), // 获取充值记录
+    getRechargeReward(), // 获取充值奖励列表
+
+    getActivityDetail(), //获取奖池
+    getTotalDrawCount(), //刷新累计抽奖次数
+    getTickets(), //重新获取拥有的抽奖券
+    getTaskList(), //获取任务列表
+    getDrawRecords(), // 获取中奖记录
+  ])
+}
+
+// 预加载关键图片
+const preloadCriticalImages = async () => {
+  const criticalImages = [
+    // 背景
+    imageUrl('bg1'),
+    imageUrl('bg2'),
+    //  imageUrl('bg3'),
+
+    imageUrl('timeBg'), // 倒计时
+
+    // 模块按钮
+    imageUrl('rankBt'),
+    imageUrl('rankBtActive'),
+    imageUrl('rechargeBt'),
+    imageUrl('rechargeBtActive'),
+    imageUrl('lotteryBt'),
+    imageUrl('lotteryBtActive'),
+
+    // 排行榜标签页
+    // 标签页按钮
+    imageUrl('rankingBt'),
+    imageUrl('rewardsBt'),
+
+    // 每周礼物
+    imageUrl('eventGiftsBg'),
+    imageUrl('giftBg'),
+
+    // 排行榜
+    imageUrl('rankingImgBg'),
+    imageUrl('RankingTopBorder'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('RankingBorder'),
+    imageUrl('historyBt'),
+    imageUrl('itemFrom4Bg'),
+    imageUrl('userNameBorder'),
+
+    // 前三头像框
+    imageUrl('top1'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+
+    // 前三奖励
+    // imageUrl(`rewardTop1`),
+    // imageUrl(`rewardTop2`),
+    // imageUrl(`rewardTop3`),
+
+    // 充值排行榜标签页
+    // 标签页按钮
+    imageUrl('rechargeRankBt'),
+
+    // 我的充值
+    // imageUrl('earningInfoBg'),
+    // imageUrl('rechargeNumHidden'),
+    // imageUrl('rechargeNumShow'),
+
+    // 充值奖励
+    // imageUrl('rechargeReward100'),
+    // imageUrl('rechargeReward500'),
+    // imageUrl('rechargeReward1000'),
+    // imageUrl('rechargeReward3000'),
+    // imageUrl('rechargeReward5000'),
+    // imageUrl('rechargeReward10000'),
+    // imageUrl('receiveBt'),
+    // imageUrl('receivedBt'),
+
+    // 提现标签页
+    // 标签页按钮
+    // imageUrl('taskBt'),
+    // imageUrl('withdrawBt'),
+
+    // 抽奖模块
+    // imageUrl('resultBt'),
+    // imageUrl('lottery'),
+    // imageUrl('prizeActiveFrame'),
+    // imageUrl('draw1BtBg'),
+    // imageUrl('draw10BtBg'),
+
+    // 任务列表
+    // imageUrl('taskTalk'),
+    // imageUrl('taskGift'),
+    // imageUrl('taskGame'),
+    // imageUrl('taskRecharge'),
+    // imageUrl('ticket'),
+    // imageUrl('taskBtGo'),
+    // imageUrl('taskBtReceive'),
+    // imageUrl('taskBtReceived'),
+
+    // imageUrl('myRankingBg'), // 我的排名
+
+    // // 中奖结果弹窗
+    // imageUrl('resultBg'),
+    // imageUrl('resultBack'),
+    // imageUrl('resultNext'),
+    // imageUrl('resultGoOnBt'),
+
+    // imageUrl('historyBg'), // 中奖历史弹窗
+
+    // imageUrl(getImgName('helpBg')), // 帮助弹窗
+
+    // imageUrl('rechargeHelpBg'), // 充值帮助弹窗
+
+    // imageUrl('withdrawHelpBg'), // 提现帮助弹窗
+  ]
+
+  await preloadImages(criticalImages)
+}
+
+// 预加载其他图片
+const preloadOtherImages = async () => {
+  const criticalImages = []
+  await preloadImages(criticalImages)
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([
+      // initData(),
+      preloadCriticalImages(),
+    ])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+
+    // 等待 DOM 更新后执行 observe
+    await nextTick()
+    if (RankingLoadmore.value) {
+      console.log('监控加载模块')
+      observer.observe(RankingLoadmore.value)
+    }
+  }
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    completePreloading() // 完成预加载
+  })
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  getCountdown() // 立即执行一次
+  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
+}
+
+// 触发节流获取排行榜
+const debouceGetRanking = useThrottle(() => {
+  getRechargeRanking() //加载新的排行榜项
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && rechargeRankingTotal.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      debouceGetRanking()
+    }
+  })
+})
+
+// 组件挂载时检测环境
+onMounted(async () => {
+  console.log('route.query.activeAction:', route.query.activeAction)
+  if (route.query.activeAction == 'withdraw') {
+    handleBt('lottery') // 抽奖模块
+    changeModule('withdraw') // 提现标签页
+    drawerShowBt('transfer') // 转账抽屉
+  } else {
+    handleBt('ranking')
+  }
+
+  await connectToAppHandler()
+  initData()
+
+  startCountdown() //开启倒计时
+
+  preloadOtherImages() // 预加载其他图片
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+  clearPayee() // 清空收款人信息
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  position: relative;
+  background: #11032d;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.background-overlay {
+  position: absolute;
+  inset: 236vw 0 0;
+  background-image: var(--bg2-url);
+  background-repeat: repeat-y;
+  background-position: top center;
+  background-size: 100% auto;
+  z-index: 0; /* 确保在.bg之下 */
+}
+
+.grayscale-container {
+  filter: grayscale(100%) brightness(90%);
+}
+
+.ranking-bg {
+  background-color: #450b08;
+  background-image: var(--ranking-bg-url);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+
+  position: absolute;
+  inset: 15vw 2vw 4vw;
+  z-index: 1;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 1.7em;
+}
+
+.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;
+}
+
+.Textlittle {
+  font-size: 0.9em;
+}
+
+.timeBox {
+  padding: 4vw 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+
+  overflow: hidden;
+  position: relative;
+}
+
+.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;
+}
+
+.reward-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
+[dir='rtl'] .reward-wrapper {
+  left: 4vw;
+  right: 15vw;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+.scroll-wrapper {
+  display: flex;
+  width: fit-content;
+}
+
+[dir='ltr'] .scroll-wrapper {
+  animation: scroll-left 8s linear infinite;
+  will-change: transform;
+}
+
+[dir='rtl'] .scroll-wrapper {
+  animation: scroll-right 8s linear infinite;
+  will-change: transform;
+}
+
+.scroll-content {
+  display: flex;
+  align-items: center;
+}
+
+[dir='ltr'] .scroll-content {
+  margin-left: 4vw;
+}
+
+[dir='rtl'] .scroll-content {
+  margin-left: auto;
+  margin-right: 4vw;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ruleBt {
+  width: 5vw;
+  min-width: 0;
+  display: block;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+[dir='rtl'] .ruleBt {
+  left: 5px;
+  right: auto;
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+/* 金币网格 */
+.coin-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  // transition: all 0.2s;
+  aspect-ratio: 1/1;
+
+  border-radius: 8px;
+  border: 1px solid rgba(64, 64, 64, 0.5);
+  background: rgba(240, 240, 240, 0.3);
+  box-shadow:
+    -42px 103px 31px 0 rgba(145, 145, 145, 0),
+    -27px 66px 29px 0 rgba(145, 145, 145, 0.01),
+    -15px 37px 24px 0 rgba(145, 145, 145, 0.03),
+    -7px 17px 18px 0 rgba(145, 145, 145, 0.04),
+    -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
+  backdrop-filter: blur(7.5px);
+  direction: ltr;
+}
+
+.coin-item.selected {
+  border-radius: 11px;
+  border: 2px solid #ced1ff;
+  box-shadow:
+    -0.25px -0.25px 1px 0 #655dff,
+    0.25px 0.25px 1px 0 #735dff,
+    0 0 3px 0 rgba(93, 96, 255, 0.8),
+    0 0 5px 0 rgba(93, 104, 255, 0.6),
+    0 0 4px 0 rgba(0, 0, 210, 0.3);
+}
+
+.coin-item:active {
+  transform: scale(0.98);
+}
+
+.resultNum {
+  position: absolute;
+  z-index: 9999;
+  inset: 0;
+  top: -8vw;
+
+  padding-right: 8%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  font-size: 0.9em;
+  font-weight: 590;
+
+  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+[dir='rtl'] .resultNum {
+  direction: ltr;
+  justify-content: flex-start;
+}
+
+.rotated {
+  transform: rotate(90deg);
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .flipImg.rotated {
+  transform: scaleX(-1) rotate(90deg);
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@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;
+}
+
+.helpInfo {
+  display: flex;
+  flex-direction: column;
+
+  gap: 1vw;
+}
+
+.helpInfo > p {
+  color: #fff;
+  font-size: 1.3em;
+  font-weight: 700;
+}
+</style>