185 lines
2.7 KiB
Vue
185 lines
2.7 KiB
Vue
<template>
|
|
<view class="voice-btn" @click="playBtn" :class="play?'audioplaying':''">
|
|
<img class="play-btn" src="@/static/images/audio.png"></img>
|
|
<view class="audio-box">
|
|
<view class="audio1 wave1"></view>
|
|
<view class="audio2 wave2"></view>
|
|
<view class="audio3 wave3"></view>
|
|
<view class="audio2 wave2"></view>
|
|
<view class="audio1 wave1"></view>
|
|
<view class="audio2 wave2"></view>
|
|
<view class="audio3 wave3"></view>
|
|
<view class="audio2 wave2"></view>
|
|
<view class="audio1 wave1"></view>
|
|
<view class="audio2 wave2"></view>
|
|
<view class="audio3 wave3"></view>
|
|
<view class="audio2 wave2"></view>
|
|
</view>
|
|
<view>{{sec}}"</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
emits: ['playAudio'],
|
|
props: {
|
|
isPlay: {
|
|
type: [Boolean],
|
|
default: false
|
|
},
|
|
sec: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
play: false,
|
|
};
|
|
},
|
|
watch: {
|
|
isPlay: {
|
|
handler(newVal) {
|
|
this.play = newVal;
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
methods: {
|
|
playBtn() {
|
|
/* if(this.play){
|
|
this.play = false;
|
|
}else{
|
|
this.play = true;
|
|
} */
|
|
this.$emit('playAudio');
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
view{
|
|
box-sizing: border-box;
|
|
}
|
|
.voice-btn {
|
|
background-color: #3cc9a4;
|
|
width: 140rpx;
|
|
border-radius: 20px;
|
|
padding: 8rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.play-btn {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.audio-box {
|
|
height: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.audio1{
|
|
margin-right: 2rpx;
|
|
width: 1px;
|
|
height: 33.3%;
|
|
border-radius: 50px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.audio2{
|
|
margin-right: 2rpx;
|
|
width: 1px;
|
|
height: 66.6%;
|
|
border-radius: 50px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.audio3{
|
|
margin-right: 2rpx;
|
|
width: 1px;
|
|
height: 100%;
|
|
border-radius: 50px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.audioplaying .wave1 {
|
|
animation: wave1 1s linear 0s infinite;
|
|
}
|
|
|
|
.audioplaying .wave2 {
|
|
animation: wave2 1s linear 0s infinite;
|
|
}
|
|
|
|
.audioplaying .wave3 {
|
|
animation: wave3 1s linear 0s infinite;
|
|
}
|
|
|
|
@keyframes wave1{
|
|
0% {
|
|
width: 1px;
|
|
height: 33%;
|
|
}
|
|
25% {
|
|
width: 1px;
|
|
height: 66%;
|
|
}
|
|
50% {
|
|
width: 1px;
|
|
height: 100%;
|
|
}
|
|
75% {
|
|
width: 1px;
|
|
height: 66%;
|
|
}
|
|
100% {
|
|
width: 1px;
|
|
height: 33%;
|
|
}
|
|
}
|
|
|
|
@keyframes wave2{
|
|
0% {
|
|
width: 1px;
|
|
height: 66%;
|
|
}
|
|
25% {
|
|
width: 1px;
|
|
height: 33%;
|
|
}
|
|
50% {
|
|
width: 1px;
|
|
height: 66%;
|
|
}
|
|
75% {
|
|
width: 1px;
|
|
height: 100%;
|
|
}
|
|
100% {
|
|
width: 1px;
|
|
height: 66%;
|
|
}
|
|
}
|
|
|
|
@keyframes wave3{
|
|
0% {
|
|
width: 1px;
|
|
height: 100%;
|
|
}
|
|
50% {
|
|
width: 1px;
|
|
height: 33%;
|
|
}
|
|
100% {
|
|
width: 1px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
</style>
|