feie9454/arcteryx-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0821-morning

Browse Source
This commit is contained in:
feie9456 2025-08-21 07:59:22 +08:00
parent 21f8a72184
commit 71408adce9
1 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/pages/Game/LastPage.vue
View File

@ -37,7 +37,7 @@ function startAutoScroll() {
if (autoScrollTimer.value) {
clearTimeout(autoScrollTimer.value);
}
autoScrollTimer.value = setTimeout(() => {
if (!isUserInteracting.value) {
// 自动切换到下一个海报
@ -55,7 +55,7 @@ function resetAutoScroll() {
if (autoScrollTimer.value) {
clearTimeout(autoScrollTimer.value);
}
// 1秒后重新开始自动轮播
setTimeout(() => {
isUserInteracting.value = false;
@ -109,7 +109,12 @@ onMounted(() => {
}
// 开始自动轮播
startAutoScroll();
setTimeout(() => {
scrollToPoster(1);
startAutoScroll();
}, 2000);
// 添加海报容器的触摸和滚动事件监听
const posterContainer = document.querySelector('.poster-container');
@ -136,7 +141,7 @@ function scrollToPoster(index: number) {
left: posterContainer.scrollWidth * 0.5 * index,
behavior: 'smooth'
});
// 如果滚动到p2且还没播放动画，则播放动画
if (index === 1 && !hasP2AnimationPlayed.value) {
hasP2AnimationPlayed.value = true;
@ -152,37 +157,46 @@ function scrollToPoster(index: number) {
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" />
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;"
<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="[
style="width: 50%; flex-shrink: 0; scroll-snap-align: start;"
class="gui-ani-end-post" :height="940" :width="671" :rules="[
{ name: 'p1', frame: 22, 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="[
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: 20, loop: 1, pauseAfter: true, duration: 33 },
]" />
</div>
</div>
<div class="dot" style="position: absolute;top: 29.3%;left: 37.2%;width: 57.3%; height: 38%; ">
<div class="dot-item" @click="scrollToPoster(0); resetAutoScroll();" :class="{ active: currentPosterIndex === 0 }"></div>
<div class="dot-item" @click="scrollToPoster(1); resetAutoScroll();" :class="{ active: currentPosterIndex === 1 }"></div>
<div class="dot"
style="position: absolute;top: 29.3%;left: 37.2%;width: 57.3%; height: 38%; ">
<div class="dot-item" @click="scrollToPoster(0); resetAutoScroll();"
:class="{ active: currentPosterIndex === 0 }"></div>
<div class="dot-item" @click="scrollToPoster(1); resetAutoScroll();"
:class="{ active: currentPosterIndex === 1 }"></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%;">
<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')"
<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;">
@ -206,7 +220,8 @@ function scrollToPoster(index: number) {
style="width: 100%;bottom:7%;position: absolute;animation: line-in 0.5s ease-out 1s forwards;transform: translateX(-230%);">
</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(-230%);
<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(-230%);
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;">