From 92845ee4a3898c4c65bc85bbbe777e4595897e3d Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 02 七月 2024 14:43:29 +0800
Subject: [PATCH] 语音阅读小窗
---
src/assets/images/voice/xiayiju.png | 0
src/assets/images/voice/gendubofang.png | 0
src/views/readerPages/webHome.vue | 19 ++++++
src/assets/images/voice/shangyiju.png | 0
src/assets/images/voice/gendu.png | 0
src/assets/images/voice/play.png | 0
src/assets/images/voice/sudu.png | 0
src/views/components/voiceReader.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
src/assets/images/voice/fudu.png | 0
src/views/examination/index.vue | 24 ++++----
src/assets/images/voice/pause.png | 0
11 files changed, 159 insertions(+), 12 deletions(-)
diff --git a/src/assets/images/voice/fudu.png b/src/assets/images/voice/fudu.png
new file mode 100644
index 0000000..0c88c3d
--- /dev/null
+++ b/src/assets/images/voice/fudu.png
Binary files differ
diff --git a/src/assets/images/voice/gendu.png b/src/assets/images/voice/gendu.png
new file mode 100644
index 0000000..56bc71c
--- /dev/null
+++ b/src/assets/images/voice/gendu.png
Binary files differ
diff --git a/src/assets/images/voice/gendubofang.png b/src/assets/images/voice/gendubofang.png
new file mode 100644
index 0000000..ca81029
--- /dev/null
+++ b/src/assets/images/voice/gendubofang.png
Binary files differ
diff --git a/src/assets/images/voice/pause.png b/src/assets/images/voice/pause.png
new file mode 100644
index 0000000..93cb903
--- /dev/null
+++ b/src/assets/images/voice/pause.png
Binary files differ
diff --git a/src/assets/images/voice/play.png b/src/assets/images/voice/play.png
new file mode 100644
index 0000000..1fabb94
--- /dev/null
+++ b/src/assets/images/voice/play.png
Binary files differ
diff --git a/src/assets/images/voice/shangyiju.png b/src/assets/images/voice/shangyiju.png
new file mode 100644
index 0000000..8d16149
--- /dev/null
+++ b/src/assets/images/voice/shangyiju.png
Binary files differ
diff --git a/src/assets/images/voice/sudu.png b/src/assets/images/voice/sudu.png
new file mode 100644
index 0000000..53cf6ad
--- /dev/null
+++ b/src/assets/images/voice/sudu.png
Binary files differ
diff --git a/src/assets/images/voice/xiayiju.png b/src/assets/images/voice/xiayiju.png
new file mode 100644
index 0000000..73996be
--- /dev/null
+++ b/src/assets/images/voice/xiayiju.png
Binary files differ
diff --git a/src/views/components/voiceReader.vue b/src/views/components/voiceReader.vue
new file mode 100644
index 0000000..36ae62c
--- /dev/null
+++ b/src/views/components/voiceReader.vue
@@ -0,0 +1,128 @@
+<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>
diff --git a/src/views/examination/index.vue b/src/views/examination/index.vue
index 861ab52..2cba8ed 100644
--- a/src/views/examination/index.vue
+++ b/src/views/examination/index.vue
@@ -624,16 +624,16 @@
domain: 'collectData',
keys: [props.activeBook.bookId]
})
- .then(async (res) => {
+ .then(async (res:any) => {
try {
const collect = JSON.parse(res[0].value)
if (collect.length) {
- examination.collectList = collect.find((citem) => citem.type == 'bits').collectList
+ examination.collectList = collect.find((citem:any) => citem.type == 'bits').collectList
examination.allCollect[0].collectList = collect.find(
- (citem) => citem.type == 'bits'
+ (citem:any) => citem.type == 'bits'
).collectList
examination.allCollect[1].collectList = collect.find(
- (citem) => citem.type == 'json'
+ (citem:any) => citem.type == 'json'
).collectList
}
} catch (error) {}
@@ -665,7 +665,7 @@
const getCollectDataList = async () => {
// 寮�濮嬭姹�
let oldData = null
- let oldList = []
+ let oldList:any = []
let cardList = [
{
catalogName: '鍗曢�夐',
@@ -688,11 +688,11 @@
infoList: []
}
]
- let singleChoiceArr = [] // 鍗曢��
- let judgeArr = [] // 鍒ゆ柇
- let shortArr = [] // 绠�绛�
- let multipleChoiceArr = [] // 澶氶��
- let completionArr = [] // 濉┖
+ let singleChoiceArr:any = [] // 鍗曢��
+ let judgeArr:any = [] // 鍒ゆ柇
+ let shortArr:any = [] // 绠�绛�
+ let multipleChoiceArr:any = [] // 澶氶��
+ let completionArr:any = [] // 濉┖
// 11
for (let qindex = 0; qindex < examination.collectList.length; qindex++) {
const qitem = examination.collectList[qindex]
@@ -786,7 +786,7 @@
questionObj.stem.stemImage = getPublicImage(questionObj.stem.stemImage, 150)
}
if (questionObj.optionStyle == 'Image' || questionObj.optionStyle == 'TxtAndImage') {
- questionObj.option.forEach((optionItem) => {
+ questionObj.option.forEach((optionItem:any) => {
if (optionItem.img) optionItem.img = getPublicImage(optionItem.img, 150)
})
}
@@ -808,7 +808,7 @@
questionObj.questionType == 'judge' ||
questionObj.questionType == 'multipleChoice')
) {
- questionObj.option.forEach((item) => {
+ questionObj.option.forEach((item:any) => {
if (item.txt)
item.txt = item.txt
.replace(/\<img/gi, '<img class="option-rich-img"')
diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue
index b96fab7..796cff7 100644
--- a/src/views/readerPages/webHome.vue
+++ b/src/views/readerPages/webHome.vue
@@ -815,6 +815,10 @@
</div>
</div>
</div>
+ <!-- 璇煶闃呰缁勪欢 -->
+ <!-- <div class="voice-reader">
+ <voiceReader />
+ </div> -->
</div>
<!-- 鏁欏缁勪欢 -->
<div class="toolBox">
@@ -1242,6 +1246,10 @@
:type="examinationData.type"
:infoType="examinationData.infoType"
/>
+ <!-- 璁＄畻鍣� -->
+ <el-dialog title="璁＄畻鍣�" align-center v-model="calculatorVisble" width="40%">
+
+ </el-dialog>
</template>
<script setup lang="ts">
@@ -1263,6 +1271,7 @@
import dictionary from '@/views/components/dictionary.vue'
import newWord from '@/views/components/newWord.vue'
import wrongQuestion from '@/views/components/wrongQuestion.vue'
+import voiceReader from '@/views/components/voiceReader.vue'
import { ElMessage, ElMessageBox, valueEquals } from 'element-plus'
import logo from '@/assets/images/header/logo.png'
import mulu from '@/assets/images/menu/mulu.png'
@@ -2698,6 +2707,7 @@
const siweiVisble = ref(false)
const modelToolVisble = ref(false)
const shengciVisble = ref(false)
+const calculatorVisble = ref(false)
const activeTool = ref(0)
const toolState = reactive({
open: true
@@ -2726,6 +2736,10 @@
case '鐢熻瘝鍗＄墖':
resourceUrl.value = bookConfig.value.resourceUrl
shengciVisble.value = true
+ break
+ case '璁＄畻鍣�':
+ calculatorVisble.value = true
+ break
}
} else {
ElMessageBox.confirm('璇峰厛鐧诲綍锛�', {
@@ -5129,4 +5143,9 @@
width: 100%;
}
}
+.voice-reader {
+ position:absolute;
+ bottom:30px;
+ left:50px;
+}
</style>
--
Gitblit v1.9.1