v1.2.8

1、loading页增加背景颜色，同时压缩loading_bg图片
2、点击开始按钮时，检测并进行音乐播放
3、调整视频播放关闭按钮位置

components/LoadingComponent.vue

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

components/SinglePageContainer.vue

@@ -234,6 +234,12 @@ const handleStart = () => {
   hasScrolled.value = false
   console.log('点击开始按钮，hasScrolled:', hasScrolled.value)
   
+  // 检查并播放背景音乐
+  if (!isMusicPlaying.value) {
+    console.log('背景音乐未播放，开始播放')
+    toggleMusic()
+  }
+  
   // 初始化页面
   initPage()
 }
@@ -330,9 +336,27 @@ const toggleMusic = () => {
     console.log('音乐已暂停')
   } else {
     // 播放音乐
-    audioPlayer.value.play()
-    isMusicPlaying.value = true
-    console.log('音乐已开始播放')
+    try {
+      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
+    }
   }
 }
 
@@ -343,10 +367,8 @@ onMounted(() => {
   // 初始化音乐播放器
   initMusicPlayer()
   
-  // 自动开始播放音乐
-  setTimeout(() => {
-    toggleMusic()
-  }, 1000)
+  // 移除自动播放音乐的代码，避免触发浏览器自动播放限制
+  // 音乐将在用户点击开始按钮或音乐控制按钮时播放
 })
 
 // 处理滚动事件（从下往上滑动）

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.9);
+  background-color: rgba(0, 0, 0, 0.4);
   transform: scale(1.05);
   animation: none;
 }

components/VideoPlayerModal.vue

@@ -37,9 +37,6 @@ 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"
@@ -48,6 +45,10 @@ 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>
 
@@ -63,6 +64,7 @@ const handleContentClick = (e) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   z-index: 999;
 }
 
@@ -70,18 +72,22 @@ 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 {
-  position: absolute;
-  top: 10rpx;
-  right: 10rpx;
-  width: 40rpx;
-  height: 40rpx;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 50%;
+  margin-top: 30rpx;
+  width: 68rpx;
+  height: 68rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,17 +95,9 @@ const handleContentClick = (e) => {
   z-index: 10;
 }
 
-.video-close-button span {
-  color: white;
-  font-size: 30rpx;
-  font-weight: bold;
-  line-height: 30rpx;
-  height: 30rpx;
-}
-
-.video-player {
-  width: 100%;
-  height: 100%;
-  background-color: #000;
+.close-icon {
+  width: 68rpx;
+  height: 68rpx;
+  object-fit: contain;
 }
 </style>