From 6cd2eaf7a0383b0b90fbb7fa5855f23e7928c5c4 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 30 Jan 2026 19:08:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E6=B4=BB=E5=8A=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2):=20=E6=96=8B=E6=9C=88=E6=89=93=E6=A6=9C=E6=B4=BB?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ar.json                           |    6 +-
 src/locales/en.json                           |    6 +-
 src/locales/zh.json                           |    6 +-
 src/router/index.js                           |   16 +-
 src/utils/permissionManager.js                |    3 +-
 src/utils/routeGuard.js                       |    3 +-
 .../Season3/components/Barrage.vue            |  286 ++
 .../Season3/components/topUser.vue            |  300 ++
 .../Activities/LuckyDollars/Season3/index.vue | 2781 +++++++++++++++++
 9 files changed, 3397 insertions(+), 10 deletions(-)
 create mode 100644 src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
 create mode 100644 src/views/Activities/LuckyDollars/Season3/components/topUser.vue
 create mode 100644 src/views/Activities/LuckyDollars/Season3/index.vue

diff --git a/src/locales/ar.json b/src/locales/ar.json
index 51e07f5..1eaeeea 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -467,5 +467,9 @@
   "confirm_item_exchange": "هل أنت متأكد أنك تريد تبديل العنصر الحالي؟",
   "heartbeat_value_points_4_percent": "{amount} (4% من نقاط قيمة نبض القلب) × 2",
   "heartbeat_value_points_3_percent": "{amount} (3% من نقاط قيمة نبض القلب) × 2",
-  "heartbeat_value_points_2_percent": "{amount} (2% من نقاط قيمة نبض القلب) × 2"
+  "heartbeat_value_points_2_percent": "{amount} (2% من نقاط قيمة نبض القلب) × 2",
+
+  "task_go": "اذهب >",
+  "task_receive": "استلام",
+  "task_received": "تم الاستلام"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index f735294..a81ec70 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -467,5 +467,9 @@
   "confirm_item_exchange": "Are you sure you want to exchange the current item?",
   "heartbeat_value_points_4_percent": "{amount} (4% of Heartbeat Value points) * 2",
   "heartbeat_value_points_3_percent": "{amount} (3% of Heartbeat Value points) * 2",
-  "heartbeat_value_points_2_percent": "{amount} (2% of Heartbeat Value points) * 2"
+  "heartbeat_value_points_2_percent": "{amount} (2% of Heartbeat Value points) * 2",
+
+  "task_go": "Go >",
+  "task_receive": "Receive",
+  "task_received": "Received"
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index a154528..ee8eb77 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -467,5 +467,9 @@
   "confirm_item_exchange": "您确定要兑换当前物品吗？",
   "heartbeat_value_points_4_percent": "{amount} (心跳值点数的4%) * 2;",
   "heartbeat_value_points_3_percent": "{amount} (心跳值点数的3%) * 2;",
-  "heartbeat_value_points_2_percent": "{amount} (心跳值点数的2%) * 2;"
+  "heartbeat_value_points_2_percent": "{amount} (心跳值点数的2%) * 2;",
+
+  "task_go": "前往 >",
+  "task_receive": "接收",
+  "task_received": "已接收"
 }
diff --git a/src/router/index.js b/src/router/index.js
index 89d86fe..7140d23 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -372,17 +372,23 @@ const router = createRouter({
 
     // 限时活动
     {
-      path: '/new-year',
-      name: 'new-year',
-      component: () => import('../views/Activities/NewYear/index.vue'),
+      path: '/lucky-dollars-season3',
+      name: 'lucky-dollars-season3',
+      component: () => import('../views/Activities/LuckyDollars/Season3/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年1月16日上午5点结束
+    }, //2026年2月16日上午5点结束
     {
       path: '/jack-pot',
       name: 'jack-pot',
       component: () => import('../views/Activities/JackPot/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年1月3日上午5点结束
+    }, //2026年2月16日上午5点结束
+    {
+      path: '/new-year',
+      name: 'new-year',
+      component: () => import('../views/Activities/NewYear/index.vue'),
+      meta: { requiresAuth: true },
+    }, //2026年1月16日上午5点结束
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 4e61ba7..2a0caa2 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -58,8 +58,9 @@ const ACTIVITIES = [
   INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
   '/recharge-reward', //充值奖励
 
-  '/new-year', //新年抽奖
+  '/lucky-dollars-season3', //水果游戏打榜
   '/jack-pot', //水果游戏打榜
+  '/new-year', //新年抽奖
 ]
 
 // 🎯 核心改变：基于身份的权限配置
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index b20c3ac..27e89f3 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -409,8 +409,9 @@ class RouteGuard {
       '/invitation-to-register', //邀请新用户注册页面
       '/recharge-reward', //充值奖励
 
-      '/new-year', //新年抽奖
+      '/lucky-dollars-season3', //水果游戏打榜
       '/jack-pot', //水果游戏打榜
+      '/new-year', //新年抽奖
     ]
 
     const publicPages = [
diff --git a/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue b/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
new file mode 100644
index 0000000..eb2d909
--- /dev/null
+++ b/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
@@ -0,0 +1,286 @@
+<!-- Barrage.vue 优化版 -->
+<template>
+  <div
+    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
+  >
+    <!-- 双行弹幕轨道 -->
+    <div
+      v-for="(track, index) in visibleTracks"
+      :key="index"
+      style="position: absolute; width: 100%; height: 50px"
+      :style="{ top: `calc(${index} * 16vw)` }"
+    >
+      <div
+        v-for="item in track"
+        :key="item.id"
+        class="barrage-item"
+        style="
+          position: absolute;
+          border-radius: 26px;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          backdrop-filter: blur(1px);
+        "
+        :style="getBarrageStyle(item)"
+        @animationend="handleAnimationEnd(item.id)"
+      >
+        <img
+          v-smart-img
+          :src="item.avatar || ''"
+          alt=""
+          style="
+            width: 10vw;
+            border-radius: 50%;
+            display: block;
+            aspect-ratio: 1/1;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+        <div
+          style="
+            font-weight: 700;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          "
+          :style="{
+            backgroundImage:
+              item.prizeType == 'MONEY'
+                ? 'linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
+                : 'linear-gradient(180deg, #A9FFE2 26.92%, #0AEDA1 52.08%, #B5FFE8 73.08%)',
+          }"
+        >
+          {{ barrageText(item) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+
+const { locale, t } = useI18n()
+
+const props = defineProps({
+  barrageList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  speed: {
+    type: Number,
+    default: 80, // 基础速度系数
+  },
+
+  maxItems: {
+    type: Number,
+    default: 4, // 每行最大弹幕数
+  },
+
+  loopInterval: {
+    type: Number,
+    default: 2000, // 弹幕生成间隔(ms)
+  },
+})
+
+const tracks = ref([[], []]) // 弹幕轨道数据
+const idCounter = ref(0) // 弹幕ID计数器
+const currentIndex = ref(0) // 用于取下一项弹幕的索引
+
+// 计算实际显示的轨道（过滤空轨道）
+const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
+
+// 显示的文本
+const barrageText = (item) => {
+  const params = { nickname: item.nickname, prizeName: item.prizeName }
+  return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
+    ? t('barrage_won_prize', params)
+    : t('barrage_won_the_prize', params)
+}
+
+// 获取弹幕样式
+const getBarrageStyle = (item) => {
+  const isRTL = locale.value === 'ar'
+
+  return {
+    animationDuration: `${item.duration}s`,
+    animationDelay: `${item.delay}s`,
+    '--start-pos': `${item.startPos}px`,
+    border: item.prizeType == 'MONEY' ? '0.667px solid #77FFCF' : '0.667px solid #FFF677',
+    background:
+      item.prizeType == 'MONEY'
+        ? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
+        : 'linear-gradient(270deg, rgba(2, 218, 164, 0.60) -16.85%, rgba(0, 124, 83, 0.60) 82.7%)',
+    // RTL布局支持
+    ...(isRTL
+      ? {
+          right: '0',
+          left: 'auto',
+          transform: 'translateX(-100vw)',
+        }
+      : {
+          left: '0',
+          right: 'auto',
+          transform: 'translateX(100vw)',
+        }),
+  }
+}
+
+// 生成随机弹幕属性
+const generateBarrageProps = (item) => {
+  const textLength = barrageText(item).length
+  return {
+    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间（每字符减少0.2秒，持续时间不低于5秒）
+    startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置（得到-10到10之间的随机整数，避免所有弹幕都从完全相同的起点开始移动）
+  }
+}
+
+// 添加弹幕到轨道
+const addToTrack = (item) => {
+  // 寻找最短的轨道的下标值
+  const trackIndex = tracks.value.reduce(
+    (minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
+    0,
+  )
+
+  if (tracks.value[trackIndex].length < props.maxItems) {
+    tracks.value[trackIndex].push({
+      ...item,
+      id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
+      delay: Math.random() * 4, // 随机延迟（0-4秒）
+      ...generateBarrageProps(item),
+    })
+  }
+}
+
+// 清理完成动画的弹幕（根据动画结束状态遍历）
+const cleanCompleted = () => {
+  tracks.value.forEach((track) => {
+    for (let i = track.length - 1; i >= 0; i--) {
+      if (track[i].completed) {
+        track.splice(i, 1)
+      }
+    }
+  })
+}
+
+// 设置弹幕动画结束状态
+const handleAnimationEnd = (id) => {
+  tracks.value.forEach((track) => {
+    const item = track.find((item) => item.id === id)
+    if (item) item.completed = true
+  })
+}
+
+// 获取下一项弹幕（循环逻辑）
+const getNextBarrage = () => {
+  if (props.barrageList.length === 0) return null
+
+  const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
+  currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0
+
+  return { ...item } // 返回副本避免污染原始数据
+}
+
+// 弹幕循环逻辑
+let barrageInterval = null
+
+// 根据设置的时间间隔自动获取下一项弹幕
+const startBarrage = () => {
+  barrageInterval = setInterval(() => {
+    cleanCompleted() // 清理完成动画的弹幕
+
+    const nextBarrage = getNextBarrage() // 获取下一项弹幕
+    if (nextBarrage) {
+      addToTrack(nextBarrage) // 添加弹幕到轨道
+    }
+  }, props.loopInterval)
+}
+
+onMounted(() => {
+  startBarrage() // 开启弹幕循环
+})
+
+onUnmounted(() => {
+  clearInterval(barrageInterval) // 清空弹幕
+})
+
+// 监听数据源变化
+watch(
+  () => props.barrageList,
+  (newList) => {
+    currentIndex.value = 0 // 重置索引，确保重新开始循环
+    clearInterval(barrageInterval) // 清空弹幕
+
+    // 如果列表为空，停止生成新弹幕
+    if (newList.length !== 0) {
+      startBarrage() // 重启弹幕循环
+    }
+  },
+  { deep: true },
+)
+</script>
+
+<style scoped>
+/* 样式保持不变（同之前版本） */
+.barrage-item {
+  will-change: transform;
+  animation: moveLeft linear forwards;
+}
+
+@keyframes moveLeft {
+  0% {
+    transform: translateX(100vw);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* RTL支持 - 镜像弹幕动画 */
+[dir='rtl'] .barrage-item {
+  animation: moveRight linear forwards;
+}
+
+@keyframes moveRight {
+  0% {
+    transform: translateX(-100vw);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Activities/LuckyDollars/Season3/components/topUser.vue b/src/views/Activities/LuckyDollars/Season3/components/topUser.vue
new file mode 100644
index 0000000..32d790f
--- /dev/null
+++ b/src/views/Activities/LuckyDollars/Season3/components/topUser.vue
@@ -0,0 +1,300 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        v-smart-img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        :style="{ height: avatarContainerHeight }"
+      >
+        <div :style="{ width: avatarWidth }">
+          <img
+            v-smart-img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="handleAvatarImageError"
+          />
+        </div>
+      </div>
+
+      <!-- 用户名和贡献值 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1vw;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <div
+          style="display: flex; justify-content: center; align-items: center"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+        <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%)`,
+          }"
+        >
+          <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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  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 '36%'
+    case '3':
+      return '39%'
+    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 '25%'
+    case '2':
+      return '25%'
+    case '3':
+      return '25%'
+    default:
+      return '25%'
+  }
+})
+
+// 贡献值宽度
+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/LuckyDollars/Season3/index.vue b/src/views/Activities/LuckyDollars/Season3/index.vue
new file mode 100644
index 0000000..5fba3d1
--- /dev/null
+++ b/src/views/Activities/LuckyDollars/Season3/index.vue
@@ -0,0 +1,2781 @@
+<!-- src/views/Activities/Game/index.vue -->
+<template>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div
+      v-show="!isLoading"
+      style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
+    >
+      <!-- 页面背景 -->
+      <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: 115vw">
+        <!-- 弹幕 -->
+        <Barrage
+          style="display: block; width: 100vw; height: 30vw"
+          :barrageList="barrageList"
+        ></Barrage>
+
+        <!-- 切换按钮 -->
+        <div>
+          <div style="display: flex; justify-content: space-around; margin-top: 2vw">
+            <!-- 排行榜按钮 -->
+            <div style="width: 30%; position: relative" @click="handleBt('ranking')">
+              <img
+                v-show="!rankingShow"
+                v-smart-img
+                :src="imageUrl(getImgName('rankBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="rankingShow"
+                v-smart-img
+                :src="imageUrl(getImgName('rankBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
+
+            <!-- 抽奖按钮 -->
+            <div style="width: 30%; position: relative" @click="handleBt('lottery')">
+              <img
+                v-show="!lotteryShow"
+                v-smart-img
+                :src="imageUrl(getImgName('lotteryBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="lotteryShow"
+                v-smart-img
+                :src="imageUrl(getImgName('lotteryBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
+
+            <!-- 收益按钮 -->
+            <div style="width: 30%; position: relative" @click="handleBt('withdrawal')">
+              <img
+                v-show="!incomeShow"
+                v-smart-img
+                :src="imageUrl(getImgName('withdrawalBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="incomeShow"
+                v-smart-img
+                :src="imageUrl(getImgName('withdrawalBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 展示内容 -->
+        <div>
+          <!-- 排行榜模块 -->
+          <div v-show="rankingShow">
+            <!-- 每周礼物 -->
+            <img
+              v-smart-img
+              :src="imageUrl('eventGiftsBg')"
+              alt=""
+              style="display: block; width: 100vw; object-fit: cover"
+            />
+
+            <!-- 总排行榜前三 -->
+            <itemCenter
+              :imgUrl="imageUrl('overallRankingBg')"
+              :contentStyle="`inset: 15vw 4vw 5vw;flex-direction: column;`"
+            >
+              <!-- 第一 -->
+              <div style="display: flex; justify-content: center">
+                <TopUser
+                  ranking="1"
+                  :BorderImgUrl="imageUrl('top1')"
+                  :avatarUrl="OverallRanking[0].userAvatar"
+                  :name="OverallRanking[0].userName"
+                  :distributionValue="OverallRanking[0].amount"
+                  style="width: 40%"
+                  @click="viewUserInfo(OverallRanking[0].userId)"
+                />
+              </div>
+              <!-- 第二三 -->
+              <div
+                style="
+                  position: relative;
+                  z-index: 3;
+
+                  display: flex;
+                  justify-content: space-between;
+                  margin-top: -44%;
+                  pointer-events: none;
+                "
+              >
+                <div
+                  style="pointer-events: auto; width: 30%"
+                  @click.stop="viewUserInfo(OverallRanking[1].userId)"
+                >
+                  <TopUser
+                    ranking="2"
+                    :BorderImgUrl="imageUrl('top2')"
+                    :avatarUrl="OverallRanking[1].userAvatar"
+                    :name="OverallRanking[1].userName"
+                    :distributionValue="OverallRanking[1].amount"
+                    style="width: 100%"
+                  />
+                </div>
+
+                <div
+                  style="pointer-events: auto; width: 30%"
+                  @click.stop="viewUserInfo(OverallRanking[2].userId)"
+                >
+                  <TopUser
+                    ranking="3"
+                    :BorderImgUrl="imageUrl('top3')"
+                    :avatarUrl="OverallRanking[2].userAvatar"
+                    :name="OverallRanking[2].userName"
+                    :distributionValue="OverallRanking[2].amount"
+                    style="width: 100%"
+                  />
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 倒计时 -->
+            <div class="timeBox">
+              <div style="width: 30%">
+                <itemCenter
+                  :imgUrl="imageUrl('timeDayBg')"
+                  :contentStyle="`left:3vw;right: auto;top:1vw;bottom:auto;width: 10vw;height: 11vw;`"
+                >
+                  <div class="timeText" style="">{{ Days }}</div>
+                </itemCenter>
+              </div>
+              <div class="timeText timeGap"></div>
+              <div style="width: 13%">
+                <itemCenter :imgUrl="imageUrl('timeBg')">
+                  <div class="timeText" style="">{{ Hours }}</div>
+                </itemCenter>
+              </div>
+              <div class="timeText timeGap">:</div>
+              <div style="width: 13%">
+                <itemCenter :imgUrl="imageUrl('timeBg')">
+                  <div class="timeText" style="">{{ Minutes }}</div>
+                </itemCenter>
+              </div>
+              <div class="timeText timeGap">:</div>
+              <div style="width: 13%">
+                <itemCenter :imgUrl="imageUrl('timeBg')">
+                  <div class="timeText" style="">{{ Second }}</div>
+                </itemCenter>
+              </div>
+            </div>
+
+            <!-- 排行榜 -->
+            <div
+              style="
+                padding: 30vw 5vw 10vw;
+                position: relative;
+                z-index: 0;
+                display: flex;
+                flex-direction: column;
+                gap: 2vw;
+              "
+            >
+              <!-- 背景图 -->
+              <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>
+
+              <!-- 排行榜前10名(带奖励) -->
+              <div
+                v-for="(listItem, index) in RankingHasTop10"
+                :key="listItem.userId"
+                style="display: flex; flex-direction: column; gap: 1vw"
+              >
+                <!-- 基本信息 -->
+                <itemCenter
+                  :imgUrl="imageUrl(index < 3 ? `itemTop${index + 1}Bg` : '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">
+                      <div v-if="index < 3" style="width: 100%">
+                        <img
+                          v-smart-img
+                          :src="imageUrl(`ranking${index + 1}`)"
+                          alt=""
+                          style="width: 100%; display: block; object-fit: cover"
+                        />
+                      </div>
+                      <div v-else style="width: 100%">
+                        <itemCenter
+                          :imgUrl="imageUrl('rankingFrom4')"
+                          :contentStyle="``"
+                          @click="viewUserInfo(listItem.userId)"
+                        >
+                          <div style="color: #ffe601; font-weight: 700">
+                            {{ listItem?.rank }}
+                          </div>
+                        </itemCenter>
+                      </div>
+                    </div>
+
+                    <!-- 头像 -->
+                    <div style="width: 3.5em; margin: 0 1vw; position: relative; z-index: 0">
+                      <!-- 前三名头像框 -->
+                      <img
+                        v-smart-img
+                        v-if="index < 3"
+                        :src="imageUrl(`ranking${index + 1}Frame`)"
+                        alt=""
+                        style="
+                          display: block;
+                          width: 120%;
+
+                          position: absolute;
+                          top: 50%;
+                          left: 50%;
+                          transform: translate(-50%, -50%);
+                          z-index: 1;
+                        "
+                      />
+
+                      <!-- 头像 -->
+                      <img
+                        v-smart-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">
+                      <div
+                        style="
+                          color: #fff;
+                          font-weight: 860;
+                          overflow: hidden;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                        "
+                        class="UserNickname"
+                      >
+                        {{ listItem?.userName }}
+                      </div>
+                      <div style="color: #fff; font-weight: 590" class="UserNickname">
+                        {{ $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="UserNickname">
+                      {{ listItem?.amount || 0 }}
+                    </div>
+                  </div>
+                </itemCenter>
+
+                <!-- 前10名奖励 -->
+                <itemCenter
+                  :imgUrl="imageUrl('itemTopRewardBg')"
+                  :contentStyle="`padding:0 2vw 0 11vw`"
+                  :lazy="true"
+                >
+                  <div class="reward-wrapper">
+                    <div style="height: 100%; display: flex; align-items: center; overflow: hidden">
+                      <!-- 滚动容器 -->
+                      <div class="scroll-wrapper">
+                        <!-- 2套内容 -->
+                        <div class="scroll-content" v-for="value in 2">
+                          <div
+                            v-for="(item, index) in showRewardsTop10[index].activityRewardProps"
+                            :key="index"
+                            style="
+                              align-self: stretch;
+                              display: flex;
+                              align-items: center;
+                              padding: 0 1vw;
+                            "
+                            @click="clickReward(item)"
+                          >
+                            <!-- 预览图 -->
+                            <img
+                              v-if="item.cover != ''"
+                              :src="item.cover"
+                              alt=""
+                              style="min-width: 0; display: block; width: 8vw; object-fit: cover"
+                            />
+                            <div style="min-width: 0; color: #fff; white-space: nowrap">
+                              {{ formatRewardDisplay(item.type, item) }}
+                            </div>
+                            ，
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </itemCenter>
+              </div>
+
+              <!-- 排行榜10名后(无奖励) -->
+              <div
+                v-if="showRanking.length > 0"
+                v-for="(listItem, index) in showRanking"
+                :key="listItem.userId"
+                style="position: relative; z-index: 2"
+              >
+                <itemCenter :imgUrl="imageUrl('itemFrom4Bg')" :contentStyle="`padding: 0 2vw`">
+                  <!-- 基本信息 -->
+                  <div
+                    style="
+                      flex: 1;
+                      min-width: 0;
+
+                      display: flex;
+                      justify-content: space-around;
+                      align-items: center;
+
+                      gap: 4px;
+                    "
+                  >
+                    <!-- 排名 -->
+                    <itemCenter
+                      style="width: 9vw"
+                      :imgUrl="imageUrl('rankingFrom4')"
+                      :contentStyle="``"
+                      @click="viewUserInfo(listItem.userId)"
+                    >
+                      <div style="color: #ffe601; font-weight: 700">
+                        {{ listItem?.rank }}
+                      </div>
+                    </itemCenter>
+
+                    <!-- 头像 -->
+                    <img
+                      v-smart-img
+                      :src="listItem?.userAvatar || ''"
+                      alt=""
+                      style="
+                        display: block;
+                        width: 3.5em;
+                        margin: 0 2%;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                        object-fit: cover;
+                      "
+                      @error="handleAvatarImageError"
+                    />
+
+                    <!-- 名称、id -->
+                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+                      <div
+                        style="
+                          color: #fff;
+                          font-weight: 860;
+                          overflow: hidden;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                        "
+                        class="UserNickname"
+                      >
+                        {{ listItem?.userName }}
+                      </div>
+                      <div style="color: #fff; font-weight: 590" class="UserNickname">
+                        {{ $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="UserNickname">
+                      {{ listItem?.amount || 0 }}
+                    </div>
+                  </div>
+                </itemCenter>
+              </div>
+            </div>
+
+            <!-- 触发加载功能 -->
+            <div ref="RankingLoadmore"></div>
+          </div>
+
+          <!-- 抽奖模块 -->
+          <div
+            v-show="lotteryShow"
+            style="
+              width: 100vw;
+              position: relative;
+              display: flex;
+              flex-direction: column;
+              gap: 4vw;
+            "
+          >
+            <!-- 中奖历史按钮 -->
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('historyBt'))"
+              alt=""
+              style="width: 8vw; position: absolute; z-index: 2; top: 2vw; right: 4vw"
+              @click="openPopup('history')"
+            />
+
+            <!-- 奖池 -->
+            <itemCenter
+              style="margin-top: 6vw"
+              :imgUrl="imageUrl('lottery')"
+              :contentStyle="`
+                  inset: 10vw;
+
+                  display: grid;
+                  grid-template-columns: repeat(3, 1fr);
+                  grid-template-rows: repeat(3, 1fr);
+                  gap: 1vw;
+
+                  direction: ltr;`"
+            >
+              <!-- 抽奖转盘 -->
+              <div
+                v-for="(prize, index) in activity.prizeList"
+                style="
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+
+                  position: relative;
+                "
+                :style="[getGridPosition(index)]"
+              >
+                <img
+                  v-smart-img
+                  :src="prize.prizeImage || ''"
+                  :alt="prize.prizeName || ''"
+                  width="60%"
+                  style="display: block"
+                />
+                <!-- <div style="font-size: 0.8em">{{ prize.prizeName }}</div> -->
+
+                <!-- 转到的奖品项 -->
+                <img
+                  v-show="activeIndex === index"
+                  v-smart-img
+                  :src="imageUrl('prizeActiveFrame')"
+                  alt=""
+                  style="
+                    display: block;
+                    width: 100%;
+
+                    position: absolute;
+                    inset: 0;
+                  "
+                />
+              </div>
+
+              <!-- 按钮 -->
+              <div
+                style="
+                  grid-area: 2 / 2;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
+                :disabled="isRolling"
+                @click="sweepstakes(1)"
+              ></div>
+            </itemCenter>
+
+            <!-- 抽奖按钮 -->
+            <div style="display: flex; justify-content: center; gap: 4vw" class="drawBts">
+              <!-- 单抽 -->
+              <itemCenter
+                style="width: 45vw"
+                :imgUrl="imageUrl('draw1BtBg')"
+                @click="sweepstakes(1)"
+              >
+                <div style="font-size: 2em; font-weight: 600">1 Spin</div>
+              </itemCenter>
+
+              <!-- 10连抽 -->
+              <itemCenter
+                style="width: 45vw"
+                :imgUrl="imageUrl('draw10BtBg')"
+                @click="sweepstakes(10)"
+              >
+                <div style="font-size: 2em; font-weight: 600">10 Spin</div>
+              </itemCenter>
+            </div>
+
+            <!-- 总抽奖次数 -->
+            <div
+              style="
+                position: relative;
+                z-index: 2;
+                margin: 0 4vw 0;
+                display: flex;
+                flex-direction: column;
+                gap: 2vw;
+                padding: 12px;
+                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, #0f674c 0%, #0f674c 100%), #e8e8e8;
+                background-blend-mode: hard-light, normal, normal;
+              "
+            >
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <div style="font-size: 1.2em; font-weight: 700">
+                  {{
+                    t('Total Tickets:({ usedCount }/100)', { usedCount: totalDraw?.usedCount || 0 })
+                  }}
+                </div>
+
+                <!-- 按钮 -->
+                <div style="width: 20%">
+                  <!-- 未满足条件 -->
+                  <itemCenter
+                    v-if="RechargeBadgeInfo.claimStatus == -1"
+                    :imgUrl="imageUrl('taskBtGo')"
+                  >
+                    <div style="font-size: 1em; font-weight: 600">{{ t('task_go') }}</div>
+                  </itemCenter>
+
+                  <!-- 未领取 -->
+                  <itemCenter
+                    v-if="RechargeBadgeInfo.claimStatus == 0"
+                    :imgUrl="imageUrl('taskBtReceive')"
+                    @click="receiveRechargeBadge(RechargeBadgeInfo)"
+                  >
+                    <div style="font-size: 1em; font-weight: 600">{{ t('task_receive') }}</div>
+                  </itemCenter>
+
+                  <!-- 已领取 -->
+                  <itemCenter
+                    v-if="RechargeBadgeInfo.claimStatus == 1"
+                    :imgUrl="imageUrl('taskBtReceived')"
+                    @click="receiveRechargeBadge(RechargeBadgeInfo)"
+                  >
+                    <div style="font-size: 0.9em; font-weight: 600">{{ t('task_received') }}</div>
+                  </itemCenter>
+                </div>
+              </div>
+              <div style="display: flex; align-items: center; gap: 4vw">
+                <img
+                  v-for="Badge in RechargeBadgeInfo.rewardProps"
+                  v-smart-img
+                  :src="Badge.cover || ''"
+                  alt=""
+                  style="display: block; width: 18vw"
+                />
+                <div>{{ t('Lucky Dollars Medal*permanent') }}</div>
+              </div>
+            </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, #0f674c 0%, #0f674c 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" :imgUrl="imageUrl('taskBtGo')">
+                    <div style="font-size: 1em; font-weight: 600">{{ t('task_go') }}</div>
+                  </itemCenter>
+
+                  <!-- 领取抽奖券 -->
+                  <itemCenter
+                    v-else-if="task.taskStatus === 1"
+                    :imgUrl="imageUrl('taskBtReceive')"
+                    @click="receiveTaskReward(task.taskCode)"
+                  >
+                    <div style="font-size: 1em; font-weight: 600">{{ t('task_receive') }}</div>
+                  </itemCenter>
+
+                  <!-- 已完成 -->
+                  <itemCenter
+                    v-else
+                    :imgUrl="imageUrl('taskBtReceived')"
+                    @click="receiveRechargeBadge(RechargeBadgeInfo)"
+                  >
+                    <div style="font-size: 0.9em; font-weight: 600">{{ t('task_received') }}</div>
+                  </itemCenter>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 收益模块 -->
+          <div
+            v-show="incomeShow"
+            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, #0f674c 0%, #0f674c 100%), #e8e8e8;
+                background-blend-mode: hard-light, normal, normal;
+
+                padding: 16px 12px;
+
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                position: relative;
+              "
+            >
+              <!-- 头像 -->
+              <img
+                v-smart-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('help')"
+                />
+                <!-- 名称 -->
+                <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, #0f674c 0%, #0f674c 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
+                          v-smart-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.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);
+                      "
+                      @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 v-show="rankingShow" style="height: 25vw"></div>
+
+        <!-- 我的排名 -->
+        <itemCenter
+          v-show="rankingShow"
+          style="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;
+            "
+          >
+            <!-- 排名 -->
+            <itemCenter
+              style="width: 10vw"
+              :imgUrl="imageUrl('rankingFrom4')"
+              :contentStyle="``"
+              @click="viewUserInfo(listItem.userId)"
+            >
+              <div style="color: #ffe601; font-weight: 700">
+                {{ myRanking.rank || 999 }}
+              </div>
+            </itemCenter>
+
+            <!-- 头像 -->
+            <img
+              v-smart-img
+              :src="myRanking.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="
+                  color: #fff;
+                  font-weight: 860;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+                class="UserNickname"
+              >
+                {{ myRanking.userName }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+
+              display: flex;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+            />
+            <div style="color: #ffe601; font-weight: 700">
+              {{ myRanking.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="topRewardShow" style="width: 90%; position: relative" @click.stop>
+              <itemCenter
+                :imgUrl="imageUrl('rewardBg')"
+                :contentStyle="`padding: 22vw 6vw 11vw;flex-direction: column;gap: 2vw;`"
+              >
+                <!-- 奖品展示 -->
+                <img
+                  v-smart-img
+                  :src="topReward.cover"
+                  alt=""
+                  style="width: 60%; display: block; object-fit: cover"
+                />
+
+                <!-- 时长或数量 -->
+                <div
+                  style="
+                    font-size: 1.2em;
+                    font-weight: 700;
+                    background: linear-gradient(
+                      180deg,
+                      #ffdf6b 31.61%,
+                      #ffe562 36.73%,
+                      #fff 52.37%,
+                      #ffe562 58.67%,
+                      #ffa615 72.2%
+                    );
+                    background-clip: text;
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                  "
+                >
+                  {{ formatRewardDisplay(topReward.type, topReward) }}
+                </div>
+              </itemCenter>
+            </div>
+
+            <!-- 抽奖结果 -->
+            <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
+              <itemCenter
+                :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;
+                  "
+                >
+                  <!-- 上一个奖品 -->
+                  <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
+                    v-smart-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: 0.9em;
+                    font-weight: 590;
+
+                    position: relative;
+                    color: #ff79a1;
+                  "
+                >
+                  {{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
+                  <div v-if="result.length > 1" class="resultNum">
+                    {{ resultShowIndex + 1 }} / {{ result.length }}
+                  </div>
+                </div>
+
+                <!-- 关闭弹窗按钮 -->
+                <div style="width: 30vw; height: 10vw" @click="closedPopup"></div>
+              </itemCenter>
+            </div>
+
+            <!-- 中奖历史 -->
+            <div v-show="historyShow" style="position: relative; width: 95%" @click.stop>
+              <itemCenter
+                :imgUrl="imageUrl(getImgName('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
+                        v-smart-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>
+
+            <!-- help弹窗 -->
+            <div v-show="helpShow" @click.stop>
+              <itemCenter
+                :imgUrl="imageUrl('helpBg_ar')"
+                :contentStyle="`inset: 26vw 6vw 13vw;overflow-y: auto;display:block;`"
+              >
+                <img
+                  v-smart-img
+                  :src="imageUrl(getImgName('helpInfo'))"
+                  alt=""
+                  style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+                />
+              </itemCenter>
+            </div>
+          </div>
+        </maskLayer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, 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/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/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 {
+  ranklist, //获取排行榜
+  validActivity, // 获取有效活动
+  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 Barrage from './components/Barrage.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/LuckyDollars/Season3/', 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 helpShow = ref(false) // 帮助
+const resultShow = ref(false) // 抽奖结果
+const historyShow = ref(false) // 历史
+const topRewardShow = ref(false) // 前三名奖励展示
+const maskLayerShow = computed(() => {
+  return helpShow.value || resultShow.value || historyShow.value || topRewardShow.value
+})
+
+// 模块切换展示
+const rankingShow = ref(true) //排行榜标签页
+const lotteryShow = ref(false) //抽奖标签页
+const incomeShow = ref(false) //收益标签页
+
+// 抽屉展示
+const transferShow = ref(false) //转账
+const exchangeShow = ref(false) //兑换
+const withdrawShow = ref(false) //提现
+
+const selectedCoin = ref(null) // 选择的币种
+
+const barrageList = ref([]) // 弹幕数据
+
+const OverallRanking = ref(
+  Array(3).fill({
+    userId: '',
+    userAvatar: '',
+    userName: 'aaaaaaaa',
+    amount: '111M',
+  }),
+) // 总排行榜前三
+
+const Ranking = ref([]) // 原始排行榜
+const myRanking = ref({}) // 我的排名
+const RankingLoadmore = ref(null) //触底模块
+const rankingPageNo = ref(1) //分页页码
+const rankingAdd = ref([]) //加载排行榜项
+// 完整排行榜
+const rankingTotal = computed(() => {
+  return [...Ranking.value, ...rankingAdd.value]
+})
+
+const rewardsTop10 = ref([]) // 原前10名奖励列表
+const topReward = ref({}) // 前10名奖励项
+// 处理后的前10名奖励列表
+const showRewardsTop10 = computed(() => {
+  // 对 rewardsTop10 进行深拷贝，避免引用问题
+  let newRewardsTop10 = Array(10).fill({
+    activityRewardProps: [
+      {
+        cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
+        content: t('heartbeat_value_points_4_percent', {
+          amount: formatLargeNumber(Number('1000') * 0.04),
+        }),
+        quantity: 0,
+        type: 'GIFT',
+      },
+      {
+        cover: '',
+        content: 'Homepage Ad* 7 days',
+        quantity: 0,
+        type: 'GIFT',
+      },
+    ],
+  })
+
+  return newRewardsTop10
+})
+
+// 计算前10名的奖励金币数量
+const formatLargeNumber = (num) => {
+  if (typeof num !== 'number' || isNaN(num)) {
+    return '0'
+  }
+
+  const absNum = Math.abs(num)
+
+  if (absNum >= 1000000) {
+    const millionValue = num / 1000000
+    const roundedValue = Math.round(millionValue * 100) / 100
+    return roundedValue.toFixed(2) + 'M'
+  } else if (absNum >= 1000) {
+    const thousandValue = num / 1000
+    const roundedValue = Math.round(thousandValue * 100) / 100
+    return roundedValue.toFixed(2) + 'K'
+  } else {
+    return Math.floor(num).toString()
+  }
+}
+
+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 RechargeBadgeInfo = ref([]) //充值奖励-徽章信息
+
+const userInfo = ref({}) //用户信息
+const userIdentity = ref({}) //用户身份
+
+// 排行榜前10名（带奖励）
+const RankingHasTop10 = computed(() => {
+  let RankingTop10 = rankingTotal.value.filter((_, index) => index < 10)
+  if (RankingTop10.length < 10) {
+    let addNullUser = Array.from({ length: 10 - RankingTop10.length }, () => ({
+      avatar: '',
+      nickname: '',
+      account: '',
+      amount: '',
+    }))
+    RankingTop10.push(...addNullUser)
+  }
+  return RankingTop10
+})
+
+// 排行榜11名开始（无奖励）
+const showRanking = computed(() => {
+  return rankingTotal.value.filter((_, index) => index >= 10)
+  // return []
+})
+
+// 获取沙特时间的3月19号早上0点的时间戳（直接使用北京时间）
+const getTargetTime = () => {
+  // 沙特时间3月19日0点 = 北京时间3月19日5点（沙特比北京晚5小时）
+  const targetDate = new Date(2026, 2, 19, 5, 0, 0)
+  return targetDate.getTime()
+}
+
+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) {
+    Days.value = 0
+    Hours.value = '00'
+    Minutes.value = '00'
+    Second.value = '00'
+
+    // 清除定时器
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    return
+  }
+
+  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 drawerShowBt = (type) => {
+  transferShow.value = type == 'transfer' ? !transferShow.value : false
+  exchangeShow.value = type == 'exchange' ? !exchangeShow.value : false
+  withdrawShow.value = type == 'withdraw' ? !withdrawShow.value : false
+  selectedCoin.value = null
+}
+
+// 点击展示主体内容
+const handleBt = (type) => {
+  rankingShow.value = type == 'ranking' ? true : false
+  lotteryShow.value = type == 'lottery' ? true : false
+  incomeShow.value = type == 'withdrawal' ? true : false
+  drawerShowBt('') // 收起抽屉
+  selectedCoin.value = null // 清除选择币种
+}
+
+// 点击奖品
+const clickReward = (item) => {
+  topReward.value = item // 展示奖品赋值
+  topRewardShow.value = true // 显示奖品
+}
+
+// 前往搜索代理页
+const searchPayee = () => {
+  router.push({
+    path: '/search-payee',
+    query: { from: '/new-year', activeAction: 'incomeShow' },
+  })
+}
+
+// 前往提现页
+const goToWithdraw = () => {
+  router.push({ path: '/cash-out', query: { activityId: '2005571533988298753' } })
+}
+
+// 转账金币选项
+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: '',
+  }
+
+  try {
+    // 调用转账接口
+    const response = await transferActivityDollar(transferData)
+    if (response.status) {
+      showSuccess(
+        t('transfer_success', {
+          price: selectedCoin.value.price,
+          name: selectedPayee.value?.name,
+        }),
+      )
+    } else {
+      showError(t('transfer_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: '',
+  }
+
+  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 'result':
+      resultShow.value = true
+      break
+    case 'help':
+      helpShow.value = true
+      break
+    case 'history':
+      historyShow.value = true
+      break
+    case 'reward':
+      topRewardShow.value = true
+      break
+    default:
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  resultShow.value = false
+  helpShow.value = false
+  historyShow.value = false
+  topRewardShow.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: '2004471533988167125',
+      drawCount: consecutive,
+    }
+    try {
+      // 单抽
+      if (consecutive == 1) {
+        const resOnceDraw = await onceDraw(data)
+        if (resOnceDraw.status && resOnceDraw.body) {
+          getTotalDrawCount() //刷新累计抽奖次数
+          getTickets() //重新获取拥有的抽奖券
+
+          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() //刷新累计抽奖次数
+          getTickets() //重新获取拥有的抽奖券
+
+          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 taskList = ref([]) //任务列表
+
+// 展示任务目标
+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)
+    targetValue = Math.floor(targetValue)
+    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 == 'SPINS_SEND_GIFT_5') {
+      return t('Gifts: 5 gifts({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    }
+  } else if (task.targetType == 'SPEND_COINS') {
+    if (task.taskCode == 'SPINS_SPEND_5000') {
+      return t('Spend 5000 coins in the game ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SPINS_SPEND_10000') {
+      return t('Spend 10000 coins in the game ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SPINS_SPEND_50000') {
+      return t('Spend 50000 coins in the game ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    }
+  } else if (task.targetType == 'RECHARGE_AMOUNT') {
+    if (task.taskCode == 'SPINS_RECHARGE_1') {
+      return t('Daily total recharge amount: $1 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SPINS_RECHARGE_10') {
+      return t('Daily total recharge amount: $10 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SPINS_RECHARGE_50') {
+      return t('Daily total recharge amount: $50 ({currentValue}/{targetValue})', {
+        currentValue: task.currentValue,
+        targetValue: task.targetValue,
+      })
+    } else if (task.taskCode == 'SPINS_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('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()
+  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 = {
+    activityId: '2005571533988298753',
+    pageNo: rankingPageNo.value,
+    pageSize: 20,
+  }
+  const resRanking = await ranklist(data)
+  if (resRanking.status && resRanking.body) {
+    myRanking.value = resRanking.body?.currentUser //我的排名信息
+
+    if (resRanking.body.topList.length > 0) {
+      if (resRanking.body.topList.length == 20) {
+        rankingAdd.value = []
+        Ranking.value.push(...resRanking.body?.topList)
+        rankingPageNo.value++
+      } else {
+        rankingAdd.value = resRanking.body?.topList
+      }
+    }
+  } else {
+    Ranking.value = []
+    myRanking.value = {}
+  }
+}
+
+//获取奖池
+const getActivityDetail = async () => {
+  getDrawableAmount() //获取可提现金额
+  const resDetail = await activityDetail('67125')
+  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()
+  if (resTickets.status && resTickets.body) {
+    rollTimes.value = resTickets.body
+  } else {
+    rollTimes.value = 0
+  }
+}
+
+//获取累计抽奖次数
+const getTotalDrawCount = async () => {
+  const resTotalDrawCount = await myTotalDrawCount()
+  if (resTotalDrawCount.status && resTotalDrawCount.body) {
+    totalDraw.value = resTotalDrawCount.body
+  }
+}
+
+//可提现金额
+const getDrawableAmount = async () => {
+  const resDrawableAmount = await withdrawableAmount('2004471533988167125')
+  if (resDrawableAmount.status && resDrawableAmount.body) {
+    currentAmount.value = resDrawableAmount.body
+  }
+}
+
+//获取任务列表
+const getTaskList = async () => {
+  const resTaskList = await ActTaskList()
+  if (resTaskList.status && resTaskList.body) {
+    taskList.value = resTaskList.body
+  }
+}
+
+// 获取累计抽奖-徽章信息
+const getConfigsBadgeInfo = async () => {
+  let data = {
+    activityType: 'USER_RECHARGE_DRAW',
+    activityId: '2005571533988298753',
+  }
+  const resConfigsBadge = await rewardConfigsBadge(data)
+  if (resConfigsBadge.status && resConfigsBadge.body) {
+    RechargeBadgeInfo.value = resConfigsBadge.body?.[0]
+  }
+}
+
+//获取中奖记录
+const getDrawRecords = async () => {
+  const resDrawRecords = await drawRecords()
+  if (resDrawRecords.status && resDrawRecords.body) {
+    myRecords.value = resDrawRecords.body?.records || []
+  }
+}
+
+// 领取任务奖励
+const receiveTaskReward = async (code) => {
+  let data = {
+    taskCode: code,
+  }
+  try {
+    const resReceive = await receiveTickets(data)
+    if (resReceive.status && resReceive.body) {
+      getTaskList() //获取任务列表
+      getTickets() //获取拥有的抽奖券
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 领取累计抽奖奖励-徽章
+const receiveRechargeBadge = async (rewards) => {
+  let data = {
+    activityType: rewards.activityType,
+    activityId: '2005571533988298753',
+    ruleId: rewards.ruleId,
+  }
+  try {
+    const resReceive = await receiveRewardBadge(data)
+    if (resReceive.status && resReceive.body) {
+      getConfigsBadgeInfo() // 刷新累计抽奖-徽章信息
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([
+    getWinners(), //获取历史中奖用户
+    getRanking(), //获取排行榜
+
+    getActivityDetail(), //获取奖池
+    getTotalDrawCount(), //刷新累计抽奖次数
+    getTickets(), //重新获取拥有的抽奖券
+    getConfigsBadgeInfo(), // 刷新累计抽奖-徽章信息
+    getTaskList(), //获取任务列表
+    getDrawRecords(), // 获取中奖记录
+
+    getUserInfo(), //获取用户信息
+  ])
+}
+
+// 预加载关键图片
+const preloadCriticalImages = async () => {
+  const criticalImages = []
+
+  await preloadImages(criticalImages)
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    completePreloading() // 完成预加载
+  })
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  getCountdown() // 立即执行一次
+  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
+}
+
+// 触发节流获取排行榜
+const debouceGetRanking = useThrottle(() => {
+  getRanking() //加载新的排行榜项
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      debouceGetRanking()
+    }
+  })
+})
+
+// 组件挂载时检测环境
+onMounted(() => {
+  connectToAppHandler()
+
+  startCountdown() //开启倒计时
+
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    console.log('监控加载模块')
+    observer.observe(RankingLoadmore.value)
+  }
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  position: relative;
+  background: #142c24;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.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之下 */
+}
+
+.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.5em;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btTitle {
+  color: #fff;
+  font-weight: 700;
+}
+
+.topTitle {
+  font-size: 1.5em;
+}
+
+.history-name {
+  font-size: 0.8em;
+}
+
+.history-time {
+  font-size: 0.8em;
+}
+
+.UserNickname {
+  font-size: 0.8em;
+}
+
+.timeBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+.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);
+}
+
+.coin-item.selected {
+  border-radius: 11px;
+  border: 2px solid #5dffc9;
+  box-shadow:
+    -0.25px -0.25px 1px 0 #5dffbb,
+    0.25px 0.25px 1px 0 #5dffc6,
+    0 0 3px 0 rgba(93, 255, 198, 0.8),
+    0 0 5px 0 rgba(93, 255, 187, 0.6),
+    0 0 4px 0 rgba(0, 210, 161, 0.3);
+}
+
+.coin-item:active {
+  transform: scale(0.98);
+}
+
+.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;
+}
+</style>