0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
pages/tabbar/components/trend/voicePlay.vue Normal file
View File

@@ -0,0 +1,184 @@
<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: 340rpx;
border-radius: 20px;
padding: 16rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
font-size: 24rpx;
}
.play-btn {
width: 40rpx;
height: 40rpx;
}
.audio-box {
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
}
.audio1{
margin-right: 8rpx;
width: 6rpx;
height: 33.3%;
border-radius: 50px;
background-color: #fff;
}
.audio2{
margin-right: 8rpx;
width: 6rpx;
height: 66.6%;
border-radius: 50px;
background-color: #fff;
}
.audio3{
margin-right: 8rpx;
width: 6rpx;
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: 6rpx;
height: 33%;
}
25% {
width: 6rpx;
height: 66%;
}
50% {
width: 6rpx;
height: 100%;
}
75% {
width: 6rpx;
height: 66%;
}
100% {
width: 6rpx;
height: 33%;
}
}
@keyframes wave2{
0% {
width: 6rpx;
height: 66%;
}
25% {
width: 6rpx;
height: 33%;
}
50% {
width: 6rpx;
height: 66%;
}
75% {
width: 6rpx;
height: 100%;
}
100% {
width: 6rpx;
height: 66%;
}
}
@keyframes wave3{
0% {
width: 6rpx;
height: 100%;
}
50% {
width: 6rpx;
height: 33%;
}
100% {
width: 6rpx;
height: 100%;
}
}
</style>