components/ChongwenScene.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
+const emit = defineEmits(['collect-seal'])
 
 // 是否收集福印
 const sealCollected = ref(false)
@@ -67,13 +67,11 @@ const openWebview = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
-  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
-  emit('video-close')
 }
 
 // 页面挂载时的初始化

components/DongzhimenScene.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
+const emit = defineEmits(['collect-seal'])
 
 // sq3图片显示状态
 const sq3ImageVisible = ref(false)
@@ -478,13 +478,11 @@ const resetDuckPosition = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
-  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
-  emit('video-close')
 }
 
 // 预加载图片

components/EndPage.vue

@@ -293,14 +293,11 @@ onMounted(() => {
 
 .end-buttons {
   display: flex;
+  gap: 20px;
   justify-content: center;
   margin-bottom: 60px;
 }
 
-.end-buttons .function-image:not(:last-child) {
-  margin-right: 20px;
-}
-
 .function-btn {
   cursor: pointer;
   width: 306rpx;

components/LoadingComponent.vue

@@ -137,7 +137,6 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   z-index: 9999;
-  background-color: #fd4336;
 }
 
 .loading-bg {

components/LongfusiScene.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
+const emit = defineEmits(['collect-seal'])
 
 // sq3图片显示状态
 const sq3ImageVisible = ref(false)
@@ -108,13 +108,11 @@ const closeGallery = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
-  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
-  emit('video-close')
 }
 
 // 页面挂载时的初始化

components/QianmenScene.vue

@@ -19,28 +19,19 @@ const props = defineProps({
   videoUrl: {
     type: String,
     default: ''
-  },
-  // 全局BGM播放状态
-  isMusicPlaying: {
-    type: Boolean,
-    default: false
   }
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal', 'height-changed', 'video-open', 'video-close', 'pause-bgm', 'resume-bgm'])
+const emit = defineEmits(['collect-seal', 'height-changed'])
 
 // 是否收集福印
 const sealCollected = ref(false)
 
-// 音乐播放状态（由父组件控制）
+// 音乐播放状态
+const isMusicPlaying = ref(false)
 const musicPlayer = ref(null)
 
-// 鼓声音频状态
-const isDrumPlaying = ref(false)
-const drumPlayer = ref(null)
-const wasBgPlayingBeforeDrum = ref(false)
-
 // 福字点击区域状态
 const sq1ImageVisible = ref(false)
 // 视频播放状态
@@ -88,7 +79,7 @@ const parallaxOffset = computed(() => {
   return offset
 })
 
-// 控制鼓声播放/暂停
+// 控制音乐播放/暂停
 const toggleMusic = () => {
   // 第一次点击音乐按钮时收集福印
   if (!sealCollected.value) {
@@ -97,48 +88,38 @@ const toggleMusic = () => {
     emit('collect-seal')
   }
   
-  if (!drumPlayer.value) {
+  if (!musicPlayer.value) {
-    // 创建鼓声音频对象
+    // 创建音频对象
-    drumPlayer.value = uni.createInnerAudioContext()
+    musicPlayer.value = uni.createInnerAudioContext()
-    const drumUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
+    const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
-    drumPlayer.value.src = drumUrl.href
+    musicPlayer.value.src = bgmUrl.href
-    drumPlayer.value.loop = false
+    musicPlayer.value.loop = false
     
     // 监听播放结束
-    drumPlayer.value.onEnded(() => {
+    musicPlayer.value.onEnded(() => {
-      isDrumPlaying.value = false
+      isMusicPlaying.value = false
-      // 恢复BGM播放状态
-      emit('resume-bgm')
     })
     
     // 监听错误
-    drumPlayer.value.onError((err) => {
+    musicPlayer.value.onError((err) => {
-      console.error('鼓声播放失败:', err)
+      console.error('音乐播放失败:', err)
-      isDrumPlaying.value = false
+      isMusicPlaying.value = false
-      // 恢复BGM播放状态
+      showToast({
-      emit('resume-bgm')
+        message: '音乐播放失败',
-      uni.showToast({
+        icon: 'error',
-        title: '鼓声播放失败',
-        icon: 'none',
         duration: 1500
       })
     })
   }
   
-  if (isDrumPlaying.value) {
+  if (isMusicPlaying.value) {
     // 正在播放，点击后停止
-    drumPlayer.value.stop()
+    musicPlayer.value.stop()
-    isDrumPlaying.value = false
+    isMusicPlaying.value = false
-    // 恢复BGM播放状态
-    emit('resume-bgm')
   } else {
-    // 保存BGM状态
+    // 未播放，点击后开始播放
-    wasBgPlayingBeforeDrum.value = props.isMusicPlaying
+    musicPlayer.value.play()
-    // 暂停BGM
+    isMusicPlaying.value = true
-    emit('pause-bgm')
-    // 播放鼓声
-    drumPlayer.value.play()
-    isDrumPlaying.value = true
   }
 }
 
@@ -174,23 +155,12 @@ const calculateHeight = () => {
 
 // 打开视频播放器
 const openVideoPlayer = () => {
-  // 如果鼓声正在播放，停止鼓声
-  if (isDrumPlaying.value && drumPlayer.value) {
-    drumPlayer.value.stop()
-    isDrumPlaying.value = false
-    drumPlayer.value.destroy()
-    drumPlayer.value = null
-    // 恢复BGM播放状态
-    emit('resume-bgm')
-  }
   showVideoPlayer.value = true
-  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
-  emit('video-close')
 }
 
 // 组件卸载时清理
@@ -200,11 +170,6 @@ onUnmounted(() => {
     musicPlayer.value.destroy()
     musicPlayer.value = null
   }
-  if (drumPlayer.value) {
-    drumPlayer.value.stop()
-    drumPlayer.value.destroy()
-    drumPlayer.value = null
-  }
 })
 </script>
 
@@ -216,13 +181,22 @@ onUnmounted(() => {
       <img src="/static/bg/bg1.jpg" alt="前门商圈" class="background-image" />
     </div>
     
+    <!-- 增强动效层 -->
+    <div class="enhancement-layer">
+      <!-- 灯笼增强动效 -->
+      <div class="lanterns">
+        <div class="lantern left-lantern">🏮</div>
+        <div class="lantern right-lantern">🏮</div>
+      </div>
+    </div>
+  
     <!-- 音乐控制按钮 -->
     <div class="music-control" @click="toggleMusic">
       <img 
-        :src="isDrumPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png' " 
+        :src="isMusicPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png'" 
         alt="音乐控制" 
         class="music-icon"
-        :class="{ 'playing': isDrumPlaying }"
+        :class="{ 'playing': isMusicPlaying }"
       />
     </div>
     

components/SinglePageContainer.vue

@@ -117,10 +117,6 @@ const scenes = ref([
 const sceneInteractiveStates = ref(scenes.value.map(() => false))
 // 福印收集状态
 const sealCollectedStates = ref(scenes.value.map(() => false))
-// 视频播放状态
-const isVideoPlaying = ref(false)
-// 鼓声播放状态
-const isDrumPlaying = ref(false)
 
 // 计算当前收集的物品
 const collectedItems = computed(() => {
@@ -144,11 +140,6 @@ const collectionProgress = computed(() => {
   return Math.round((collected / total) * 100)
 })
 
-// 计算是否禁用BGM控制按钮
-const isBgmButtonDisabled = computed(() => {
-  return isVideoPlaying.value || isDrumPlaying.value
-})
-
 // 计算福印收集对象（传递给 EndPage）
 const collectedSeals = computed(() => {
   return {
@@ -243,12 +234,6 @@ const handleStart = () => {
   hasScrolled.value = false
   console.log('点击开始按钮，hasScrolled:', hasScrolled.value)
   
-  // 检查并播放背景音乐
-  if (!isMusicPlaying.value) {
-    console.log('背景音乐未播放，开始播放')
-    toggleMusic()
-  }
-  
   // 初始化页面
   initPage()
 }
@@ -334,9 +319,6 @@ const initMusicPlayer = () => {
 
 // 播放/暂停音乐
 const toggleMusic = () => {
-  // 如果按钮被禁用，不处理点击
-  if (isBgmButtonDisabled.value) return
-  
   if (!audioPlayer.value) {
     initMusicPlayer()
   }
@@ -348,27 +330,9 @@ const toggleMusic = () => {
     console.log('音乐已暂停')
   } else {
     // 播放音乐
-    try {
+    audioPlayer.value.play()
-      const result = audioPlayer.value.play()
-      // 检查play()方法是否返回Promise（Web平台）
-      if (result && typeof result.then === 'function') {
-        // Web平台：使用Promise处理
-        result.then(() => {
     isMusicPlaying.value = true
     console.log('音乐已开始播放')
-        }).catch(error => {
-          console.error('音乐播放失败（需要用户交互）:', error)
-          // 不更新isMusicPlaying状态，保持为false
-        })
-      } else {
-        // 其他平台：同步处理
-        isMusicPlaying.value = true
-        console.log('音乐已开始播放')
-      }
-    } catch (error) {
-      console.error('音乐播放失败（需要用户交互）:', error)
-      // 不更新isMusicPlaying状态，保持为false
-    }
   }
 }
 
@@ -379,8 +343,10 @@ onMounted(() => {
   // 初始化音乐播放器
   initMusicPlayer()
   
-  // 移除自动播放音乐的代码，避免触发浏览器自动播放限制
+  // 自动开始播放音乐
-  // 音乐将在用户点击开始按钮或音乐控制按钮时播放
+  setTimeout(() => {
+    toggleMusic()
+  }, 1000)
 })
 
 // 处理滚动事件（从下往上滑动）
@@ -611,105 +577,6 @@ const handleQianmenHeightChanged = (height) => {
   console.log('当前CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--scene-height'))
 }
 
-// 跟踪视频打开前的BGM状态
-const wasMusicPlayingBeforeVideo = ref(false)
-
-// 跟踪鼓声开始前的BGM状态
-const wasMusicPlayingBeforeDrum = ref(false)
-
-// 处理视频打开事件
-const handleVideoOpen = () => {
-  // 标记视频正在播放
-  isVideoPlaying.value = true
-  
-  // 保存原始BGM状态
-  wasMusicPlayingBeforeVideo.value = isMusicPlaying.value
-  
-  // 停止全局BGM播放
-  if (audioPlayer.value && isMusicPlaying.value) {
-    audioPlayer.value.pause()
-    isMusicPlaying.value = false
-    console.log('全局BGM已停止（视频播放中）')
-  }
-}
-
-// 处理视频关闭事件
-const handleVideoClose = () => {
-  // 标记视频已停止播放
-  isVideoPlaying.value = false
-  
-  // 恢复全局BGM到原始状态
-  if (audioPlayer.value && wasMusicPlayingBeforeVideo.value && !isMusicPlaying.value) {
-    try {
-      const result = audioPlayer.value.play()
-      // 检查play()方法是否返回Promise（Web平台）
-      if (result && typeof result.then === 'function') {
-        // Web平台：使用Promise处理
-        result.then(() => {
-          isMusicPlaying.value = true
-          console.log('全局BGM已恢复播放（视频已关闭）')
-        }).catch(error => {
-          console.error('BGM恢复播放失败（需要用户交互）:', error)
-          // 不更新isMusicPlaying状态，保持为false
-        })
-      } else {
-        // 其他平台：同步处理
-        isMusicPlaying.value = true
-        console.log('全局BGM已恢复播放（视频已关闭）')
-      }
-    } catch (error) {
-      console.error('BGM恢复播放失败（需要用户交互）:', error)
-      // 不更新isMusicPlaying状态，保持为false
-    }
-  }
-}
-
-// 暂停BGM（用于鼓声播放）
-const pauseBgm = () => {
-  // 标记鼓声正在播放
-  isDrumPlaying.value = true
-  
-  // 保存原始BGM状态
-  wasMusicPlayingBeforeDrum.value = isMusicPlaying.value
-  
-  if (audioPlayer.value && isMusicPlaying.value) {
-    audioPlayer.value.pause()
-    isMusicPlaying.value = false
-    console.log('全局BGM已暂停（鼓声播放中）')
-  }
-}
-
-// 恢复BGM（用于鼓声结束）
-const resumeBgm = () => {
-  // 标记鼓声已停止播放
-  isDrumPlaying.value = false
-  
-  // 恢复BGM到原始状态
-  if (audioPlayer.value && wasMusicPlayingBeforeDrum.value && !isMusicPlaying.value) {
-    try {
-      const result = audioPlayer.value.play()
-      // 检查play()方法是否返回Promise（Web平台）
-      if (result && typeof result.then === 'function') {
-        // Web平台：使用Promise处理
-        result.then(() => {
-          isMusicPlaying.value = true
-          console.log('全局BGM已恢复播放（鼓声已结束）')
-        }).catch(error => {
-          console.error('BGM恢复播放失败（需要用户交互）:', error)
-          // 不更新isMusicPlaying状态，保持为false
-        })
-      } else {
-        // 其他平台：同步处理
-        isMusicPlaying.value = true
-        console.log('全局BGM已恢复播放（鼓声已结束）')
-      }
-    } catch (error) {
-      console.error('BGM恢复播放失败（需要用户交互）:', error)
-      // 不更新isMusicPlaying状态，保持为false
-    }
-  }
-}
-
 // 使用scroll-view组件后，不再需要手动处理触摸事件
 // scroll-view会自动处理触摸滚动
 
@@ -724,7 +591,7 @@ onUnmounted(() => {
     <!-- 音乐控制按钮 -->
     <div 
       class="music-control"
-      :class="{ 'music-playing': isMusicPlaying, 'disabled': isBgmButtonDisabled }"
+      :class="{ 'music-playing': isMusicPlaying }"
       @click="toggleMusic"
     >
       <img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
@@ -772,8 +639,6 @@ onUnmounted(() => {
         :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
         :video-url="scenes[1].videoUrl"
         @collect-seal="collectSeal(1)"
-        @video-open="handleVideoOpen"
-        @video-close="handleVideoClose"
       />
 
       <!-- 隆福寺商圈 -->
@@ -782,8 +647,6 @@ onUnmounted(() => {
         :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
         :video-url="scenes[2].videoUrl"
         @collect-seal="collectSeal(2)"
-        @video-open="handleVideoOpen"
-        @video-close="handleVideoClose"
       />
 
       <!-- 王府井商圈 -->
@@ -792,8 +655,6 @@ onUnmounted(() => {
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[3].videoUrl"
         @collect-seal="collectSeal(3)"
-        @video-open="handleVideoOpen"
-        @video-close="handleVideoClose"
       />
 
       <!-- 崇文门商圈 -->
@@ -802,8 +663,6 @@ onUnmounted(() => {
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[4].videoUrl"
         @collect-seal="collectSeal(4)"
-        @video-open="handleVideoOpen"
-        @video-close="handleVideoClose"
       />
 
       <!-- 前门商圈 -->
@@ -811,13 +670,8 @@ onUnmounted(() => {
         :active="activeSceneIndex === 5"
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[5].videoUrl"
-        :is-music-playing="isMusicPlaying"
         @collect-seal="collectSeal(5)"
         @height-changed="handleQianmenHeightChanged"
-        @video-open="handleVideoOpen"
-        @video-close="handleVideoClose"
-        @pause-bgm="pauseBgm"
-        @resume-bgm="resumeBgm"
       />
       
       <!-- 新年文案模块 -->
@@ -853,7 +707,7 @@ onUnmounted(() => {
       <!-- 向上滑动提示 -->
       <div class="scroll-tip-bottom" v-if="!hasScrolled">
         <img src="/static/images/icon_hand1.png" class="tip-icon" alt="滑动提示" />
-        <p>向下滑动探索商圈</p>
+        <p>向上滑动探索商圈</p>
       </div>
 
     <!-- 抽奖留资弹窗 -->
@@ -1089,20 +943,6 @@ onUnmounted(() => {
   justify-content: center;
   z-index: 1000;
   cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.music-control:hover:not(.disabled) {
-  transform: scale(1.1);
-}
-
-.music-control:active:not(.disabled) {
-  transform: scale(0.95);
-}
-
-.music-control.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
 
 

components/VideoPlayButton.vue

@@ -63,7 +63,7 @@ const handlePlayClick = () => {
 
 /* 鼠标悬停效果 */
 .video-play-button-container:hover .video-play-button-bg {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.9);
   transform: scale(1.05);
   animation: none;
 }

components/VideoPlayerModal.vue

@@ -37,6 +37,9 @@ const handleContentClick = (e) => {
 <template>
   <div v-if="visible" class="video-modal">
     <div class="video-modal-content" @click="handleContentClick">
+      <div class="video-close-button" @click="handleClose">
+        <span>×</span>
+      </div>
       <video
         :src="videoUrl"
         class="video-player"
@@ -45,10 +48,6 @@ const handleContentClick = (e) => {
         loop
       ></video>
     </div>
-    <!-- 关闭按钮（放在视频下方） -->
-    <div class="video-close-button" @click="handleClose">
-      <img src="/static/images/btn_close.png" alt="关闭" class="close-icon" />
-    </div>
   </div>
 </template>
 
@@ -64,7 +63,6 @@ const handleContentClick = (e) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   z-index: 999;
 }
 
@@ -72,22 +70,18 @@ const handleContentClick = (e) => {
   position: relative;
   border-radius: 20rpx;
   overflow: hidden;
-  width: 720rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.video-player {
   width: 720rpx;
   height: 405rpx;
-  background-color: #000;
 }
 
 .video-close-button {
-  margin-top: 30rpx;
+  position: absolute;
-  width: 68rpx;
+  top: 10rpx;
-  height: 68rpx;
+  right: 10rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -95,9 +89,17 @@ const handleContentClick = (e) => {
   z-index: 10;
 }
 
-.close-icon {
+.video-close-button span {
-  width: 68rpx;
+  color: white;
-  height: 68rpx;
+  font-size: 30rpx;
-  object-fit: contain;
+  font-weight: bold;
+  line-height: 30rpx;
+  height: 30rpx;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
 }
 </style>

components/WangfujingScene.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
+const emit = defineEmits(['collect-seal'])
 
 // 福字点击区域状态
 const sq3ImageVisible = ref(false)
@@ -106,13 +106,11 @@ const closeGallery = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
-  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
-  emit('video-close')
 }
 
 // 页面挂载时的初始化