v1.3.2

1、更换loading页背景，调整回使用开始按钮进入首页的方式，主要是需要进行音乐播放
2、前门大鼓互动增加提示文字
3、海报下载后先转换为base64，然后再进行展示，主要用于app中图片长按分享。另外调整海报展示的样式，使其不出现滚动
4、scroll-view页面移除无效样式

components/CoupletDisplay.vue

@@ -12,7 +12,7 @@
               <div class="loading-text">海报加载中...</div>
             </div>
             <img 
-              :src="couplet?.image_url" 
+              :src="base64Image" 
               alt="春联海报" 
               style="width: 100%; max-width: 300px; height: auto;" 
               @load="isLoading = false"
@@ -56,20 +56,62 @@ 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) {
-    isLoading.value = true
+    convertImageToBase64(newImageUrl)
   }
 })
 
 // 监听visible变化，当显示时重置加载状态
 watch(() => props.visible, (newVisible) => {
   if (newVisible && props.couplet?.image_url) {
-    isLoading.value = true
+    convertImageToBase64(props.couplet.image_url)
   }
 })
+
+// 组件挂载时初始化
+if (props.couplet?.image_url) {
+  convertImageToBase64(props.couplet.image_url)
+}
 </script>
 
 <style scoped>
@@ -102,7 +144,6 @@ watch(() => props.visible, (newVisible) => {
 }
 
 .couplet-content {
-  max-height: 80vh;
   overflow-y: auto;
 }
 
@@ -115,11 +156,6 @@ watch(() => props.visible, (newVisible) => {
   display: inline-block;
 }
 
-.poster-image img {
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
 /* 图片加载提示 */
 .image-loading {
   position: absolute;

components/LoadingComponent.vue

@@ -17,6 +17,9 @@ const emit = defineEmits(['loaded', 'start'])
 const loadingProgress = ref(0)
 // 是否加载完成
 const isLoadingComplete = ref(false)
+// 是否显示开始按钮
+const showStartButton = ref(false)
+
 // 生成带时间戳的图片URL（避免缓存）
 const generateImageUrl = (name) => {
   const url = new URL(`/static/bg/${name}.jpg`, import.meta.url)
@@ -24,6 +27,11 @@ const generateImageUrl = (name) => {
   return url.href
 }
 
+// 计算开始按钮是否可见
+const startButtonVisible = computed(() => {
+  return isLoadingComplete.value && showStartButton.value
+})
+
 // 加载图片函数
 const loadImages = async () => {
   // 图片名称数组
@@ -66,16 +74,12 @@ const loadImages = async () => {
   isLoadingComplete.value = true
   loadingProgress.value = 100
   
-  // 延迟后自动开始，让用户看到100%的进度
+  // 延迟显示开始按钮，让用户看到100%的进度
   setTimeout(() => {
+    showStartButton.value = true
     // 通知父组件加载完成
     emit('loaded')
-    // 自动开始，进入首页
-    // 等待100ms确保进度条完全显示
-    setTimeout(() => {
-      emit('start')
   }, 500)
-  }, 100)
 }
 
 // 单个图片加载函数
@@ -88,7 +92,10 @@ const loadImage = (src) => {
   })
 }
 
-
+// 点击开始按钮
+const handleStart = () => {
+  emit('start')
+}
 
 // 组件挂载后开始加载图片
 onMounted(() => {
@@ -104,12 +111,17 @@ onMounted(() => {
     </div>
     
     <!-- 进度条区域 -->
-    <div class="progress-container">
+    <div v-if="!startButtonVisible" class="progress-container">
       <div class="progress-bar">
         <div class="progress-fill" :style="{ width: `${loadingProgress}%` }"></div>
       </div>
       <div class="progress-text">{{ loadingProgress }}%</div>
     </div>
+    
+    <!-- 开始按钮 -->
+    <div v-if="startButtonVisible" class="start-button" @click="handleStart">
+      <img src="/static/loading/btn_start.png" alt="开始" class="start-btn-image" />
+    </div>
   </div>
 </template>
 

components/QianmenScene.vue

@@ -300,6 +300,7 @@ onUnmounted(() => {
       <div class="pulse-indicator">
         <div class="pulse-circle"></div>
       </div>
+      <div class="hotspot-text">点击播放京韵大鼓</div>
     </div>
     
     <!-- sq1图片 -->
@@ -487,4 +488,20 @@ onUnmounted(() => {
   }
 }
 
+/* 热点文字提示 */
+.hotspot-text {
+  position: absolute;
+  bottom: -40rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24rpx;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  white-space: nowrap;
+  z-index: 30;
+  text-align: center;
+}
+
 </style>

components/SinglePageContainer.vue

@@ -1204,36 +1204,15 @@ onUnmounted(() => {
   transform: scale(1);
 }
 
-.scroll-tip {
-  position: absolute;
-  bottom: 50px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: bounce 1.5s infinite;
-}
 
-@keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateX(-50%) translateY(0);
-  }
-  40% {
-    transform: translateX(-50%) translateY(-20px);
-  }
-  60% {
-    transform: translateX(-50%) translateY(-10px);
-  }
-}
 
 /* 音乐控制按钮样式 */
 .music-control {
   position: fixed;
-  top: 20px;
+  width: 40px;
-  right: 20px;
+  height: 40px;
-  width: 50px;
+  top: 10px;
-  height: 50px;
+  right: 10px;
   border-radius: 50%;
   /* background-color: rgba(0, 0, 0, 0.3); */
   display: flex;
@@ -1278,35 +1257,4 @@ onUnmounted(() => {
   }
 }
 
-/* 响应式设计 */
-@media (max-width: 480px) {
-  .scene-title {
-    font-size: 24px;
-  }
-  
-  .scene-description {
-    font-size: 14px;
-  }
-  
-  .couplet-item {
-    font-size: 20px;
-  }
-  
-  .top-couplet, .bottom-couplet {
-    margin-right: 20px;
-    margin-left: 20px;
-  }
-  
-  .music-control {
-    width: 40px;
-    height: 40px;
-    top: 10px;
-    right: 10px;
-  }
-  
-  .music-icon {
-    width: 24px;
-    height: 24px;
-  }
-}
 </style>