diff --git a/src/router/index.js b/src/router/index.js
index 29f94ea..6e7289b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -372,17 +372,23 @@ const router = createRouter({
 
     // 限时活动
     {
-      path: '/login-reward',
-      name: 'login-reward',
-      component: () => import('../views/Activities/LoginReward/index.vue'),
+      path: '/activities/spring-festival',
+      name: 'spring-festival',
+      component: () => import('../views/Activities/SpringFestival/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年xxxxxx结束
+    }, //2026年2月16日上午5点结束
     {
       path: '/lucky-dollars-season3',
       name: 'lucky-dollars-season3',
       component: () => import('../views/Activities/LuckyDollars/Season3/index.vue'),
       meta: { requiresAuth: true },
     }, //2026年2月16日上午5点结束
+    {
+      path: '/login-reward',
+      name: 'login-reward',
+      component: () => import('../views/Activities/LoginReward/index.vue'),
+      meta: { requiresAuth: true },
+    }, //2026年xxxxxx结束
     {
       path: '/jack-pot',
       name: 'jack-pot',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 974d5fe..b4b9f27 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -58,8 +58,9 @@ const ACTIVITIES = [
   INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
   '/recharge-reward', //充值奖励
 
-  '/login-reward', // 登录奖励
+  '/activities/spring-festival', // 春节游戏打榜
   '/lucky-dollars-season3', // 水果游戏打榜
+  '/login-reward', // 登录奖励
   '/jack-pot', // 水果游戏打榜
   '/new-year', // 新年抽奖
 ]
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index e81c3b4..74ebdb2 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -409,8 +409,9 @@ class RouteGuard {
       '/invitation-to-register', //邀请新用户注册页面
       '/recharge-reward', //充值奖励
 
+      '/activities/spring-festival', // 春节游戏打榜
+      '/lucky-dollars-season3', // 水果游戏打榜
       '/login-reward', // 登录奖励
-      '/lucky-dollars-season3', //水果游戏打榜
       '/jack-pot', //水果游戏打榜
       '/new-year', //新年抽奖
     ]
diff --git a/src/views/Activities/SpringFestival/Ranking.vue b/src/views/Activities/SpringFestival/Ranking.vue
new file mode 100644
index 0000000..bee01a9
--- /dev/null
+++ b/src/views/Activities/SpringFestival/Ranking.vue
@@ -0,0 +1,232 @@
+<template>
+  <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 { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import { useSpringFestival } from '@/stores/springFestival'
+import { storeToRefs } from 'pinia'
+
+import BackgroundLayer from '@/components/BackgroundLayer.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 springFestivalStore = useSpringFestival()
+
+const {
+  // 抽奖模块
+  lotteryRewards, // 抽奖奖池
+  tickets, // 抽奖券数量
+  userInfo, // 用户信息
+  userIdentity, // 用户身份
+  currentEarnings, // 当前收益
+  taskList, // 任务列表
+
+  // 抽奖排名模块
+  lotteryRanking, // 抽奖排名
+  addLotteryRanking, // 补充的抽奖排名
+  myLotteryRanking, // 我的抽奖排名
+
+  // 排行榜奖励模块
+  rankingRewards, // 排名奖池
+
+  // 充值排名模块
+  rechargeRanking, // 充值排名
+  addRechargeRanking, // 补充的充值排名
+  myRechargeRanking, // 我的充值排名
+
+  // 充值奖池模块
+  RechargeRewards, // 充值奖池
+
+  resultShow,
+  result, // 抽奖结果
+
+  drawRecordShow,
+  myRecords, // 我的抽奖记录
+
+  receiveRecordShow,
+  receiveRecord, // 领取抽奖券记录
+
+  helpShow, // 帮助展示
+} = storeToRefs(springFestivalStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `filename_ar` : filename
+}
+
+// 打开弹窗
+const openPopup = (type) => {
+  closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
+  switch (type) {
+    case 'help':
+      helpShow.value = true
+      break
+    default:
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  helpShow.value = false
+  // 清空数据
+  if (clear) {
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([])
+}
+
+// 预加载关键图片
+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() // 完成预加载
+  })
+}
+
+onMounted(() => {
+  // connectToAppHandler()
+})
+
+onUnmounted(() => {})
+</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之下 */
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+@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;
+  }
+}
+</style>
diff --git a/src/views/Activities/SpringFestival/RankingReward.vue b/src/views/Activities/SpringFestival/RankingReward.vue
new file mode 100644
index 0000000..bee01a9
--- /dev/null
+++ b/src/views/Activities/SpringFestival/RankingReward.vue
@@ -0,0 +1,232 @@
+<template>
+  <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 { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import { useSpringFestival } from '@/stores/springFestival'
+import { storeToRefs } from 'pinia'
+
+import BackgroundLayer from '@/components/BackgroundLayer.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 springFestivalStore = useSpringFestival()
+
+const {
+  // 抽奖模块
+  lotteryRewards, // 抽奖奖池
+  tickets, // 抽奖券数量
+  userInfo, // 用户信息
+  userIdentity, // 用户身份
+  currentEarnings, // 当前收益
+  taskList, // 任务列表
+
+  // 抽奖排名模块
+  lotteryRanking, // 抽奖排名
+  addLotteryRanking, // 补充的抽奖排名
+  myLotteryRanking, // 我的抽奖排名
+
+  // 排行榜奖励模块
+  rankingRewards, // 排名奖池
+
+  // 充值排名模块
+  rechargeRanking, // 充值排名
+  addRechargeRanking, // 补充的充值排名
+  myRechargeRanking, // 我的充值排名
+
+  // 充值奖池模块
+  RechargeRewards, // 充值奖池
+
+  resultShow,
+  result, // 抽奖结果
+
+  drawRecordShow,
+  myRecords, // 我的抽奖记录
+
+  receiveRecordShow,
+  receiveRecord, // 领取抽奖券记录
+
+  helpShow, // 帮助展示
+} = storeToRefs(springFestivalStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `filename_ar` : filename
+}
+
+// 打开弹窗
+const openPopup = (type) => {
+  closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
+  switch (type) {
+    case 'help':
+      helpShow.value = true
+      break
+    default:
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  helpShow.value = false
+  // 清空数据
+  if (clear) {
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([])
+}
+
+// 预加载关键图片
+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() // 完成预加载
+  })
+}
+
+onMounted(() => {
+  // connectToAppHandler()
+})
+
+onUnmounted(() => {})
+</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之下 */
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+@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;
+  }
+}
+</style>
diff --git a/src/views/Activities/SpringFestival/RechargeReward.vue b/src/views/Activities/SpringFestival/RechargeReward.vue
new file mode 100644
index 0000000..bee01a9
--- /dev/null
+++ b/src/views/Activities/SpringFestival/RechargeReward.vue
@@ -0,0 +1,232 @@
+<template>
+  <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 { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import { useSpringFestival } from '@/stores/springFestival'
+import { storeToRefs } from 'pinia'
+
+import BackgroundLayer from '@/components/BackgroundLayer.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 springFestivalStore = useSpringFestival()
+
+const {
+  // 抽奖模块
+  lotteryRewards, // 抽奖奖池
+  tickets, // 抽奖券数量
+  userInfo, // 用户信息
+  userIdentity, // 用户身份
+  currentEarnings, // 当前收益
+  taskList, // 任务列表
+
+  // 抽奖排名模块
+  lotteryRanking, // 抽奖排名
+  addLotteryRanking, // 补充的抽奖排名
+  myLotteryRanking, // 我的抽奖排名
+
+  // 排行榜奖励模块
+  rankingRewards, // 排名奖池
+
+  // 充值排名模块
+  rechargeRanking, // 充值排名
+  addRechargeRanking, // 补充的充值排名
+  myRechargeRanking, // 我的充值排名
+
+  // 充值奖池模块
+  RechargeRewards, // 充值奖池
+
+  resultShow,
+  result, // 抽奖结果
+
+  drawRecordShow,
+  myRecords, // 我的抽奖记录
+
+  receiveRecordShow,
+  receiveRecord, // 领取抽奖券记录
+
+  helpShow, // 帮助展示
+} = storeToRefs(springFestivalStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `filename_ar` : filename
+}
+
+// 打开弹窗
+const openPopup = (type) => {
+  closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
+  switch (type) {
+    case 'help':
+      helpShow.value = true
+      break
+    default:
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  helpShow.value = false
+  // 清空数据
+  if (clear) {
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([])
+}
+
+// 预加载关键图片
+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() // 完成预加载
+  })
+}
+
+onMounted(() => {
+  // connectToAppHandler()
+})
+
+onUnmounted(() => {})
+</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之下 */
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+@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;
+  }
+}
+</style>
diff --git a/src/views/Activities/SpringFestival/Task.vue b/src/views/Activities/SpringFestival/Task.vue
new file mode 100644
index 0000000..ce008ef
--- /dev/null
+++ b/src/views/Activities/SpringFestival/Task.vue
@@ -0,0 +1,1180 @@
+<template>
+  <div style="display: flex; flex-direction: column; align-items: center">
+    <!-- 抽奖游戏 -->
+    <itemCenter
+      :imgUrl="imageUrl('lotteryBg')"
+      :contentStyle="`inset:30vw 6.5vw 13vw 6.5vw;flex-direction: column;justify-content: space-between;`"
+    >
+      <!-- 中奖历史按钮 -->
+      <img
+        v-smart-img
+        :src="imageUrl('historyBt')"
+        alt=""
+        style="width: 8vw; position: absolute; top: -28vw; right: -2vw"
+        @click="getDrawRecords"
+      />
+
+      <!-- 抽奖转盘 -->
+      <div
+        style="
+          width: 100%;
+          height: 85vw;
+          align-self: stretch;
+
+          padding: 0 5.5vw 0 5.5vw;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          grid-template-rows: repeat(3, 1fr);
+          gap: 0.5vw 1.5vw;
+
+          direction: ltr;
+        "
+      >
+        <!-- 奖池 -->
+        <div
+          v-for="(prize, index) in activity.prizeList"
+          style="
+            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="50%"
+            style="display: block"
+          />
+          <div style="font-size: 0.8em; font-weight: 700; color: #ff3b76">
+            {{ prize.prizeName }}
+          </div>
+
+          <!-- 转到的奖品项 -->
+          <img
+            v-show="activeIndex === index"
+            v-smart-img
+            :src="imageUrl('prizeActiveFrame')"
+            alt=""
+            style="
+              display: block;
+              width: 112%;
+
+              position: absolute;
+              transform: translate(-50%, -50%);
+              top: 50%;
+              left: 50%;
+            "
+          />
+        </div>
+      </div>
+
+      <!-- 抽奖信息 -->
+      <div
+        style="
+          width: 100%;
+          height: 5vw;
+          direction: ltr;
+          display: flex;
+          justify-content: space-between;
+        "
+      >
+        <!-- 拥有抽奖券 -->
+        <div>Remaining lottery tickets: {{ tickets }}</div>
+
+        <!-- 获取抽奖券 -->
+        <div>How to get a ticket</div>
+      </div>
+
+      <!-- 抽奖按钮 -->
+      <div
+        style="
+          width: 80%;
+          height: 11vw;
+          direction: ltr;
+          display: flex;
+          justify-content: space-between;
+          gap: 12vw;
+        "
+      >
+        <!-- 单抽 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2vw;
+          "
+          @click="sweepstakes(1)"
+        >
+          <div style="color: #fff; font-size: 2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1">
+            1
+          </div>
+          <img
+            v-smart-img
+            :src="imageUrl('ticket')"
+            alt=""
+            style="display: block; width: 3em; object-fit: cover"
+          />
+        </div>
+
+        <!-- 十连抽 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4vw;
+          "
+          @click="sweepstakes(10)"
+        >
+          <div style="color: #fff; font-size: 2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1">
+            10
+          </div>
+          <img
+            v-smart-img
+            :src="imageUrl('ticket')"
+            alt=""
+            style="display: block; width: 3em; object-fit: cover"
+          />
+        </div>
+      </div>
+    </itemCenter>
+
+    <!-- 收益操作 -->
+    <div style="width: 100%; padding: 0 4vw; display: flex; flex-direction: column; gap: 2vw">
+      <!-- 个人信息 -->
+      <itemCenter
+        style="z-index: 0"
+        :imgUrl="imageUrl('earningInfoBg')"
+        :contentStyle="`inset:11vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
+      >
+        <!-- 头像 -->
+        <img
+          v-smart-img
+          :src="userInfo.userAvatar || ''"
+          alt=""
+          style="
+            position: relative;
+            z-index: -1;
+            width: 23vw;
+            min-width: 0;
+
+            border-radius: 50%;
+            aspect-ratio: 1/1;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+
+        <!-- 基本信息 -->
+        <div
+          style="
+            position: relative;
+            flex: 1;
+            min-width: 0;
+            height: 80%;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 1vw;
+          "
+        >
+          <!-- 帮助按钮 -->
+          <img
+            v-smart-img
+            src="/src/assets/icon/helpWhite.png"
+            alt=""
+            class="ruleBt"
+            @click="openPopup('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="width: 100%; font-weight: 600">
+            {{ t('current_earnings', { amount: currentEarnings }) }}
+          </div>
+        </div>
+      </itemCenter>
+
+      <!-- 操作抽屉 -->
+      <div style="position: relative; z-index: 0">
+        <!-- 背景图 -->
+        <div
+          style="
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+
+            border-radius: 12px;
+          "
+          :style="{
+            backgroundImage: `url(${imageUrl('earningsBg')})`,
+            backgroundSize: 'cover',
+          }"
+        ></div>
+
+        <!-- 内容 -->
+        <div
+          style="
+            border-radius: 12px;
+            background:
+              linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%),
+              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%
+              );
+            background-blend-mode: normal, hard-light;
+            backdrop-filter: blur(5px);
+
+            padding: 12px;
+            font-weight: 600;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            position: relative;
+            z-index: 0;
+          "
+        >
+          <!-- 转账功能 -->
+          <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 #cfcfcf;
+                  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: 20px;
+                      border: 1px solid #cfcfcf;
+                      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: 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 #cfcfcf;
+                  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: 8px;
+                    border: 0.5px solid #cfcfcf;
+                    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);
+                  "
+                  @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: 8px;
+                    border: 0.5px solid #cfcfcf;
+                    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);
+
+                    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: 8px;
+                    border: 0.5px solid #cfcfcf;
+                    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);
+
+                    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="currentEarnings >= 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>
+</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 { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
+import { useSpringFestival } from '@/stores/springFestival'
+import { storeToRefs } from 'pinia'
+
+import {
+  activityDetail, // 获取活动详情
+  onceDraw, // 执行单次抽奖
+  multiDraw, // 执行连抽
+  drawRecords, // 获取抽奖记录
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+} from '@/api/couple.js'
+
+import {
+  withdrawableAmount, //获取可提现金额
+  transferActivityDollar, // 转账活动美金
+  exchangeCoin, //兑换代币
+} from '@/api/lottery'
+
+import BackgroundLayer from '@/components/BackgroundLayer.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 springFestivalStore = useSpringFestival()
+
+const {
+  // 抽奖模块
+  lotteryRewards, // 抽奖奖池
+  tickets, // 抽奖券数量
+  userInfo, // 用户信息
+  userIdentity, // 用户身份
+  currentEarnings, // 当前收益
+  selectedPayee, // 选择的收款人
+  taskList, // 任务列表
+
+  // 抽奖排名模块
+  lotteryRanking, // 抽奖排名
+  addLotteryRanking, // 补充的抽奖排名
+  myLotteryRanking, // 我的抽奖排名
+
+  // 排行榜奖励模块
+  rankingRewards, // 排名奖池
+
+  // 充值排名模块
+  rechargeRanking, // 充值排名
+  addRechargeRanking, // 补充的充值排名
+  myRechargeRanking, // 我的充值排名
+
+  // 充值奖池模块
+  RechargeRewards, // 充值奖池
+
+  resultShow,
+  result, // 抽奖结果
+
+  drawRecordShow,
+  myRecords, // 我的抽奖记录
+
+  receiveRecordShow,
+  receiveRecord, // 领取抽奖券记录
+
+  helpShow, // 帮助展示
+} = storeToRefs(springFestivalStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `filename_ar` : filename
+}
+
+const props = defineProps({
+  // 抽奖结果
+  activity: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const isRolling = ref(false) // 是否正在抽奖
+const activeIndex = ref(0)
+
+// 抽屉展示
+const transferShow = ref(false) //转账
+const exchangeShow = ref(false) //兑换
+const withdrawShow = ref(false) //提现
+
+const selectedCoin = ref(null) // 选择的币种
+
+// 抽屉展示
+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 openPopup = (type) => {
+  switch (type) {
+    case 'result':
+      resultShow.value = true
+      break
+    case 'history':
+      drawRecordShow.value = true
+      break
+    case 'help':
+      helpShow.value = true
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = (clear = true) => {
+  resultShow.value = false
+  helpShow.value = false
+  helpShow.value = false
+  // 清空数据
+  if (clear) {
+  }
+}
+
+//奖盘布局
+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圈数
+    let activity = props.activity
+
+    const roll = () => {
+      activeIndex.value = (activeIndex.value + 1) % activity.prizeList.length
+      console.log('当前索引:', activeIndex.value)
+
+      if (activeIndex.value === resultIndex && speed > 200) {
+        setTimeout(() => {
+          resolve() // 抽奖结束
+        }, 500)
+      } else {
+        if (activeIndex.value === activity.prizeList.length - 1) {
+          currentCycle++
+        }
+        // 加速旋转
+        if (currentCycle < totalCycles) {
+          speed -= 20
+        } else {
+          // 匀速旋转
+          if (activeIndex.value === activity.prizeList.length - 1) {
+            constantSpeedCycle++
+          }
+          if (constantSpeedCycle > 2) {
+            // 最后减速效果
+            speed += 20
+          }
+        }
+        setTimeout(roll, speed)
+      }
+    }
+
+    roll()
+  })
+}
+
+// 连抽
+const sweepstakes = async (consecutive = 1) => {
+  if (isRolling.value) return // 防止重复点击
+
+  isRolling.value = true
+
+  let activity = props.activity
+
+  let data = {
+    activityId: '2004471533988167125',
+    drawCount: consecutive,
+    needCoins: consecutive > tickets.value,
+  }
+  try {
+    // 单抽
+    if (consecutive == 1) {
+      const resOnceDraw = await onceDraw(data)
+      if (resOnceDraw.status && resOnceDraw.body) {
+        result.value = [resOnceDraw.body] // 中奖结果赋值
+
+        const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
+        //取抽奖结果的位置
+        const index = activity.prizeList.findIndex(
+          (prize) => prize.prizeName == resItem?.prize.prizeName,
+        ) //转盘第几位停下
+        console.log('index:', index)
+        getMyLotteryTicketCount() // 更新抽奖券数量
+        await startLottery(index)
+      }
+    }
+    //连抽
+    else {
+      const resMultiDraw = await multiDraw(data)
+      if (resMultiDraw.status && resMultiDraw.body) {
+        result.value = resMultiDraw.body.results // 中奖结果赋值
+
+        //取第一个抽奖结果的位置
+        let index = activity.prizeList.findIndex(
+          (prize) => prize.prizeName == result.value[0]?.prize.prizeName,
+        )
+        console.log('index:', index)
+
+        getMyLotteryTicketCount() // 更新抽奖券数量
+        await startLottery(index)
+      }
+    }
+    openPopup('result') //打开中奖结果弹窗
+    isRolling.value = false
+  } catch (error) {
+    showError(error.response.errorMsg)
+    isRolling.value = false
+  }
+}
+
+// 获取中奖记录，并打开弹窗
+const getDrawRecords = async () => {
+  const resDrawRecords = await drawRecords('67125')
+  if (resDrawRecords.status && resDrawRecords.body) {
+    myRecords.value = resDrawRecords.body?.records || []
+    openPopup('history') // 打开中奖历史弹窗
+  }
+}
+
+// 前往搜索代理页
+const searchPayee = () => {
+  router.push({
+    path: '/search-payee',
+    query: { from: '/activities/spring-festival', activeAction: 'TaskShow' },
+  })
+}
+
+// 前往提现页
+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 getDrawableAmount = async () => {
+  const resDrawableAmount = await withdrawableAmount('2004471533988167125')
+  if (resDrawableAmount.status && resDrawableAmount.body) {
+    currentEarnings.value = resDrawableAmount.body?.availableAmount || 0
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      tickets.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.response.errorMsg)
+  }
+}
+
+// 刷新页面数据
+const initData = async () => {
+  await Promise.all([])
+}
+
+// 预加载关键图片
+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() // 完成预加载
+  })
+}
+
+onMounted(() => {
+  console.log('route.query.activeAction:', route.query.activeAction)
+  if (route.query.activeAction == 'TaskShow') {
+    drawerShowBt('transfer')
+  }
+  // connectToAppHandler()
+})
+
+onUnmounted(() => {})
+</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之下 */
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ruleBt {
+  width: 4vw;
+  min-width: 0;
+  display: block;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+[dir='rtl'] .ruleBt {
+  left: 0;
+  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 #cfcfcf;
+  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: 12px;
+  border: 2px solid #ffdcdc;
+  box-shadow:
+    -0.25px -0.25px 1px 0 #ff482d,
+    0.25px 0.25px 1px 0 #ff482d,
+    0 0 3px 0 rgba(255, 72, 45, 0.8),
+    0 0 5px 0 rgba(255, 72, 45, 0.6),
+    0 0 4px 0 rgba(175, 23, 0, 0.3);
+}
+
+.coin-item:active {
+  transform: scale(0.98);
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+@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;
+  }
+}
+</style>
diff --git a/src/views/Activities/SpringFestival/components/Barrage.vue b/src/views/Activities/SpringFestival/components/Barrage.vue
new file mode 100644
index 0000000..e724103
--- /dev/null
+++ b/src/views/Activities/SpringFestival/components/Barrage.vue
@@ -0,0 +1,322 @@
+<!-- 告白墙弹幕 -->
+<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: 8px;
+          display: flex;
+          align-items: center;
+          gap: 2vw;
+          backdrop-filter: blur(1px);
+        "
+        :style="getBarrageStyle(item)"
+        @animationend="handleAnimationEnd(item.id)"
+      >
+        <!-- 情侣头像 -->
+        <div
+          style="
+            position: relative;
+
+            display: flex;
+            align-items: center;
+            gap: 2vw;
+          "
+        >
+          <!-- 爱心图形 -->
+          <div
+            style="
+              position: absolute;
+              inset: 0;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              :src="imageUrl('coupleSign')"
+              alt=""
+              style="width: 5vw; display: block; object-fit: cover"
+            />
+          </div>
+
+          <!-- 发送人 -->
+          <img
+            v-smart-img
+            :src="item.senderAvatar || ''"
+            alt=""
+            style="
+              width: 8vw;
+              border-radius: 50%;
+              display: block;
+              aspect-ratio: 1/1;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+          <!-- 接收人 -->
+          <img
+            v-smart-img
+            :src="item.receiverAvatar || ''"
+            alt=""
+            style="
+              width: 8vw;
+              border-radius: 50%;
+              display: block;
+              aspect-ratio: 1/1;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+        </div>
+
+        <div
+          style="
+            white-space: nowrap;
+            font-weight: 700;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-image: linear-gradient(
+              180deg,
+              #fff9a9 26.92%,
+              #ed7d0a 52.08%,
+              #fffab5 73.08%
+            );
+          "
+        >
+          {{ item.content }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+
+const { locale, t } = useI18n()
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+const props = defineProps({
+  barrageList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  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 getBarrageStyle = (item) => {
+  const isRTL = locale.value === 'ar'
+
+  return {
+    animationDuration: `${item.duration}s`,
+    animationDelay: `${item.delay}s`,
+    '--start-pos': `${item.startPos}px`,
+    borderRadius: '200px',
+    background: 'linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768',
+    boxShadow:
+      '0 1px 4.5px 0 rgba(0, 0, 0, 0.10), -1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset, 1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, 3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset',
+    // RTL布局支持
+    ...(isRTL
+      ? {
+          right: '0',
+          left: 'auto',
+          transform: 'translateX(-100vw)',
+        }
+      : {
+          left: '0',
+          right: 'auto',
+          transform: 'translateX(100vw)',
+        }),
+  }
+}
+
+// 生成随机弹幕属性
+const generateBarrageProps = (item) => {
+  const textLength = item.content.length
+  return {
+    duration: Math.min(5 + textLength * 0.1, 10), // 弹幕项持续时间（每字符增加0.2秒，持续时间不低于8秒）
+    startPos: 0, // 弹幕项起始位置
+  }
+}
+
+// 添加弹幕到轨道
+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: 0, // 随机延迟（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/SpringFestival/components/topUser.vue b/src/views/Activities/SpringFestival/components/topUser.vue
new file mode 100644
index 0000000..695fb0b
--- /dev/null
+++ b/src/views/Activities/SpringFestival/components/topUser.vue
@@ -0,0 +1,472 @@
+<template>
+  <div style="width: 100%">
+    <itemCenter :imgUrl="BorderImgUrl" :flip="true" :contentStyle="`display:block;`">
+      <!-- 第一名 -->
+      <div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
+        <!-- 查看个人信息按钮 -->
+        <div style="position: absolute; z-index: 2; inset: 0; display: flex">
+          <!-- 情侣1 -->
+          <div
+            style="flex: 1; min-width: 0; align-self: stretch"
+            @click="viewUserInfo(rankingItem.userId)"
+          ></div>
+          <!-- 情侣1 -->
+          <div
+            style="flex: 1; min-width: 0; align-self: stretch"
+            @click="viewUserInfo(rankingItem.cpUserId)"
+          ></div>
+        </div>
+
+        <!-- 头像 -->
+        <div
+          style="
+            position: absolute;
+            z-index: -1;
+            top: 12vw;
+            left: 0;
+            width: 100%;
+            height: 25vw;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 14vw;
+          "
+        >
+          <!-- 情侣1头像 -->
+          <img
+            :src="rankingItem.userAvatar"
+            alt=""
+            style="
+              display: block;
+              width: 25vw;
+              object-fit: cover;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+            "
+            @error="handleAvatarImageError"
+            @click="viewUserInfo(rankingItem.userId)"
+          />
+          <!-- 情侣2头像 -->
+          <img
+            :src="rankingItem.cpUserAvatar"
+            alt=""
+            style="
+              display: block;
+              width: 25vw;
+              object-fit: cover;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+            "
+            @error="handleAvatarImageError"
+            @click="viewUserInfo(rankingItem.cpUserId)"
+          />
+        </div>
+
+        <!-- 顶部距离 -->
+        <div style="height: 22vw"></div>
+        <!-- 贡献值 -->
+        <div style="height: 17vw; display: flex; justify-content: center; align-items: center">
+          <div style="color: #fff; font-weight: 700">
+            {{ rankingItem.total }}
+          </div>
+        </div>
+
+        <!-- 名称 -->
+        <div
+          style="
+            margin-top: -1vw;
+            height: 5vw;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <div style="width: 76vw; display: flex; align-items: center; gap: 2vw">
+            <!-- 情侣1名称 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  padding: 0 20%;
+
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+
+                  font-size: 0.9em;
+                  font-weight: 600;
+                "
+              >
+                {{ rankingItem.userNickname || '' }}
+              </div>
+            </div>
+            <!-- 情侣2名称 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  padding: 0 20%;
+
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+
+                  font-size: 0.9em;
+                  font-weight: 600;
+                "
+              >
+                {{ rankingItem.cpUserNickname || '' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第二三名 -->
+      <div v-else style="height: 65%; padding: 0 7%; display: flex; align-items: center">
+        <!-- 排名 -->
+        <itemCenter
+          style="width: 9vw"
+          class="rankingBg"
+          :imgUrl="imageUrl(`top${ranking}RankingBg`)"
+          :flip="true"
+          :contentStyle="``"
+        >
+          <img :src="imageUrl(`num${ranking}`)" alt="" style="width: 3vw; display: block" />
+        </itemCenter>
+
+        <!-- 头像 -->
+        <div style="width: 36vw; position: relative">
+          <!-- 查看个人信息按钮 -->
+          <div style="position: absolute; z-index: 2; inset: 0; display: flex">
+            <!-- 情侣1 -->
+            <div
+              style="flex: 1; min-width: 0; align-self: stretch"
+              @click="viewUserInfo(rankingItem.userId)"
+            ></div>
+            <!-- 情侣1 -->
+            <div
+              style="flex: 1; min-width: 0; align-self: stretch"
+              @click="viewUserInfo(rankingItem.cpUserId)"
+            ></div>
+          </div>
+
+          <!-- 内容 -->
+          <itemCenter
+            style="width: 100%; z-index: 1"
+            :imgUrl="imageUrl(`top${ranking}Frame`)"
+            :contentStyle="`z-index: -1;`"
+          >
+            <div
+              style="
+                width: 100%;
+                padding: 3vw 5vw;
+                height: 80%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <!-- 情侣1头像 -->
+              <img
+                :src="rankingItem.userAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 10.5vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
+                @error="handleAvatarImageError"
+              />
+              <!-- 情侣2头像 -->
+              <img
+                :src="rankingItem.cpUserAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 10.5vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
+                @error="handleAvatarImageError"
+              />
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 名称 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 1vw;
+          "
+        >
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ rankingItem.userNickname || '' }}
+          </div>
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ rankingItem.cpUserNickname || '' }}
+          </div>
+        </div>
+
+        <!-- 贡献 -->
+        <div style="width: auto; min-width: 0; display: flex; align-items: center">
+          <img
+            :src="imageUrl('distribution')"
+            alt=""
+            style="width: 10vw; display: block; object-fit: cover"
+          />
+          <div style="font-weight: 700">{{ rankingItem.total || '0' }}</div>
+        </div>
+      </div>
+
+      <!-- 奖励 -->
+      <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 rewards.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: 10vw; 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>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useThrottle } from '@/utils/useDebounce.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const {
+  topRewardShow, // 前三名奖励展示
+  topReward, // 前三名奖励项
+} = storeToRefs(coupleStore)
+
+const props = defineProps({
+  ranking: {
+    type: String,
+    default: '0',
+  },
+
+  rankingItem: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  rewards: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const BorderImgUrl = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return imageUrl('top1')
+    case '2':
+      return imageUrl('top2-3')
+    case '3':
+      return imageUrl('top2-3')
+    default:
+      return imageUrl('top2-3')
+  }
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+// 点击奖品
+const clickReward = (item) => {
+  topReward.value = item // 展示奖品赋值
+  topRewardShow.value = true // 显示奖品
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+.reward-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 15vw;
+  right: 4vw;
+  height: 13.5vw;
+}
+
+[dir='rtl'] .reward-wrapper {
+  left: 4vw;
+  right: 15vw;
+}
+
+.scroll-wrapper {
+  display: flex;
+  width: fit-content;
+}
+
+.scroll-content {
+  display: flex;
+  align-items: center;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+[dir='ltr'] .scroll-content {
+  margin-left: 4vw;
+}
+
+[dir='rtl'] .scroll-content {
+  margin-left: auto;
+  margin-right: 4vw;
+}
+
+[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;
+}
+
+@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/SpringFestival/index.vue b/src/views/Activities/SpringFestival/index.vue
new file mode 100644
index 0000000..d7ecf82
--- /dev/null
+++ b/src/views/Activities/SpringFestival/index.vue
@@ -0,0 +1,1077 @@
+<template>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-show="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
+        v-show="!RankingShow"
+        :backgroundImages="[
+          imageUrl('bg1'),
+          imageUrl('bg2'),
+          imageUrl('bg3'),
+          imageUrl('bg4'),
+          imageUrl('bg5'),
+        ]"
+      />
+      <!-- 排行榜页面背景 -->
+      <BackgroundLayer
+        v-show="RankingShow"
+        :backgroundImages="[imageUrl('bg1'), imageUrl('bg2-2')]"
+      />
+      <!-- 重复的背景图层 -->
+      <div
+        v-show="RankingShow"
+        class="background-overlay"
+        :style="{ '--bg3-2-url': `url(${imageUrl('bg3-2')})` }"
+      ></div>
+
+      <!-- 页面内容 -->
+      <div
+        style="
+          position: relative;
+          z-index: 1;
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 4vw;
+        "
+      >
+        <!-- 头部动画 -->
+        <img v-smart-img :src="webpUrl('pageTop')" alt="" width="100%" style="display: block" />
+
+        <!-- 倒计时 -->
+        <itemCenter
+          style="width: 95%; min-width: 0; margin-top: -52vw"
+          :imgUrl="imageUrl('TimeBg')"
+          contentStyle="padding:0 14vw 6.5vw 12.5vw;"
+          ><!-- 倒计时 -->
+          <div class="timeBox">
+            <div class="timeBoxItem">
+              <div class="timeText" style="">{{ Days }}D</div>
+            </div>
+            <div class="timeText timeGap"></div>
+            <div class="timeBoxItem">
+              <div class="timeText" style="">{{ Hours }}</div>
+            </div>
+            <div class="timeText timeGap">:</div>
+            <div class="timeBoxItem">
+              <div class="timeText" style="">{{ Minutes }}</div>
+            </div>
+            <div class="timeText timeGap">:</div>
+            <div class="timeBoxItem">
+              <div class="timeText" style="">{{ Seconds }}</div>
+            </div>
+          </div>
+        </itemCenter>
+
+        <!-- 标签页按钮 -->
+        <div
+          style="
+            width: 90vw;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10vw;
+          "
+        >
+          <!-- 游戏栏目按钮 -->
+          <div style="flex: 1; min-width: 0" @click="changeTag('gamePlay')">
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('TagGameBt'))"
+              alt=""
+              :class="{
+                'grayscale-container': !GamePlayShow,
+              }"
+              style="width: 100%; display: block; object-fit: cover"
+            />
+          </div>
+
+          <!-- 充值栏目按钮 -->
+          <div style="flex: 1; min-width: 0" @click="changeTag('recharge')">
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('TagRechargeBt'))"
+              alt=""
+              :class="{
+                'grayscale-container': !RechargeShow,
+              }"
+              style="width: 100%; display: block; object-fit: cover"
+            />
+          </div>
+        </div>
+
+        <!-- 游戏标签页 -->
+        <div
+          v-show="GamePlayShow"
+          style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
+        >
+          <!-- 模块按钮 -->
+          <div
+            style="
+              width: 100vw;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+            "
+          >
+            <!-- 任务模块按钮 -->
+            <div style="width: 30vw; min-width: 0" @click="changeModule('task')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('MTaskBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !TaskShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+
+            <!-- 抽奖排名模块按钮 -->
+            <div style="width: 30vw; min-width: 0" @click="changeModule('lotteryRanking')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('MRankingBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !lotteryRankingShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+
+            <!-- 抽奖奖励模块按钮 -->
+            <div style="width: 30vw; min-width: 0" @click="changeModule('lotteryReward')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('MRewardBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !lotteryRewardShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+          </div>
+
+          <!-- 任务模块 -->
+          <Task v-show="TaskShow" :activity="lotteryRewards" />
+          <!-- 抽奖排名模块 -->
+          <Ranking v-show="lotteryRankingShow" TagType="Ranking" />
+          <!-- 抽奖奖励模块 -->
+          <RankingReward v-show="lotteryRewardShow" />
+        </div>
+
+        <!-- 充值标签页 -->
+        <div
+          v-show="RechargeShow"
+          style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
+        >
+          <!-- 模块按钮 -->
+          <div
+            style="
+              width: 100vw;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+            "
+          >
+            <!-- 任务模块按钮 -->
+            <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRanking')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('MRankingBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !rechargeRankingShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+
+            <!-- 抽奖排名模块按钮 -->
+            <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeReward')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('MRewardBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !rechargeRewardShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+          </div>
+
+          <!-- 充值排名模块 -->
+          <Ranking v-show="rechargeRankingShow" TagType="recharge" />
+          <!-- 充值奖励模块 -->
+          <RechargeReward v-show="rechargeRewardShow" />
+        </div>
+      </div>
+
+      <!-- 我的排名占位 -->
+      <div v-show="RankingShow" style="height: 35vw"></div>
+
+      <!-- 我的排名 -->
+      <itemCenter
+        v-show="RankingShow"
+        style="position: fixed; bottom: 0; z-index: 2"
+        :imgUrl="imageUrl('myRankingBg')"
+        :contentStyle="`padding: 2vw 8vw 0`"
+      >
+        <!-- 基本信息 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            gap: 8px;
+          "
+        >
+          <!-- 排名 -->
+          <div style="color: #ffe601; font-weight: 700">
+            {{ myRanking?.rank || 999 }}
+          </div>
+
+          <!-- 头像 -->
+          <img
+            v-smart-img
+            :src="myRanking?.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;
+          "
+        >
+          <div style="color: #fff; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
+        </div>
+      </itemCenter>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- 居中弹窗 -->
+        <div
+          v-show="centerPopupShow"
+          style="
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          @click="closedPopup"
+        >
+          <!-- 抽奖结果 -->
+          <div v-show="resultShow" style="position: relative; width: 100%" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl('resultBg')"
+              :contentStyle="`inset: 30vw 7vw 6vw;
+                flex-direction: column;
+                justify-content: space-between;
+                gap:2vw`"
+            >
+              <!-- 奖品图展示 -->
+              <div
+                style="
+                  width: 100%;
+                  flex: 1;
+                  min-height: 0;
+                  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=""
+                  style="display: block; width: 40vw"
+                />
+                <!-- 下一个奖品 -->
+                <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: 6vw;
+                  text-align: center;
+                  font-size: 0.9em;
+                  font-weight: 590;
+
+                  position: relative;
+
+                  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+              >
+                {{ 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: 12vw" @click="closedPopup"></div>
+            </itemCenter>
+          </div>
+
+          <!-- 中奖历史 -->
+          <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl(getImgName('recordBg'))"
+              :contentStyle="`padding: 22vw 7vw 8vw;`"
+            >
+              <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: 12px;
+                    border: 2px solid #fff;
+                    background: linear-gradient(
+                      264deg,
+                      rgba(255, 220, 220, 0.4) 10.17%,
+                      rgba(255, 151, 151, 0.4) 60.22%,
+                      rgba(255, 220, 220, 0.4) 103.12%
+                    );
+                    box-shadow:
+                      0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
+                      0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
+                      0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
+                      0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
+                    backdrop-filter: blur(4.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弹窗 -->
+          <img
+            v-smart-img
+            v-show="helpShow"
+            :src="imageUrl(getImgName('helpInfo'))"
+            alt=""
+            style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+            @click.stop
+          />
+
+          <!-- 碎片不足提示 -->
+          <div
+            v-show="fragmentNotEnoughShow"
+            style="display: flex; justify-content: center; width: 100vw"
+            @click.stop
+          >
+            <div
+              style="
+                width: 60vw;
+                padding: 2vw;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                border-radius: 8px;
+                background: rgba(255, 255, 255, 0.4);
+                backdrop-filter: blur(32px);
+              "
+            >
+              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                {{ t('not_enough_pieces') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js'
+import { getUserId, setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useSpringFestival } from '@/stores/springFestival'
+import { storeToRefs } from 'pinia'
+import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
+import { useThrottle, useDebounce } from '@/utils/useDebounce.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import { gotoAppPage } from '@/utils/appBridge.js'
+
+import { getMemberProfile, getUserIdentity } from '@/api/wallet'
+import {
+  activityDetail, // 获取活动详情
+  onceDraw, // 执行单次抽奖
+  multiDraw, // 执行连抽
+  drawRecords, // 获取抽奖记录
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+} from '@/api/couple.js'
+import {
+  withdrawableAmount, //获取可提现金额
+} from '@/api/lottery'
+
+import Task from './Task.vue'
+import Ranking from './Ranking.vue'
+import RankingReward from './RankingReward.vue'
+import RechargeReward from './RechargeReward.vue'
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const springFestivalStore = useSpringFestival()
+
+const {
+  // 抽奖模块
+  lotteryRewards, // 抽奖奖池
+  tickets, // 抽奖券数量
+  userInfo, // 用户信息
+  userIdentity, // 用户身份
+  currentEarnings, // 当前收益
+  selectedPayee, // 选择的收款人
+  taskList, // 任务列表
+
+  // 抽奖排名模块
+  lotteryRanking, // 抽奖排名
+  addLotteryRanking, // 补充的抽奖排名
+  myLotteryRanking, // 我的抽奖排名
+
+  // 排行榜奖励模块
+  rankingRewards, // 排名奖池
+
+  // 充值排名模块
+  rechargeRanking, // 充值排名
+  addRechargeRanking, // 补充的充值排名
+  myRechargeRanking, // 我的充值排名
+
+  // 充值奖池模块
+  RechargeRewards, // 充值奖池
+
+  resultShow,
+  result, // 抽奖结果
+
+  drawRecordShow,
+  myRecords, // 我的抽奖记录
+
+  receiveRecordShow,
+  receiveRecord, // 领取抽奖券记录
+
+  helpShow, // 帮助展示
+} = storeToRefs(springFestivalStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
+const webpUrl = (filename) => getWebpUrl('Activities/SpringFestival/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+// 栏目切换状态
+const GamePlayShow = ref(true) // 游戏标签页展示
+const RechargeShow = ref(false) // 充值标签页展示
+
+// 模块切换状态
+const TaskShow = ref(true) // 任务模块展示
+const lotteryRankingShow = ref(false) // 抽奖排名模块展示
+const lotteryRewardShow = ref(false) // 抽奖奖励模块展示
+const rechargeRankingShow = ref(true) // 充值排名模块展示
+const rechargeRewardShow = ref(false) // 充值奖励模块展示
+
+const RankingShow = computed(() => {
+  return (
+    (GamePlayShow.value && lotteryRankingShow.value) ||
+    (RechargeShow.value && rechargeRankingShow.value)
+  )
+})
+
+const myRanking = computed(() => {
+  if (RankingShow.value) {
+    if (GamePlayShow.value) {
+      return myLotteryRanking.value
+    } else {
+      return myRechargeRanking.value
+    }
+  }
+})
+
+// 栏目切换
+const changeTag = (tag) => {
+  switch (tag) {
+    case 'gamePlay':
+      GamePlayShow.value = true
+      RechargeShow.value = false
+      break
+    case 'recharge':
+      GamePlayShow.value = false
+      RechargeShow.value = true
+      break
+  }
+}
+
+// 模块切换
+const changeModule = (module) => {
+  switch (module) {
+    case 'task':
+      TaskShow.value = true
+      lotteryRankingShow.value = false
+      lotteryRewardShow.value = false
+      break
+    case 'lotteryRanking':
+      TaskShow.value = false
+      lotteryRankingShow.value = true
+      lotteryRewardShow.value = false
+      break
+    case 'lotteryReward':
+      TaskShow.value = false
+      lotteryRankingShow.value = false
+      lotteryRewardShow.value = true
+      break
+    case 'rechargeRanking':
+      rechargeRankingShow.value = true
+      rechargeRewardShow.value = false
+      break
+    case 'rechargeReward':
+      rechargeRankingShow.value = false
+      rechargeRewardShow.value = true
+      break
+  }
+}
+
+// 倒计时相关数据
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Seconds = ref(0)
+let countdownTimer = null
+
+// 获取目标时间（2026年2月16日上午5点，北京时间）
+const getTargetTime = () => {
+  const target = new Date(2026, 1, 16, 5, 0, 0) // 月份从0开始，10代表11月
+  return target.getTime()
+}
+
+// 计算倒计时
+const calculateCountdown = () => {
+  const now = Date.now()
+  const targetTime = getTargetTime()
+  let diff = targetTime - now
+
+  // 如果已过期，清零并停止计时器
+  if (diff <= 0) {
+    Days.value = 0
+    Hours.value = '00'
+    Minutes.value = '00'
+    Seconds.value = '00'
+
+    if (countdownTimer) {
+      clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+    return
+  }
+
+  // 计算天、小时、分钟、秒
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = String(Math.floor((totalSeconds % (24 * 3600)) / 3600)).padStart(2, '0')
+  Minutes.value = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
+  Seconds.value = String(Math.floor(totalSeconds % 60)).padStart(2, '0')
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  calculateCountdown() // 立即执行一次
+  countdownTimer = setInterval(calculateCountdown, 1000)
+}
+
+const resultShowIndex = ref(0) // 抽奖结果索引
+
+// 遮罩层
+const maskLayerShow = computed(() => {
+  return resultShow.value || drawRecordShow.value || receiveRecordShow.value || helpShow.value
+})
+// 居中弹窗
+const centerPopupShow = computed(() => {
+  return resultShow.value || drawRecordShow.value || receiveRecordShow.value || helpShow.value
+})
+
+// 打开遮罩层
+const showPopup = (type) => {
+  switch (type) {
+    case 'result':
+      closedPopup() // 关闭弹窗
+      resultShow.value = true
+      break
+    case 'drawRecord':
+      closedPopup() // 关闭弹窗
+      drawRecordShow.value = true
+      break
+    case 'receiveRecord':
+      closedPopup() // 关闭弹窗
+      receiveRecordShow.value = true
+      break
+    case 'help':
+      cancelSend() // 取消发送
+      helpShow.value = true
+      break
+
+    default:
+      closedPopup() // 关闭弹窗
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  resultShow.value = false
+  drawRecordShow.value = false
+  receiveRecordShow.value = false
+  helpShow.value = false
+}
+
+// 跳转到充值页面
+const gotoRecharge = () => {
+  router.push('/recharge')
+}
+
+//获取奖池
+const getActivityDetail = async () => {
+  const resDetail = await activityDetail('67125')
+  if (resDetail.status && resDetail.body) {
+    lotteryRewards.value = resDetail.body
+  } else {
+    lotteryRewards.value = {}
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      tickets.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.response.errorMsg)
+  }
+}
+
+//获取用户信息
+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 getDrawableAmount = async () => {
+  const resDrawableAmount = await withdrawableAmount('2004471533988167125')
+  if (resDrawableAmount.status && resDrawableAmount.body) {
+    currentEarnings.value = resDrawableAmount.body?.availableAmount || 0
+  }
+}
+
+// 初始化收款人信息
+const initializePayee = () => {
+  const savedPayee = getSelectedPayee()
+  if (savedPayee) {
+    Object.assign(selectedPayee.value, savedPayee)
+  }
+}
+
+// 清除当前选中的收款人
+const clearPayee = () => {
+  Object.assign(selectedPayee.value, {
+    id: null,
+    account: '',
+    name: '',
+    avatar: '',
+    type: '',
+    isHost: false,
+    isAgency: false,
+    hasSalary: false,
+  })
+  clearSelectedPayee()
+}
+
+// 页面初始化数据
+const initData = async () => {
+  await Promise.all([
+    getActivityDetail(), //获取奖池
+    getMyLotteryTicketCount(), //获取抽奖券
+    getUserInfo(), //获取用户信息
+    getDrawableAmount(), //获取可提现金额
+    initializePayee(), //获取收款人信息
+  ])
+}
+
+// 预加载关键图片
+const preloadCriticalImages = async () => {
+  const criticalImages = [
+    // // 背景
+    // imageUrl('bg1'),
+    // // 按钮
+    // imageUrl(getImgName('rankingBtActive')),
+    // imageUrl(getImgName('rankingBt')),
+  ]
+
+  await preloadImages(criticalImages)
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+    console.log('预加载完成，初始化数据成功')
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
+// 预加载其他图片
+const preloadOtherImages = async () => {
+  const criticalImages = []
+
+  await preloadImages(criticalImages)
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    completePreloading() // 完成预加载
+  })
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  console.log('route.query.activeAction:', route.query.activeAction)
+  if (route.query.activeAction == 'TaskShow') {
+    changeTag('gamePlay')
+    changeModule('task')
+  } else {
+    changeTag('gamePlay')
+    changeModule('task')
+  }
+  connectToAppHandler()
+  preloadOtherImages() // 预加载其他图片
+  startCountdown() //开启倒计时
+})
+
+onUnmounted(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+  clearPayee() // 清空收款人信息
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.grayscale-container {
+  filter: grayscale(100%) brightness(90%);
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background: #ff79a1;
+  position: relative;
+}
+
+.background-overlay {
+  position: absolute;
+  inset: 410vw 0 0;
+  background-image: var(--bg3-2-url);
+  background-repeat: repeat-y;
+  background-position: top center;
+  background-size: 100% auto;
+  z-index: 0; /* 确保在.bg之下 */
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.timeBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timeBoxItem {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 1.5em;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.scrollX::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+.resultNum {
+  position: absolute;
+  z-index: 9999;
+  inset: 0;
+
+  padding-right: 8%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  font-size: 0.8em;
+  font-weight: 590;
+
+  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@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;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .resultNum {
+  direction: ltr;
+  justify-content: flex-start;
+}
+</style>