diff --git a/src/assets/game/烟花.png b/src/assets/game/烟花.png deleted file mode 100644 index 68e038f..0000000 Binary files a/src/assets/game/烟花.png and /dev/null differ diff --git a/src/assets/icons/bigicon2.webp b/src/assets/icons/bigicon2.webp index cd37e4e..bba0e37 100644 Binary files a/src/assets/icons/bigicon2.webp and b/src/assets/icons/bigicon2.webp differ diff --git a/src/assets/icons/bigicon4.webp b/src/assets/icons/bigicon4.webp index 0d66a85..79f5e16 100644 Binary files a/src/assets/icons/bigicon4.webp and b/src/assets/icons/bigicon4.webp differ diff --git a/src/assets/icons/bigicon5.webp b/src/assets/icons/bigicon5.webp index 8392bc7..2ee48d6 100644 Binary files a/src/assets/icons/bigicon5.webp and b/src/assets/icons/bigicon5.webp differ diff --git a/src/assets/icons/bigicon8.webp b/src/assets/icons/bigicon8.webp index 80bba23..e293642 100644 Binary files a/src/assets/icons/bigicon8.webp and b/src/assets/icons/bigicon8.webp differ diff --git a/src/data/index.ts b/src/data/index.ts index 2799502..c3b795e 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -471,7 +471,7 @@ export interface QuizQuestion { answers: string[]; // 正确答案（单选也使用数组，方便统一处理） } -// ARC Retail 弹性福利平台答题竞赛题库 +// ARC Retail 弹性福利平台答题竞赛题库 (更新版) export const arcRetailQuiz: QuizQuestion[] = [ // --- 一、单选题 --- { @@ -491,19 +491,19 @@ export const arcRetailQuiz: QuizQuestion[] = [ type: 'single', question: '弹性福利平台上线后，健康福利的变化是？', options: [ - '只能选体检', - '可在体检和牙齿清洁中自主选择', - '同时免费领体检 + 洁牙', + '只有体检项目', + '可在体检和洁牙中自主选择', + '享有中医理疗', '取消健康福利', ], - answers: ['可在体检和牙齿清洁中自主选择'], + answers: ['可在体检和洁牙中自主选择'], }, { id: 3, type: 'single', question: '员工想知道自己有多少福利积分，最便捷的方式是？', options: [ - '每月找 HR 查', + '店经理告知', '登录弹性福利平台实时查看', '等年底邮件通知', '问同事打听', @@ -513,15 +513,15 @@ export const arcRetailQuiz: QuizQuestion[] = [ { id: 4, type: 'single', - question: '以下哪项是 2025 年 新增 的福利兑换项目？', - options: ['节日礼品', '员工洁牙', '法定社保', '商业保险'], - answers: ['员工洁牙'], + question: '以下哪项是弹性福利平台上线后，新增的福利项目？', + options: ['节日礼品', '员工洁牙卡', '法定社保', '商业保险'], + answers: ['员工洁牙卡'], }, { id: 5, type: 'single', - question: '福利积分 主要通过什么方式获取？', - options: ['日常加班', '参与景仰计划', '绩效满分', '达成销售业绩'], + question: '福利积分通过什么方式获取？', + options: ['公益活动', '参与景仰计划', '绩效满分', '达成销售业绩'], answers: ['参与景仰计划'], }, { @@ -536,12 +536,12 @@ export const arcRetailQuiz: QuizQuestion[] = [ type: 'single', question: '如果觉得近期压力大，心情低落，哪一项解决路径是公司平台提供的？', options: [ - '可以求助公司专业的EAP服务', + '可以求助公司专业的EAP服务 （员工360关爱计划）', '和朋友吐苦水', '大吃大喝', '睡一觉', ], - answers: ['可以求助公司专业的EAP服务'], + answers: ['可以求助公司专业的EAP服务 （员工360关爱计划）'], }, { id: 8, diff --git a/src/pages/Game.vue b/src/pages/Game.vue index 2e0acf5..4dccf9e 100644 --- a/src/pages/Game.vue +++ b/src/pages/Game.vue @@ -69,56 +69,12 @@ 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": "深圳湾万象城" - }, - { - "name": "Elena2", - "time": 122.4, - "region": "大南区", - "store": "深圳湾万象城" - }, - { - "name": "Elena3", - "time": 122.7, - "region": "大南区", - "store": "深圳湾万象城" - } -]) +const leaderBoard = ref(Array(8).fill({ + name: 'Loading...', + time: 0, + region: 'Loading...', + store: 'Loading...' +})); // 初始加载时的占位数据 const showTitleIcon = ref(true) async function shoot() { @@ -238,7 +194,7 @@ function gameLoop(currentTime = 0) { await wait(500); sunPos.value[1] = 124; - await wait(0); + await wait(100); transitionOn.value = true; while (sunPos.value[1] > 66) { sunPos.value[1] -= SPEED * (deltaTime / 16.67) * 6; @@ -417,6 +373,10 @@ async function gameEnd() { easing: 'ease-in-out', fill: 'forwards', }).finished + .then(() => { + sunEndEle.value?.jumpTo('进入'); + showEndAni.value = true; + }); gameState.value = GAME_STATE.gameEnd; @@ -427,12 +387,6 @@ async function gameEnd() { showTitleIcon.value = false; }); - await wait(1800) - - showEndAni.value = true; - - sunEndEle.value?.jumpTo('进入'); - } async function startQuiz() { @@ -527,8 +481,15 @@ async function handleFinishQuiz(time: number, choices: ('none' | 'selected' | 'c }).then(_ => { fetch('/api/score', { headers: { 'Content-Type': 'application/json' } - }).then(res => res.json()).then(data => leaderBoard.value = data); - }) + }).then(res => res.json()).then(data => leaderBoard.value = data) + .catch(err => { + console.error('Error fetching leaderboard:', err); + alert('获取排行榜失败，请稍后再试。' + err.message); + }); + }).catch(err => { + console.error('Error submitting score:', err); + alert('提交分数失败，请稍后再试。' + err.message); + }); await wait(1500); sunEndEle.value?.jumpTo('向上进入') @@ -601,22 +562,23 @@ window.addEventListener('keydown', (e) => {
- +
diff --git a/src/pages/Game/LastPage.vue b/src/pages/Game/LastPage.vue index c84e17d..82d245b 100644 --- a/src/pages/Game/LastPage.vue +++ b/src/pages/Game/LastPage.vue @@ -22,23 +22,25 @@ QRCode.toDataURL(`https://arcteryx-game-demo.xn--876a.net`, { console.error('生成二维码失败:', err); }); +const posterP1Ele = useTemplateRef('gui-ani-end-post-p1'); const posterP2Ele = useTemplateRef('gui-ani-end-post-p2'); const emit = defineEmits(['resetGame', 'showShareMask']); const hasP2AnimationPlayed = ref(false); +const currentPosterIndex = ref(0); + onMounted(() => { // 在最后一页显示后设置 Intersection Observer 监听 p2 元素 const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { - if (entry.isIntersecting && !hasP2AnimationPlayed.value) { - // p2 进入视口且动画未播放过 + if (entry.isIntersecting) { + currentPosterIndex.value = 1; // p2 进入视口 + + if (hasP2AnimationPlayed.value) return hasP2AnimationPlayed.value = true; posterP2Ele.value?.jumpTo('p2'); console.log('Poster P2 animation triggered'); - - // 停止观察，因为只需要触发一次 - observer.unobserve(entry.target); } }); }, { @@ -46,7 +48,7 @@ onMounted(() => { rootMargin: '0px' }); - // 观察 p2 元素 + const p1Element = posterP1Ele.value?.$el; const p2Element = posterP2Ele.value?.$el; if (p2Element) { observer.observe(p2Element); @@ -55,21 +57,45 @@ onMounted(() => { console.warn('P2 element not found'); } + const observerP1 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + currentPosterIndex.value = 0; // p1 进入视口 + } + }); + }, { + threshold: 0.5, // 当 50% 的元素进入视口时触发 + rootMargin: '0px' + }); + + if (p1Element) { + observerP1.observe(p1Element); + console.log('Started observing P1 element'); + } else { + console.warn('P1 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' - }); - } + scrollToPoster(1); // 滚动到 p2 } }, 8000); // 8秒 = 8000毫秒 }) + +function scrollToPoster(index: number) { + const posterContainer = document.querySelector('.poster-container'); + if (posterContainer) { + // 滚动到p2位置（第二个元素，占总宽度的50%） + posterContainer.scrollTo({ + left: posterContainer.scrollWidth * 0.5 *index, + behavior: 'smooth' + }); + } + +} \ No newline at end of file diff --git a/src/pages/Page1.vue b/src/pages/Page1.vue index 8c50a6c..9708036 100644 --- a/src/pages/Page1.vue +++ b/src/pages/Page1.vue @@ -524,8 +524,8 @@ img { } .store-list-container { - margin-bottom: 12vw; - height: 35vh; + margin-bottom: 10vw; + height: 60vw; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);