<template>
|
<u-popup :show="show" mode="bottom" :closeOnClickOverlay="false" @close="closePopup" zIndex="10071">
|
<view class="voice-popup">
|
<view class="header">
|
<text class="pl-30">语音输入</text>
|
<image src="/static/Appeal/close.png" class="w-34 h-34 mr-30" mode="" @click="closePopup"></image>
|
</view>
|
<view class="record-anim">
|
<image src="/static/Appeal/step.png" class="w-153 h-119" mode="" @click="onPlay"></image>
|
</view>
|
<view class="timer">{{ time }}</view>
|
<view class="btns">
|
<image src="/static/Appeal/start.png" class="w-153 h-153 mr-14" mode="" @click="onPlay"></image>
|
<image src="/static/Appeal/stop.png" class="w-153 h-153 mr-14" mode="" @click="onPause"></image>
|
<image src="/static/Appeal/cancel.png" class="w-153 h-153 mr-14" mode="" @click="onStop"></image>
|
</view>
|
</view>
|
</u-popup>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
time: '00:00:00',
|
barHeights: [20, 30, 40, 30, 20], // 可做动画
|
}
|
},
|
methods: {
|
closePopup() {
|
this.$emit('update:show', false)
|
},
|
onPlay() {},
|
onPause() {},
|
onStop() {},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.voice-popup {
|
background: #fff;
|
border-radius: 24rpx 24rpx 0 0;
|
padding: 40rpx 0 30rpx 0;
|
.header {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
font-size: 32rpx;
|
font-weight: bold;
|
margin-bottom: 80rpx;
|
text {
|
flex: 1;
|
text-align: center;
|
}
|
.u-icon {
|
position: absolute;
|
right: 30rpx;
|
top: 0;
|
}
|
}
|
.record-anim {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 57rpx;
|
.bars {
|
display: flex;
|
align-items: flex-end;
|
height: 60rpx;
|
.bar {
|
width: 10rpx;
|
margin: 0 4rpx;
|
background: linear-gradient(180deg, #ff4948 0%, #fc8d55 100%);
|
border-radius: 6rpx;
|
transition: height 0.3s;
|
}
|
}
|
}
|
.timer {
|
text-align: center;
|
font-size: 28rpx;
|
color: #888;
|
// margin-bottom: 30rpx;
|
}
|
.btns {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 40rpx 67rpx 76rpx 67rpx;
|
// .u-button {
|
// width: 100rpx;
|
// height: 100rpx;
|
// border-radius: 50%;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// margin: 0 10rpx;
|
// }
|
}
|
}
|
</style>
|
