<template>
|
<div class="voiceReader">
|
<ul class="reader-box">
|
<li @click="changePlay">
|
<img :src="readerState.isPlay ? playIcon : pauseIcon" alt="" />
|
<span>{{ readerState.isPlay ? '播放' : '暂停' }}</span>
|
</li>
|
<li>
|
<img :src="prevIcon" alt="" class="next-icon" />
|
<span>上一句</span>
|
</li>
|
<li>
|
<img :src="nextIcon" alt="" class="next-icon" />
|
<span>下一句</span>
|
</li>
|
<li>
|
<img :src="repeateIcon" alt="" />
|
<span>复读</span>
|
</li>
|
<li>
|
<img :src="followIcon" alt="" />
|
<span>跟读</span>
|
</li>
|
<li>
|
<img :src="followPlayIcon" alt="" />
|
<span>跟读播放</span>
|
</li>
|
<li class="voice-dropDown">
|
<el-dropdown @command="changeSpeed">
|
<div class="el-dropdown-link dropDown-box">
|
<img :src="speedIcon" alt="" />
|
<span> 速度 </span>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item v-for="(item, index) in readerState.speedList" :key="index" :command="item">{{
|
item
|
}}x</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue'
|
import playIcon from '@/assets/images/voice/play.png'
|
import pauseIcon from '@/assets/images/voice/pause.png'
|
import prevIcon from '@/assets/images/voice/shangyiju.png'
|
import nextIcon from '@/assets/images/voice/xiayiju.png'
|
import repeateIcon from '@/assets/images/voice/fudu.png'
|
import followIcon from '@/assets/images/voice/gendu.png'
|
import followPlayIcon from '@/assets/images/voice/gendubofang.png'
|
import speedIcon from '@/assets/images/voice/sudu.png'
|
const readerState = reactive({
|
isPlay: false,
|
selecte: '', // 选中
|
speed:"", // 播放速度
|
speedList: ['0.5', '0.8', '1.0', '1.5']
|
})
|
|
const changePlay = () => {
|
if (readerState.isPlay) {
|
readerState.isPlay = false
|
} else {
|
readerState.isPlay = true
|
}
|
}
|
const changeSpeed = (command:string) => {
|
console.log('速度',command);
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.voiceReader {
|
height: 58px;
|
width: 500px;
|
border: 1px solid #0093ff;
|
background-color: #fff;
|
border-radius: 8px;
|
}
|
.reader-box {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
font-size: 12px;
|
color: #2c2c2c;
|
li {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
cursor: pointer;
|
img {
|
width: 20px;
|
object-fit: contain;
|
margin-top: 5px;
|
}
|
}
|
}
|
.next-icon {
|
width: 16px !important;
|
}
|
.el-dropdown-link {
|
height: 100%;
|
}
|
.voice-dropDown {
|
.dropDown-box {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
img {
|
margin-top: 5px;
|
}
|
}
|
/deep/ .el-tooltip__trigger:focus {
|
outline: none; // unset 这个也行
|
}
|
}
|
.el-dropdown-menu {
|
background-color: #2C2C2C ;
|
border-color: #2C2C2C !important;
|
}
|
</style>
|
