From 40b16e5fc85c445e0f21cfb75c10f6839fbacdfe Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 22 十一月 2024 10:48:21 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/views/components/dictionary.vue | 176 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 104 insertions(+), 72 deletions(-)
diff --git a/src/views/components/dictionary.vue b/src/views/components/dictionary.vue
index 49c0079..a8d67d7 100644
--- a/src/views/components/dictionary.vue
+++ b/src/views/components/dictionary.vue
@@ -10,24 +10,38 @@
<div class="resultBox" v-if="searchResult.length > 0">
<div v-for="result in searchResult" :key="result.id">
<div class="phone_con">
- <div class="per-phone">鑻� /<span>{{result.ukPhone}}</span>/</div>
- <div class="per-phone">缇� /<span>{{result.usPhone}}</span>/</div>
+ <div class="per-phone">
+ 鑻� <span>/{{ result.ukPhone }}/</span
+ ><img
+ :src="sound"
+ class="soundBtn hover"
+ @click="soundWord(result.ukPhone)"
+ />
+ </div>
+ <div class="per-phone">
+ 缇� <span>/{{ result.usPhone }}/</span
+ ><img
+ :src="sound"
+ class="soundBtn hover"
+ @click="soundWord(result.usPhone)"
+ />
+ </div>
</div>
<div class="trans">
<div v-for="item in result.trans" :key="item">
<div class="itemList">
- <div class="pos">{{item.pos}}.</div>
- <div class="tranCn">{{item.tranCn}}</div>
+ <div class="pos">{{ item.pos }}.</div>
+ <div class="tranCn">{{ item.tranCn }}</div>
</div>
</div>
</div>
<div class="trans" v-if="result.phrase">
<div class="title">璇嶇粍鐭</div>
- <div v-for="(item,index) in result.phrase" :key="item">
+ <div v-for="(item, index) in result.phrase" :key="item">
<div class="itemList">
- <div class="index">{{index + 1}}</div>
- <div class="pos">{{item.pContent}}</div>
- <div class="tranCn">{{item.pCn}}</div>
+ <div class="index">{{ index + 1 }}</div>
+ <div class="pos">{{ item.pContent }}</div>
+ <div class="tranCn">{{ item.pCn }}</div>
</div>
</div>
</div>
@@ -35,71 +49,84 @@
<div class="title">杩戜箟璇�</div>
<div v-for="item in result.syno" :key="item">
<div class="itemList">
- <div class="pos">{{item.pos}}</div>
- <div class="tranCn">{{item.tran}}</div>
+ <div class="pos">{{ item.pos }}</div>
+ <div class="tranCn">{{ item.tran }}</div>
</div>
<div class="hwds">
- <div v-for="hw in item.hwds" :key="hw" class="">{{hw.w}}</div>
+ <div v-for="hw in item.hwds" :key="hw" class="">{{ hw.w }}</div>
</div>
</div>
</div>
<div class="trans" v-if="result.sentence">
<div class="title">渚嬪彞</div>
- <div v-for="(item,index) in result.sentence" :key="item">
+ <div v-for="(item, index) in result.sentence" :key="item">
<div class="itemList1">
- <div class="pos"><span class="index">{{index +1}}</span>{{item.sContent}}</div>
- <div class="tranCn">{{item.sCn}}</div>
+ <div class="pos">
+ <span class="index">{{ index + 1 }}</span
+ >{{ item.sContent }}
+ </div>
+ <div class="tranCn">{{ item.sCn }}</div>
</div>
</div>
</div>
</div>
</div>
- <div class="noResultBox" v-else>
- 鏆傛棤鍐呭
- </div>
+ <div class="noResultBox" v-else>鏆傛棤鍐呭</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, inject } from 'vue'
+import sound from '@/assets/images/operation/sound.png'
const MG: any = inject('MG')
const searchContent = ref('')
const isFull = ref(false)
-onMounted(() => {
-})
+onMounted(() => {})
const searchResult = ref([])
-
const getSearchResult = () => {
if (searchContent.value) {
- MG.edu.findWords([{
- word: searchContent.value,
- isFull: isFull.value
- }]).then((res) => {
+ MG.edu
+ .findWords([
+ {
+ word: searchContent.value,
+ isFull: isFull.value
+ }
+ ])
+ .then((res) => {
console.log(res)
- if (res.length > 0) {
- res[0].map((item) => {
- item.phrase = JSON.parse(item.phrase)
- item.relWord = JSON.parse(item.relWord)
- item.sentence = JSON.parse(item.sentence)
- item.syno = JSON.parse(item.syno)
- item.trans = JSON.parse(item.trans)
- })
- searchResult.value = res[0]
- }
- })
+ if (res.length > 0) {
+ res[0].map((item) => {
+ item.phrase = JSON.parse(item.phrase)
+ item.relWord = JSON.parse(item.relWord)
+ item.sentence = JSON.parse(item.sentence)
+ item.syno = JSON.parse(item.syno)
+ item.trans = JSON.parse(item.trans)
+ })
+ searchResult.value = res[0]
+ }
+ })
}
+}
+
+const soundWord =(word)=>{
+ window.speechSynthesis.cancel()
+ const synth = window.speechSynthesis
+ const utterances = new SpeechSynthesisUtterance(searchContent.value)
+ // utterances.lang = 'EN' // 璁剧疆璇█涓轰腑鏂�
+ synth.speak(utterances)
+
}
</script>
<style lang="less">
-.page{
- height:100%;
- overflow-y:auto
+.page {
+ height: 100%;
+ overflow-y: auto;
}
.search-Box {
- width: 400px;
+ width: 90%;
margin: 0 auto;
.custom-input {
height: 40px;
@@ -118,15 +145,15 @@
}
}
}
-.noResultBox{
- padding:40px;
+.noResultBox {
+ padding: 40px;
text-align: center;
}
-.resultBox{
- padding:20px;
- .phone_con{
- .per-phone{
- width:150px;
+.resultBox {
+ padding: 20px;
+ .phone_con {
+ .per-phone {
+ width: 200px;
align-items: center;
background: #f4f5f7;
border-radius: 15px;
@@ -136,43 +163,48 @@
font-weight: 500;
margin-right: 10px;
margin-top: 10px;
- // max-width: 100%;
+ max-width: 100%;
padding: 8px 10px;
- span{
- margin:0 10px;
+ span {
+ margin: 0 10px;
+ flex: 1;
+ }
+ .soundBtn {
+ width: 18px;
+ height: 16px;
}
}
}
- .trans{
- padding:20px 0;
- border-bottom:1px solid #eeeff0;
- .title{
- padding:10px 0;
- }
- .itemList{
- display:flex;
+ .trans {
+ padding: 20px 0;
+ border-bottom: 1px solid #eeeff0;
+ .title {
padding: 10px 0;
- .index{
- margin-right:15px;
+ }
+ .itemList {
+ display: flex;
+ padding: 10px 0;
+ .index {
+ margin-right: 15px;
}
- .pos{
- margin-right:30px;
+ .pos {
+ margin-right: 30px;
}
}
- .hwds{
- display:flex;
- div{
- padding:0 10px;
+ .hwds {
+ display: flex;
+ div {
+ padding: 0 10px;
}
}
- .itemList1{
- padding:10px 0;
- .index{
- margin-right:15px;
+ .itemList1 {
+ padding: 10px 0;
+ .index {
+ margin-right: 15px;
}
- .tranCn{
- margin-left:20px;
- margin-top:5px;
+ .tranCn {
+ margin-left: 20px;
+ margin-top: 5px;
}
}
}
--
Gitblit v1.9.1