1054425342@qq.com
1 month ago
10 changed files with 914 additions and 31 deletions
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<div></div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'AudioPlayer', |
|||
props: ['src'], |
|||
data() { |
|||
return { |
|||
backgroundAudioManager: null, |
|||
currentTime: 0, |
|||
duration: 0, |
|||
timeUpdateTimer: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.backgroundAudioManager = wx.getBackgroundAudioManager() |
|||
|
|||
// 设置音频信息 |
|||
this.backgroundAudioManager.title = '有声电子书' |
|||
this.backgroundAudioManager.epname = '章节播放' |
|||
this.backgroundAudioManager.singer = 'EpicSoul' |
|||
this.backgroundAudioManager.coverImgUrl = '' |
|||
|
|||
// 监听播放事件 |
|||
this.backgroundAudioManager.onPlay(() => { |
|||
this.startTimeUpdate() |
|||
this.$emit('play') |
|||
}) |
|||
|
|||
// 监听暂停事件 |
|||
this.backgroundAudioManager.onPause(() => { |
|||
this.stopTimeUpdate() |
|||
this.$emit('pause') |
|||
}) |
|||
|
|||
// 监听停止事件 |
|||
this.backgroundAudioManager.onStop(() => { |
|||
this.stopTimeUpdate() |
|||
this.$emit('pause') |
|||
}) |
|||
|
|||
// 监听播放结束事件 |
|||
this.backgroundAudioManager.onEnded(() => { |
|||
this.stopTimeUpdate() |
|||
this.$emit('ended') |
|||
}) |
|||
|
|||
// 监听错误事件 |
|||
this.backgroundAudioManager.onError((err) => { |
|||
console.error('背景音频播放错误:', err) |
|||
this.stopTimeUpdate() |
|||
}) |
|||
|
|||
// 设置音频源 |
|||
if (this.src) { |
|||
this.backgroundAudioManager.src = this.src |
|||
} |
|||
}, |
|||
methods: { |
|||
play() { |
|||
if (this.backgroundAudioManager.src) { |
|||
this.backgroundAudioManager.play() |
|||
} |
|||
}, |
|||
pause() { |
|||
this.backgroundAudioManager.pause() |
|||
}, |
|||
seek(time) { |
|||
this.backgroundAudioManager.seek(time) |
|||
}, |
|||
startTimeUpdate() { |
|||
this.stopTimeUpdate() |
|||
this.timeUpdateTimer = setInterval(() => { |
|||
this.currentTime = this.backgroundAudioManager.currentTime || 0 |
|||
this.duration = this.backgroundAudioManager.duration || 0 |
|||
this.$emit('timeupdate', { |
|||
currentTime: this.currentTime, |
|||
duration: this.duration |
|||
}) |
|||
}, 100) |
|||
}, |
|||
stopTimeUpdate() { |
|||
if (this.timeUpdateTimer) { |
|||
clearInterval(this.timeUpdateTimer) |
|||
this.timeUpdateTimer = null |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
src(newSrc) { |
|||
if (newSrc) { |
|||
this.backgroundAudioManager.src = newSrc |
|||
} |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
this.stopTimeUpdate() |
|||
// 注意：不要销毁backgroundAudioManager，因为它是全局的 |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* AudioPlayer组件样式 */ |
|||
</style> |
|||
@ -0,0 +1,720 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 顶部标题栏 --> |
|||
<!-- 主要内容区域 --> |
|||
<!-- 文本显示区域 --> |
|||
<scroll-view |
|||
class="content" |
|||
:show-scrollbar="false" |
|||
enhanced |
|||
scroll-y |
|||
:scroll-top="scrollTop" |
|||
scroll-with-animation |
|||
:style="{ height: scrollViewHeight + 'px' }" |
|||
> |
|||
<view class="content-wrapper"> |
|||
<view class="article-content"> |
|||
<text |
|||
v-for="(line, index) in currentChapter.lines" |
|||
:key="index" |
|||
class="sentence" |
|||
:class="{ active: index === activeLineIndex }" |
|||
> |
|||
{{ line.text }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 底部控制栏 --> |
|||
<view class="controls"> |
|||
<!-- 章节信息栏 --> |
|||
<view class="chapter-info-bar"> |
|||
<text class="chapter-title">{{ currentChapter.title }}</text> |
|||
<text class="chapter-count"> |
|||
{{ currentChapterIndex + 1 }}/{{ chapters.length }} |
|||
</text> |
|||
</view> |
|||
|
|||
<!-- 进度条区域 --> |
|||
<view class="progress-section"> |
|||
<text class="current-time">{{ formatTime(currentTime) }}</text> |
|||
<view class="progress-container"> |
|||
<view class="progress-bar" @click="seek"> |
|||
<view class="progress" :style="{ width: progress + '%' }"></view> |
|||
<view |
|||
class="progress-thumb" |
|||
:style="{ left: progress + '%' }" |
|||
></view> |
|||
</view> |
|||
</view> |
|||
<text class="duration">{{ formatTime(duration) }}</text> |
|||
</view> |
|||
|
|||
<!-- 控制按钮区域 --> |
|||
<view class="control-buttons"> |
|||
<!-- 上一章按钮 --> |
|||
<button |
|||
class="control-btn prev-btn" |
|||
@click="prevChapter" |
|||
:disabled="currentChapterIndex === 0" |
|||
> |
|||
<text class="control-icon">⏮</text> |
|||
</button> |
|||
|
|||
<!-- 播放/暂停按钮 --> |
|||
<button class="play-btn" @click="togglePlay"> |
|||
<text class="play-icon">{{ playing ? "⏸️" : "▶️" }}</text> |
|||
</button> |
|||
|
|||
<!-- 下一章按钮 --> |
|||
<button |
|||
class="control-btn next-btn" |
|||
@click="nextChapter" |
|||
:disabled="currentChapterIndex === chapters.length - 1" |
|||
> |
|||
<text class="control-icon">⏭</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<AudioPlayer |
|||
ref="audioPlayer" |
|||
:src="currentChapter.audioUrl" |
|||
@timeupdate="onTimeUpdate" |
|||
@ended="onEnded" |
|||
></AudioPlayer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 由于uniapp不支持直接使用audio元素，我们使用innerAudioContext |
|||
import AudioPlayer from "../components/AudioPlayer.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
AudioPlayer, |
|||
}, |
|||
data() { |
|||
return { |
|||
chapters: [ |
|||
{ |
|||
title: "第一章：人工智能的崛起", |
|||
audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3", |
|||
content: `[00:00.00] 人工智能的发展历程 |
|||
[00:05.50] 从1950年代开始，人工智能作为一门学科正式诞生 |
|||
[00:12.30] 阿兰·图灵提出了著名的图灵测试 |
|||
[00:18.80] 这个测试成为了判断机器是否具有智能的标准 |
|||
[00:25.40] 早期的人工智能研究主要集中在符号推理 |
|||
[00:32.20] 科学家们试图用逻辑和规则来模拟人类思维 |
|||
[00:39.10] 然而，这种方法在处理复杂问题时遇到了困难 |
|||
[00:46.70] 直到神经网络和机器学习的出现 |
|||
[00:53.50] 人工智能才迎来了新的发展机遇 |
|||
[01:00.30] 深度学习技术的突破更是推动了AI的快速发展 |
|||
[01:07.80] 如今，人工智能已经渗透到我们生活的方方面面 |
|||
[01:14.60] 从智能手机到自动驾驶汽车 |
|||
[01:21.40] 从医疗诊断到金融分析 |
|||
[01:28.20] AI正在改变着整个世界的运作方式`, |
|||
}, |
|||
{ |
|||
title: "第二章：科技与人文的融合", |
|||
audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3", |
|||
content: `[00:00.00] 科技发展与人文关怀的平衡 |
|||
[00:06.50] 在快速发展的数字时代 |
|||
[00:12.20] 我们常常被各种新技术所包围 |
|||
[00:18.00] 智能手机、物联网、云计算 |
|||
[00:24.40] 这些技术极大地便利了我们的生活 |
|||
[00:30.10] 但同时也带来了新的挑战 |
|||
[00:35.80] 如何在享受科技便利的同时 |
|||
[00:41.50] 保持人与人之间的真实连接 |
|||
[00:47.20] 这成为了现代社会的重要课题 |
|||
[00:53.90] 教育领域正在探索新的教学模式 |
|||
[01:00.60] 将传统的人文教育与现代科技相结合 |
|||
[01:07.30] 培养既有技术能力又有人文素养的人才 |
|||
[01:14.00] 艺术创作也在科技的推动下焕发新生 |
|||
[01:20.70] 数字艺术、虚拟现实、增强现实 |
|||
[01:27.40] 为艺术家提供了全新的创作工具和表达方式`, |
|||
}, |
|||
{ |
|||
title: "第三章：未来社会的展望", |
|||
audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3", |
|||
content: `[00:00.00] 展望未来社会的发展趋势 |
|||
[00:06.50] 可持续发展将成为全球共识 |
|||
[00:12.20] 绿色能源技术不断突破 |
|||
[00:18.00] 太阳能、风能、氢能源的应用日益广泛 |
|||
[00:24.40] 智慧城市的建设正在加速推进 |
|||
[00:30.10] 通过大数据和人工智能 |
|||
[00:35.80] 城市管理将变得更加高效和智能 |
|||
[00:41.50] 交通拥堵、环境污染等问题将得到有效解决 |
|||
[00:47.20] 教育模式也将发生根本性变革 |
|||
[00:53.90] 个性化学习将成为主流 |
|||
[01:00.60] 每个学生都能获得量身定制的教育方案 |
|||
[01:07.30] 远程教育和虚拟课堂将普及全球 |
|||
[01:14.00] 医疗健康领域将迎来精准医疗时代 |
|||
[01:20.70] 基因治疗、纳米医学、再生医学 |
|||
[01:27.40] 这些前沿技术将为人类健康带来革命性改变 |
|||
[01:34.10] 未来的社会将更加包容、智能和可持续`, |
|||
}, |
|||
], |
|||
currentChapterIndex: 0, |
|||
playing: false, |
|||
currentTime: 0, |
|||
duration: 0, |
|||
activeLineIndex: -1, |
|||
scrollTop: 0, |
|||
scrollViewHeight: 0, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.syncAudioState(); |
|||
this.calculateScrollViewHeight(); |
|||
}, |
|||
onShow() { |
|||
// 页面显示时同步音频状态 |
|||
this.syncAudioState(); |
|||
}, |
|||
onHide() { |
|||
// 页面隐藏时保持音频播放状态 |
|||
// 背景音频会自动继续播放 |
|||
}, |
|||
computed: { |
|||
currentChapter() { |
|||
const chapter = this.chapters[this.currentChapterIndex]; |
|||
// 解析章节内容 |
|||
const lines = chapter.content |
|||
.split("\n") |
|||
.filter((line) => line.trim() !== ""); |
|||
const parsedLines = lines.map((line) => { |
|||
const match = line.match(/\[(\d+):(\d+)\.(\d+)\](.*)/); |
|||
if (match) { |
|||
return { |
|||
time: match[0].slice(0, match[0].indexOf("]") + 1), |
|||
text: match[4], |
|||
timeInSeconds: |
|||
parseInt(match[1]) * 60 + |
|||
parseInt(match[2]) + |
|||
parseInt(match[3]) / 100, |
|||
}; |
|||
} |
|||
return { time: "", text: line, timeInSeconds: 0 }; |
|||
}); |
|||
return { |
|||
...chapter, |
|||
lines: parsedLines, |
|||
}; |
|||
}, |
|||
progress() { |
|||
return (this.currentTime / this.duration) * 100 || 0; |
|||
}, |
|||
currentTimeFormatted() { |
|||
return this.formatTime(this.currentTime); |
|||
}, |
|||
durationFormatted() { |
|||
return this.formatTime(this.duration); |
|||
}, |
|||
}, |
|||
methods: { |
|||
togglePlay() { |
|||
if (this.playing) { |
|||
this.$refs.audioPlayer.pause(); |
|||
this.playing = false; |
|||
} else { |
|||
this.$refs.audioPlayer.play(); |
|||
this.playing = true; |
|||
} |
|||
}, |
|||
prevChapter() { |
|||
if (this.currentChapterIndex > 0) { |
|||
this.currentChapterIndex--; |
|||
this.resetPlayback(); |
|||
} |
|||
}, |
|||
nextChapter() { |
|||
if (this.currentChapterIndex < this.chapters.length - 1) { |
|||
this.currentChapterIndex++; |
|||
this.resetPlayback(); |
|||
} |
|||
}, |
|||
resetPlayback() { |
|||
this.playing = false; |
|||
this.currentTime = 0; |
|||
this.duration = 0; |
|||
this.activeLineIndex = -1; |
|||
this.scrollTop = 0; |
|||
|
|||
// 更新背景音频信息 |
|||
const currentChapter = this.chapters[this.currentChapterIndex]; |
|||
if ( |
|||
this.$refs.audioPlayer && |
|||
this.$refs.audioPlayer.backgroundAudioManager |
|||
) { |
|||
const bgAudio = this.$refs.audioPlayer.backgroundAudioManager; |
|||
bgAudio.title = currentChapter.title; |
|||
bgAudio.epname = `第${this.currentChapterIndex + 1}章`; |
|||
bgAudio.src = currentChapter.audioUrl; |
|||
// 确保音频从头开始播放 |
|||
bgAudio.currentTime = 0; |
|||
// 如果音频播放器有seek方法，也调用它来确保重置 |
|||
if (this.$refs.audioPlayer.seek) { |
|||
this.$refs.audioPlayer.seek(0); |
|||
} |
|||
} |
|||
}, |
|||
onTimeUpdate(e) { |
|||
this.currentTime = e.currentTime; |
|||
this.duration = e.duration; |
|||
|
|||
// 同步播放状态 |
|||
this.playing = !e.paused; |
|||
|
|||
// 找到当前应该高亮的行 |
|||
const lines = this.currentChapter.lines; |
|||
for (let i = lines.length - 1; i >= 0; i--) { |
|||
if (this.currentTime >= lines[i].timeInSeconds) { |
|||
if (this.activeLineIndex !== i) { |
|||
this.activeLineIndex = i; |
|||
// 滚动到当前行，这里简单实现：每行高度约100rpx，滚动到当前行 |
|||
this.scrollTop = i * 100; |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
onEnded() { |
|||
this.playing = false; |
|||
// 自动播放下一章节 |
|||
if (this.currentChapterIndex < this.chapters.length - 1) { |
|||
this.nextChapter(); |
|||
setTimeout(() => { |
|||
this.$refs.audioPlayer.play(); |
|||
this.playing = true; |
|||
}, 500); |
|||
} |
|||
}, |
|||
seek(e) { |
|||
// 使用uni.createSelectorQuery获取进度条信息 |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query |
|||
.select(".progress-bar") |
|||
.boundingClientRect((rect) => { |
|||
if (rect) { |
|||
const clickX = e.detail.x - rect.left; |
|||
const progressPercent = clickX / rect.width; |
|||
const seekTime = progressPercent * this.duration; |
|||
|
|||
if (seekTime >= 0 && seekTime <= this.duration) { |
|||
this.$refs.audioPlayer.seek(seekTime); |
|||
} |
|||
} |
|||
}) |
|||
.exec(); |
|||
}, |
|||
formatTime(seconds) { |
|||
const mins = Math.floor(seconds / 60); |
|||
const secs = Math.floor(seconds % 60); |
|||
return `${mins.toString().padStart(2, "0")}:${secs |
|||
.toString() |
|||
.padStart(2, "0")}`; |
|||
}, |
|||
syncAudioState() { |
|||
// 同步背景音频状态到界面 |
|||
if ( |
|||
this.$refs.audioPlayer && |
|||
this.$refs.audioPlayer.backgroundAudioManager |
|||
) { |
|||
const bgAudio = this.$refs.audioPlayer.backgroundAudioManager; |
|||
|
|||
// 检查当前是否有音频在播放 |
|||
if (bgAudio.src) { |
|||
// 同步播放状态 - 注意：paused为true表示暂停，false表示播放 |
|||
this.playing = !bgAudio.paused; |
|||
|
|||
// 同步时间信息 |
|||
this.currentTime = bgAudio.currentTime || 0; |
|||
this.duration = bgAudio.duration || 0; |
|||
|
|||
// 如果有音频在播放，启动时间更新 |
|||
if (this.playing) { |
|||
this.$refs.audioPlayer.startTimeUpdate(); |
|||
} |
|||
} else { |
|||
// 没有音频源时重置状态 |
|||
this.playing = false; |
|||
this.currentTime = 0; |
|||
this.duration = 0; |
|||
} |
|||
} |
|||
}, |
|||
calculateScrollViewHeight() { |
|||
// 获取系统信息 |
|||
const systemInfo = uni.getSystemInfoSync(); |
|||
const windowHeight = systemInfo.windowHeight; |
|||
|
|||
// 计算控制栏高度（大约300rpx转换为px） |
|||
const controlsHeight = 300 * (systemInfo.windowWidth / 750); |
|||
|
|||
// 计算内容区域可用高度 |
|||
this.scrollViewHeight = windowHeight - controlsHeight - 60; // 60px为额外边距 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.container { |
|||
height: 100vh; |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
|||
padding: 30rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
/* 顶部标题栏样式 */ |
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 40rpx 48rpx; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
backdrop-filter: blur(20rpx); |
|||
border-bottom: 2rpx solid rgba(255, 255, 255, 0.2); |
|||
box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.header-content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 48rpx; |
|||
font-weight: 700; |
|||
color: #2d3748; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-size: 32rpx; |
|||
color: #718096; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.chapter-info { |
|||
background: linear-gradient(135deg, #667eea, #764ba2); |
|||
padding: 16rpx 32rpx; |
|||
border-radius: 40rpx; |
|||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3); |
|||
} |
|||
|
|||
.chapter-count { |
|||
color: white; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.content { |
|||
width: 690rpx; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
backdrop-filter: blur(20rpx); |
|||
border-radius: 32rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.content-wrapper { |
|||
padding: 48rpx; |
|||
} |
|||
|
|||
.article-content { |
|||
line-height: 1.8; |
|||
font-size: 32rpx; |
|||
color: #2d3748; |
|||
text-align: justify; |
|||
} |
|||
|
|||
.sentence { |
|||
transition: all 0.3s ease; |
|||
padding: 4rpx 8rpx; |
|||
border-radius: 8rpx; |
|||
display: inline; |
|||
} |
|||
|
|||
.sentence.active { |
|||
background: linear-gradient( |
|||
135deg, |
|||
rgba(102, 126, 234, 0.15), |
|||
rgba(118, 75, 162, 0.15) |
|||
); |
|||
color: #667eea; |
|||
font-weight: 600; |
|||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2); |
|||
} |
|||
|
|||
/* 底部控制栏样式 */ |
|||
.controls { |
|||
background: rgba(255, 255, 255, 0.98); |
|||
backdrop-filter: blur(40rpx); |
|||
border-top: 2rpx solid rgba(255, 255, 255, 0.3); |
|||
box-shadow: 0 -16rpx 64rpx rgba(0, 0, 0, 0.12), |
|||
0 -4rpx 16rpx rgba(0, 0, 0, 0.08); |
|||
border-radius: 48rpx 48rpx 0 0; |
|||
padding: 32rpx 40rpx 40rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* 章节信息栏 */ |
|||
.chapter-info-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.chapter-title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #2d3748; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.chapter-count { |
|||
font-size: 24rpx; |
|||
color: #718096; |
|||
font-weight: 500; |
|||
background: rgba(139, 92, 246, 0.1); |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
backdrop-filter: blur(10rpx); |
|||
} |
|||
|
|||
/* 进度条区域 */ |
|||
.progress-section { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.current-time, |
|||
.duration { |
|||
font-size: 24rpx; |
|||
color: #718096; |
|||
font-weight: 500; |
|||
font-family: "Courier New", monospace; |
|||
min-width: 80rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 控制按钮区域 */ |
|||
.control-buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 32rpx; |
|||
} |
|||
|
|||
/* 播放按钮 */ |
|||
.play-btn { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
border-radius: 50%; |
|||
border: none; |
|||
background: linear-gradient(135deg, #8b5cf6, #a855f7); |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|||
box-shadow: 0 12rpx 40rpx rgba(139, 92, 246, 0.4), |
|||
0 6rpx 20rpx rgba(0, 0, 0, 0.15); |
|||
position: relative; |
|||
overflow: hidden; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 控制按钮（上一章/下一章） */ |
|||
.control-btn { |
|||
width: 88rpx; |
|||
height: 88rpx; |
|||
border-radius: 50%; |
|||
border: none; |
|||
background: rgba(139, 92, 246, 0.08); |
|||
color: #8b5cf6; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|||
box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.15); |
|||
backdrop-filter: blur(20rpx); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.play-btn::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: linear-gradient( |
|||
135deg, |
|||
rgba(255, 255, 255, 0.2), |
|||
rgba(255, 255, 255, 0.05) |
|||
); |
|||
border-radius: 50%; |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
} |
|||
|
|||
.play-btn:hover { |
|||
transform: scale(1.08); |
|||
box-shadow: 0 18rpx 56rpx rgba(139, 92, 246, 0.5), |
|||
0 9rpx 28rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.play-btn:hover::before { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.play-btn:active { |
|||
transform: scale(0.96); |
|||
transition: transform 0.1s ease; |
|||
} |
|||
|
|||
/* 进度条容器 */ |
|||
.progress-container { |
|||
flex: 1; |
|||
position: relative; |
|||
} |
|||
|
|||
.progress-bar { |
|||
height: 12rpx; |
|||
background: rgba(139, 92, 246, 0.12); |
|||
border-radius: 6rpx; |
|||
position: relative; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
backdrop-filter: blur(20rpx); |
|||
box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%); |
|||
border-radius: 6rpx; |
|||
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
|||
box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.3); |
|||
position: relative; |
|||
} |
|||
|
|||
.progress::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: linear-gradient( |
|||
90deg, |
|||
rgba(255, 255, 255, 0.3) 0%, |
|||
rgba(255, 255, 255, 0.1) 100% |
|||
); |
|||
border-radius: 6rpx; |
|||
} |
|||
|
|||
.progress-thumb { |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
background: white; |
|||
border: 4rpx solid #8b5cf6; |
|||
border-radius: 50%; |
|||
transform: translate(-50%, -50%); |
|||
box-shadow: 0 6rpx 20rpx rgba(139, 92, 246, 0.4), |
|||
0 3rpx 6rpx rgba(0, 0, 0, 0.1); |
|||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.progress-thumb:hover { |
|||
transform: translate(-50%, -50%) scale(1.2); |
|||
box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.5), |
|||
0 4rpx 8rpx rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/* 控制按钮交互效果 */ |
|||
.control-btn::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: linear-gradient( |
|||
135deg, |
|||
rgba(139, 92, 246, 0.1), |
|||
rgba(168, 85, 247, 0.05) |
|||
); |
|||
border-radius: 50%; |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
} |
|||
|
|||
.control-btn:hover { |
|||
background: rgba(139, 92, 246, 0.15); |
|||
transform: scale(1.1); |
|||
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.25); |
|||
} |
|||
|
|||
.control-btn:hover::before { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.control-btn:active { |
|||
transform: scale(0.95); |
|||
transition: transform 0.1s ease; |
|||
} |
|||
|
|||
.control-btn:disabled { |
|||
opacity: 0.3; |
|||
cursor: not-allowed; |
|||
transform: none; |
|||
box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1); |
|||
} |
|||
|
|||
.control-btn:disabled:hover { |
|||
background: rgba(139, 92, 246, 0.08); |
|||
transform: none; |
|||
box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1); |
|||
} |
|||
|
|||
.control-btn:disabled::before { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* 控制图标样式 */ |
|||
.control-icon { |
|||
font-size: 32rpx; |
|||
line-height: 1; |
|||
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1)); |
|||
} |
|||
|
|||
.play-icon { |
|||
font-size: 42rpx; |
|||
line-height: 1; |
|||
margin-left: 3rpx; |
|||
filter: drop-shadow(0 3rpx 6rpx rgba(0, 0, 0, 0.2)); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue