refact game.vue

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: '奥莱',

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

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;

src/data/index.ts

@@ -461,3 +461,172 @@ export const regions: RegionData = {
     }
   ]
 }
+
+// 定义题目对象的接口，以确保数据类型的一致性
+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）',
+    ],
+  },
+];

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>

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>

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>

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>

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>