v1.3.0

1、修改webview标题 2、bgm全局播放逻辑调整 3、福印出现位置调整 4、交互点都保留一个 5、前门模块需要跟踪视频播放、全局bgm播放状态 6、跟踪webview返回进行对应的bgm设置
2026-02-05 10:26:30 +08:00 · 2026-02-05 10:26:30 +08:00 · 3e78907de0
parent e7cc71d841
commit 3e78907de0
21 changed files with 290 additions and 2362 deletions
--- a/components/ChongwenScene.vue
+++ b/components/ChongwenScene.vue
@ -19,11 +19,16 @@ const props = defineProps({
  videoUrl: {
    type: String,
    default: ''
+  },
+  // 全局BGM播放状态
+  isMusicPlaying: {
+    type: Boolean,
+    default: false
  }
 })

 // 组件事件
-const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
+const emit = defineEmits(['collect-seal', 'video-open', 'video-close', 'pause-bgm', 'resume-bgm', 'webview-open', 'webview-close'])

 // 是否收集福印
 const sealCollected = ref(false)
@ -39,6 +44,9 @@ const parallaxOffset = computed(() => {
  return props.scrollPosition * 0.1
 })

+// 保存BGM状态
+const wasBgPlayingBeforeWebview = ref(false)
+
 // 打开webview页面
 const openWebview = () => {
  // 第一次点击查看按钮时收集福印
@ -48,6 +56,21 @@ const openWebview = () => {
    emit('collect-seal')
  }
  
+  // 保存BGM状态
+  wasBgPlayingBeforeWebview.value = props.isMusicPlaying
+  
+  // 通知父组件webview即将打开
+  emit('webview-open')
+  
+  // 暂停全局BGM播放
+  if (props.isMusicPlaying) {
+    emit('pause-bgm', 'webview')
+  }
+  
+  // 标记即将打开webview
+  uni.setStorageSync('isOpeningWebview', true)
+  uni.setStorageSync('wasMusicPlayingBeforeWebview', props.isMusicPlaying)
+  
  uni.navigateTo({
    url: '/pages/webview/webview',
    success: () => {
@ -60,6 +83,12 @@ const openWebview = () => {
        icon: 'none',
        duration: 1500
      })
+      // 如果打开失败，恢复BGM状态
+      if (wasBgPlayingBeforeWebview.value) {
+        emit('resume-bgm')
+      }
+      // 通知父组件webview打开失败
+      emit('webview-close')
    }
  })
 }
@ -155,195 +184,6 @@ onMounted(() => {
  object-fit: contain;
 }

-/* 增强动效层 */
-.enhancement-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* 灯笼增强动效 */
-.lanterns {
-  position: absolute;
-  top: 15%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 30px;
-  box-sizing: border-box;
-}
-
-.lantern {
-  font-size: 2.5rem;
-  animation: swing 3s infinite ease-in-out;
-  opacity: 0.9;
-  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
-  color: #ffd700;
-}
-
-.left-lantern {
-  animation-delay: 0s;
-}
-
-.right-lantern {
-  animation-delay: 1.5s;
-}
-
-@keyframes swing {
-  0%, 100% { transform: rotate(-10deg); }
-  50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
-  position: absolute;
-  top: 30%;
-  left: 65%;
-  transform: translateX(-50%) rotate(15deg);
-  font-size: 2rem;
-  color: #ffd700;
-  text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
-  animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
-  50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
-  position: absolute;
-  top: 55%;
-  left: 75%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  pointer-events: none;
-}
-
-.pulse-circle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: rgba(255, 215, 0, 0.3);
-  border: 2px solid rgba(255, 215, 0, 0.6);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.click-indicator.animate-pulse {
-  display: block;
-}
-
-/* 交互区域 */
-.interaction-area {
-  position: absolute;
-  top: 55%;
-  right: 15%;
-  width: 120px;
-  height: 100px;
-  cursor: pointer;
-  z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
-  .interaction-area {
-    top: 52%;
-    right: 10%;
-    width: 100px;
-    height: 80px;
-  }
-}
-
-/* 烟花效果 */
-.fireworks {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 20;
-}
-
-.firework {
-  position: absolute;
-  font-size: 2rem;
-  opacity: 0;
-  animation: firework 3s infinite;
-}
-
-.firework-1 {
-  top: 10%;
-  left: 20%;
-  animation-delay: 0s;
-}
-
-.firework-2 {
-  top: 15%;
-  right: 25%;
-  animation-delay: 1s;
-}
-
-.firework-3 {
-  top: 8%;
-  right: 15%;
-  animation-delay: 2s;
-}
-
-.firework-4 {
-  top: 12%;
-  left: 25%;
-  animation-delay: 3s;
-}
-
-@keyframes firework {
-  0%, 100% { opacity: 0; transform: scale(0); }
-  50% { opacity: 1; transform: scale(1.5); }
-}
-
-/* 福印收集标记 */
-.seal-collected-mark {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background-color: rgba(255, 107, 53, 0.9);
-  color: #fff;
-  padding: 10px 15px;
-  border-radius: 20px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  animation: fadeIn 0.5s ease;
-  z-index: 30;
-}
-
-.seal-icon {
-  font-size: 20px;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
 /* 入场动画 */
 .chongwen-scene-container.animate-in {
  animation: sceneFadeIn 1s ease-out;
@ -357,7 +197,7 @@ onMounted(() => {
 /* sq2图片 */
 .sq2-image {
  position: absolute;
-  top: 220rpx;
+  top: 200rpx;
  right: -6rpx;
  width: auto;
  height: auto;
@ -371,7 +211,7 @@ onMounted(() => {
  position: absolute;
  left: 156rpx;
  top: 597rpx;
-  width: 439rpx;
+  width: 479rpx;
  height: 84rpx;
  cursor: pointer;
  z-index: 25;
@ -382,19 +222,9 @@ onMounted(() => {
  transform: scale(0.95);
 }

-/* 响应式设计 */
-@media (max-width: 640px) {
-  .fu-word {
-    font-size: 1.5rem;
-  }
-  
-  .lantern {
-    font-size: 2rem;
-  }
-  
-  .interaction-area {
-    width: 100px;
-    height: 80px;
-  }
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>
--- a/components/DongzhimenScene.vue
+++ b/components/DongzhimenScene.vue
@ -651,7 +651,7 @@ onUnmounted(() => {

 .sq-image {
  position: absolute;
-  top: 220rpx;
+  top: 1220rpx;
  right: -6rpx;
  width: 300rpx;
  height: auto;
--- a/components/LongfusiScene.vue
+++ b/components/LongfusiScene.vue
@ -149,11 +149,11 @@ onMounted(() => {
    />
    
    <!-- 热点点击区域1 - 左下方 -->
-    <div class="hotspot-area" style="left: 163rpx; top: 950rpx;" @click="openGallery(0)">
+    <!-- <div class="hotspot-area" style="left: 163rpx; top: 950rpx;" @click="openGallery(0)">
      <div class="pulse-indicator">
        <div class="pulse-circle"></div>
      </div>
-    </div>
+    </div> -->
    
    <!-- 热点点击区域2 - 右下方 -->
    <div class="hotspot-area" style="left: 450rpx; top: 900rpx;" @click="openGallery(1)">
@ -163,11 +163,11 @@ onMounted(() => {
    </div>
    
    <!-- 热点点击区域3 - 上方 -->
-    <div class="hotspot-area" style="left: 320rpx; top: 738rpx;" @click="openGallery(2)">
+    <!-- <div class="hotspot-area" style="left: 320rpx; top: 738rpx;" @click="openGallery(2)">
      <div class="pulse-indicator">
        <div class="pulse-circle"></div>
      </div>
-    </div>
+    </div> -->
    
    <!-- 图片浏览器弹窗 -->
    <ImageGalleryModal
@ -377,8 +377,8 @@ onMounted(() => {
 /* sq图片 */
 .sq-image {
  position: absolute;
-  top: 220rpx;
-  right: -6rpx;
+  top: 390rpx;
+  right: -8rpx;
  width: auto;
  height: auto;
  max-width: 300rpx;
--- a/components/QianmenScene.vue
+++ b/components/QianmenScene.vue
@ -24,6 +24,16 @@ const props = defineProps({
  isMusicPlaying: {
    type: Boolean,
    default: false
+  },
+  // 全局视频播放状态
+  isVideoPlaying: {
+    type: Boolean,
+    default: false
+  },
+  // webview打开状态
+  isWebviewOpening: {
+    type: Boolean,
+    default: false
  }
 })

@ -67,6 +77,35 @@ watch(() => props.scrollPosition, (newValue, oldValue) => {
  console.log('showFireworks:', showFireworks.value)
 })

+// 监听active属性的变化，当组件变为非活动状态时停止鼓声
+watch(() => props.active, (newActive) => {
+  if (!newActive && isDrumPlaying.value && drumPlayer.value) {
+    drumPlayer.value.stop()
+    isDrumPlaying.value = false
+    // 恢复BGM播放状态
+    emit('resume-bgm')
+  }
+})
+
+// 监听视频播放状态的变化，当视频开始播放时停止鼓声
+watch(() => props.isVideoPlaying, (newIsVideoPlaying) => {
+  if (newIsVideoPlaying && isDrumPlaying.value && drumPlayer.value) {
+    drumPlayer.value.stop()
+    isDrumPlaying.value = false
+    // 恢复BGM播放状态
+    emit('resume-bgm')
+  }
+})
+
+// 监听webview打开状态的变化，当webview打开时停止鼓声
+watch(() => props.isWebviewOpening, (newIsWebviewOpening) => {
+  if (newIsWebviewOpening && isDrumPlaying.value && drumPlayer.value) {
+    drumPlayer.value.stop()
+    isDrumPlaying.value = false
+    // 不恢复BGM播放状态，由webview返回时处理
+  }
+})
+
 // 计算视差效果的偏移量
 const parallaxOffset = computed(() => {
  // 滚动位置的1/10作为视差偏移
@ -135,7 +174,7 @@ const toggleMusic = () => {
    // 保存BGM状态
    wasBgPlayingBeforeDrum.value = props.isMusicPlaying
    // 暂停BGM
-    emit('pause-bgm')
+    emit('pause-bgm', 'drum')
    // 播放鼓声
    drumPlayer.value.play()
    isDrumPlaying.value = true
@ -144,6 +183,9 @@ const toggleMusic = () => {

 // 页面挂载时的初始化
 onMounted(() => {
+  // 预加载舞狮动画图片
+  preloadLionDanceImages()
+  
  // 添加动画类，触发入场动画
  const container = document.querySelector('.qianmen-scene-container')
  if (container) {
@ -193,6 +235,23 @@ const closeVideoPlayer = () => {
  emit('video-close')
 }

+// 预加载舞狮动画图片
+const preloadLionDanceImages = () => {
+  const lionImages = [
+    '/static/animate/lion/lion1.png',
+    '/static/animate/lion/lion2.png',
+    '/static/animate/lion/lion3.png',
+    '/static/animate/lion/lion4.png',
+    '/static/animate/lion/lion5.png',
+    '/static/animate/lion/lion6.png'
+  ]
+  
+  lionImages.forEach((imageUrl) => {
+    const img = new Image()
+    img.src = imageUrl
+  })
+}
+
 // 组件卸载时清理
 onUnmounted(() => {
  if (musicPlayer.value) {
@ -237,7 +296,7 @@ onUnmounted(() => {
    />
    
    <!-- 舞狮动画 -->
-    <div class="lion-dance"></div>
+    <div class="lion-dance" :class="{ 'playing': isDrumPlaying }"></div>
    
    <!-- 视频播放按钮 -->
    <VideoPlayButton @play="openVideoPlayer" />
@ -552,10 +611,14 @@ onUnmounted(() => {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
-  animation: lionDance 0.9s infinite;
+  background-image: url('/static/animate/lion/lion1.png');
  z-index: 25;
 }

+.lion-dance.playing {
+  animation: lionDance 0.9s infinite;
+}
+
@keyframes lionDance {
  0%, 16.66% { background-image: url('/static/animate/lion/lion1.png'); }
  16.67%, 33.33% { background-image: url('/static/animate/lion/lion2.png'); }
--- a/components/SinglePageContainer.vue
+++ b/components/SinglePageContainer.vue
@ -119,6 +119,9 @@ const sceneInteractiveStates = ref(scenes.value.map(() => false))
 const sealCollectedStates = ref(scenes.value.map(() => false))
 // 视频播放状态
 const isVideoPlaying = ref(false)
+
+// webview打开状态
+const isWebviewOpening = ref(false)
 // 鼓声播放状态
 const isDrumPlaying = ref(false)

@ -617,6 +620,125 @@ const wasMusicPlayingBeforeVideo = ref(false)
 // 跟踪鼓声开始前的BGM状态
 const wasMusicPlayingBeforeDrum = ref(false)

+// 跟踪webview打开前的BGM状态
+const wasMusicPlayingBeforeWebview = ref(false)
+
+// 页面显示时的生命周期钩子
+import { onShow } from '@dcloudio/uni-app'
+
+// 监听页面显示事件
+onShow(() => {
+  // 当从webview返回时，恢复BGM状态
+  const isOpeningWebview = uni.getStorageSync('isOpeningWebview')
+  const wasMusicPlayingBeforeWebview = uni.getStorageSync('wasMusicPlayingBeforeWebview')
+  const wasMusicPlayingBeforeDrum = uni.getStorageSync('wasMusicPlayingBeforeDrum')
+  
+  console.log('onShow - 从webview返回:', {
+    isOpeningWebview,
+    wasMusicPlayingBeforeWebview,
+    wasMusicPlayingBeforeDrum,
+    currentIsMusicPlaying: isMusicPlaying.value,
+    audioPlayerExists: !!audioPlayer.value
+  })
+  
+  if (isOpeningWebview) {
+    // 检查是否是从鼓声播放时进入webview的
+    // uni.getStorageSync 返回空字符串表示键不存在，需要检查是否有值
+    const hasDrumFlag = wasMusicPlayingBeforeDrum !== '' && wasMusicPlayingBeforeDrum !== undefined && wasMusicPlayingBeforeDrum !== null
+    console.log('检查鼓声标记:', { hasDrumFlag, wasMusicPlayingBeforeDrum })
+    
+    if (hasDrumFlag) {
+      console.log('从鼓声播放时进入webview，恢复BGM状态:', wasMusicPlayingBeforeDrum)
+      // 如果之前BGM是播放状态，恢复播放
+      const shouldPlay = wasMusicPlayingBeforeDrum === 'true' || wasMusicPlayingBeforeDrum === true || wasMusicPlayingBeforeDrum === 1 || wasMusicPlayingBeforeDrum === '1'
+      if (shouldPlay && !isMusicPlaying.value) {
+        // 如果audioPlayer不存在，初始化它
+        if (!audioPlayer.value) {
+          initMusicPlayer()
+        }
+        if (audioPlayer.value) {
+          try {
+            console.log('尝试恢复BGM播放（鼓声场景）')
+            const result = audioPlayer.value.play()
+            // 检查play()方法是否返回Promise（Web平台）
+            if (result && typeof result.then === 'function') {
+              // Web平台：使用Promise处理
+              result.then(() => {
+                isMusicPlaying.value = true
+                console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）')
+              }).catch(error => {
+                console.error('恢复BGM播放失败:', error)
+                // 即使播放失败，也要标记为播放状态，确保UI正确
+                isMusicPlaying.value = true
+              })
+            } else {
+              // 非Web平台：直接标记为播放状态
+              isMusicPlaying.value = true
+              console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）')
+            }
+          } catch (error) {
+            console.error('恢复BGM播放失败:', error)
+            // 即使播放失败，也要标记为播放状态，确保UI正确
+            isMusicPlaying.value = true
+          }
+        }
+      }
+      // 清除标记
+      uni.removeStorageSync('wasMusicPlayingBeforeDrum')
+    } else {
+      // 正常的webview返回，根据之前的BGM状态恢复
+      // 确保wasMusicPlayingBeforeWebview是布尔值
+      const wasPlaying = wasMusicPlayingBeforeWebview === 'true' || wasMusicPlayingBeforeWebview === true || wasMusicPlayingBeforeWebview === 1 || wasMusicPlayingBeforeWebview === '1'
+      console.log('正常webview返回，恢复BGM状态:', {
+        wasMusicPlayingBeforeWebview,
+        wasPlaying,
+        currentIsMusicPlaying: isMusicPlaying.value,
+        audioPlayerExists: !!audioPlayer.value
+      })
+      if (wasPlaying && !isMusicPlaying.value) {
+        // 如果audioPlayer不存在，初始化它
+        if (!audioPlayer.value) {
+          initMusicPlayer()
+        }
+        if (audioPlayer.value) {
+          try {
+            console.log('尝试恢复BGM播放（正常场景）')
+            const result = audioPlayer.value.play()
+            // 检查play()方法是否返回Promise（Web平台）
+            if (result && typeof result.then === 'function') {
+              // Web平台：使用Promise处理
+              result.then(() => {
+                isMusicPlaying.value = true
+                console.log('全局BGM已恢复播放（从webview返回）')
+              }).catch(error => {
+                console.error('恢复BGM播放失败:', error)
+                // 即使播放失败，也要标记为播放状态，确保UI正确
+                isMusicPlaying.value = true
+              })
+            } else {
+              // 非Web平台：直接标记为播放状态
+              isMusicPlaying.value = true
+              console.log('全局BGM已恢复播放（从webview返回）')
+            }
+          } catch (error) {
+            console.error('恢复BGM播放失败:', error)
+            // 即使播放失败，也要标记为播放状态，确保UI正确
+            isMusicPlaying.value = true
+          }
+        }
+      }
+    }
+    // 清除标记
+    uni.removeStorageSync('isOpeningWebview')
+    uni.removeStorageSync('wasMusicPlayingBeforeWebview')
+    // 重置鼓声播放状态，确保BGM按钮可以点击
+    isDrumPlaying.value = false
+    console.log('重置isDrumPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value)
+    // 通知组件webview已关闭
+    handleWebviewClose()
+  }
+})
+
 // 处理视频打开事件
 const handleVideoOpen = () => {
  // 标记视频正在播放
@ -631,6 +753,9 @@ const handleVideoOpen = () => {
    isMusicPlaying.value = false
    console.log('全局BGM已停止（视频播放中）')
  }
+  
+  // 标记鼓声应该停止
+  isDrumPlaying.value = false
 }

 // 处理视频关闭事件
@ -664,18 +789,38 @@ const handleVideoClose = () => {
  }
 }

-// 暂停BGM（用于鼓声播放）
-const pauseBgm = () => {
-  // 标记鼓声正在播放
-  isDrumPlaying.value = true
+// 处理webview打开事件
+const handleWebviewOpen = () => {
+  // 标记webview正在打开
+  isWebviewOpening.value = true
+  console.log('Webview即将打开')
  
-  // 保存原始BGM状态
-  wasMusicPlayingBeforeDrum.value = isMusicPlaying.value
+  // 保存鼓声播放前的BGM状态，以便在退出webview时恢复
+  if (isDrumPlaying.value) {
+    uni.setStorageSync('wasMusicPlayingBeforeDrum', wasMusicPlayingBeforeDrum.value)
+  }
+}
+
+// 处理webview关闭事件
+const handleWebviewClose = () => {
+  // 标记webview已关闭
+  isWebviewOpening.value = false
+  console.log('Webview已关闭')
+}
+
+// 暂停BGM（用于鼓声播放或webview打开）
+const pauseBgm = (source = 'drum') => {
+  // 只有当来源是鼓声时，才标记鼓声正在播放
+  if (source === 'drum') {
+    isDrumPlaying.value = true
+    // 保存原始BGM状态
+    wasMusicPlayingBeforeDrum.value = isMusicPlaying.value
+  }
  
  if (audioPlayer.value && isMusicPlaying.value) {
    audioPlayer.value.pause()
    isMusicPlaying.value = false
-    console.log('全局BGM已暂停（鼓声播放中）')
+    console.log(`全局BGM已暂停（${source === 'drum' ? '鼓声播放中' : 'webview打开中'}）`)
  }
 }

@ -801,9 +946,14 @@ onUnmounted(() => {
        :active="activeSceneIndex === 4"
        :scroll-position="scrollContainer?.value?.scrollTop || 0"
        :video-url="scenes[4].videoUrl"
+        :is-music-playing="isMusicPlaying"
        @collect-seal="collectSeal(4)"
        @video-open="handleVideoOpen"
        @video-close="handleVideoClose"
+        @pause-bgm="(source) => pauseBgm(source)"
+        @resume-bgm="resumeBgm"
+        @webview-open="handleWebviewOpen"
+        @webview-close="handleWebviewClose"
      />

      <!-- 前门商圈 -->
@ -812,11 +962,13 @@ onUnmounted(() => {
        :scroll-position="scrollContainer?.value?.scrollTop || 0"
        :video-url="scenes[5].videoUrl"
        :is-music-playing="isMusicPlaying"
+        :is-video-playing="isVideoPlaying"
+        :is-webview-opening="isWebviewOpening"
        @collect-seal="collectSeal(5)"
        @height-changed="handleQianmenHeightChanged"
        @video-open="handleVideoOpen"
        @video-close="handleVideoClose"
-        @pause-bgm="pauseBgm"
+        @pause-bgm="(source) => pauseBgm(source)"
        @resume-bgm="resumeBgm"
      />
      
@ -1030,7 +1182,7 @@ onUnmounted(() => {

 .new-year-text {
  display: inline-block;
-  width: 516rpx;
+  width: 598rpx;
  height: auto;
  object-fit: contain;
 }
--- a/components/WangfujingScene.vue
+++ b/components/WangfujingScene.vue
@ -147,7 +147,7 @@ onMounted(() => {
    />
    
    <!-- 热点点击区域1 -->
-    <div class="hotspot-area" style="left: 163rpx; top: 950rpx;" @click="openGallery(0)">
+    <div class="hotspot-area" style="right:20rpx; top: 950rpx;" @click="openGallery(0)">
      <div class="pulse-indicator">
        <div class="pulse-circle"></div>
      </div>
@ -205,190 +205,6 @@ onMounted(() => {
  object-fit: contain;
 }

-/* 增强动效层 */
-.enhancement-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* 灯笼增强动效 */
-.lanterns {
-  position: absolute;
-  top: 15%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 30px;
-  box-sizing: border-box;
-}
-
-.lantern {
-  font-size: 2.5rem;
-  animation: swing 3s infinite ease-in-out;
-  opacity: 0.9;
-  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
-  color: #ffd700;
-}
-
-.left-lantern {
-  animation-delay: 0s;
-}
-
-.right-lantern {
-  animation-delay: 1.5s;
-}
-
-@keyframes swing {
-  0%, 100% { transform: rotate(-10deg); }
-  50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
-  position: absolute;
-  top: 30%;
-  left: 65%;
-  transform: translateX(-50%) rotate(15deg);
-  font-size: 2rem;
-  color: #ffd700;
-  text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
-  animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
-  50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
-  position: absolute;
-  top: 55%;
-  left: 75%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  pointer-events: none;
-}
-
-.pulse-circle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: rgba(255, 215, 0, 0.3);
-  border: 2px solid rgba(255, 215, 0, 0.6);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.click-indicator.animate-pulse {
-  display: block;
-}
-
-/* 交互区域 */
-.interaction-area {
-  position: absolute;
-  top: 55%;
-  right: 15%;
-  width: 120px;
-  height: 100px;
-  cursor: pointer;
-  z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
-  .interaction-area {
-    top: 52%;
-    right: 10%;
-    width: 100px;
-    height: 80px;
-  }
-}
-
-/* 烟花效果 */
-.fireworks {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 20;
-}
-
-.firework {
-  position: absolute;
-  font-size: 2rem;
-  opacity: 0;
-  animation: firework 3s infinite;
-}
-
-.firework-1 {
-  top: 10%;
-  left: 20%;
-  animation-delay: 0s;
-}
-
-.firework-2 {
-  top: 15%;
-  right: 25%;
-  animation-delay: 1s;
-}
-
-.firework-3 {
-  top: 8%;
-  right: 15%;
-  animation-delay: 2s;
-}
-
-.firework-4 {
-  top: 12%;
-  left: 25%;
-  animation-delay: 3s;
-}
-
-@keyframes firework {
-  0%, 100% { opacity: 0; transform: scale(0); }
-  50% { opacity: 1; transform: scale(1.5); }
-}
-
-/* 福印收集标记 */
-.seal-collected-mark {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background-color: rgba(255, 107, 53, 0.9);
-  color: #fff;
-  padding: 10px 15px;
-  border-radius: 20px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  animation: fadeIn 0.5s ease;
-  z-index: 30;
-}
-
-.seal-icon {
-  font-size: 20px;
-}
-
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
@ -407,8 +223,8 @@ onMounted(() => {
 /* sq3图片 */
 .sq3-image {
  position: absolute;
-  top: 220rpx;
-  right: -6rpx;
+  top: 480rpx;
+  right: -8rpx;
  width: auto;
  height: auto;
  max-width: 300rpx;
@ -416,115 +232,17 @@ onMounted(() => {
  animation: fadeIn 0.5s ease;
 }

-/* 图片浏览组件 */
-.image-gallery {
-  position: absolute;
-  left: 50%;
-  top: 1400rpx;
-  transform: translateX(-50%);
-  width: 653rpx;
-  height: 453rpx;
-  background-image: url('/static/wfj/gallery-bg.png');
-  background-size: 653rpx 453rpx;
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 20rpx;
-  padding: 20rpx;
-  box-sizing: border-box;
-  z-index: 30;
-  overflow: hidden;
-}
-
-/* 上方图片区域 */
-.gallery-image-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20rpx;
-  box-sizing: border-box;
-}
-
-.gallery-image {
-  width: 613rpx;
-  object-fit: cover;
-  border-radius: 20%;
-  display: block;
-}
-
-.nav-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 60rpx;
-  height: 60rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 10;
-}
-
-.prev-btn {
-  left: -18rpx;
-}
-
-.next-btn {
-  right: -18rpx;
-}
-
-.nav-icon {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
 /* 响应式设计 */
@media (max-width: 640px) {
-  .fu-word {
-    font-size: 1.5rem;
+  .hotspot-area {
+    width: 120rpx;
+    height: 120rpx;
  }
  
-  .lantern {
-    font-size: 2rem;
+  .pulse-indicator {
+    width: 80rpx;
+    height: 80rpx;
  }
-  
-  .interaction-area {
-    width: 100px;
-    height: 80px;
-  }
-}
-
-/* 加载遮罩层 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 5;
-  border-radius: 12rpx;
-}
-
-/* 加载动画 */
-.loading-spinner {
-  width: 60rpx;
-  height: 60rpx;
-  border: 4rpx solid rgba(255, 255, 255, 0.3);
-  border-top: 4rpx solid #fff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
 }

 /* 热点点击区域 */
--- a/node_modules/.vite/deps/_metadata.json
+++ b/node_modules/.vite/deps/_metadata.json
@ -1,40 +1,31 @@
 {
-  "hash": "b54d3585",
-  "configHash": "14833ae6",
-  "lockfileHash": "183962d8",
-  "browserHash": "067befe1",
+  "hash": "ce2cb5c5",
+  "configHash": "44095b1d",
+  "lockfileHash": "a115a8c8",
+  "browserHash": "8430c7b1",
  "optimized": {
-    "hammerjs": {
-      "src": "../../../../../node_modules/hammerjs/hammer.js",
-      "file": "hammerjs.js",
-      "fileHash": "182c44c4",
-      "needsInterop": true
-    },
    "pinia": {
      "src": "../../pinia/dist/pinia.mjs",
      "file": "pinia.js",
-      "fileHash": "5a494ec4",
+      "fileHash": "b5eaf668",
      "needsInterop": false
    },
    "vue": {
      "src": "../../vue/dist/vue.runtime.esm-bundler.js",
      "file": "vue.js",
-      "fileHash": "7fa66812",
+      "fileHash": "6232c5ca",
      "needsInterop": false
    },
    "vue-lazyload": {
      "src": "../../vue-lazyload/vue-lazyload.esm.js",
      "file": "vue-lazyload.js",
-      "fileHash": "d4975f84",
+      "fileHash": "a6e8e95a",
      "needsInterop": false
    }
  },
  "chunks": {
    "chunk-2MKFL3BX": {
      "file": "chunk-2MKFL3BX.js"
-    },
-    "chunk-BUSYA2B4": {
-      "file": "chunk-BUSYA2B4.js"
    }
  }
 }
--- a/node_modules/.vite/deps/chunk-BUSYA2B4.js
+++ b/node_modules/.vite/deps/chunk-BUSYA2B4.js
@ -1,8 +0,0 @@
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-
-export {
-  __commonJS
-};
--- a/node_modules/.vite/deps/chunk-BUSYA2B4.js.map
+++ b/node_modules/.vite/deps/chunk-BUSYA2B4.js.map
@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}
--- a/node_modules/.vite/deps/hammerjs.js
+++ b/node_modules/.vite/deps/hammerjs.js
--- a/node_modules/.vite/deps/hammerjs.js.map
+++ b/node_modules/.vite/deps/hammerjs.js.map
--- a/node_modules/.vite/deps/pinia.js
+++ b/node_modules/.vite/deps/pinia.js
@ -18,7 +18,6 @@ import {
  unref,
  watch
 } from "./chunk-2MKFL3BX.js";
-import "./chunk-BUSYA2B4.js";

 // node_modules/@vue/devtools-shared/dist/index.js
 var __create = Object.create;
--- a/node_modules/.vite/deps/pinia.js.map
+++ b/node_modules/.vite/deps/pinia.js.map
--- a/node_modules/.vite/deps/vue-lazyload.js
+++ b/node_modules/.vite/deps/vue-lazyload.js
@ -9,7 +9,6 @@ import {
  ref,
  watch
 } from "./chunk-2MKFL3BX.js";
-import "./chunk-BUSYA2B4.js";

 // node_modules/vue-lazyload/vue-lazyload.esm.js
 function createCommonjsModule(fn, module) {
--- a/node_modules/.vite/deps/vue-lazyload.js.map
+++ b/node_modules/.vite/deps/vue-lazyload.js.map
--- a/node_modules/.vite/deps/vue.js
+++ b/node_modules/.vite/deps/vue.js
@ -171,7 +171,6 @@ import {
  withModifiers,
  withScopeId
 } from "./chunk-2MKFL3BX.js";
-import "./chunk-BUSYA2B4.js";
 export {
  BaseTransition,
  BaseTransitionPropsValidators,
--- a/pages.json
+++ b/pages.json
@ -11,14 +11,14 @@
 		{
 			"path": "pages/webview/webview",
 			"style": {
-				"navigationBarTitleText": "四大特色主题区",
+				"navigationBarTitleText": "新春特色主题区域",
 				"navigationStyle": "default"
 			}
 		},
    {
    	"path": "pages/canvas3",
    	"style": {
-    		"navigationBarTitleText": "四大特色主题区",
+    		"navigationBarTitleText": "新春特色主题区域",
    		"navigationStyle": "default"
    	}
    }
--- a/static/images/btn_video.png
+++ b/static/images/btn_video.png
--- a/static/images/btn_view.png
+++ b/static/images/btn_view.png
--- a/static/images/main_text.png
+++ b/static/images/main_text.png
--- a/static/loading/loading_bg.jpg
+++ b/static/loading/loading_bg.jpg