|
|
@ -100,12 +100,10 @@ |
|
|
|
<div v-if="viewNavActive=='broadcast'&&detailData.mp3Url" class="audio-controls"> |
|
|
|
<div v-if="viewNavActive=='broadcast'&&detailData.mp3Url" class="audio-controls"> |
|
|
|
<audio ref="audio" :src="baseUrl+detailData.mp3Url"></audio> |
|
|
|
<audio ref="audio" :src="baseUrl+detailData.mp3Url"></audio> |
|
|
|
<div :class="{ playing: isPlaying }" class="play-pause" @click="togglePlayback"></div> |
|
|
|
<div :class="{ playing: isPlaying }" class="play-pause" @click="togglePlayback"></div> |
|
|
|
<div class="progress-bar" @click="seek($event)"> |
|
|
|
<div class="progress-bar" > |
|
|
|
<div :style="{ width: progressPercentage }" class="progress"></div> |
|
|
|
<div :style="{ width: progressPercentage }" class="progress"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="volume-bar" @click="adjustVolume($event)"> |
|
|
|
|
|
|
|
<div :style="{ height: volumePercentage }" class="progress"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="time-display">{{ currentTimeDisplay }}</div> |
|
|
|
<div class="time-display">{{ currentTimeDisplay }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -712,7 +710,7 @@ export default { |
|
|
|
isPlaying: false, |
|
|
|
isPlaying: false, |
|
|
|
duration: 0, |
|
|
|
duration: 0, |
|
|
|
currentTime: 0, |
|
|
|
currentTime: 0, |
|
|
|
volume: 1.0, // 默认音量为最大值 |
|
|
|
volume: 1, // 默认音量为最大值 |
|
|
|
|
|
|
|
|
|
|
|
baseUrl: process.env.VUE_APP_BASE_API, |
|
|
|
baseUrl: process.env.VUE_APP_BASE_API, |
|
|
|
flowData: {}, |
|
|
|
flowData: {}, |
|
|
@ -858,6 +856,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
seek(event) { |
|
|
|
seek(event) { |
|
|
|
|
|
|
|
console.log(event,'999') |
|
|
|
const barWidth = event.currentTarget.offsetWidth; |
|
|
|
const barWidth = event.currentTarget.offsetWidth; |
|
|
|
const clickPosition = event.clientX - event.currentTarget.offsetLeft; |
|
|
|
const clickPosition = event.clientX - event.currentTarget.offsetLeft; |
|
|
|
const percentage = clickPosition / barWidth; |
|
|
|
const percentage = clickPosition / barWidth; |
|
|
@ -1783,17 +1782,17 @@ video { |
|
|
|
padding: 0 5px; |
|
|
|
padding: 0 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.play-btn { |
|
|
|
.play-pause { |
|
|
|
width: 30px; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
height: 30px; |
|
|
|
background-image: url("~@/assets/images/p_pause.svg"); |
|
|
|
background-image: url("~@/assets/images/p_play.svg"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: cover; |
|
|
|
background-size: cover; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.play-btn.playing { |
|
|
|
.play-pause.playing { |
|
|
|
background-image: url("~@/assets/images/p_play.svg"); |
|
|
|
background-image: url("~@/assets/images/p_pause.svg"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.progress-bar { |
|
|
|
.progress-bar { |
|
|
|