diff --git a/components/LoadingComponent.vue b/components/LoadingComponent.vue index 49ba6ba..3d0320e 100644 --- a/components/LoadingComponent.vue +++ b/components/LoadingComponent.vue @@ -137,6 +137,7 @@ onMounted(() => { align-items: center; justify-content: center; z-index: 9999; + background-color: #fd4336; } .loading-bg { diff --git a/components/SinglePageContainer.vue b/components/SinglePageContainer.vue index ef54950..1ff9178 100644 --- a/components/SinglePageContainer.vue +++ b/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) + // 移除自动播放音乐的代码,避免触发浏览器自动播放限制 + // 音乐将在用户点击开始按钮或音乐控制按钮时播放 }) // 处理滚动事件(从下往上滑动) diff --git a/components/VideoPlayButton.vue b/components/VideoPlayButton.vue index 4477fdb..6b1f8aa 100644 --- a/components/VideoPlayButton.vue +++ b/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; } diff --git a/components/VideoPlayerModal.vue b/components/VideoPlayerModal.vue index 3ebe4e4..58ad564 100644 --- a/components/VideoPlayerModal.vue +++ b/components/VideoPlayerModal.vue @@ -37,9 +37,6 @@ const handleContentClick = (e) => { @@ -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; } \ No newline at end of file diff --git a/static/loading/loading_bg.jpg b/static/loading/loading_bg.jpg index fa818a3..23136aa 100644 Binary files a/static/loading/loading_bg.jpg and b/static/loading/loading_bg.jpg differ