1.3.3

1、更换东直门背景图片
2、模态窗口加入touchmove事件，用于阻止ios中背景scrollview的滚动
3、ai词组填写框样式调整，适配不同的手机及字体
4、海报展示增加全屏投屏图片，便于任意长按保存
5、首页增加视频播放的状态处理，其实应该是不需要的

components/AICoupletForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-modal" v-if="visible">
+  <div class="form-modal" v-if="visible" @touchmove="handleTouchMove">
     <div class="modal-overlay"></div>
     <div class="modal-content">
       <div class="modal-body">
@@ -111,6 +111,11 @@ const generateCouplet = () => {
   topKeyword.value = ''
   bottomKeyword.value = ''
 }
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
 </script>
 
 <style scoped>
@@ -148,26 +153,7 @@ const generateCouplet = () => {
   flex-direction: column;
 }
 
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30rpx;
-}
 
-.modal-header h3 {
-  margin: 0;
-  font-size: 36rpx;
-  color: #333;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 48rpx;
-  cursor: pointer;
-  color: #666;
-}
 
 .modal-body {
   flex: 1;
@@ -194,32 +180,27 @@ const generateCouplet = () => {
 
 .form-row {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   margin-bottom: 60rpx;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .input-group {
-  width: 45%;
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
-  gap: 10rpx;
 }
 
 .label {
   color: white;
   font-size: 32rpx;
   text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
-  align-self: flex-end;
 }
 
 .underline-input {
   width: 80rpx;
-  height: 32rpx;
+  height: 40rpx;
-  line-height: 32rpx;
+  line-height: 40rpx;
   background-color: transparent;
   border: none;
   border-bottom: 2rpx solid white;
@@ -234,18 +215,6 @@ const generateCouplet = () => {
   border-bottom: 3rpx solid #fff;
 }
 
-/* 响应式设计 */
-@media (max-width: 750rpx) {
-  .form-row {
-    flex-direction: column;
-    gap: 20rpx;
-  }
-  
-  .input-group {
-    margin-bottom: 15rpx;
-  }
-}
-
 .form-actions {
   display: flex;
   justify-content: center;

components/CoupletDisplay.vue

@@ -1,6 +1,15 @@
 <template>
-  <div class="couplet-display-modal" v-if="visible">
+  <div class="couplet-display-modal" v-if="visible" @touchmove="handleTouchMove">
     <div class="modal-overlay"></div>
+    <!-- 全屏透明图片，确保iOS长按生效 -->
+    <div class="full-screen-transparent-image" v-if="couplet?.image_url">
+      <img 
+        :src="couplet?.image_url" 
+        alt="春联海报透明" 
+        @load="isLoading = false"
+        @error="isLoading = false"
+      />
+    </div>
     <div class="modal-content couplet-content">
       <div class="modal-body">
         <div class="couplet-display">
@@ -12,9 +21,9 @@
               <div class="loading-text">海报加载中...</div>
             </div>
             <img 
-              :src="base64Image" 
+              :src="couplet?.image_url" 
               alt="春联海报" 
-              style="width: 100%; max-width: 300px; height: auto;" 
+              style="width: 100%; max-width: 270px; height: auto;" 
               @load="isLoading = false"
               @error="isLoading = false"
             />
@@ -56,61 +65,24 @@ const emit = defineEmits(['close'])
 
 // 图片加载状态
 const isLoading = ref(true)
-// base64格式的图片
-const base64Image = ref('')
-
-// 将图片URL转换为base64
-const convertImageToBase64 = (imageUrl) => {
-  if (!imageUrl) {
-    base64Image.value = ''
-    isLoading.value = false
-    return
-  }
-  
-  isLoading.value = true
-  
-  const img = new Image()
-  img.crossOrigin = 'Anonymous' // 解决跨域问题
-  
-  img.onload = () => {
-    const canvas = document.createElement('canvas')
-    canvas.width = img.width
-    canvas.height = img.height
-    
-    const ctx = canvas.getContext('2d')
-    ctx.drawImage(img, 0, 0)
-    
-    // 将canvas转换为base64
-    base64Image.value = canvas.toDataURL('image/jpeg', 0.9)
-    isLoading.value = false
-  }
-  
-  img.onerror = () => {
-    console.error('图片加载失败:', imageUrl)
-    base64Image.value = ''
-    isLoading.value = false
-  }
-  
-  img.src = imageUrl
-}
 
 // 监听couplet变化，重新开始加载
 watch(() => props.couplet?.image_url, (newImageUrl) => {
   if (newImageUrl) {
-    convertImageToBase64(newImageUrl)
+    isLoading.value = true
   }
 })
 
 // 监听visible变化，当显示时重置加载状态
 watch(() => props.visible, (newVisible) => {
   if (newVisible && props.couplet?.image_url) {
-    convertImageToBase64(props.couplet.image_url)
+    isLoading.value = true
   }
 })
 
-// 组件挂载时初始化
+// 阻止 iOS 滚动穿透
-if (props.couplet?.image_url) {
+const handleTouchMove = (e) => {
-  convertImageToBase64(props.couplet.image_url)
+  e.preventDefault()
 }
 </script>
 
@@ -128,6 +100,25 @@ if (props.couplet?.image_url) {
   align-items: center;
 }
 
+/* 全屏透明图片，确保iOS长按生效 */
+.full-screen-transparent-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.full-screen-transparent-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.01;
+  -webkit-tap-highlight-color: transparent;
+}
+
 .modal-overlay {
   position: absolute;
   top: 0;

components/ImageGalleryModal.vue

@@ -60,10 +60,15 @@ const closeModal = () => {
 const handleOverlayClick = () => {
   closeModal()
 }
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
 </script>
 
 <template>
-  <div class="gallery-modal" v-if="visible">
+  <div class="gallery-modal" v-if="visible" @touchmove="handleTouchMove">
     <!-- 遮罩层 -->
     <div class="modal-overlay" @click="handleOverlayClick"></div>
     

components/LoadingComponent.vue

@@ -97,6 +97,11 @@ const handleStart = () => {
   emit('start')
 }
 
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
+
 // 组件挂载后开始加载图片
 onMounted(() => {
   loadImages()
@@ -104,7 +109,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="visible" class="loading-container">
+  <div v-if="visible" class="loading-container" @touchmove="handleTouchMove">
     <!-- 背景图片 -->
     <div class="loading-bg">
       <img src="/static/loading/loading_bg.jpg" alt="加载背景" class="bg-image" />

components/LongImageViewer.vue

@@ -279,6 +279,11 @@ const openFullscreen = () => {
 const closeFullscreen = () => {
   isFullscreen.value = false
 }
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
 </script>
 
 <template>
@@ -329,7 +334,7 @@ const closeFullscreen = () => {
   
   <!-- 全屏查看模态框 -->
   <uni-popup v-model="isFullscreen" mode="full" closeable="false">
-    <div class="fullscreen-container" @click="closeFullscreen">
+    <div class="fullscreen-container" @click="closeFullscreen" @touchmove="handleTouchMove">
       <div class="fullscreen-header">
         <h2>查看图片</h2>
         <button class="close-btn" @click.stop="closeFullscreen">关闭</button>

components/LotteryFormModal.vue

@@ -99,10 +99,15 @@ const handleSubmit = () => {
   
   emit('submit', submitData)
 }
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
 </script>
 
 <template>
-  <div class="info-page" v-if="visible">
+  <div class="info-page" v-if="visible" @touchmove="handleTouchMove">
     <!-- 背景图片 -->
     <div class="bg-container">
       <img src="/static/info/info_bg.jpg" class="bg-image" mode="aspectFill" />

components/LuckyDraw.vue

@@ -136,7 +136,7 @@
     </uni-popup>
     
     <!-- 加载动画 -->
-    <div v-if="loading" class="loading-overlay">
+    <div v-if="loading" class="loading-overlay" @touchmove="handleTouchMove">
       <div class="custom-loading"></div>
     </div>
   </div>
@@ -317,6 +317,11 @@ const selectKeyword = (word) => {
 const handleImageError = (event) => {
   event.target.src = 'https://placeholder.pics/svg/640x1136/FDF5E6/CD853F/抽奖背景';
 };
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault();
+};
 </script>
 
 <style scoped>

components/SinglePageContainer.vue

@@ -632,11 +632,15 @@ onShow(() => {
   const isOpeningWebview = uni.getStorageSync('isOpeningWebview')
   const wasMusicPlayingBeforeWebview = uni.getStorageSync('wasMusicPlayingBeforeWebview')
   const wasMusicPlayingBeforeDrum = uni.getStorageSync('wasMusicPlayingBeforeDrum')
+  const isVideoPlaying = uni.getStorageSync('isVideoPlaying')
+  const wasMusicPlayingBeforeVideo = uni.getStorageSync('wasMusicPlayingBeforeVideo')
   
-  console.log('onShow - 从webview返回:', {
+  console.log('onShow - 页面显示:', {
     isOpeningWebview,
     wasMusicPlayingBeforeWebview,
     wasMusicPlayingBeforeDrum,
+    isVideoPlaying,
+    wasMusicPlayingBeforeVideo,
     currentIsMusicPlaying: isMusicPlaying.value,
     audioPlayerExists: !!audioPlayer.value
   })
@@ -736,6 +740,48 @@ onShow(() => {
     console.log('重置isDrumPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value)
     // 通知组件webview已关闭
     handleWebviewClose()
+  } else if (isVideoPlaying) {
+    // 从视频返回，恢复BGM状态
+    console.log('从视频返回，恢复BGM状态:', wasMusicPlayingBeforeVideo)
+    const wasPlaying = wasMusicPlayingBeforeVideo === 'true' || wasMusicPlayingBeforeVideo === true || wasMusicPlayingBeforeVideo === 1 || wasMusicPlayingBeforeVideo === '1'
+    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已恢复播放（从视频返回）')
+            }).catch(error => {
+              console.error('恢复BGM播放失败:', error)
+              // 即使播放失败，也要标记为播放状态，确保UI正确
+              isMusicPlaying.value = true
+            })
+          } else {
+            // 非Web平台：直接标记为播放状态
+            isMusicPlaying.value = true
+            console.log('全局BGM已恢复播放（从视频返回）')
+          }
+        } catch (error) {
+          console.error('恢复BGM播放失败:', error)
+          // 即使播放失败，也要标记为播放状态，确保UI正确
+          isMusicPlaying.value = true
+        }
+      }
+    }
+    // 清除标记
+    uni.removeStorageSync('isVideoPlaying')
+    uni.removeStorageSync('wasMusicPlayingBeforeVideo')
+    // 重置视频播放状态
+    isVideoPlaying.value = false
+    console.log('重置isVideoPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value)
   }
 })
 
@@ -743,9 +789,13 @@ onShow(() => {
 const handleVideoOpen = () => {
   // 标记视频正在播放
   isVideoPlaying.value = true
+  // 保存到本地存储
+  uni.setStorageSync('isVideoPlaying', true)
   
   // 保存原始BGM状态
   wasMusicPlayingBeforeVideo.value = isMusicPlaying.value
+  // 保存到本地存储
+  uni.setStorageSync('wasMusicPlayingBeforeVideo', isMusicPlaying.value)
   
   // 停止全局BGM播放
   if (audioPlayer.value && isMusicPlaying.value) {

components/VideoPlayerModal.vue

@@ -32,10 +32,15 @@ const handleModalClick = () => {
 const handleContentClick = (e) => {
   e.stopPropagation()
 }
+
+// 阻止 iOS 滚动穿透
+const handleTouchMove = (e) => {
+  e.preventDefault()
+}
 </script>
 
 <template>
-  <div v-if="visible" class="video-modal">
+  <div v-if="visible" class="video-modal" @touchmove="handleTouchMove">
     <div class="video-modal-content" @click="handleContentClick">
       <video
         :src="videoUrl"