0819-eve-1

src/pages/Game/LastPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, useTemplateRef } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import AniEle from '../../components/AniEle.vue';
 import assets from '../../assets';
 import AudioEffects from '../../assets/sounds'
@@ -29,6 +29,39 @@ const emit = defineEmits(['resetGame', 'showShareMask']);
 
 const hasP2AnimationPlayed = ref(false);
 const currentPosterIndex = ref(0);
+const autoScrollTimer = ref<NodeJS.Timeout | null>(null);
+const isUserInteracting = ref(false);
+
+// 开始自动轮播计时器
+function startAutoScroll() {
+    if (autoScrollTimer.value) {
+        clearTimeout(autoScrollTimer.value);
+    }
+    
+    autoScrollTimer.value = setTimeout(() => {
+        if (!isUserInteracting.value) {
+            // 自动切换到下一个海报
+            const nextIndex = currentPosterIndex.value === 0 ? 1 : 0;
+            scrollToPoster(nextIndex);
+            // 继续下一轮自动切换
+            startAutoScroll();
+        }
+    }, 5000); // 5秒
+}
+
+// 重置自动轮播计时器
+function resetAutoScroll() {
+    isUserInteracting.value = true;
+    if (autoScrollTimer.value) {
+        clearTimeout(autoScrollTimer.value);
+    }
+    
+    // 1秒后重新开始自动轮播
+    setTimeout(() => {
+        isUserInteracting.value = false;
+        startAutoScroll();
+    }, 1000);
+}
 
 onMounted(() => {
     // 在最后一页显示后设置 Intersection Observer 监听 p2 元素
@@ -75,26 +108,42 @@ onMounted(() => {
         console.warn('P1 element not found');
     }
 
-    // 8秒后如果用户没有看过p2，自动滚动到p2
+    // 开始自动轮播
-    setTimeout(() => {
+    startAutoScroll();
-        if (!hasP2AnimationPlayed.value) {
+
-            console.log('Auto scrolling to P2 after 8 seconds');
+    // 添加海报容器的触摸和滚动事件监听
     const posterContainer = document.querySelector('.poster-container');
-            scrollToPoster(1); // 滚动到 p2
+    if (posterContainer) {
+        posterContainer.addEventListener('touchstart', resetAutoScroll);
+        posterContainer.addEventListener('scroll', resetAutoScroll);
+        posterContainer.addEventListener('mousedown', resetAutoScroll);
+    }
+})
+
+onUnmounted(() => {
+    // 清理定时器
+    if (autoScrollTimer.value) {
+        clearTimeout(autoScrollTimer.value);
     }
-    }, 8000); // 8秒 = 8000毫秒
 })
 
 function scrollToPoster(index: number) {
+    currentPosterIndex.value = index;
     const posterContainer = document.querySelector('.poster-container');
     if (posterContainer) {
-        // 滚动到p2位置（第二个元素，占总宽度的50%）
+        // 滚动到指定位置
         posterContainer.scrollTo({
             left: posterContainer.scrollWidth * 0.5 * index,
             behavior: 'smooth'
         });
-    }
         
+        // 如果滚动到p2且还没播放动画，则播放动画
+        if (index === 1 && !hasP2AnimationPlayed.value) {
+            hasP2AnimationPlayed.value = true;
+            posterP2Ele.value?.jumpTo('p2');
+            console.log('Poster P2 animation triggered by scroll');
+        }
+    }
 }
 </script>
 
@@ -111,19 +160,19 @@ function scrollToPoster(index: number) {
                 <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 },
+                        { 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="[
                         { name: 'wait', frame: 1, loop: 1, pauseAfter: true, duration: 33 },
-                        { name: 'p2', frame: 31, 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)" :class="{ active: currentPosterIndex === 0 }"></div>
+            <div class="dot-item" @click="scrollToPoster(0); resetAutoScroll();" :class="{ active: currentPosterIndex === 0 }"></div>
-            <div class="dot-item" @click="scrollToPoster(1)" :class="{ active: currentPosterIndex === 1 }"></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 },

src/pages/Game/Quiz.vue

@@ -164,6 +164,7 @@ const confirmState = ref<'none' | 'confirmed'>('none');
                         </div>
                     </div>
                 </div>
+                <div class="quiz-progress-text">答题进度 {{ qIndex + 1 }} / {{ total }}</div>
                 <div class="quiz-progress dot">
                     <div class="dot-item" v-for="(val, i) in Array.from({ length: total })" :key="i" @click="qIndex = i"
                         :class="{ active: i <= qIndex }"></div>
@@ -396,6 +397,12 @@ const confirmState = ref<'none' | 'confirmed'>('none');
     height: 2vw;
 }
 
+.quiz-progress-text{
+    position: absolute;
+    bottom: 11.5%;
+    font-size: 3.1vw;
+}
+
 .dot .dot-item {
     background-color: #E2ECF9;