feat(新页面): 春节活动

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',

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', // 新年抽奖
 ]

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', //新年抽奖
     ]

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>

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>

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>

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>

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>