<template>
<zy
-voice
-recorder ref="voiceRecorder" @start="onRecordStart" @stop="onRecordStop" @error="onRecordError">
<view
class="sound
-container"
v
-show="showSoundCom"
:style="{
'background
-image'
: `linear
-gradient(179deg, rgba(255, 255, 255, 0) 0%, #ffffff ${soundTop}px)`
}"
>
<view
class="sound
-content"
:style="{
top
: `${soundTop
- 16}px`
}"
>
<view
class="sound
-conten
-wave">
<view
class="sound
-conten
-wave
-bg">
<view
class="wave">
<div
class="voice
-container">
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
<div
class="bar"></div>
</div>
</view>
<view
class="arrow
-cion"></view>
</view>
<view
class="text">松开结束语音转文字</view>
</view>
<view
class="sound
-content
-icon">
<uni
-icons
v
-show="soundTop != 0"
type="yuyinzhong"
color="#0F56D5"
size="17"
class="mic
-icon"
style="position
: absolute; font
-size
: 17px; left
: 70%; top
: 50%; transform
: translate(
-50%,
-50%)"
/>
<image
class="img"
lazy
-load
src="https
://gateway
-in.rosino.com/prod/biz
-zy
-gateway/admin
-api/infra/file/22/get/xzzl/sound.png"
mode="widthFix"
/>
</view>
</view>
</view>
</zy
-voice
-recorder>
</template>
<script lang="ts" setup>
interface Props {
soundTop
: number
visible
: boolean
}
const props = withDefaults(defineProps<Props>(), {
visible
: false,
soundTop
: 0
})
const $emit = defineEmits<{
(e
: 'end', value
: string)
: void
}>()
const showSoundCom = ref(false)
const voiceRecorder = ref()
// 录音开始回调
function onRecordStart(res
: any) {
console.log('录音开始', res)
}
// 录音结束回调
function onRecordStop(data
: any) {
console.log('录音结束', data)
$emit('end', data.result)
// 如果需要，可以在这里处理录音文件和识别结果
// const audioPath = data.tempFilePath;
// const result = data.result;
}
// 录音错误回调
function onRecordError(res
: any) {
console.error('录音错误', res)
}
watch(
() => props.visible,
async val => {
if (val) {
showSoundCom.value = true
// 等待 Vue 更新 DOM
await nextTick()
// 再等待一帧，确保样式和布局完成（约 16ms）
setTimeout(() => {
voiceRecorder.value?.startRecord()
}, 16)
} else {
voiceRecorder.value?.stopRecord?.()
showSoundCom.value = false
}
},
{
immediate
: false,
deep
: true
}
)
</script>
<style scoped lang="s
css">
.sound
-container {
top
: 0;
position
: fixed;
z
-index
: 99;
height
: 100vh;
width
: 100%;
.sound
-content {
width
: 100%;
// position
: absolute;
display
: flex;
justify
-content
: center;
align
-items
: center;
position
: relative;
.sound
-conten
-wave {
.sound
-conten
-wave
-bg {
display
: flex;
align
-items
: center;
}
.arrow
-cion {
border
: 8px solid #5b8ff9;
border
-color
: transparent transparent transparent #5b8ff9;
}
.wave {
width
: 190px;
height
: 60px;
display
: flex;
align
-items
: center;
background
: #5b8ff9;
border
-radius
: 4px;
justify
-content
: center;
.voice
-container {
display
: flex;
align
-items
: center;
justify
-content
: center;
height
: 30px;
gap
: 2px; /* 条形间距 */
@keyframes wave {
0%,
100% {
height
: 15px;
} /* 最矮状态 */
50% {
height
: 8px;
} /* 最高状态 */
}
.bar {
width
: 2px;
height
: 15px;
background
-color
: #fff; /* 微信绿色 */
border
-radius
: 3px;
animation
: wave 1.2s infinite ease
-in
-out;
}
.bar
:nth-child(1) {
animation
-delay
: 0s;
}
.bar
:nth-child(2) {
animation
-delay
: 0.2s;
}
.bar
:nth-child(3) {
animation
-delay
: 0.4s;
}
.bar
:nth-child(4) {
animation
-delay
: 0.6s;
}
.bar
:nth-child(5) {
animation
-delay
: 0.8s;
}
.bar
:nth-child(6) {
animation
-delay
: 0s;
}
.bar
:nth-child(7) {
animation
-delay
: 0.2s;
}
.bar
:nth-child(8) {
animation
-delay
: 0.4s;
}
.bar
:nth-child(9) {
animation
-delay
: 0.6s;
}
.bar
:nth-child(10) {
animation
-delay
: 0.8s;
}
.bar
:nth-child(11) {
animation
-delay
: 0s;
}
.bar
:nth-child(12) {
animation
-delay
: 0.2s;
}
.bar
:nth-child(13) {
animation
-delay
: 0.4s;
}
.bar
:nth-child(14) {
animation
-delay
: 0.6s;
}
.bar
:nth-child(15) {
animation
-delay
: 0.8s;
}
.bar
:nth-child(16) {
animation
-delay
: 0s;
}
.bar
:nth-child(17) {
animation
-delay
: 0.2s;
}
.bar
:nth-child(18) {
animation
-delay
: 0.4s;
}
.bar
:nth-child(19) {
animation
-delay
: 0.6s;
}
.bar
:nth-child(20) {
animation
-delay
: 0.8s;
}
.bar
:nth-child(21) {
animation
-delay
: 0s;
}
.bar
:nth-child(22) {
animation
-delay
: 0.2s;
}
.bar
:nth-child(23) {
animation
-delay
: 0.4s;
}
.bar
:nth-child(24) {
animation
-delay
: 0.6s;
}
.bar
:nth-child(25) {
animation
-delay
: 0.8s;
}
}
}
.text {
font
-size
: 14px;
padding
: 12px 8px 0 0;
color
: #999999;
text
-align
: center;
}
}
.sound
-content
-icon {
position
: absolute;
right
: 0;
top
: -45px;
width
: 80px;
.img {
width
: 100%;
vertical
-align
: top;
}
}
}
}
.mic
-icon {
position
: absolute;
font
-size
: 17px;
left
: 70%;
top
: 50%;
transform
: translate(
-50%,
-50%);
}
</style>
icon还是会出现在点击后展示的图片的上边，然后闪现回到图片的中间
本文解析了CSS中的:nth-of-type()选择器的工作原理，重点解释了如何选择奇数索引的特定类名元素，并给出了具体示例。通过本文，读者可以了解到:nth-of-type()选择器与标签名之间的关联性。
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
