From eacf86e118979241748499a71503007f3faf946f Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Thu, 30 Oct 2025 22:46:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BF=BB=E7=89=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8C=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=BE=85=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CardFlipActivity.vue           | 1451 +++++++++++++----
 1 file changed, 1163 insertions(+), 288 deletions(-)

diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue
index 319d7aba..b389056d 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue
@@ -1,33 +1,146 @@
 <script lang="ts" setup>
+/**
+ * 翻牌抽奖活动组件
+ * 功能说明：
+ * 1. 用户每周有10次翻牌机会，前7次为基础免费次数
+ * 2. 第8-10次需要使用邀请码解锁（邀请好友使用自己的邀请码）
+ * 3. 翻牌有中奖和不中奖两种结果，中奖可获得Token奖励
+ * 4. 幸运值随着翻牌次数增加，每次增加12%
+ * 5. 第9次中奖会触发翻倍提示，第10次奖励翻倍
+ */
 import type { CardFlipRecord, CardFlipStatusOutput, FlipCardOutput } from '@/api/cardFlip/types';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { onMounted, ref } from 'vue';
 import { flipCard, generateMyInviteCode, getWeeklyTaskStatus, useInviteCode } from '@/api/cardFlip';
 
+// ============ 状态管理 ============
+/** 任务数据：包含翻牌记录、次数统计、邀请码等信息 */
 const taskData = ref<CardFlipStatusOutput | null>(null);
-const loading = ref(false); // 操作加载状态（使用邀请码等）
-const initialLoading = ref(true); // 初始加载状态
+
+/** 操作加载状态：用于使用邀请码、生成邀请码等操作时显示loading */
+const loading = ref(false);
+
+/** 初始加载状态：用于页面首次加载时显示骨架屏，避免白屏闪烁 */
+const initialLoading = ref(true);
+
+/** 正在翻牌状态：标记是否有翻牌操作正在进行 */
 const flipping = ref(false);
+
+/** 邀请码输入对话框显示状态 */
 const inviteCodeDialog = ref(false);
+
+/** 用户输入的邀请码 */
 const inputInviteCode = ref('');
+
+/** 翻倍奖励提示对话框显示状态：第9次中奖时显示 */
 const showDoubleRewardDialog = ref(false);
+
+/** 最后一次翻牌结果：保存最近一次翻牌的返回数据 */
 const lastFlipResult = ref<FlipCardOutput | null>(null);
+
+/** 邀请码区域展开状态：控制邀请码区域的显示/隐藏 */
 const showInviteSection = ref(false);
 
-// 翻牌动画状态
+/** 翻牌动画状态集合：存储正在执行翻牌动画的卡片编号 */
 const flippingCards = ref<Set<number>>(new Set());
 
-// 幸运值状态
-const luckyValue = ref(0); // 当前幸运值 0-100
+/** 幸运值：范围0-100，每次翻牌增加12%，达到100%时触发满值动画 */
+const luckyValue = ref(0);
 
-onMounted(() => {
-  fetchTaskStatus();
+// ============ 新增：初始动画状态 ============
+/** 初始洗牌动画状态 */
+const isShuffling = ref(false);
+
+/** 洗牌动画阶段：'showing' | 'flipping' | 'stacking' | 'shuffling' | 'spreading' | 'done' */
+const shuffleStage = ref<'showing' | 'flipping' | 'stacking' | 'shuffling' | 'spreading' | 'done'>('done');
+
+/** 大奖卡片编号（用于展示阶段） */
+const bigPrizeCards = ref<number[]>([]);
+
+/** 当前翻牌的卡片（用于占位显示） */
+const flippingCardNumber = ref<number | null>(null);
+
+/** 卡片位置信息（用于动画计算） */
+const cardPositions = ref<Map<number, DOMRect>>(new Map());
+
+/** 克隆卡片DOM元素（用于翻牌动画） */
+const clonedCardElement = ref<HTMLElement | null>(null);
+
+/** 系统logo图片路径 */
+const systemLogo = '/images/logo.png';
+
+// ============ 生命周期 ============
+onMounted(async () => {
+  // 页面加载时立即获取任务状态
+  await fetchTaskStatus();
+
+  // 如果是首次进入且还没翻过牌，播放洗牌动画
+  if (taskData.value && taskData.value.totalFlips === 0) {
+  }
+  await playShuffleAnimation();
 });
 
-// 获取任务状态
+// ============ 新增：初始洗牌动画 ============
+/**
+ * 初始洗牌动画
+ * 完整流程：
+ * 1. 展示3张大奖卡片正面（神秘大奖）- 2.5秒
+ * 2. 大奖卡片翻转到背面 - 0.8秒
+ * 3. 卡片在网格内随机交换位置 - 2秒
+ */
+async function playShuffleAnimation() {
+  if (isShuffling.value)
+    return;
+
+  isShuffling.value = true;
+
+  // 随机选择3张大奖卡片
+  bigPrizeCards.value = [3, 6, 9]; // 可以改为随机：generateRandomCards(3, 10)
+
+  // 阶段1：展示大奖卡片正面（2.5秒）
+  shuffleStage.value = 'showing';
+  await new Promise(resolve => setTimeout(resolve, 2500));
+
+  // 阶段2：大奖卡片翻转（0.8秒）
+  shuffleStage.value = 'flipping';
+  await new Promise(resolve => setTimeout(resolve, 800));
+
+  // 阶段3：卡片在网格内随机交换动画（2秒）
+  shuffleStage.value = 'shuffling';
+  await new Promise(resolve => setTimeout(resolve, 2000));
+
+  // 完成
+  shuffleStage.value = 'done';
+  isShuffling.value = false;
+  bigPrizeCards.value = [];
+}
+
+/**
+ * 生成随机卡片编号
+ */
+function generateRandomCards(count: number, max: number): number[] {
+  const cards = new Set<number>();
+  while (cards.size < count) {
+    cards.add(Math.floor(Math.random() * max) + 1);
+  }
+  return Array.from(cards);
+}
+
+// ============ 数据获取 ============
+/**
+ * 获取任务状态
+ * 调用时机：
+ * 1. 组件挂载时
+ * 2. 翻牌成功后
+ * 3. 使用邀请码成功后
+ * 4. 生成邀请码成功后
+ */
 async function fetchTaskStatus() {
-  // 首次加载时使用 initialLoading，避免白屏闪烁
+  // 判断是否为首次加载（taskData为null表示首次加载）
   const isInitialLoad = taskData.value === null;
+
+  // 首次加载使用initialLoading状态，显示骨架屏避免白屏
+  // 后续刷新使用loading状态，提供用户操作反馈
   if (isInitialLoad) {
     initialLoading.value = true;
   }
@@ -36,16 +149,18 @@ async function fetchTaskStatus() {
   }
 
   try {
+    // 调用API获取本周任务状态
     const res = await getWeeklyTaskStatus();
     taskData.value = res.data;
 
-    // 根据已翻牌次数更新幸运值
+    // 根据已翻牌次数更新幸运值显示
     updateLuckyValue();
   }
   catch (error: any) {
     ElMessage.error(error?.message || '获取任务状态失败');
   }
   finally {
+    // 根据加载类型关闭对应的loading状态
     if (isInitialLoad) {
       initialLoading.value = false;
     }
@@ -55,30 +170,57 @@ async function fetchTaskStatus() {
   }
 }
 
-// 更新幸运值
+/**
+ * 更新幸运值
+ * 幸运值计算规则：每翻一次牌增加12%，最高100%
+ * 达到100%时会触发特殊的满值动画效果
+ */
 function updateLuckyValue() {
   if (taskData.value) {
     const flips = taskData.value.totalFlips;
-    // 每次翻牌增加10%幸运值
+    // 每次翻牌增加12%幸运值，最大值限制为100
     luckyValue.value = Math.min(flips * 12, 100);
   }
 }
 
-// 翻牌
+// ============ 核心业务逻辑 ============
+/**
+ * 翻牌处理函数
+ * 业务流程：
+ * 1. 检查卡片是否可以翻（未翻过 且 有翻牌权限）
+ * 2. 检查是否需要邀请码解锁（已翻7次以上需要邀请码）
+ * 3. 调用后端接口执行翻牌
+ * 4. 播放翻牌动画
+ * 5. 刷新任务状态
+ * 6. 显示中奖/未中奖结果
+ * 7. 第9次中奖显示翻倍提示
+ *
+ * @param record 卡片记录对象
+ */
 async function handleFlipCard(record: CardFlipRecord) {
-  // 检查是否可以翻牌（任何未翻过的牌都可以）
+  // 防止洗牌动画期间点击
+  if (isShuffling.value) {
+    return;
+  }
+
+  // 防抖：如果正在翻牌中，不响应点击
+  if (flipping.value) {
+    return;
+  }
+
+  // 检查卡片是否可以翻：未翻过的牌 且 后端允许翻牌
   const canFlip = !record.isFlipped && (taskData.value?.canFlip || false);
 
   if (canFlip) {
-    // 检查是否需要使用邀请码
+    // === 邀请码校验逻辑 ===
     // 当前已翻次数
     const currentFlips = taskData.value?.totalFlips || 0;
 
-    // 如果已经翻了7次或以上，需要检查邀请码
+    // 如果已经翻了7次或以上，需要检查是否有剩余邀请次数
     if (currentFlips >= 7) {
       const remainingInviteFlips = taskData.value?.remainingInviteFlips || 0;
 
-      // 如果没有剩余邀请次数，提示需要使用邀请码
+      // 如果没有剩余邀请次数，弹窗提示用户需要使用邀请码
       if (remainingInviteFlips === 0) {
         ElMessageBox.confirm(
           '🎁 需要先使用邀请码解锁更多翻牌机会哦~',
@@ -90,6 +232,7 @@ async function handleFlipCard(record: CardFlipRecord) {
           },
         )
           .then(() => {
+            // 用户点击确认，打开邀请码输入对话框
             inviteCodeDialog.value = true;
           })
           .catch(() => {});
@@ -97,38 +240,95 @@ async function handleFlipCard(record: CardFlipRecord) {
       }
     }
 
-    // 标记为正在翻牌（显示加载状态，但不播放动画）
+    // === 开始翻牌流程（使用克隆DOM方式） ===
+    // 标记为正在翻牌
     flipping.value = true;
+    flippingCardNumber.value = record.flipNumber;
 
     try {
-      // 先请求后端接口
+      // 1. 获取原卡片DOM元素
+      const cardElement = document.querySelector(`[data-card-number="${record.flipNumber}"]`) as HTMLElement;
+      if (!cardElement) {
+        throw new Error('卡片元素未找到');
+      }
+
+      // 2. 克隆卡片DOM元素
+      const clonedCard = cardElement.cloneNode(true) as HTMLElement;
+      clonedCard.classList.add('cloned-flipping-card');
+
+      // 获取原卡片的位置信息
+      const rect = cardElement.getBoundingClientRect();
+
+      // 设置克隆卡片的初始位置（与原卡片重合）
+      clonedCard.style.position = 'fixed';
+      clonedCard.style.left = `${rect.left}px`;
+      clonedCard.style.top = `${rect.top}px`;
+      clonedCard.style.width = `${rect.width}px`;
+      clonedCard.style.height = `${rect.height}px`;
+      clonedCard.style.zIndex = '2000';
+      clonedCard.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
+
+      // 添加到body
+      document.body.appendChild(clonedCard);
+      clonedCardElement.value = clonedCard;
+
+      // 3. 等待一帧，确保样式生效
+      await new Promise(resolve => requestAnimationFrame(resolve));
+
+      // 4. 移动克隆卡片到屏幕中心并放大（考虑边界限制）
+      const scale = 1.8;
+      const scaledWidth = rect.width * scale;
+      const scaledHeight = rect.height * scale;
+
+      // 计算中心位置，确保不溢出视口
+      let centerX = window.innerWidth / 2;
+      let centerY = window.innerHeight / 2;
+
+      // 边界检查：确保卡片完全在视口内
+      const minX = scaledWidth / 2;
+      const maxX = window.innerWidth - scaledWidth / 2;
+      const minY = scaledHeight / 2;
+      const maxY = window.innerHeight - scaledHeight / 2;
+
+      centerX = Math.max(minX, Math.min(maxX, centerX));
+      centerY = Math.max(minY, Math.min(maxY, centerY));
+
+      clonedCard.style.left = `${centerX}px`;
+      clonedCard.style.top = `${centerY}px`;
+      clonedCard.style.transform = 'translate(-50%, -50%) scale(1.8)';
+
+      // 等待移动动画完成
+      await new Promise(resolve => setTimeout(resolve, 600));
+
+      // 5. 调用后端接口执行翻牌操作
       const res = await flipCard({ flipNumber: record.flipNumber });
       lastFlipResult.value = res.data;
 
-      // 请求成功后，开始播放翻牌动画
-      flippingCards.value.add(record.flipNumber);
+      // 6. 给克隆卡片添加翻转动画类
+      const cardInner = clonedCard.querySelector('.card-inner') as HTMLElement;
+      if (cardInner) {
+        cardInner.style.transition = 'transform 0.8s ease-in-out';
+        cardInner.style.transform = 'rotateY(180deg)';
+      }
 
-      // 等待翻牌动画完成
+      // 等待翻转动画完成
       await new Promise(resolve => setTimeout(resolve, 800));
 
-      // 刷新任务状态（先刷新数据，让卡片显示翻转后的结果）
+      // 7. 刷新任务状态
       await fetchTaskStatus();
 
-      // 稍微延迟后显示结果提示
-      await new Promise(resolve => setTimeout(resolve, 300));
+      // 8. 卡片停留展示结果（2秒）
+      await new Promise(resolve => setTimeout(resolve, 2000));
 
-      // 显示结果
+      // === 显示中奖结果 ===
       if (res.data.isWin) {
-        // 播放中奖动画
-        showWinAnimation();
-
+        showEnhancedWinAnimation();
         ElMessage.success({
           message: res.data.rewardDesc || '🎉 恭喜中奖！',
           duration: 3000,
           customClass: 'win-message',
         });
 
-        // 第9次中奖显示翻倍提示
         if (res.data.showDoubleRewardTip) {
           setTimeout(() => {
             showDoubleRewardDialog.value = true;
@@ -141,14 +341,32 @@ async function handleFlipCard(record: CardFlipRecord) {
           duration: 2000,
         });
       }
+
+      // 9. 移除克隆卡片
+      if (clonedCardElement.value) {
+        // 添加淡出动画
+        clonedCardElement.value.style.opacity = '0';
+        await new Promise(resolve => setTimeout(resolve, 300));
+
+        clonedCardElement.value.remove();
+        clonedCardElement.value = null;
+      }
+
+      // 10. 清除占位状态，原卡片显示为已翻转
+      flippingCardNumber.value = null;
     }
     catch (error: any) {
-      // ElMessage.error(error?.message || '翻牌失败');
-      // 如果请求失败，移除翻牌动画
-      flippingCards.value.delete(record.flipNumber);
+      // 清理克隆元素
+      if (clonedCardElement.value) {
+        clonedCardElement.value.remove();
+        clonedCardElement.value = null;
+      }
+      flippingCardNumber.value = null;
     }
     finally {
+      // 清理翻牌状态
       flipping.value = false;
+      // 延迟移除动画状态，让动画自然结束
       setTimeout(() => {
         flippingCards.value.delete(record.flipNumber);
       }, 300);
@@ -156,25 +374,118 @@ async function handleFlipCard(record: CardFlipRecord) {
   }
 }
 
-// 显示中奖动画
-function showWinAnimation() {
-  // 创建烟花效果
+/**
+ * 增强的中奖动画
+ * 更热烈、更隆重的效果：
+ * 1. 更多彩纸（100个）
+ * 2. 金色光芒效果
+ * 3. 震动效果
+ * 4. 声光效果
+ */
+function showEnhancedWinAnimation() {
   const container = document.querySelector('.card-flip-container');
   if (container) {
+    // 定义彩色方案（增加金色系）
+    const colors = ['#FFD700', '#FFA500', '#FF6B9D', '#f56c6c', '#409eff', '#67c23a', '#e6a23c', '#9c27b0', '#FF1493', '#00CED1'];
+
+    // 创建100个纸屑元素（原来50个）
+    for (let i = 0; i < 100; i++) {
+      const confetti = document.createElement('div');
+      confetti.className = 'confetti enhanced';
+
+      // 随机水平位置
+      confetti.style.left = `${Math.random() * 100}%`;
+
+      // 随机动画延迟，让纸屑不同时落下
+      confetti.style.animationDelay = `${Math.random() * 0.5}s`;
+
+      // 随机颜色
+      confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
+
+      // 随机大小（8-20px，比原来更大）
+      const size = 8 + Math.random() * 12;
+      confetti.style.width = `${size}px`;
+      confetti.style.height = `${size}px`;
+
+      // 随机形状（圆形、方形、星形）
+      const shapeRand = Math.random();
+      if (shapeRand > 0.66) {
+        confetti.style.borderRadius = '50%';
+      }
+      else if (shapeRand > 0.33) {
+        confetti.style.borderRadius = '2px';
+      }
+      else {
+        confetti.style.clipPath = 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)';
+      }
+
+      // 随机透明度
+      confetti.style.opacity = `${0.7 + Math.random() * 0.3}`;
+
+      // 添加阴影效果
+      confetti.style.boxShadow = '0 0 10px rgba(255, 215, 0, 0.8)';
+
+      // 添加到容器
+      container.appendChild(confetti);
+
+      // 4秒后移除元素
+      setTimeout(() => {
+        confetti.remove();
+      }, 4000);
+    }
+
+    // 添加金色光芒效果
+    const flash = document.createElement('div');
+    flash.className = 'win-flash';
+    container.appendChild(flash);
+    setTimeout(() => flash.remove(), 1000);
+
+    // 添加震动效果
+    container.classList.add('win-shake');
+    setTimeout(() => container.classList.remove('win-shake'), 500);
+  }
+}
+
+/**
+ * 显示中奖动画（保留原有函数以备用）
+ * 创建50个彩色纸屑从顶部飘落的烟花效果
+ * 纸屑随机颜色、大小、位置、延迟，3秒后自动移除
+ */
+function showWinAnimation() {
+  const container = document.querySelector('.card-flip-container');
+  if (container) {
+    // 定义彩色方案
     const colors = ['#f56c6c', '#409eff', '#67c23a', '#e6a23c', '#9c27b0', '#FFD700', '#FF6B9D'];
+
+    // 创建50个纸屑元素
     for (let i = 0; i < 50; i++) {
       const confetti = document.createElement('div');
       confetti.className = 'confetti';
+
+      // 随机水平位置
       confetti.style.left = `${Math.random() * 100}%`;
+
+      // 随机动画延迟，让纸屑不同时落下
       confetti.style.animationDelay = `${Math.random() * 0.5}s`;
+
+      // 随机颜色
       confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
+
+      // 随机大小（6-16px）
       const size = 6 + Math.random() * 10;
       confetti.style.width = `${size}px`;
       confetti.style.height = `${size}px`;
+
+      // 随机形状（圆形或方形）
       confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
+
+      // 随机透明度
       confetti.style.opacity = `${0.7 + Math.random() * 0.3}`;
+
+      // 添加到容器
       container.appendChild(confetti);
 
+      // 3秒后移除元素，避免DOM堆积
       setTimeout(() => {
         confetti.remove();
       }, 3000);
@@ -182,8 +493,17 @@ function showWinAnimation() {
   }
 }
 
-// 使用邀请码
+// ============ 邀请码相关功能 ============
+/**
+ * 使用邀请码
+ * 业务规则：
+ * 1. 邀请码长度为8位
+ * 2. 使用邀请码后可解锁最后3次翻牌机会（第8-10次）
+ * 3. 使用他人邀请码后，自己的邀请码将失效
+ * 4. 每个邀请码每周最多可被使用3次
+ */
 async function handleUseInviteCode() {
+  // 验证输入是否为空
   if (!inputInviteCode.value.trim()) {
     ElMessage.warning('请输入邀请码');
     return;
@@ -191,26 +511,45 @@ async function handleUseInviteCode() {
 
   loading.value = true;
   try {
+    // 调用API使用邀请码，转换为大写统一格式
     await useInviteCode({ inviteCode: inputInviteCode.value.trim().toUpperCase() });
+
+    // 成功提示
     ElMessage.success('🎊 邀请码使用成功！已解锁翻牌次数');
+
+    // 关闭对话框并清空输入
     inviteCodeDialog.value = false;
     inputInviteCode.value = '';
+
+    // 刷新任务状态，更新可翻次数
     await fetchTaskStatus();
   }
   catch (error: any) {
-   // ElMessage.error(error?.message || '使用邀请码失败');
+    // 错误提示已由API统一处理，这里注释掉避免重复提示
+    // ElMessage.error(error?.message || '使用邀请码失败');
   }
   finally {
     loading.value = false;
   }
 }
 
-// 生成邀请码
+/**
+ * 生成邀请码
+ * 业务规则：
+ * 1. 用户只能生成一次邀请码
+ * 2. 如果已使用过他人的邀请码，则无法生成自己的邀请码
+ * 3. 邀请码为8位随机字符串
+ */
 async function handleGenerateInviteCode() {
   loading.value = true;
   try {
+    // 调用API生成邀请码
     await generateMyInviteCode();
+
+    // 成功提示
     ElMessage.success('✨ 邀请码生成成功！');
+
+    // 刷新任务状态，显示新生成的邀请码
     await fetchTaskStatus();
   }
   catch (error: any) {
@@ -221,13 +560,18 @@ async function handleGenerateInviteCode() {
   }
 }
 
-// 复制邀请码
+/**
+ * 复制邀请码到剪贴板
+ * 使用浏览器原生的 Clipboard API
+ */
 function copyInviteCode() {
+  // 检查是否有邀请码
   if (!taskData.value?.myInviteCode) {
     ElMessage.warning('暂无邀请码');
     return;
   }
 
+  // 使用 Clipboard API 复制到剪贴板
   navigator.clipboard.writeText(taskData.value.myInviteCode).then(() => {
     ElMessage.success('📋 邀请码已复制到剪贴板');
   }).catch(() => {
@@ -235,33 +579,54 @@ function copyInviteCode() {
   });
 }
 
-// 格式化 Token 显示（单位：万）
+// ============ 工具函数 ============
+/**
+ * 格式化 Token 显示（单位：万）
+ * 例如：10000 → 1w，50000 → 5w
+ *
+ * @param tokens Token数量
+ * @returns 格式化后的字符串
+ */
 function formatTokenDisplay(tokens: number): string {
   return `${(tokens / 10000).toFixed(0)}w`;
 }
 
-// 获取卡片类名
+/**
+ * 获取卡片样式类名
+ * 根据卡片状态动态添加不同的CSS类
+ *
+ * @param record 卡片记录对象
+ * @returns CSS类名数组
+ */
 function getCardClass(record: CardFlipRecord): string[] {
   const classes = ['card-item'];
 
+  // 已翻牌的卡片
   if (record.isFlipped) {
     classes.push('card-flipped');
     if (record.isWin) {
-      classes.push('card-win');
+      classes.push('card-win'); // 中奖样式
     }
     else {
-      classes.push('card-lose');
+      classes.push('card-lose'); // 未中奖样式
     }
   }
 
+  // 正在翻牌动画中的卡片
   if (flippingCards.value.has(record.flipNumber)) {
     classes.push('card-flipping');
   }
 
-  // 可点击的卡片（任何未翻过的牌都可以点击）
+  // 当前翻牌的卡片（占位状态）
+  if (flippingCardNumber.value === record.flipNumber) {
+    classes.push('card-placeholder');
+  }
+
+  // 可点击的卡片（未翻过的牌 且 有翻牌权限）
   if (!record.isFlipped && (taskData.value?.canFlip || false)) {
     classes.push('card-clickable');
   }
+  // 锁定状态的卡片
   else if (!record.isFlipped) {
     classes.push('card-locked');
   }
@@ -269,7 +634,9 @@ function getCardClass(record: CardFlipRecord): string[] {
   return classes;
 }
 
-// 切换邀请区域
+/**
+ * 切换邀请码区域的显示/隐藏状态
+ */
 function toggleInviteSection() {
   showInviteSection.value = !showInviteSection.value;
 }
@@ -302,11 +669,17 @@ function toggleInviteSection() {
           />
         </svg>
         <div class="lucky-content">
-          <div class="lucky-icon">{{ luckyValue >= 100 ? '🍀' : '✨' }}</div>
-          <div class="lucky-text">{{ luckyValue }}%</div>
+          <div class="lucky-icon">
+            {{ luckyValue >= 100 ? '🍀' : '✨' }}
+          </div>
+          <div class="lucky-text">
+            {{ luckyValue }}%
+          </div>
         </div>
       </div>
-      <div class="lucky-label">翻牌幸运值</div>
+      <div class="lucky-label">
+        翻牌幸运值
+      </div>
     </div>
 
     <!-- 初始加载骨架屏 -->
@@ -323,240 +696,298 @@ function toggleInviteSection() {
     <template v-else>
       <!-- 邀请码操作区 -->
       <div class="bottom-actions">
-      <el-button
-        type="primary"
-        :icon="showInviteSection ? 'ArrowUp' : 'Gift'"
-        class="invite-toggle-btn"
-        @click="toggleInviteSection"
-      >
-        {{ showInviteSection ? '收起' : '邀请码' }}
-      </el-button>
+        <el-button
+          type="primary"
+          :icon="showInviteSection ? 'ArrowUp' : 'Gift'"
+          class="invite-toggle-btn"
+          @click="toggleInviteSection"
+        >
+          {{ showInviteSection ? '收起' : '邀请码' }}
+        </el-button>
 
-      <el-button
-        type="warning"
-        icon="Unlock"
-        class="use-code-btn"
-        @click="inviteCodeDialog = true"
-      >
-        使用邀请码
-      </el-button>
-    </div>
+        <el-button
+          type="warning"
+          icon="Unlock"
+          class="use-code-btn"
+          @click="inviteCodeDialog = true"
+        >
+          使用邀请码
+        </el-button>
+      </div>
 
-    <!-- 邀请码展开区域 -->
-    <el-collapse-transition>
-      <div v-show="showInviteSection" class="invite-section">
-        <div class="invite-header">
-          <span class="invite-title">📮 我的邀请码</span>
-          <el-button
-            v-if="!taskData?.myInviteCode && !taskData?.isInvited"
-            type="primary"
-            size="small"
-            @click="handleGenerateInviteCode"
+      <!-- 邀请码展开区域 -->
+      <el-collapse-transition>
+        <div v-show="showInviteSection" class="invite-section">
+          <div class="invite-header">
+            <span class="invite-title">📮 我的邀请码</span>
+            <el-button
+              v-if="!taskData?.myInviteCode && !taskData?.isInvited"
+              type="primary"
+              size="small"
+              @click="handleGenerateInviteCode"
+            >
+              生成邀请码
+            </el-button>
+          </div>
+
+          <div v-if="taskData?.isInvited" class="invite-disabled">
+            <span class="disabled-icon">🔒</span>
+            <span class="disabled-text">您已使用过邀请码</span>
+          </div>
+
+          <div v-else-if="taskData?.myInviteCode" class="invite-code-box">
+            <div class="code-display">
+              <span class="code-text">{{ taskData.myInviteCode }}</span>
+            </div>
+            <el-button type="primary" size="small" icon="CopyDocument" @click="copyInviteCode">
+              复制
+            </el-button>
+          </div>
+
+          <div class="invite-tip">
+            💌 分享给好友，好友使用后可解锁最后3次翻牌机会
+          </div>
+        </div>
+      </el-collapse-transition>
+
+      <!-- 顶部统计栏 -->
+      <div class="top-stats">
+        <div class="stat-item">
+          <div class="stat-icon-box progress">
+            <span class="stat-icon">🎯</span>
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">
+              {{ taskData?.totalFlips || 0 }}/10
+            </div>
+            <div class="stat-label">
+              本周已翻
+            </div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-icon-box gift">
+            <span class="stat-icon">🎁</span>
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">
+              {{ taskData ? 10 - taskData.totalFlips : 10 }}
+            </div>
+            <div class="stat-label">
+              本周剩余
+            </div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-icon-box invite">
+            <span class="stat-icon">👥</span>
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">
+              {{ taskData?.invitedCount || 0 }}
+            </div>
+            <div class="stat-label">
+              本周邀请
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提示横幅 -->
+      <div v-if="taskData?.nextFlipTip" class="tip-banner">
+        <span class="tip-icon">💡</span>
+        <span class="tip-text">{{ taskData.nextFlipTip }}</span>
+      </div>
+
+      <!-- 翻牌区域 -->
+      <div class="cards-section" :class="{ 'shuffle-mode': isShuffling }">
+        <!-- 洗牌动画遮罩提示 -->
+        <div v-if="isShuffling" class="shuffle-overlay">
+          <div class="shuffle-tip">
+            <span v-if="shuffleStage === 'showing'" class="shuffle-text">✨ 大奖卡片展示中... ✨</span>
+            <span v-else-if="shuffleStage === 'flipping'" class="shuffle-text">🔄 卡片翻转中... 🔄</span>
+            <span v-else-if="shuffleStage === 'shuffling'" class="shuffle-text">🎰 正在洗牌打乱... 🎰</span>
+          </div>
+        </div>
+
+        <div class="cards-grid" :class="`shuffle-stage-${shuffleStage}`">
+          <!-- 卡片包装器，始终占位 -->
+          <div
+            v-for="record in taskData?.flipRecords"
+            :key="record.flipNumber"
+            class="card-wrapper"
           >
-            生成邀请码
-          </el-button>
-        </div>
+            <div
+              :data-card-number="record.flipNumber"
+              :class="[
+                ...getCardClass(record),
+                {
+                  'big-prize-card': shuffleStage === 'showing' && bigPrizeCards.includes(record.flipNumber),
+                  'shuffle-card': shuffleStage === 'shuffling',
+                  'card-placeholder': flippingCardNumber === record.flipNumber,
+                },
+              ]"
+              @click="handleFlipCard(record)"
+            >
+              <div class="card-inner">
+                <!-- 卡片背面（未翻开时显示，增加纹理） -->
+                <div class="card-front">
+                  <!-- 背景纹理层 -->
+                  <div class="card-pattern" />
 
-        <div v-if="taskData?.isInvited" class="invite-disabled">
-          <span class="disabled-icon">🔒</span>
-          <span class="disabled-text">您已使用过邀请码</span>
-        </div>
+                  <div class="card-corner">
+                    <span class="card-number">#{{ record.flipNumber }}</span>
+                  </div>
 
-        <div v-else-if="taskData?.myInviteCode" class="invite-code-box">
-          <div class="code-display">
-            <span class="code-text">{{ taskData.myInviteCode }}</span>
-          </div>
-          <el-button type="primary" size="small" icon="CopyDocument" @click="copyInviteCode">
-            复制
-          </el-button>
-        </div>
+                  <div class="card-content">
+                    <!-- 使用系统logo替代表情图标 -->
+                    <img :src="systemLogo" class="card-logo" alt="Logo">
 
-        <div class="invite-tip">
-          💌 分享给好友，好友使用后可解锁最后3次翻牌机会
-        </div>
-      </div>
-    </el-collapse-transition>
+                    <div class="card-mystery">
+                      ?
+                    </div>
+                  </div>
 
-    <!-- 顶部统计栏 -->
-    <div class="top-stats">
-      <div class="stat-item">
-        <div class="stat-icon-box progress">
-          <span class="stat-icon">🎯</span>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">
-            {{ taskData?.totalFlips || 0 }}/10
-          </div>
-          <div class="stat-label">
-            本周已翻
-          </div>
-        </div>
-      </div>
+                  <div class="card-type-badge">
+                    {{ record.flipTypeDesc }}
+                  </div>
 
-      <div class="stat-item">
-        <div class="stat-icon-box gift">
-          <span class="stat-icon">🎁</span>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">
-            {{ taskData ? 10 - taskData.totalFlips : 10 }}
-          </div>
-          <div class="stat-label">
-            本周剩余
-          </div>
-        </div>
-      </div>
-
-      <div class="stat-item">
-        <div class="stat-icon-box invite">
-          <span class="stat-icon">👥</span>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">
-            {{ taskData?.invitedCount || 0 }}
-          </div>
-          <div class="stat-label">
-            本周邀请
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 提示横幅 -->
-    <div v-if="taskData?.nextFlipTip" class="tip-banner">
-      <span class="tip-icon">💡</span>
-      <span class="tip-text">{{ taskData.nextFlipTip }}</span>
-    </div>
-
-    <!-- 翻牌区域 -->
-    <div class="cards-section">
-      <div class="cards-grid">
-        <div
-          v-for="record in taskData?.flipRecords"
-          :key="record.flipNumber"
-          :class="getCardClass(record)"
-          @click="handleFlipCard(record)"
-        >
-          <div class="card-inner">
-            <!-- 卡片正面 -->
-            <div class="card-front">
-              <div class="card-corner">
-                <span class="card-number">#{{ record.flipNumber }}</span>
-              </div>
-              <div class="card-content">
-                <div class="card-icon">
-                  🎴
+                  <div class="card-shine" />
                 </div>
-                <div class="card-mystery">
-                  ?
-                </div>
-              </div>
-              <div class="card-type-badge">
-                {{ record.flipTypeDesc }}
-              </div>
-              <div class="card-shine" />
-            </div>
 
-            <!-- 卡片背面 -->
-            <div class="card-back">
-              <div v-if="record.isWin" class="card-result win">
-                <div class="win-glow" />
-                <div class="result-icon">
-                  🎉
-                </div>
-                <div class="result-text">
-                  中奖啦!
-                </div>
-                <div class="result-amount">
-                  {{ formatTokenDisplay(record.rewardAmount || 0) }}
-                </div>
-                <div class="result-unit">
-                  Tokens
-                </div>
-              </div>
-              <div v-else class="card-result lose">
-                <div class="result-icon">
-                  💫
-                </div>
-                <div class="result-text">
-                  未中奖
-                </div>
-                <div class="result-tip">
-                  继续加油!
+                <!-- 卡片正面（翻开后显示结果，或洗牌时显示神秘大奖） -->
+                <div class="card-back">
+                  <!-- 洗牌动画中的神秘大奖展示 -->
+                  <div v-if="shuffleStage === 'showing' && bigPrizeCards.includes(record.flipNumber)" class="card-result mystery-prize">
+                    <div class="mystery-glow" />
+                    <div class="mystery-stars">
+                      ✨
+                    </div>
+                    <div class="mystery-icon">
+                      🎁
+                    </div>
+                    <div class="mystery-text">
+                      神秘大奖
+                    </div>
+                    <div class="mystery-hint">
+                      敬请期待
+                    </div>
+                    <div class="mystery-sparkle">
+                      ✨
+                    </div>
+                  </div>
+
+                  <!-- 正常翻牌后的结果显示 -->
+                  <template v-else>
+                    <div v-if="record.isWin" class="card-result win">
+                      <div class="win-glow" />
+
+                      <!-- 系统logo水印 -->
+                      <img :src="systemLogo" class="result-watermark" alt="Logo">
+
+                      <div class="result-icon">
+                        🎉
+                      </div>
+                      <div class="result-text">
+                        中奖啦!
+                      </div>
+                      <div class="result-amount">
+                        {{ formatTokenDisplay(record.rewardAmount || 0) }}
+                      </div>
+                      <div class="result-unit">
+                        Tokens
+                      </div>
+                    </div>
+                    <div v-else class="card-result lose">
+                      <!-- 系统logo水印 -->
+                      <img :src="systemLogo" class="result-watermark" alt="Logo">
+
+                      <div class="result-icon">
+                        💫
+                      </div>
+                      <div class="result-text">
+                        未中奖
+                      </div>
+                      <div class="result-tip">
+                        继续加油!
+                      </div>
+                    </div>
+                  </template>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 使用邀请码对话框 -->
-    <el-dialog
-      v-model="inviteCodeDialog"
-      title="🎁 使用邀请码"
-      width="90%"
-      :style="{ maxWidth: '400px' }"
-      :close-on-click-modal="false"
-      class="invite-dialog"
-    >
-      <div class="invite-dialog-content">
-        <p class="dialog-tip">
-          输入好友的邀请码，可增加翻牌次数，必定中奖每次奖励最大额度翻倍！（使用其他人邀请码，自己的邀请码将失效）
-        </p>
-        <el-input
-          v-model="inputInviteCode"
-          placeholder="请输入8位邀请码"
-          maxlength="8"
-          clearable
-          size="large"
-          class="code-input"
-        >
-          <template #prefix>
-            <span style="font-size: 20px;">🎫</span>
-          </template>
-        </el-input>
-      </div>
-      <template #footer>
-        <el-button @click="inviteCodeDialog = false">
-          取消
-        </el-button>
-        <el-button type="primary" :loading="loading" @click="handleUseInviteCode">
-          确认使用
-        </el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 翻倍奖励提示对话框 -->
-    <el-dialog
-      v-model="showDoubleRewardDialog"
-      width="90%"
-      :style="{ maxWidth: '400px' }"
-      :show-close="false"
-      class="double-reward-dialog"
-    >
-      <div class="double-reward-content">
-        <div class="double-icon-container">
-          <div class="double-icon">
-            🎁
-          </div>
-          <div class="double-sparkle">
-            ✨
-          </div>
+      <!-- 使用邀请码对话框 -->
+      <el-dialog
+        v-model="inviteCodeDialog"
+        title="🎁 使用邀请码"
+        width="90%"
+        :style="{ maxWidth: '400px' }"
+        :close-on-click-modal="false"
+        class="invite-dialog"
+      >
+        <div class="invite-dialog-content">
+          <p class="dialog-tip">
+            输入好友的邀请码，可增加翻牌次数，必定中奖每次奖励最大额度翻倍！（使用其他人邀请码，自己的邀请码将失效）
+          </p>
+          <el-input
+            v-model="inputInviteCode"
+            placeholder="请输入8位邀请码"
+            maxlength="8"
+            clearable
+            size="large"
+            class="code-input"
+          >
+            <template #prefix>
+              <span style="font-size: 20px;">🎫</span>
+            </template>
+          </el-input>
         </div>
-        <h3 class="double-title">
-          恭喜获得额外翻倍包!
-        </h3>
-        <p class="double-text">
-          您已获得第9次奖励！<br>
-          <span class="highlight">第10次翻牌将获得翻倍奖励！</span><br>
-          赶快翻开最后一张牌吧！
-        </p>
-        <el-button type="primary" size="large" class="double-btn" @click="showDoubleRewardDialog = false">
-          知道了，去翻牌 🚀
-        </el-button>
-      </div>
-    </el-dialog>
+        <template #footer>
+          <el-button @click="inviteCodeDialog = false">
+            取消
+          </el-button>
+          <el-button type="primary" :loading="loading" @click="handleUseInviteCode">
+            确认使用
+          </el-button>
+        </template>
+      </el-dialog>
+
+      <!-- 翻倍奖励提示对话框 -->
+      <el-dialog
+        v-model="showDoubleRewardDialog"
+        width="90%"
+        :style="{ maxWidth: '400px' }"
+        :show-close="false"
+        class="double-reward-dialog"
+      >
+        <div class="double-reward-content">
+          <div class="double-icon-container">
+            <div class="double-icon">
+              🎁
+            </div>
+            <div class="double-sparkle">
+              ✨
+            </div>
+          </div>
+          <h3 class="double-title">
+            恭喜获得额外翻倍包!
+          </h3>
+          <p class="double-text">
+            您已获得第9次奖励！<br>
+            <span class="highlight">第10次翻牌将获得翻倍奖励！</span><br>
+            赶快翻开最后一张牌吧！
+          </p>
+          <el-button type="primary" size="large" class="double-btn" @click="showDoubleRewardDialog = false">
+            知道了，去翻牌 🚀
+          </el-button>
+        </div>
+      </el-dialog>
     </template>
   </div>
 </template>
@@ -713,7 +1144,6 @@ cursor: pointer;
   }
 }
 
-
 /* 顶部统计栏 */
 .top-stats {
   display: flex;
@@ -804,25 +1234,106 @@ cursor: pointer;
 /* 翻牌区域 */
 .cards-section {
   margin-bottom: 16px;
+  position: relative;
+
+  &.shuffle-mode {
+    pointer-events: none; // 洗牌期间禁止点击
+  }
+}
+
+/* 洗牌动画遮罩 */
+.shuffle-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+
+  .shuffle-tip {
+    background: rgba(0, 0, 0, 0.8);
+    padding: 16px 32px;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
+  .shuffle-text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.6);
+    animation: textPulse 1.5s ease-in-out infinite;
+  }
 }
 
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
+  gap: 8px;
+  max-width: 100%;
 
   @media (max-width: 768px) {
     grid-template-columns: repeat(5, 1fr);
-    gap: 8px;
+    gap: 6px;
   }
+
+  // 洗牌阶段样式
+  &.shuffle-stage-showing {
+    .card-item:not(.big-prize-card) {
+      opacity: 0.3;
+      filter: grayscale(0.8);
+    }
+  }
+
+  &.shuffle-stage-flipping {
+    .big-prize-card .card-inner {
+      animation: flipToBack 0.8s ease-in-out forwards;
+    }
+  }
+
+  &.shuffle-stage-shuffling {
+    .card-item {
+      animation: shuffleInPlace 2s ease-in-out;
+    }
+  }
+}
+
+// 卡片包装器，简化为普通容器
+.card-wrapper {
+  width: 100%;
 }
 
 .card-item {
   position: relative;
-  aspect-ratio: 3/4;
+  width: 100%;
+  aspect-ratio: 2.5/3.5;
   perspective: 1000px;
   cursor: not-allowed;
   user-select: none;
+  transition: all 0.3s ease;
+
+  // 大奖卡片高亮样式
+  &.big-prize-card {
+    .card-inner {
+      animation: bigPrizeGlow 1.5s ease-in-out infinite;
+      box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5);
+      transform: scale(1.1) translateY(-10px);
+    }
+
+    .card-front {
+      transform: rotateY(180deg); // 大奖卡片展示正面（结果）
+    }
+
+    .card-back {
+      transform: rotateY(0); // 翻转显示
+    }
+  }
+
+  // 占位状态（翻牌时原卡片显示为半透明）
+  &.card-placeholder {
+    opacity: 0.3;
+    pointer-events: none;
+  }
 
   &.card-clickable {
     cursor: pointer;
@@ -831,7 +1342,7 @@ cursor: pointer;
       animation: pulse 2s infinite;
     }
 
-    &:not(.card-flipping):not(.card-flipped) {
+    &:not(.card-flipping):not(.card-flipped):not(.card-placeholder) {
       .card-inner {
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;
       }
@@ -891,11 +1402,35 @@ cursor: pointer;
   justify-content: center;
   position: relative;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  // 背景纹理层
+  .card-pattern {
+    position: absolute;
+    inset: 0;
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 10px,
+        rgba(255, 255, 255, 0.03) 10px,
+        rgba(255, 255, 255, 0.03) 20px
+      ),
+      repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 10px,
+        rgba(255, 255, 255, 0.03) 10px,
+        rgba(255, 255, 255, 0.03) 20px
+      );
+    pointer-events: none;
+  }
 
   .card-corner {
     position: absolute;
     top: 6px;
     left: 6px;
+    z-index: 2;
   }
 
   .card-number {
@@ -911,7 +1446,31 @@ cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
+    z-index: 1;
+  }
+
+  // 系统logo样式（优化为居中圆形）
+  .card-logo {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.9);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
+    animation: logoFloat 3s ease-in-out infinite;
+    position: relative;
+    z-index: 3;
+
+    // 光晕效果
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -8px;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent 70%);
+      animation: logoHalo 2s ease-in-out infinite;
+    }
   }
 
   .card-icon {
@@ -920,7 +1479,7 @@ cursor: pointer;
   }
 
   .card-mystery {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -935,6 +1494,7 @@ cursor: pointer;
     padding: 2px 8px;
     border-radius: 10px;
     backdrop-filter: blur(4px);
+    z-index: 2;
   }
 
   .card-shine {
@@ -950,27 +1510,95 @@ cursor: pointer;
 }
 
 .card-back {
-  background: #fff;
+  // 喜庆的渐变背景（红→金→橙）
+  background:
+    linear-gradient(135deg,
+      rgba(255, 235, 238, 0.9) 0%,
+      rgba(255, 250, 240, 0.9) 50%,
+      rgba(255, 245, 235, 0.9) 100%
+    );
   transform: rotateY(180deg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  overflow: hidden;
+
+  // 喜庆纹理层（中国风波浪纹）
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+      repeating-radial-gradient(
+        circle at 20% 30%,
+        transparent 0,
+        rgba(255, 107, 107, 0.03) 10px,
+        transparent 20px
+      ),
+      repeating-radial-gradient(
+        circle at 80% 70%,
+        transparent 0,
+        rgba(255, 193, 7, 0.03) 10px,
+        transparent 20px
+      );
+    pointer-events: none;
+  }
+
+  // 装饰光效（金色和红色交替）
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.08), transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.08), transparent 50%),
+      radial-gradient(circle at 50% 50%, rgba(255, 152, 0, 0.05), transparent 60%);
+    pointer-events: none;
+  }
 }
 
 .card-result {
   text-align: center;
-  padding: 8px;
+  padding: 12px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+  z-index: 1;
+
+  // logo水印样式
+  .result-watermark {
+    position: absolute;
+    width: 70%;
+    height: 70%;
+    object-fit: contain;
+    opacity: 0.06;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 0;
+    filter: blur(1px);
+  }
 
   &.win {
     position: relative;
     overflow: hidden;
+    background: linear-gradient(135deg, #fff8e1 0%, #fff 50%, #fff8e1 100%);
+
+    // 增强背景光效
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15), transparent 70%);
+      animation: winBackgroundPulse 2s ease-in-out infinite;
+    }
 
     .win-glow {
       position: absolute;
@@ -980,49 +1608,137 @@ cursor: pointer;
     }
 
     .result-icon {
-      font-size: 32px;
+      font-size: 48px;
       animation: bounce 0.6s ease, rotate 2s ease-in-out infinite;
+      z-index: 1;
+      filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5));
+      margin-bottom: 4px;
     }
 
     .result-text {
-      font-size: 14px;
+      font-size: 18px;
       font-weight: bold;
       color: #f56c6c;
-      margin: 4px 0;
-      text-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
+      margin: 6px 0;
+      text-shadow: 0 2px 8px rgba(245, 108, 108, 0.4);
+      z-index: 1;
+      letter-spacing: 1px;
     }
 
     .result-amount {
-      font-size: 18px;
+      font-size: 32px;
       font-weight: bold;
-      background: linear-gradient(135deg, #f56c6c, #e6a23c);
+      background: linear-gradient(135deg, #f56c6c, #e6a23c, #FFD700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      margin: 2px 0;
-      animation: scaleUp 0.5s ease;
+      margin: 8px 0;
+      animation: scaleUp 0.5s ease, amountShine 3s ease-in-out infinite;
+      z-index: 1;
+      text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+      position: relative;
+
+      // 金色光效边框
+      &::before {
+        content: attr(data-amount);
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 107, 157, 0.5));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: blur(8px);
+        z-index: -1;
+      }
     }
 
     .result-unit {
-      font-size: 10px;
+      font-size: 14px;
+      font-weight: 600;
       color: #909399;
+      z-index: 1;
+      letter-spacing: 2px;
+      text-transform: uppercase;
     }
   }
 
   &.lose {
     .result-icon {
-      font-size: 32px;
-      opacity: 0.7;
+      font-size: 42px;
+      opacity: 0.8;
+      z-index: 1;
+      margin-bottom: 4px;
     }
 
     .result-text {
-      font-size: 13px;
+      font-size: 16px;
+      font-weight: 600;
       color: #606266;
-      margin: 4px 0;
+      margin: 6px 0;
+      z-index: 1;
     }
 
     .result-tip {
-      font-size: 11px;
+      font-size: 12px;
       color: #909399;
+      z-index: 1;
+      margin-top: 4px;
+    }
+  }
+
+  // 神秘大奖样式
+  &.mystery-prize {
+    background: linear-gradient(135deg, #ff6b9d 0%, #c06c84 50%, #6c5b7b 100%);
+    position: relative;
+    overflow: hidden;
+
+    .mystery-glow {
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle, rgba(255, 107, 157, 0.6) 0%, rgba(192, 108, 132, 0.4) 50%, transparent 70%);
+      animation: mysteryGlow 2s ease-in-out infinite;
+    }
+
+    .mystery-icon {
+      font-size: 56px;
+      animation: bounce 1s ease infinite, rotate 3s ease-in-out infinite;
+      z-index: 1;
+      filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.8));
+      margin: 10px 0;
+    }
+
+    .mystery-text {
+      font-size: 24px;
+      font-weight: bold;
+      color: #fff;
+      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.8);
+      z-index: 1;
+      letter-spacing: 4px;
+      margin: 8px 0;
+    }
+
+    .mystery-hint {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.9);
+      z-index: 1;
+      letter-spacing: 2px;
+      margin-top: 6px;
+    }
+
+    .mystery-stars {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      font-size: 24px;
+      animation: sparkle 2s ease-in-out infinite;
+      z-index: 1;
+    }
+
+    .mystery-sparkle {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      font-size: 24px;
+      animation: sparkle 2s ease-in-out infinite 1s;
+      z-index: 1;
     }
   }
 }
@@ -1240,6 +1956,24 @@ cursor: pointer;
   animation: confetti-fall 2s ease-out forwards;
   pointer-events: none;
   z-index: 1000;
+
+  &.enhanced {
+    animation: confetti-fall 3s ease-out forwards;
+  }
+}
+
+/* 增强中奖动画效果 */
+.win-flash {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
+  animation: flashEffect 1s ease-out;
+  pointer-events: none;
+  z-index: 999;
+}
+
+.win-shake {
+  animation: shakeEffect 0.5s ease-out;
 }
 
 /* 动画定义 */
@@ -1255,6 +1989,42 @@ cursor: pointer;
   }
 }
 
+// Logo浮动动画
+@keyframes logoFloat {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+// 闪光效果
+@keyframes flashEffect {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// 震动效果
+@keyframes shakeEffect {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
+}
+
 @keyframes bounce {
   0%, 100% {
     transform: translateY(0);
@@ -1343,6 +2113,111 @@ cursor: pointer;
   }
 }
 
+// 洗牌动画（在网格内小幅度移动）
+@keyframes shuffleInPlace {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  20% {
+    transform: translate(15px, -10px) rotate(8deg) scale(1.05);
+  }
+  40% {
+    transform: translate(-12px, 8px) rotate(-6deg) scale(0.95);
+  }
+  60% {
+    transform: translate(10px, 12px) rotate(5deg) scale(1.03);
+  }
+  80% {
+    transform: translate(-8px, -8px) rotate(-4deg) scale(0.98);
+  }
+}
+
+// 新增：大奖卡片光效
+@keyframes bigPrizeGlow {
+  0%, 100% {
+    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.7), 0 0 100px rgba(255, 215, 0, 0.4);
+  }
+}
+
+// 新增：Logo光晕动画
+@keyframes logoHalo {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.2);
+  }
+}
+
+// 新增：文字脉冲
+@keyframes textPulse {
+  0%, 100% {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+}
+
+// 新增：金额闪烁动画
+@keyframes amountShine {
+  0%, 100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.3);
+  }
+}
+
+// 新增：中奖背景脉冲
+@keyframes winBackgroundPulse {
+  0%, 100% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+
+// 大奖卡片翻转到背面
+@keyframes flipToBack {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(180deg);
+  }
+}
+
+// 新增：神秘大奖光效
+@keyframes mysteryGlow {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+// 新增：星星闪烁效果
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2) rotate(180deg);
+  }
+}
+
 /* 骨架屏样式 */
 .loading-skeleton {
   padding: 16px 0;