diff --git a/src/App.vue b/src/App.vue
index 4446bdd..d96267a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import Page1 from './pages/Page1.vue';
 import assets from './assets';
 import Loader from './pages/Loader.vue';
 
-const stage = ref(-1);
+const stage = ref(1);
 
 const userData = ref({
   region: '奥莱',
diff --git a/src/assets/ani/答题标题.zip b/src/assets/ani/答题标题.zip
new file mode 100644
index 0000000..70e7e6a
Binary files /dev/null and b/src/assets/ani/答题标题.zip differ
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 8b40d03..e544f64 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -30,6 +30,7 @@ export default {
         结尾主标: new URL('./ani/结尾主标.zip', import.meta.url).href,
         海报p1: new URL('./ani/海报p1.zip', import.meta.url).href,
         海报p2: new URL('./ani/海报p2.zip', import.meta.url).href,
+        答题标题: new URL('./ani/答题标题.zip', import.meta.url).href,
     },
     icons: [
         [new URL('./icons/icon1.webp', import.meta.url).href, new URL('./icons/bigicon1.webp', import.meta.url).href],
diff --git a/src/assets/sounds/index.ts b/src/assets/sounds/index.ts
index a82c3ea..4ff5f2e 100644
--- a/src/assets/sounds/index.ts
+++ b/src/assets/sounds/index.ts
@@ -6,6 +6,8 @@ import 弹簧蓄力下拉音效 from "./弹簧蓄力下拉音效.mp3"
 import 风声 from "./风声.mp3"
 import 标题出现 from "./首页标题、尾标出现音效.mp3"
 import 结算 from "./最终结算音效.mp3"
+import 正确 from "./正确.mp3"
+import 错误 from "./错误.mp3"
 
 const ea = new EasyAudio([
     {name: "按钮音效", audioUrl: 按钮音效, volume: 0.5},
@@ -14,6 +16,8 @@ const ea = new EasyAudio([
     {name: "风声", audioUrl: 风声, volume: 0.5},
     {name: "标题出现", audioUrl: 标题出现, volume: 0.5},
     {name: "结算", audioUrl: 结算, volume: 0.5},
+    {name: "正确", audioUrl: 正确, volume: 0.5},
+    {name: "错误", audioUrl: 错误, volume: 0.5},
 ]);
 
 export default ea;
\ No newline at end of file
diff --git a/src/assets/sounds/正确.mp3 b/src/assets/sounds/正确.mp3
new file mode 100644
index 0000000..14fd3be
Binary files /dev/null and b/src/assets/sounds/正确.mp3 differ
diff --git a/src/assets/sounds/错误.mp3 b/src/assets/sounds/错误.mp3
new file mode 100644
index 0000000..b7dd41c
Binary files /dev/null and b/src/assets/sounds/错误.mp3 differ
diff --git a/src/data/index.ts b/src/data/index.ts
index 352faa9..8480a70 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -460,4 +460,173 @@ export const regions: RegionData = {
       "备注": "DFT0001-三亚海棠湾免税店"
     }
   ]
-}
\ No newline at end of file
+}
+
+// 定义题目对象的接口，以确保数据类型的一致性
+export interface QuizQuestion {
+  id: number; // 题目唯一ID
+  type: 'single' | 'multiple'; // 题目类型：'single' 为单选, 'multiple' 为多选
+  question: string; // 题目问题
+  options: string[]; // 所有选项
+  answers: string[]; // 正确答案（单选也使用数组，方便统一处理）
+}
+
+// ARC Retail 弹性福利平台答题竞赛题库
+export const arcRetailQuiz: QuizQuestion[] = [
+  // --- 一、单选题 ---
+  {
+    id: 1,
+    type: 'single',
+    question: '弹性福利平台的核心功能是？',
+    options: [
+      '发放基本工资',
+      '实现福利积分兑换',
+      '进行绩效评估',
+      '规划职业发展',
+    ],
+    answers: ['实现福利积分兑换'],
+  },
+  {
+    id: 2,
+    type: 'single',
+    question: '弹性福利平台上线后，健康福利的变化是？',
+    options: [
+      '只能选体检',
+      '可在体检和牙齿清洁中自主选择',
+      '同时免费领体检 + 洁牙',
+      '取消健康福利',
+    ],
+    answers: ['可在体检和牙齿清洁中自主选择'],
+  },
+  {
+    id: 3,
+    type: 'single',
+    question: '员工想知道自己有多少福利积分，最便捷的方式是？',
+    options: [
+      '每月找 HR 查',
+      '登录弹性福利平台实时查看',
+      '等年底邮件通知',
+      '问同事打听',
+    ],
+    answers: ['登录弹性福利平台实时查看'],
+  },
+  {
+    id: 4,
+    type: 'single',
+    question: '以下哪项是 2025 年 新增 的福利兑换项目？',
+    options: ['节日礼品', '员工洁牙', '法定社保', '商业保险'],
+    answers: ['员工洁牙'],
+  },
+  {
+    id: 5,
+    type: 'single',
+    question: '福利积分 主要通过什么方式获取？',
+    options: ['日常加班', '参与景仰计划', '绩效满分', '达成销售业绩'],
+    answers: ['参与景仰计划'],
+  },
+  {
+    id: 6,
+    type: 'single',
+    question: '员工每年最多可以参加多少次公司组织的景仰计划？',
+    options: ['1次', '2次', '3次', '无限制'],
+    answers: ['2次'],
+  },
+  {
+    id: 7,
+    type: 'single',
+    question: '如果觉得近期压力大，心情低落，哪一项解决路径是公司平台提供的？',
+    options: [
+      '可以求助公司专业的EAP服务',
+      '和朋友吐苦水',
+      '大吃大喝',
+      '睡一觉',
+    ],
+    answers: ['可以求助公司专业的EAP服务'],
+  },
+  {
+    id: 8,
+    type: 'single',
+    question: '员工商保属于哪类福利？',
+    options: ['法定福利', '企业补充福利', '带薪休假', '绩效奖金'],
+    answers: ['企业补充福利'],
+  },
+
+  // --- 二、多选题 ---
+  {
+    id: 9,
+    type: 'multiple',
+    question: '弹性福利平台可兑换的福利包含哪些？',
+    options: ['员工体检', '员工洁牙', '节日礼包', '基本工资'],
+    answers: ['员工体检', '员工洁牙', '节日礼包'],
+  },
+  {
+    id: 10,
+    type: 'multiple',
+    question: '关于弹性福利平台，这些 “新体验” 是真的！',
+    options: ['福利能自己选', '积分随时看', '福利都搬到线上', '只有经理能使用'],
+    answers: ['福利能自己选', '积分随时看', '福利都搬到线上'],
+  },
+  {
+    id: 11,
+    type: 'multiple',
+    question: '家属也能通过弹性福利平台享受哪些福利？',
+    options: ['家属商保自选', '家属体检自选', '家属洁牙自选', '员工生日积分'],
+    answers: ['家属商保自选', '家属体检自选', '家属洁牙自选'],
+  },
+  {
+    id: 12,
+    type: 'multiple',
+    question: '2025 年，福利积分新增了哪些类型？',
+    options: ['生日积分', '周年积分', '长期服务积分', '景仰积分'],
+    answers: ['生日积分', '周年积分', '长期服务积分', '景仰积分'],
+  },
+  {
+    id: 13,
+    type: 'multiple',
+    question: '弹性福利平台上线后，福利的 “获取和使用” 发生了哪些改变？',
+    options: [
+      '获取：从 “等公司发”→“参与景仰计划赚积分”',
+      '使用：从 “被动接受固定福利”→“自主选想要的福利”',
+      '管理：从 “找 HR 咨询”→“平台随时查、限时兑”',
+      '福利变少了',
+    ],
+    answers: [
+      '获取：从 “等公司发”→“参与景仰计划赚积分”',
+      '使用：从 “被动接受固定福利”→“自主选想要的福利”',
+      '管理：从 “找 HR 咨询”→“平台随时查、限时兑”',
+    ],
+  },
+  {
+    id: 14,
+    type: 'multiple',
+    question: '景仰计划包含哪些层级的活动？',
+    options: [
+      'T1最美鸟人，面向优秀员工',
+      'T2探界鸟人，硬核挑战，自主报名',
+      'T3领航鸟人，领导力发展，面向店铺管理',
+      'T4起翼新鸟，新手入门，自主报名',
+    ],
+    answers: [
+      'T1最美鸟人，面向优秀员工',
+      'T2探界鸟人，硬核挑战，自主报名',
+      'T3领航鸟人，领导力发展，面向店铺管理',
+      'T4起翼新鸟，新手入门，自主报名',
+    ],
+  },
+  {
+    id: 15,
+    type: 'multiple',
+    question: '员工360关爱计划（EAP）的联系途径有哪些？',
+    options: [
+      '400电话（400 920 3300）',
+      '微信公众号（职选）',
+      '网站（https://global.helpwhereyouare.com）',
+      '小红书',
+    ],
+    answers: [
+      '400电话（400 920 3300）',
+      '微信公众号（职选）',
+      '网站（https://global.helpwhereyouare.com）',
+    ],
+  },
+];
\ No newline at end of file
diff --git a/src/pages/Game.vue b/src/pages/Game.vue
index 42d42aa..172aabd 100644
--- a/src/pages/Game.vue
+++ b/src/pages/Game.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch, type Ref } from 'vue';
+import { computed, onMounted, reactive, ref, useTemplateRef, watch, type Ref } from 'vue';
 import assets from '../assets';
 import AniEle from '../components/AniEle.vue';
-
-const shootNotice = useTemplateRef('shoot-notice');
+import LastPage from './Game/LastPage.vue';
+import AudioEffects from '../assets/sounds'
+import GatheringCloud from './Game/GatheringCloud.vue';
+import ScoreBoard from './Game/ScoreBoard.vue';
+import ActionArea from './Game/ActionArea.vue';
 
 defineExpose({
     init: () => {
@@ -11,8 +14,6 @@ defineExpose({
     }
 })
 
-import AudioEffects from '../assets/sounds'
-
 const props = defineProps<{
     userdata: {
         region: string;
@@ -23,13 +24,88 @@ const props = defineProps<{
 
 const sunEle = useTemplateRef('sun-ani');
 const sunEndEle = useTemplateRef('sun-ani-end');
-const posterP2Ele = useTemplateRef('gui-ani-end-post-p2');
+const shootNotice = useTemplateRef('shoot-notice');
+const gatheringCloud = useTemplateRef('gatheringCloud');
+const actionArea = useTemplateRef('action-area');
 
 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 const emit = defineEmits(['cloudUp', 'cloudDown', 'restart']);
 
-// Intersection Observer for p2 animation
-const hasP2AnimationPlayed = ref(false);
+const SPEED = 1.8;
+let lastTime = 0;
+
+const collisionThreshold = 10; // vw 单位
+const isPlayingDropAni = ref(false);
+const transitionOn = ref(true);
+
+const showGiftDesc = ref(false);
+
+const GAME_STATE = {
+    waiting: 0,
+    ingame: 1,
+    gameEnd: 2,
+    quiz: 3,
+    leaderboard: 4,
+    poster: 5
+} as const;
+
+const gameState: Ref<typeof GAME_STATE[keyof typeof GAME_STATE]> = ref(GAME_STATE.waiting);
+
+const sunPos = ref([0, 0]) // x, y
+
+const giftData = reactive({
+    giftPos: [null, null] as [null | number, null | number], // x, y
+    giftStartPos: [0, 0], // 起始点 x, y
+    giftEndPos: [0, 0], // 终点 x, y
+    giftMoveProgress: 0, // 移动进度 0-1
+    giftMoveDirection: 1
+})
+
+const giftList = assets.icons;
+const giftProgress = ref(0); // max = giftList.length - 1
+
+const timeSpent = ref(0)
+const showEndAni = ref(false); // 显示小太阳后段效果
+const showShareMask = ref(false);
+const leaderBoard = ref([
+    {
+        "name": "测试用户",
+        "time": 1.7116000000000005,
+        "region": "奥莱",
+        "store": "北京斯普瑞斯"
+    },
+    {
+        "name": "阿迪斯",
+        "time": 1.9645,
+        "region": "奥莱",
+        "store": "北京斯普瑞斯"
+    },
+    {
+        "name": "Mike",
+        "time": 45.5,
+        "region": "大北区",
+        "store": "大连恒隆广场"
+    },
+    {
+        "name": "小白",
+        "time": 83.2,
+        "region": "大西区",
+        "store": "太原万象城"
+    },
+    {
+        "name": "小明",
+        "time": 98.2,
+        "region": "大西区",
+        "store": "太原万象城"
+    },
+    {
+        "name": "Elena",
+        "time": 122.2,
+        "region": "大南区",
+        "store": "深圳湾万象城"
+    }
+])
+const showTitleIcon = ref(true)
 
 async function shoot() {
     //sunEle.value?.jumpTo('天上飞')
@@ -87,50 +163,23 @@ async function shoot() {
     }).finished
 
     /* await wait(1000) */
-    canAction.value = true;
+    gameState.value = GAME_STATE.ingame;
 
 
     gameLoop();
 
 }
-const gPos: Ref<'left' | 'center' | 'right'> = ref('center');
-const gDeg = computed(() => ({
-    left: 294 - 360,
-    center: 326 - 360,
-    right: 8
-})[gPos.value]);
-
-const SPEED = 1.8;
-const transitionOn = ref(true);
-let lastTime = 0;
-
-const calcGiftDis = () => {
-    if (giftPos.value[0] !== null && giftPos.value[1] !== null) {
-        const sunX = sunPos.value[0];
-        const sunY = sunPos.value[1];
-        const giftX = giftPos.value[0];
-        const giftY = giftPos.value[1];
-
-        // 计算太阳和礼物之间的距离
-        const distance = Math.sqrt(Math.pow(sunX - giftX, 2) + Math.pow(sunY - giftY, 2));
-        return distance;
-    } else return 0;
-}
-
-const collisionThreshold = 10; // vw 单位
-const isPlayingDropAni = ref(false);
-
 
 function gameLoop(currentTime = 0) {
     let pauseFlag = false;
-    if (giftShow.value) {
+    if (showGiftDesc.value) {
         giftProgress.value++
-        giftPos.value = [null, null];
-        giftShow.value = false;
+        giftData.giftPos = [null, null];
+        showGiftDesc.value = false;
         lastTime = currentTime;
         if (giftProgress.value >= giftList.length) {
             // 游戏结束逻辑
-            console.log('游戏结束！耗时:', timeSpent.value / 1000, '秒');
+            console.log('游戏结束！');
             gameEnd()
             return;
         }
@@ -139,7 +188,20 @@ function gameLoop(currentTime = 0) {
     if (lastTime === 0) lastTime = currentTime;
     const deltaTime = currentTime - lastTime;
     lastTime = currentTime;
-    timeSpent.value += deltaTime
+
+    const calcGiftDis = () => {
+        if (giftData.giftPos[0] !== null && giftData.giftPos[1] !== null) {
+            const sunX = sunPos.value[0];
+            const sunY = sunPos.value[1];
+            const giftX = giftData.giftPos[0];
+            const giftY = giftData.giftPos[1];
+
+            // 计算太阳和礼物之间的距离
+            const distance = Math.sqrt(Math.pow(sunX - giftX, 2) + Math.pow(sunY - giftY, 2));
+            return distance;
+        } else return 0;
+    }
+
 
     // 移动距离 = 速度 * 时间间隔 / 16.67 (目标帧率约60fps)
     if (sunPos.value[1] < -50) {
@@ -181,24 +243,24 @@ function gameLoop(currentTime = 0) {
 
 
     const moveGift = () => {
-        if (giftPos.value[0] === null) {
+        if (giftData.giftPos[0] === null) {
             // 一直生成礼物，直到距离大于 collisionThreshold * 1.5
             while (true) {
                 // 生成起始点
-                giftStartPos.value[0] = Math.random() * 60 - 30;
-                giftStartPos.value[1] = Math.random() * 80 - 20;
+                giftData.giftStartPos[0] = Math.random() * 60 - 30;
+                giftData.giftStartPos[1] = Math.random() * 80 - 20;
 
                 // 生成终点
-                giftEndPos.value[0] = Math.random() * 60 - 30;
-                giftEndPos.value[1] = Math.random() * 80 - 20;
+                giftData.giftEndPos[0] = Math.random() * 60 - 30;
+                giftData.giftEndPos[1] = Math.random() * 80 - 20;
 
                 // 初始位置为起始点
-                giftPos.value[0] = giftStartPos.value[0];
-                giftPos.value[1] = giftStartPos.value[1];
+                giftData.giftPos[0] = giftData.giftStartPos[0];
+                giftData.giftPos[1] = giftData.giftStartPos[1];
 
                 // 重置移动进度和方向
-                giftMoveProgress.value = 0;
-                giftMoveDirection.value = 1;
+                giftData.giftMoveProgress = 0;
+                giftData.giftMoveDirection = 1;
 
                 if (calcGiftDis() > collisionThreshold * 1.5) {
                     break; // 距离足够远，退出循环
@@ -207,24 +269,24 @@ function gameLoop(currentTime = 0) {
         }
 
         // gift move between two points
-        if (giftPos.value[0] !== null && giftPos.value[1] !== null) {
+        if (giftData.giftPos[0] !== null && giftData.giftPos[1] !== null) {
             const giftSpeed = 0.8 * (deltaTime / 16.67); // 速度加快 (原来是0.3)
 
             // 更新移动进度
-            giftMoveProgress.value += giftSpeed * giftMoveDirection.value * 0.01;
+            giftData.giftMoveProgress += giftSpeed * giftData.giftMoveDirection * 0.01;
 
             // 检查是否到达端点，如果是则反转方向
-            if (giftMoveProgress.value >= 1) {
-                giftMoveProgress.value = 1;
-                giftMoveDirection.value = -1;
-            } else if (giftMoveProgress.value <= 0) {
-                giftMoveProgress.value = 0;
-                giftMoveDirection.value = 1;
+            if (giftData.giftMoveProgress >= 1) {
+                giftData.giftMoveProgress = 1;
+                giftData.giftMoveDirection = -1;
+            } else if (giftData.giftMoveProgress <= 0) {
+                giftData.giftMoveProgress = 0;
+                giftData.giftMoveDirection = 1;
             }
 
             // 使用线性插值计算当前位置
-            giftPos.value[0] = giftStartPos.value[0] + (giftEndPos.value[0] - giftStartPos.value[0]) * giftMoveProgress.value;
-            giftPos.value[1] = giftStartPos.value[1] + (giftEndPos.value[1] - giftStartPos.value[1]) * giftMoveProgress.value;
+            giftData.giftPos[0] = giftData.giftStartPos[0] + (giftData.giftEndPos[0] - giftData.giftStartPos[0]) * giftData.giftMoveProgress;
+            giftData.giftPos[1] = giftData.giftStartPos[1] + (giftData.giftEndPos[1] - giftData.giftStartPos[1]) * giftData.giftMoveProgress;
         }
 
     }
@@ -236,10 +298,10 @@ function gameLoop(currentTime = 0) {
     // 碰撞检测阈值（可以根据实际元素大小调整）
     if (distance < collisionThreshold) {
         // 太阳和礼物碰撞了
-        console.log('太阳收集到礼物！', { sunPos: sunPos.value, giftPos: giftPos.value, distance });
+        console.log('太阳收集到礼物！', { sunPos: sunPos.value, giftPos: giftData.giftPos, distance });
 
         pauseFlag = true; // 暂停游戏循环
-        giftShow.value = true; // 显示展示礼物界面
+        showGiftDesc.value = true; // 显示展示礼物界面
         document.querySelector('.gift-item.show')?.animate([
             { transform: 'scale(1)' },
             { transform: 'scale(0)' },
@@ -248,7 +310,7 @@ function gameLoop(currentTime = 0) {
             easing: 'cubic-bezier(0.42,-0.98, 0.4, 1)',
             fill: 'forwards',
         }).finished.then(() => {
-            giftPos.value = [null, null]; // 重置游戏中礼物
+            giftData.giftPos = [null, null]; // 重置游戏中礼物
         });
     }
 
@@ -257,17 +319,6 @@ function gameLoop(currentTime = 0) {
 }
 
 function gToggle(pos: 'left' | 'center' | 'right') {
-    gPos.value = pos;
-    document.querySelector('.p-machine')?.animate([
-        { scale: 1, },
-        { scale: 1.2, },
-        { scale: 1, },
-    ], {
-        duration: 200,
-        easing: 'ease-in-out',
-        fill: 'forwards',
-    });
-
     if (isPlayingDropAni.value) {
         // 如果正在下落动画中，直接返回
         return;
@@ -329,212 +380,11 @@ function gToggle(pos: 'left' | 'center' | 'right') {
     }
 }
 
-const giftShow = ref(false);
-
-const canAction = ref(false);
-
-
-const sunPos = ref([0, 0]) // x, y
-
-const giftPos: Ref<[number | null, number | null]> = ref([null, null]); // x, y
-const giftStartPos: Ref<[number, number]> = ref([0, 0]); // 起始点
-const giftEndPos: Ref<[number, number]> = ref([0, 0]); // 终点
-const giftMoveProgress = ref(0); // 移动进度 0-1
-const giftMoveDirection = ref(1); // 移动方向 1正向 -1反向
-
-const giftList = assets.icons;
-
-const giftProgress = ref(0); // max = giftList.length - 1
-
-
-const isGameEnd = ref(false);
-
-const timeSpent = ref(0)
-
-// 生成图标位置，确保之间距离不小于16
-const generateIconPositions = () => {
-    const icons = [...giftList, ...assets.metal];
-    const positions: Array<{ src: string; left: number; top: number; delay: number }> = [];
-    const minDistance = 16; // 最小距离
-    const maxAttempts = 100; // 防止无限循环的最大尝试次数
-
-    // 计算两点之间的距离
-    const getDistance = (pos1: { left: number; top: number }, pos2: { left: number; top: number }) => {
-        return Math.sqrt(Math.pow(pos1.left - pos2.left, 2) + Math.pow(pos1.top - pos2.top, 2));
-    };
-
-    // 检查位置是否与已有位置冲突
-    const isPositionValid = (newPos: { left: number; top: number }) => {
-        return positions.every(existingPos => getDistance(newPos, existingPos) >= minDistance);
-    };
-
-    icons.forEach((icon, index) => {
-        let attempts = 0;
-        let validPosition = false;
-        let newPosition: { left: number; top: number };
-
-        // 尝试生成不冲突的位置
-        while (!validPosition && attempts < maxAttempts) {
-            newPosition = {
-                left: Math.random() * 100 - 50, // 扩大范围以增加成功概率
-                top: Math.random() * 100 - 50
-            };
-
-            if (positions.length === 0 || isPositionValid(newPosition)) {
-                validPosition = true;
-                positions.push({
-                    src: icon[0],
-                    left: newPosition.left,
-                    top: newPosition.top,
-                    delay: index * 50
-                });
-            }
-            attempts++;
-        }
-
-        // 如果无法找到不冲突的位置，使用稍微宽松的条件
-        if (!validPosition) {
-            console.warn(`Could not find non-conflicting position for icon ${index}, using fallback position`);
-            positions.push({
-                src: icon[0],
-                left: Math.random() * 100 - 50,
-                top: Math.random() * 100 - 50,
-                delay: Math.random() * 5 + index * 0.5
-            });
-        }
-    });
-
-    return positions;
-};
-
-const floatIcons = ref(generateIconPositions());
-
-// 图标聚集模拟函数 - 返回最终位置而不实际移动
-const simulateGatherIcons = () => {
-    const moveSpeed = 0.5; // 移动速度
-    const minDistance = 16; // 最小距离
-    const centerTarget = { left: 0, top: 0 }; // 目标中心点
-    const threshold = 0.1; // 停止移动的阈值
-    const maxIterations = 1000; // 防止无限循环的最大迭代次数
-
-    // 创建位置副本用于模拟
-    const simulatedPositions = floatIcons.value.map(icon => ({
-        src: icon.src,
-        left: icon.left,
-        top: icon.top,
-        delay: icon.delay
-    }));
-
-    // 计算两点之间的距离
-    const getDistance = (pos1: { left: number; top: number }, pos2: { left: number; top: number }) => {
-        return Math.sqrt(Math.pow(pos1.left - pos2.left, 2) + Math.pow(pos1.top - pos2.top, 2));
-    };
-
-    // 检查位置是否与其他图标冲突
-    const isPositionValid = (newPos: { left: number; top: number }, currentIndex: number, positions: typeof simulatedPositions) => {
-        return positions.every((icon, index) => {
-            if (index === currentIndex) return true;
-            return getDistance(newPos, icon) >= minDistance;
-        });
-    };
-
-    // 向目标点移动，但避免碰撞
-    const moveTowardsTarget = (currentPos: { left: number; top: number }, targetPos: { left: number; top: number }, iconIndex: number, positions: typeof simulatedPositions) => {
-        const dx = targetPos.left - currentPos.left;
-        const dy = targetPos.top - currentPos.top;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-
-        if (distance < threshold) {
-            return currentPos; // 已经足够接近目标
-        }
-
-        // 计算移动方向的单位向量
-        const unitX = dx / distance;
-        const unitY = dy / distance;
-
-        // 计算新位置
-        const newPos = {
-            left: currentPos.left + unitX * moveSpeed,
-            top: currentPos.top + unitY * moveSpeed
-        };
-
-        // 检查新位置是否会产生碰撞
-        if (isPositionValid(newPos, iconIndex, positions)) {
-            return newPos;
-        } else {
-            // 如果会碰撞，尝试绕行
-            const angles = [Math.PI / 4, -Math.PI / 4, Math.PI / 2, -Math.PI / 2, 3 * Math.PI / 4, -3 * Math.PI / 4];
-
-            for (const angle of angles) {
-                const rotatedX = unitX * Math.cos(angle) - unitY * Math.sin(angle);
-                const rotatedY = unitX * Math.sin(angle) + unitY * Math.cos(angle);
-
-                const alternativePos = {
-                    left: currentPos.left + rotatedX * moveSpeed * 0.5,
-                    top: currentPos.top + rotatedY * moveSpeed * 0.5
-                };
-
-                if (isPositionValid(alternativePos, iconIndex, positions)) {
-                    return alternativePos;
-                }
-            }
-
-            // 如果所有方向都被阻挡，保持原位置
-            return currentPos;
-        }
-    };
-
-    // 模拟聚集过程
-    let iterations = 0;
-    while (iterations < maxIterations) {
-        let hasMovement = false;
-
-        // 创建新的位置数组
-        const newPositions = simulatedPositions.map((icon, index) => {
-            const oldPos = { left: icon.left, top: icon.top };
-            const newPos = moveTowardsTarget(oldPos, centerTarget, index, simulatedPositions);
-
-            // 检查是否有移动
-            if (Math.abs(newPos.left - oldPos.left) > threshold || Math.abs(newPos.top - oldPos.top) > threshold) {
-                hasMovement = true;
-            }
-
-            return {
-                ...icon,
-                left: newPos.left,
-                top: newPos.top
-            };
-        });
-
-        // 更新模拟位置
-        simulatedPositions.splice(0, simulatedPositions.length, ...newPositions);
-
-        // 如果没有移动，说明已经收敛
-        if (!hasMovement) {
-            console.log(`图标聚集模拟完成！迭代次数: ${iterations}`);
-            break;
-        }
-
-        iterations++;
-    }
-
-    if (iterations >= maxIterations) {
-        console.warn('图标聚集模拟达到最大迭代次数限制');
-    }
-
-    // 返回最终位置
-    return simulatedPositions;
-};
-
-const showEndAni = ref(false);
 
 async function gameEnd() {
-
     fetch('/api/score', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
             region: props.userdata.region,
             store: props.userdata.store,
@@ -543,15 +393,8 @@ async function gameEnd() {
         })
     }).then(_ => {
         fetch('/api/score', {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        })
-            .then(res => res.json())
-            .then(data => {
-                leaderBoard.value = data;
-            });
+            headers: { 'Content-Type': 'application/json' }
+        }).then(res => res.json()).then(data => leaderBoard.value = data);
     })
 
     document.querySelector('.bed')?.animate([
@@ -565,11 +408,7 @@ async function gameEnd() {
     AudioEffects.play("结算")
     sunEle.value?.jumpTo('落下');
 
-
-    ; (document.querySelector('.p-machine') as HTMLDivElement).style.animationDirection = 'reverse';
-    (document.querySelectorAll('.action img') as NodeListOf<HTMLImageElement>).forEach(img => {
-        img.style.animationDirection = 'reverse';
-    });
+    actionArea.value?.hide();
 
     document.querySelector('.sun-ani-wrapper')?.animate([
         { transform: 'translateY(8%) translateX(-50%)', left: '50%', bottom: '23%', width: '60vw' },
@@ -579,14 +418,14 @@ async function gameEnd() {
         fill: 'forwards',
     }).finished
 
+    gameState.value = GAME_STATE.gameEnd;
 
-    isGameEnd.value = true;
-
-    // 模拟图标聚集并获取最终位置
-    const finalPositions = simulateGatherIcons();
-
-    await wait(0)
-    floatIcons.value = finalPositions;
+    await wait(0);
+    gatheringCloud.value?.gather().then(async () => {
+        await wait(3500)
+        gatheringCloud.value?.titleIn();
+        showTitleIcon.value = false;
+    });
 
     await wait(1800)
 
@@ -594,10 +433,7 @@ async function gameEnd() {
     sunEndEle.value?.jumpTo('all');
 
     await wait(3400);
-    showScore.value = true;
-
-
-
+    gameState.value = GAME_STATE.leaderboard;
 
     document.querySelector('.bed')?.animate([
         { transform: 'translateY(0)' },
@@ -607,83 +443,8 @@ async function gameEnd() {
         easing: 'cubic-bezier(0.4, 0, 1, 0.5)',
         fill: 'forwards',
     });
-
-
-
 }
 
-const leaderBoard = ref([
-    {
-        "name": "测试用户",
-        "time": 1.7116000000000005,
-        "region": "奥莱",
-        "store": "北京斯普瑞斯"
-    },
-    {
-        "name": "阿迪斯",
-        "time": 1.9645,
-        "region": "奥莱",
-        "store": "北京斯普瑞斯"
-    },
-    {
-        "name": "Mike",
-        "time": 45.5,
-        "region": "大北区",
-        "store": "大连恒隆广场"
-    },
-    {
-        "name": "小白",
-        "time": 83.2,
-        "region": "大西区",
-        "store": "太原万象城"
-    },
-    {
-        "name": "小明",
-        "time": 98.2,
-        "region": "大西区",
-        "store": "太原万象城"
-    },
-    {
-        "name": "Elena",
-        "time": 122.2,
-        "region": "大南区",
-        "store": "深圳湾万象城"
-    }
-
-])
-
-const fmtTime = (time: number) => {
-    time = Math.round(time);
-    // 将时间格式化为 mm:ss
-    const minutes = Math.floor(time / 60);
-    const seconds = time % 60;
-    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-};
-
-
-const showScore = ref(false)
-
-const showLastPage = ref(false);
-
-const sunAniEndRules = ref([
-    { name: 'all', frame: 164, loop: 1, pauseAfter: false, duration: 33 },
-    { name: '左右跳', frame: 66, loop: 0, pauseAfter: true, duration: 33 },
-    { name: '落下', frame: 32, loop: 1, pauseAfter: false, duration: 33 },
-    { name: 'loop', frame: 33, loop: 0, pauseAfter: true, duration: 33 },
-])
-import QRCode from 'qrcode';
-const qrcodeUrl = ref('');
-
-QRCode.toDataURL(`https://arcteryx-game-demo.xn--876a.net`, {
-    width: 256,
-}).then(url => {
-    qrcodeUrl.value = url;
-}).catch(err => {
-    console.error('生成二维码失败:', err);
-});
-
-
-
 async function finishCollect() {
     document.querySelector('.finish-collect')?.animate([
         { transform: 'scale(1)' },
@@ -693,14 +454,9 @@ async function finishCollect() {
         easing: 'cubic-bezier(0.53,-0.7, 0.25, 1)',
         fill: 'forwards',
     })
-    document.querySelector('.wecare-title')?.animate([
-        { transform: 'scale(1)' },
-        { transform: 'scale(0)' },
-    ], {
-        duration: 500,
-        easing: 'ease-in-out',
-        fill: 'forwards',
-    })
+
+    gatheringCloud.value?.titleOut();
+    showTitleIcon.value = true;
 
     await document.querySelector('.lines')?.animate([
         { transform: 'translateX(150%)' }], {
@@ -720,78 +476,17 @@ async function finishCollect() {
     //@ts-ignore
     document.querySelector('.bar-container').style.display = 'none';
 
-    showLastPage.value = true;
+    gameState.value = GAME_STATE.poster;
     AudioEffects.play("标题出现")
-
-    // 在最后一页显示后设置 Intersection Observer 监听 p2 元素
-    await wait(100); // 等待 DOM 更新
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-            if (entry.isIntersecting && !hasP2AnimationPlayed.value) {
-                // p2 进入视口且动画未播放过
-                hasP2AnimationPlayed.value = true;
-                posterP2Ele.value?.jumpTo('p2');
-                console.log('Poster P2 animation triggered');
-
-                // 停止观察，因为只需要触发一次
-                observer.unobserve(entry.target);
-            }
-        });
-    }, {
-        threshold: 0.5, // 当 50% 的元素进入视口时触发
-        rootMargin: '0px'
-    });
-
-    // 观察 p2 元素
-    const p2Element = posterP2Ele.value?.$el;
-    if (p2Element) {
-        observer.observe(p2Element);
-        console.log('Started observing P2 element');
-    } else {
-        console.warn('P2 element not found');
-    }
-
-    // 8秒后如果用户没有看过p2，自动滚动到p2
-    setTimeout(() => {
-        if (!hasP2AnimationPlayed.value) {
-            console.log('Auto scrolling to P2 after 8 seconds');
-            const posterContainer = document.querySelector('.poster-container');
-            if (posterContainer) {
-                // 滚动到p2位置（第二个元素，占总宽度的50%）
-                posterContainer.scrollTo({
-                    left: posterContainer.scrollWidth * 0.5,
-                    behavior: 'smooth'
-                });
-            }
-        }
-    }, 8000); // 8秒 = 8000毫秒
-
 }
 
-// 重置游戏状态的函数
-function resetGame() {
-    emit('restart')
-}
-
-/*  const posterHasChangedToPage2 = ref(false);
-const posterAni = useTemplateRef('gui-ani-end-post');
-watch(posterHasChangedToPage2, (newVal) => {
-    if (newVal) {
-        posterAni.value?.jumpTo('p2');
-    }
-}); 
-
-let hasSwapX = 0
-function posterSwap(e: PointerEvent) {
-    if (posterHasChangedToPage2.value) return;
-    if (e.buttons === 1) {
-        hasSwapX += e.offsetX
-        if (Math.abs(hasSwapX) > 100) {
-            posterHasChangedToPage2.value = true;
-        }
-    }
-} */
-const showShareMask = ref(false);
+const fmtTime = (time: number) => {
+    time = Math.round(time);
+    // 将时间格式化为 mm:ss
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
 </script>
 
 <template>
@@ -815,7 +510,6 @@ const showShareMask = ref(false);
                 transition: transitionOn ? 'all 0.1s ease' : undefined
             }">
 
-                <!-- AniEle 组件现在只关心自己的内容，不再有复杂的外部样式 -->
                 <AniEle :url="assets.ani.小太阳总" ref="sun-ani" class="sun-ani" :height="1800" :width="1600" :rules="[
                     { name: '起飞前', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
                     { name: '蓄力飞', frame: 181, loop: 1, pauseAfter: false, duration: 33 },
@@ -825,159 +519,66 @@ const showShareMask = ref(false);
             </div>
         </div>
 
-        <div v-if="canAction && !showLastPage">
-            <img src="../assets/game/鼓风机.webp" class="abs p-machine"
-                style="bottom: -40%; width: 66vw; left: 17%; transform-origin: 50% 63%; transition: all 0.2s;"
-                :style="{ transform: `rotate(${gDeg}deg)` }" />
-            <div class="action">
-                <img draggable="false" :style="{ animationDelay: '0.1s' }" src="../assets/game/左.webp" alt=""
-                    @click="gToggle('left')">
-                <img draggable="false" :style="{ animationDelay: '0.2s' }" src="../assets/game/中.webp" alt=""
-                    @click="gToggle('center')">
-                <img draggable="false" :style="{ animationDelay: '0.0s' }" src="../assets/game/右.webp" alt=""
-                    @click="gToggle('right')">
-            </div>
+        <div v-if="gameState >= GAME_STATE.ingame && gameState < GAME_STATE.poster">
+            <ActionArea @gToggle="gToggle" ref="action-area" />
 
             <img class="abs gift-item" v-for="(gift, index) in giftList" :src="gift[0]" style="width: 20vw;"
-                v-if="!isGameEnd" :style="{
+                v-if="gameState < GAME_STATE.gameEnd" :style="{
                     display: giftProgress == index ? 'block' : 'none',
-                    bottom: `calc(45% + ${giftPos[1] ?? 0}vw)`, left: `calc(39.5% + ${giftPos[0] ?? 0}vw)`, transition: transitionOn ? `all 0.1s ease` : undefined
+                    bottom: `calc(45% + ${giftData.giftPos[1] ?? 0}vw)`, left: `calc(39.5% + ${giftData.giftPos[0] ?? 0}vw)`, transition: transitionOn ? `all 0.1s ease` : undefined
                 }" alt="" :class="{ show: giftProgress == index, hide: giftProgress != index }">
 
-            <img src="../assets//game/操作提示.webp" class="abs prompt" alt="" style="width: 31%; bottom: 18%; left: 34%; ">
+            <img src="../assets/game/操作提示.webp" class="abs prompt" alt="" style="width: 31%; bottom: 18%; left: 34%; ">
             <img src="../assets/game/风.webp" alt="" class="abs wind">
             <img src="../assets/game/wecare.webp" alt="" class="abs wecare" style="width: 24vw;
             left: 50%; top: 6%; transform: translateX(-50%);">
-            <div class="dot" v-if="!isGameEnd">
+            <div class="dot" v-if="gameState == GAME_STATE.ingame">
                 <div v-for="(_, index) in giftList" :key="index" class="dot-item"
                     :class="{ finished: index < giftProgress }" @click="giftProgress = index">
                 </div>
             </div>
         </div>
 
-        <div class="game-end abs" v-if="isGameEnd"
+
+        <div class="game-end abs" v-if="gameState >= GAME_STATE.gameEnd"
             style="z-index: 2; inset: 0; height: 100%; width: 100%;pointer-events: none;">
-            <div class="icon-cloud" style="position: absolute; left: 50%; top: 20%;">
-                <img v-for="icon in floatIcons" :src="icon.src" alt="" :style="{
-                    top: `${icon.top}vw`,
-                    left: `${icon.left}vw`,
-                    animationDelay: `${icon.delay}ms`,
-                }">
-            </div>
-            <img src="../assets/game/wecare.webp" alt="" class="abs wecare" style="width: 24vw;
-            left: 50%; top: 6%; transform: translateX(-50%);">
 
-            <img src="../assets/game/wecare标题.webp" alt="" class="abs wecare-title"
-                style="width: 72%;left: 14%;top: 12%;">
+            <GatheringCloud ref="gatheringCloud" />
 
-
-            <div class="scoreboard" v-if="showScore">
-                <div class="bar-container">
-                    <div class="bar" v-for="(item, index) in [leaderBoard[1], leaderBoard[0], leaderBoard[2]]"
-                        :key="index" :class="{
-                            'first': index === 1, 'second': index === 0, 'third': index === 2
-                        }">
-                        <div class="name">{{ item.name }}</div>
-                        <div class="time">{{ fmtTime(item.time) }}</div>
-                        <div class="region">{{ item.region }}</div>
-                        <div class="store">{{ item.store }}</div>
-                    </div>
-                </div>
-                <div class="lines">
-                    <div class="line" v-for="(item, index) in leaderBoard.slice(3, 7)" :key="index"
-                        :style="{ animationDelay: index * 100 + 400 + 'ms' }">
-                        <div class="rank">{{ index + 4 }}</div>
-                        <div class="name">{{ item.name }}</div>
-                        <div class="time">{{ fmtTime(item.time) }}</div>
-                        <div class="region">{{ item.region }}</div>
-                    </div>
-                </div>
-            </div>
+            <ScoreBoard :leaderBoard="leaderBoard" :fmtTime="fmtTime" v-if="gameState >= GAME_STATE.leaderboard" />
 
             <div class="sun-ani-end-wrapper abs" style="pointer-events: none; inset: 0; width: 100%;z-index: 2;"
                 :style="{ display: showEndAni ? 'block' : 'none' }">
 
-                <!-- AniEle 组件现在只关心自己的内容，不再有复杂的外部样式 -->
                 <AniEle :url="assets.ani.后端效果" ref="sun-ani-end" class="sun-ani-end" :height="2462" :width="1179"
-                    :rules="sunAniEndRules" style="width: 100%; height: auto;" />
+                    :rules="[
+                        { name: 'all', frame: 164, loop: 1, pauseAfter: false, duration: 33 },
+                        { name: '左右跳', frame: 66, loop: 0, pauseAfter: true, duration: 33 },
+                        { name: '落下', frame: 32, loop: 1, pauseAfter: false, duration: 33 },
+                        { name: 'loop', frame: 33, loop: 0, pauseAfter: true, duration: 33 },
+                    ]" style="width: 100%; height: auto;" />
             </div>
 
-            <img src="../assets/game/完成收集.webp" alt="" v-if="showScore" class="finish-collect abs"
-                @click.once="AudioEffects.play('按钮音效');finishCollect()"
+            <img src="../assets/game/完成收集.webp" alt="" v-if="gameState >= GAME_STATE.leaderboard"
+                class="finish-collect abs" @click.once="AudioEffects.play('按钮音效'); finishCollect()"
                 style="bottom: 8%;left: 33%;width: 34vw;animation: scale-in 0.3s ease-out;pointer-events: all;">
-
-
         </div>
 
-        <div class="last-page" v-if="showLastPage"
-            style="z-index: 0;position: absolute; inset: 0;height: 100%; width: 100%; pointer-events: none;">
-            <AniEle :url="assets.ani.结尾主标" :width="925" :height="340"
-                :rules="[{ name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }]"
-                style="position: absolute;top: 13%;width: 80%;left: 11%; pointer-events:none;" ref="main-logo" />
-            <div class="poster-container"
-                style="position: absolute;top: 29.3%;left: 37.2%;width: 57.3%; height: 38%; overflow-x: auto; overflow-y: hidden; pointer-events: all; scroll-snap-type: x mandatory;">
-                <div class="poster-wrapper" style="display: flex; width: 200%; height: 100%; flex-direction: row;"
-                    dir="ltr">
-                    <AniEle :url="assets.ani.海报p1" ref="gui-ani-end-post-p1 "
-                        style="width: 50%; flex-shrink: 0; scroll-snap-align: start;" class="gui-ani-end-post"
-                        :height="940" :width="671" :rules="[
-                            { name: 'p1', frame: 32, loop: 1, pauseAfter: true, duration: 33 },
-                        ]" />
-                    <AniEle :url="assets.ani.海报p2" ref="gui-ani-end-post-p2"
-                        style="width: 50%; flex-shrink: 0; scroll-snap-align: start;" class="gui-ani-end-post"
-                        :height="940" :width="671" :rules="[
-                            { name: 'wait', frame: 1, loop: 1, pauseAfter: true, duration: 33 },
-                            { name: 'p2', frame: 31, loop: 1, pauseAfter: true, duration: 33 },
-                        ]" />
-                </div>
+        <LastPage :userdata="userdata" :time-spent="timeSpent" v-if="gameState == GAME_STATE.poster" :fmt-time="fmtTime"
+            @reset-game="emit('restart')" @show-share-mask="showShareMask = true" />
+
+        <Transition name="gift-popup">
+            <div v-if="showGiftDesc" class="gift-popup">
+                <img :src="giftList[giftProgress][1]" alt="" class="abs" style="width: 82%; left: 9%; top: 11%;">
+                <img src="../assets/game/收下福利.webp" alt="" class="abs" style="width: 14%; left: 43%; top: 54%;"
+                    @click="AudioEffects.play('按钮音效'); gameLoop()">
             </div>
-            <AniEle :url="assets.ani.线" ref="gui-ani-end" class="gui-ani-end" :height="2462" :width="1179" :rules="[
-                { name: 'all', frame: 54, loop: 1, pauseAfter: false, duration: 16 },
-            ]" style="width: 100%; height: auto;position: absolute;inset: 0;pointer-events: none;" />
-            <img src="../assets/game/床.webp" alt="" class="abs last-bed" style="width: 66vw;bottom: -19%;left: 17%;">
+        </Transition>
 
-            <img src="../assets/game/分享海报.webp" alt="" class="abs" @click="AudioEffects.play('按钮音效');showShareMask = true"
-                style="width: 34vw;bottom: -19%;left: 15%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; pointer-events: all;">
-            <img src="../assets/game/再玩一次.webp" alt="" class="abs" @click="AudioEffects.play('按钮音效');resetGame()"
-                style="width: 34vw;bottom: -19%;left: 51%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; animation-delay: 200ms; pointer-events: all;">
-
-            <div class="time-spent abs" style="left: 10%; top:44%;width: 24%;height: 23%; display: flex;
-            align-items: center; flex-direction: column;">
-                <div class="line-1"
-                    style="display: flex; align-items: center; gap: 1vw; animation: line-in 0.5s ease-out 0.6s forwards;transform: translateX(-210%);">
-                    <div class="username" style="font-size: 2.9vw;">{{
-                        userdata.username }}</div>
-                    <div class="cost-info"
-                        style="font-size: 2.9vw; color: white; display: flex;align-items: center;justify-content: center;background-color: black;padding: 0 1.2vw; height: 4.5vw; border-radius: 4vw;">
-                        用时</div>
-                </div>
-
-                <div class="time"
-                    style="font-size: 10vw;animation: line-in 0.5s ease-out 0.8s forwards;transform: translateX(-210%);">
-                    {{ fmtTime(timeSpent / 1000) }}</div>
-
-                <img :src="qrcodeUrl" alt=""
-                    style="width: 100%;bottom:7%;position: absolute;animation: line-in 0.5s ease-out 1s forwards;transform: translateX(-210%);">
-            </div>
-
-            <div class="region-area abs" style="left: 10%; top:30%;width: 24%;height: 10%;gap:2vw; display: flex;animation: line-in 0.5s ease-out 0.4s forwards;transform: translateX(-210%);
-            align-items: center; flex-direction: column;justify-content: center;">
-                <div class="region"
-                    style="width: 20vw; background-color: white;font-size: 3vw;text-align: center;height: 5.2vw;line-height: 5.2vw; border-radius: 4.5vw;">
-                    {{ userdata.region }}</div>
-                <div class="store" style="font-size: 2.9vw; color: gray;">{{
-                    userdata.store }}</div>
-            </div>
-
-        </div>
-
-
-
-        <div v-if="giftShow" class="gift-popup">
-            <img :src="giftList[giftProgress][1]" alt="" class="abs" style="width: 82%; left: 9%; top: 11%;">
-            <img src="../assets/game/收下福利.webp" alt="" class="abs" style="width: 14%; left: 43%; top: 54%;"
-                @click="AudioEffects.play('按钮音效');gameLoop()">
-        </div>
+        <Transition name="fade">
+            <img src="../assets/game/wecare.webp" alt="" class="abs wecare" style="width: 24vw;
+            left: 50%; top: 6%; transform: translateX(-50%);" v-if="showTitleIcon">
+        </Transition>
 
         <Transition name="fade">
             <div v-if="showShareMask" class="share-mask" @click="showShareMask = false">
@@ -1003,10 +604,6 @@ const showShareMask = ref(false);
     }
 }
 
-.gui-ani-end-post {
-    /* 确保每个海报都能正确对齐 */
-    object-fit: contain;
-}
 
 @keyframes last-btn-in {
     0% {
@@ -1077,170 +674,43 @@ const showShareMask = ref(false);
     }
 }
 
-.scoreboard {
-    position: absolute;
-    top: 44%;
-    width: 100%;
-
-    .bar-container {
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        gap: 2vw;
-    }
-
-    .bar {
-        position: relative;
-        height: 60vw;
-        width: 26vw;
-        background-size: contain;
-        background-repeat: no-repeat;
-        mask-image: linear-gradient(to bottom, black, black, transparent);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 1.5vw;
-        animation: bar-in 0.7s ease-out forwards;
-        transform: translateY(150%);
-
-        .name {
-            font-size: 4.5vw;
-        }
-
-        .time {
-            font-size: 3vw;
-        }
-
-        .region {
-            font-size: 3vw;
-            color: white;
-            background-color: #7EA0CA;
-            padding: 0 2vw;
-            border-radius: 2vw;
-        }
-
-        .store {
-            max-width: 13vw;
-            text-align: center;
-            font-size: 2.4vw;
-            color: gray;
-        }
-
-        &.first {
-            top: 3vw;
-            background-image: url('../assets/game/first.webp');
-            animation-delay: 0ms;
-        }
-
-        &.second {
-            background-image: url('../assets/game/second.webp');
-            animation-delay: 250ms;
-            top: 9vw;
-        }
-
-        &.third {
-            background-image: url('../assets/game/third.webp');
-            animation-delay: 500ms;
-            top: 9vw;
-        }
-    }
-
-    .lines {
-        display: flex;
-        position: relative;
-        top: -5vw;
-        flex-direction: column;
-        align-items: center;
-        gap: 1vw;
-
-        .line {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 80%;
-            font-size: 3.2vw;
-            background-color: #FFFFFF;
-            padding: 0 2vw;
-            height: 8vw;
-            border-radius: 8vw;
-            animation: line-in 0.5s ease-out forwards;
-            transform: translateX(-150%);
-
-            .rank {
-                // italic
-                font-style: italic;
-                flex: 1;
-                font-size: 4vw;
-                text-align: center;
-                color: #7EA0CA;
-            }
-
-            .name {
-                flex: 2;
-                text-align: center;
-                border-right: .35vw solid black;
-            }
-
-            .time {
-                flex: 2;
-                text-align: center;
-                border-right: .35vw solid black;
-            }
-
-            .region {
-                flex: 2;
-                color: gray;
-                text-align: center;
-            }
-        }
-    }
-}
-
-
-.wecare-title {
-    animation: scale-in 0.4s ease-in-out forwards;
-    animation-delay: 3.9s;
-    scale: 0;
-}
-
-.icon-cloud {
-    animation: scale-out 0.4s ease-in-out forwards;
-    animation-delay: 3.5s;
-
-    img {
-        position: absolute;
-        width: 16vw;
-        transition: all 4s ease;
-        animation: scale-in 0.4s ease-in-out forwards;
-        transform: translate(-50%, -50%);
-        transform-origin: left top;
-        scale: 0;
-    }
-}
-
-@keyframes gift-popup-bg {
-    0% {
-        backdrop-filter: blur(0px);
-        opacity: 0;
-    }
-
-    100% {
-        backdrop-filter: blur(16px);
-        opacity: 1;
-    }
-}
-
 .gift-popup {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
+    backdrop-filter: blur(16px);
+    opacity: 1;
+}
+
+.gift-popup-enter-active {
+    transition: all 1.2s ease-in-out;
+    transition-delay: 0.7s;
+}
+
+.gift-popup-leave-active {
+    transition: all 0.3s ease-in-out;
+}
+
+.gift-popup-enter-from {
+    backdrop-filter: blur(0px);
+    opacity: 0;
+}
+
+.gift-popup-enter-to {
+    backdrop-filter: blur(16px);
+    opacity: 1;
+}
+
+.gift-popup-leave-from {
+    backdrop-filter: blur(16px);
+    opacity: 1;
+}
+
+.gift-popup-leave-to {
     backdrop-filter: blur(0px);
     opacity: 0;
-    animation: gift-popup-bg 1.2s ease-in-out 0.7s forwards;
 }
 
 .dot {
@@ -1317,9 +787,7 @@ const showShareMask = ref(false);
         prompt-out 0.8s cubic-bezier(0.71, 0.13, 0.43, 2.5) 2s forwards;
 }
 
-.p-machine {
-    animation: warp-in 0.5s ease-out forwards;
-}
+
 
 .abs {
     position: absolute;
@@ -1330,43 +798,4 @@ const showShareMask = ref(false);
     pointer-events: none;
     opacity: 0;
 }
-
-.action {
-    display: flex;
-    position: absolute;
-    bottom: 19vw;
-    left: 50%;
-    transform: translateX(-50%);
-    gap: 2vw;
-
-    img {
-        flex: 1;
-        width: 28vw;
-        scale: 0;
-        animation: scale-in 0.4s ease-in-out forwards;
-    }
-}
-
-.poster-container {
-    /* 隐藏滚动条但保持滚动功能 */
-    scrollbar-width: none;
-    /* Firefox */
-    -ms-overflow-style: none;
-    /* IE and Edge */
-
-    &::-webkit-scrollbar {
-        display: none;
-        /* Chrome, Safari, Opera */
-    }
-}
-
-.poster-wrapper {
-    /* 确保滚动流畅 */
-    scroll-behavior: smooth;
-}
-
-.gui-ani-end-post {
-    /* 确保每个海报都能正确对齐 */
-    object-fit: contain;
-}
 </style>
diff --git a/src/pages/Game/ActionArea.vue b/src/pages/Game/ActionArea.vue
new file mode 100644
index 0000000..85ed167
--- /dev/null
+++ b/src/pages/Game/ActionArea.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, type Ref } from 'vue';
+
+const gPos: Ref<'left' | 'center' | 'right'> = ref('center');
+const gDeg = computed(() => ({
+    left: 294 - 360,
+    center: 326 - 360,
+    right: 8
+})[gPos.value]);
+
+const emit = defineEmits<{
+    (e: 'gToggle', pos: 'left' | 'center' | 'right'): void;
+}>();
+
+const pMachine = useTemplateRef('pMachine');
+
+function gToggle(pos: 'left' | 'center' | 'right') {
+    gPos.value = pos;
+    pMachine.value?.animate([
+        { scale: 1, },
+        { scale: 1.2, },
+        { scale: 1, },
+    ], {
+        duration: 200,
+        easing: 'ease-in-out',
+        fill: 'forwards',
+    });
+
+    emit('gToggle', pos);
+}
+
+defineExpose({
+    hide: () => {
+        (document.querySelector('.p-machine') as HTMLDivElement).style.animationDirection = 'reverse';
+        (document.querySelectorAll('.action img') as NodeListOf<HTMLImageElement>).forEach(img => {
+            img.style.animationDirection = 'reverse';
+        });
+    }
+});
+
+</script>
+
+
+<template>
+    <img src="../../assets/game/鼓风机.webp" class="abs p-machine" ref="pMachine"
+        style="bottom: -40%; width: 66vw; left: 17%; transform-origin: 50% 63%; transition: all 0.2s;"
+        :style="{ transform: `rotate(${gDeg}deg)` }" />
+    <div class="action">
+        <img draggable="false" :style="{ animationDelay: '0.1s' }" src="../../assets/game/左.webp" alt=""
+            @click="gToggle('left')">
+        <img draggable="false" :style="{ animationDelay: '0.2s' }" src="../../assets/game/中.webp" alt=""
+            @click="gToggle('center')">
+        <img draggable="false" :style="{ animationDelay: '0.0s' }" src="../../assets/game/右.webp" alt=""
+            @click="gToggle('right')">
+    </div>
+
+</template>
+
+<style lang="scss" scoped>
+.p-machine {
+    animation: warp-in 0.5s ease-out forwards;
+}
+
+.action {
+    display: flex;
+    position: absolute;
+    bottom: 19vw;
+    left: 50%;
+    transform: translateX(-50%);
+    gap: 2vw;
+
+    img {
+        flex: 1;
+        width: 28vw;
+        scale: 0;
+        animation: scale-in 0.4s ease-in-out forwards;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Game/GatheringCloud.vue b/src/pages/Game/GatheringCloud.vue
new file mode 100644
index 0000000..d7485f9
--- /dev/null
+++ b/src/pages/Game/GatheringCloud.vue
@@ -0,0 +1,260 @@
+<style scoped>
+.wecare-title {
+    scale: 0;
+}
+
+.icon-cloud img {
+    position: absolute;
+    width: 16vw;
+    transition: all 4s ease;
+    animation: scale-in 0.4s ease-in-out forwards;
+    transform: translate(-50%, -50%);
+    transform-origin: left top;
+    scale: 0;
+}
+</style>
+
+<template>
+
+    <div class="icon-cloud" style="position: absolute; left: 50%; top: 20%;" ref="icon-cloud">
+        <img v-for="icon in floatIcons" :src="icon.src" alt="" :style="{
+            top: `${icon.top}vw`,
+            left: `${icon.left}vw`,
+            animationDelay: `${icon.delay}ms`,
+        }">
+    </div>
+
+    <img src="../../assets/game/wecare标题.webp" alt="" class="abs wecare-title" style="width: 72%;left: 14%;top: 12%;"
+        ref="title-img">
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue';
+
+const iconCloud = useTemplateRef('icon-cloud');
+const titleImg = useTemplateRef('title-img');
+
+import assets from '../../assets';
+
+const giftList = assets.icons;
+
+
+defineExpose({
+    init: () => {
+        // 初始化时生成图标位置
+        floatIcons.value = generateIconPositions();
+    },
+    gather: async () => {
+        const finalPositions = simulateGatherIcons();
+        await new Promise(resolve => setTimeout(resolve, 0)); // 等待动画完成
+        floatIcons.value = finalPositions;
+
+    },
+    titleIn: async () => {
+        await iconCloud.value?.animate([
+            { scale: 1 },
+            { scale: 0 },
+        ], {
+            duration: 400,
+            easing: 'ease-in-out',
+            fill: 'forwards',
+        }).finished;
+        await titleImg.value?.animate([
+            { scale: 0 },
+            { scale: 1 },
+        ], {
+            duration: 400,
+            easing: 'ease-in-out',
+            fill: 'forwards',
+        }).finished;
+    },
+    titleOut: async () => {
+        await titleImg.value?.animate([
+            { scale: 1 },
+            { scale: 0 },
+        ], {
+            duration: 400,
+            easing: 'ease-in-out',
+            fill: 'forwards',
+        }).finished;
+    }
+});
+
+
+// 生成图标位置，确保之间距离不小于16
+const generateIconPositions = () => {
+    const icons = [...giftList, ...assets.metal];
+    const positions: Array<{ src: string; left: number; top: number; delay: number }> = [];
+    const minDistance = 16; // 最小距离
+    const maxAttempts = 100; // 防止无限循环的最大尝试次数
+
+    // 计算两点之间的距离
+    const getDistance = (pos1: { left: number; top: number }, pos2: { left: number; top: number }) => {
+        return Math.sqrt(Math.pow(pos1.left - pos2.left, 2) + Math.pow(pos1.top - pos2.top, 2));
+    };
+
+    // 检查位置是否与已有位置冲突
+    const isPositionValid = (newPos: { left: number; top: number }) => {
+        return positions.every(existingPos => getDistance(newPos, existingPos) >= minDistance);
+    };
+
+    icons.forEach((icon, index) => {
+        let attempts = 0;
+        let validPosition = false;
+        let newPosition: { left: number; top: number };
+
+        // 尝试生成不冲突的位置
+        while (!validPosition && attempts < maxAttempts) {
+            newPosition = {
+                left: Math.random() * 100 - 50, // 扩大范围以增加成功概率
+                top: Math.random() * 100 - 50
+            };
+
+            if (positions.length === 0 || isPositionValid(newPosition)) {
+                validPosition = true;
+                positions.push({
+                    src: icon[0],
+                    left: newPosition.left,
+                    top: newPosition.top,
+                    delay: index * 50
+                });
+            }
+            attempts++;
+        }
+
+        // 如果无法找到不冲突的位置，使用稍微宽松的条件
+        if (!validPosition) {
+            console.warn(`Could not find non-conflicting position for icon ${index}, using fallback position`);
+            positions.push({
+                src: icon[0],
+                left: Math.random() * 100 - 50,
+                top: Math.random() * 100 - 50,
+                delay: Math.random() * 5 + index * 0.5
+            });
+        }
+    });
+
+    return positions;
+};
+
+const floatIcons = ref(generateIconPositions());
+
+
+// 图标聚集模拟函数 - 返回最终位置而不实际移动
+const simulateGatherIcons = () => {
+    const moveSpeed = 0.5; // 移动速度
+    const minDistance = 16; // 最小距离
+    const centerTarget = { left: 0, top: 0 }; // 目标中心点
+    const threshold = 0.1; // 停止移动的阈值
+    const maxIterations = 1000; // 防止无限循环的最大迭代次数
+
+    // 创建位置副本用于模拟
+    const simulatedPositions = floatIcons.value.map(icon => ({
+        src: icon.src,
+        left: icon.left,
+        top: icon.top,
+        delay: icon.delay
+    }));
+
+    // 计算两点之间的距离
+    const getDistance = (pos1: { left: number; top: number }, pos2: { left: number; top: number }) => {
+        return Math.sqrt(Math.pow(pos1.left - pos2.left, 2) + Math.pow(pos1.top - pos2.top, 2));
+    };
+
+    // 检查位置是否与其他图标冲突
+    const isPositionValid = (newPos: { left: number; top: number }, currentIndex: number, positions: typeof simulatedPositions) => {
+        return positions.every((icon, index) => {
+            if (index === currentIndex) return true;
+            return getDistance(newPos, icon) >= minDistance;
+        });
+    };
+
+    // 向目标点移动，但避免碰撞
+    const moveTowardsTarget = (currentPos: { left: number; top: number }, targetPos: { left: number; top: number }, iconIndex: number, positions: typeof simulatedPositions) => {
+        const dx = targetPos.left - currentPos.left;
+        const dy = targetPos.top - currentPos.top;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < threshold) {
+            return currentPos; // 已经足够接近目标
+        }
+
+        // 计算移动方向的单位向量
+        const unitX = dx / distance;
+        const unitY = dy / distance;
+
+        // 计算新位置
+        const newPos = {
+            left: currentPos.left + unitX * moveSpeed,
+            top: currentPos.top + unitY * moveSpeed
+        };
+
+        // 检查新位置是否会产生碰撞
+        if (isPositionValid(newPos, iconIndex, positions)) {
+            return newPos;
+        } else {
+            // 如果会碰撞，尝试绕行
+            const angles = [Math.PI / 4, -Math.PI / 4, Math.PI / 2, -Math.PI / 2, 3 * Math.PI / 4, -3 * Math.PI / 4];
+
+            for (const angle of angles) {
+                const rotatedX = unitX * Math.cos(angle) - unitY * Math.sin(angle);
+                const rotatedY = unitX * Math.sin(angle) + unitY * Math.cos(angle);
+
+                const alternativePos = {
+                    left: currentPos.left + rotatedX * moveSpeed * 0.5,
+                    top: currentPos.top + rotatedY * moveSpeed * 0.5
+                };
+
+                if (isPositionValid(alternativePos, iconIndex, positions)) {
+                    return alternativePos;
+                }
+            }
+
+            // 如果所有方向都被阻挡，保持原位置
+            return currentPos;
+        }
+    };
+
+    // 模拟聚集过程
+    let iterations = 0;
+    while (iterations < maxIterations) {
+        let hasMovement = false;
+
+        // 创建新的位置数组
+        const newPositions = simulatedPositions.map((icon, index) => {
+            const oldPos = { left: icon.left, top: icon.top };
+            const newPos = moveTowardsTarget(oldPos, centerTarget, index, simulatedPositions);
+
+            // 检查是否有移动
+            if (Math.abs(newPos.left - oldPos.left) > threshold || Math.abs(newPos.top - oldPos.top) > threshold) {
+                hasMovement = true;
+            }
+
+            return {
+                ...icon,
+                left: newPos.left,
+                top: newPos.top
+            };
+        });
+
+        // 更新模拟位置
+        simulatedPositions.splice(0, simulatedPositions.length, ...newPositions);
+
+        // 如果没有移动，说明已经收敛
+        if (!hasMovement) {
+            console.log(`图标聚集模拟完成！迭代次数: ${iterations}`);
+            break;
+        }
+
+        iterations++;
+    }
+
+    if (iterations >= maxIterations) {
+        console.warn('图标聚集模拟达到最大迭代次数限制');
+    }
+
+    // 返回最终位置
+    return simulatedPositions;
+};
+
+</script>
\ No newline at end of file
diff --git a/src/pages/Game/LastPage.vue b/src/pages/Game/LastPage.vue
new file mode 100644
index 0000000..2c9f69d
--- /dev/null
+++ b/src/pages/Game/LastPage.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, useTemplateRef } from 'vue';
+import AniEle from '../../components/AniEle.vue';
+import assets from '../../assets';
+import AudioEffects from '../../assets/sounds'
+defineProps<{
+    userdata: {
+        region: string;
+        store: string;
+        username: string;
+    },
+    timeSpent: number;
+    fmtTime: (time: number) => string;
+}>();
+import QRCode from 'qrcode';
+const qrcodeUrl = ref('');
+
+QRCode.toDataURL(`https://arcteryx-game-demo.xn--876a.net`, {
+    width: 256,
+}).then(url => {
+    qrcodeUrl.value = url;
+}).catch(err => {
+    console.error('生成二维码失败:', err);
+});
+
+const posterP2Ele = useTemplateRef('gui-ani-end-post-p2');
+
+const emit = defineEmits(['resetGame', 'showShareMask']);
+
+const hasP2AnimationPlayed = ref(false);
+onMounted(() => {
+    // 在最后一页显示后设置 Intersection Observer 监听 p2 元素
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && !hasP2AnimationPlayed.value) {
+                // p2 进入视口且动画未播放过
+                hasP2AnimationPlayed.value = true;
+                posterP2Ele.value?.jumpTo('p2');
+                console.log('Poster P2 animation triggered');
+
+                // 停止观察，因为只需要触发一次
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.5, // 当 50% 的元素进入视口时触发
+        rootMargin: '0px'
+    });
+
+    // 观察 p2 元素
+    const p2Element = posterP2Ele.value?.$el;
+    if (p2Element) {
+        observer.observe(p2Element);
+        console.log('Started observing P2 element');
+    } else {
+        console.warn('P2 element not found');
+    }
+
+    // 8秒后如果用户没有看过p2，自动滚动到p2
+    setTimeout(() => {
+        if (!hasP2AnimationPlayed.value) {
+            console.log('Auto scrolling to P2 after 8 seconds');
+            const posterContainer = document.querySelector('.poster-container');
+            if (posterContainer) {
+                // 滚动到p2位置（第二个元素，占总宽度的50%）
+                posterContainer.scrollTo({
+                    left: posterContainer.scrollWidth * 0.5,
+                    behavior: 'smooth'
+                });
+            }
+        }
+    }, 8000); // 8秒 = 8000毫秒
+})
+</script>
+
+<template>
+    <div class="last-page"
+        style="z-index: 0;position: absolute; inset: 0;height: 100%; width: 100%; pointer-events: none;">
+        <AniEle :url="assets.ani.结尾主标" :width="925" :height="340"
+            :rules="[{ name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }]"
+            style="position: absolute;top: 13%;width: 80%;left: 11%; pointer-events:none;" ref="main-logo" />
+        <div class="poster-container"
+            style="position: absolute;top: 29.3%;left: 37.2%;width: 57.3%; height: 38%; overflow-x: auto; overflow-y: hidden; pointer-events: all; scroll-snap-type: x mandatory;">
+            <div class="poster-wrapper" style="display: flex; width: 200%; height: 100%; flex-direction: row;"
+                dir="ltr">
+                <AniEle :url="assets.ani.海报p1" ref="gui-ani-end-post-p1 "
+                    style="width: 50%; flex-shrink: 0; scroll-snap-align: start;" class="gui-ani-end-post" :height="940"
+                    :width="671" :rules="[
+                        { name: 'p1', frame: 32, loop: 1, pauseAfter: true, duration: 33 },
+                    ]" />
+                <AniEle :url="assets.ani.海报p2" ref="gui-ani-end-post-p2"
+                    style="width: 50%; flex-shrink: 0; scroll-snap-align: start;" class="gui-ani-end-post" :height="940"
+                    :width="671" :rules="[
+                        { name: 'wait', frame: 1, loop: 1, pauseAfter: true, duration: 33 },
+                        { name: 'p2', frame: 31, loop: 1, pauseAfter: true, duration: 33 },
+                    ]" />
+            </div>
+        </div>
+        <AniEle :url="assets.ani.线" ref="gui-ani-end" class="gui-ani-end" :height="2462" :width="1179" :rules="[
+            { name: 'all', frame: 54, loop: 1, pauseAfter: false, duration: 16 },
+        ]" style="width: 100%; height: auto;position: absolute;inset: 0;pointer-events: none;" />
+        <img src="../../assets/game/床.webp" alt="" class="abs last-bed" style="width: 66vw;bottom: -19%;left: 17%;">
+
+        <img src="../../assets/game/分享海报.webp" alt="" class="abs" @click="AudioEffects.play('按钮音效'); emit('showShareMask')"
+            style="width: 34vw;bottom: -19%;left: 15%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; pointer-events: all;">
+        <img src="../../assets/game/再玩一次.webp" alt="" class="abs" @click="AudioEffects.play('按钮音效'); emit('resetGame')"
+            style="width: 34vw;bottom: -19%;left: 51%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; animation-delay: 200ms; pointer-events: all;">
+
+        <div class="time-spent abs" style="left: 10%; top:44%;width: 24%;height: 23%; display: flex;
+            align-items: center; flex-direction: column;">
+            <div class="line-1"
+                style="display: flex; align-items: center; gap: 1vw; animation: line-in 0.5s ease-out 0.6s forwards;transform: translateX(-210%);">
+                <div class="username" style="font-size: 2.9vw;">{{
+                    userdata.username }}</div>
+                <div class="cost-info"
+                    style="font-size: 2.9vw; color: white; display: flex;align-items: center;justify-content: center;background-color: black;padding: 0 1.2vw; height: 4.5vw; border-radius: 4vw;">
+                    用时</div>
+            </div>
+
+            <div class="time"
+                style="font-size: 10vw;animation: line-in 0.5s ease-out 0.8s forwards;transform: translateX(-210%);">
+                {{ fmtTime(timeSpent / 1000) }}</div>
+
+            <img :src="qrcodeUrl" alt=""
+                style="width: 100%;bottom:7%;position: absolute;animation: line-in 0.5s ease-out 1s forwards;transform: translateX(-210%);">
+        </div>
+
+        <div class="region-area abs" style="left: 10%; top:30%;width: 24%;height: 10%;gap:2vw; display: flex;animation: line-in 0.5s ease-out 0.4s forwards;transform: translateX(-210%);
+            align-items: center; flex-direction: column;justify-content: center;">
+            <div class="region"
+                style="width: 20vw; background-color: white;font-size: 3vw;text-align: center;height: 5.2vw;line-height: 5.2vw; border-radius: 4.5vw;">
+                {{ userdata.region }}</div>
+            <div class="store" style="font-size: 2.9vw; color: gray;">{{
+                userdata.store }}</div>
+        </div>
+
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.poster-container {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.poster-wrapper {
+    scroll-behavior: smooth;
+}
+
+.gui-ani-end-post {
+    object-fit: contain;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Game/Quiz.vue b/src/pages/Game/Quiz.vue
new file mode 100644
index 0000000..0a5abc5
--- /dev/null
+++ b/src/pages/Game/Quiz.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import assets from '../../assets';
+import AniEle from '../../components/AniEle.vue';
+
+</script>
+
+<template>
+    <AniEle :url="assets.ani.答题标题" :width="1000" :height="500" :rules="[
+        { name: 'main', frame: 60, duration: 33, loop: 1, pauseAfter: true, reverse: false }
+    ]" />
+</template>
\ No newline at end of file
diff --git a/src/pages/Game/ScoreBoard.vue b/src/pages/Game/ScoreBoard.vue
new file mode 100644
index 0000000..8d3cfb4
--- /dev/null
+++ b/src/pages/Game/ScoreBoard.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+defineProps<{
+    leaderBoard: Array<{
+        name: string;
+        time: number;
+        region: string;
+        store?: string;
+    }>;
+    fmtTime: (time: number) => string;
+}>();
+
+</script>
+
+<template>
+    <div class="scoreboard">
+        <div class="bar-container">
+            <div class="bar" v-for="(item, index) in [leaderBoard[1], leaderBoard[0], leaderBoard[2]]" :key="index"
+                :class="{
+                    'first': index === 1, 'second': index === 0, 'third': index === 2
+                }">
+                <div class="name">{{ item.name }}</div>
+                <div class="time">{{ fmtTime(item.time) }}</div>
+                <div class="region">{{ item.region }}</div>
+                <div class="store">{{ item.store }}</div>
+            </div>
+        </div>
+        <div class="lines">
+            <div class="line" v-for="(item, index) in leaderBoard.slice(3, 7)" :key="index"
+                :style="{ animationDelay: index * 100 + 400 + 'ms' }">
+                <div class="rank">{{ index + 4 }}</div>
+                <div class="name">{{ item.name }}</div>
+                <div class="time">{{ fmtTime(item.time) }}</div>
+                <div class="region">{{ item.region }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+.scoreboard {
+    position: absolute;
+    top: 44%;
+    width: 100%;
+
+    .bar-container {
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        gap: 2vw;
+    }
+
+    .bar {
+        position: relative;
+        height: 60vw;
+        width: 26vw;
+        background-size: contain;
+        background-repeat: no-repeat;
+        mask-image: linear-gradient(to bottom, black, black, transparent);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.5vw;
+        animation: bar-in 0.7s ease-out forwards;
+        transform: translateY(150%);
+
+        .name {
+            font-size: 4.5vw;
+        }
+
+        .time {
+            font-size: 3vw;
+        }
+
+        .region {
+            font-size: 3vw;
+            color: white;
+            background-color: #7EA0CA;
+            padding: 0 2vw;
+            border-radius: 2vw;
+        }
+
+        .store {
+            max-width: 13vw;
+            text-align: center;
+            font-size: 2.4vw;
+            color: gray;
+        }
+
+        &.first {
+            top: 3vw;
+            background-image: url('../../assets/game/first.webp');
+            animation-delay: 0ms;
+        }
+
+        &.second {
+            background-image: url('../../assets/game/second.webp');
+            animation-delay: 250ms;
+            top: 9vw;
+        }
+
+        &.third {
+            background-image: url('../../assets/game/third.webp');
+            animation-delay: 500ms;
+            top: 9vw;
+        }
+    }
+
+    .lines {
+        display: flex;
+        position: relative;
+        top: -5vw;
+        flex-direction: column;
+        align-items: center;
+        gap: 1vw;
+
+        .line {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 80%;
+            font-size: 3.2vw;
+            background-color: #FFFFFF;
+            padding: 0 2vw;
+            height: 8vw;
+            border-radius: 8vw;
+            animation: line-in 0.5s ease-out forwards;
+            transform: translateX(-150%);
+
+            .rank {
+                // italic
+                font-style: italic;
+                flex: 1;
+                font-size: 4vw;
+                text-align: center;
+                color: #7EA0CA;
+            }
+
+            .name {
+                flex: 2;
+                text-align: center;
+                border-right: .35vw solid black;
+            }
+
+            .time {
+                flex: 2;
+                text-align: center;
+                border-right: .35vw solid black;
+            }
+
+            .region {
+                flex: 2;
+                color: gray;
+                text-align: center;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file