<template>
|
<div class="page">
|
<div class="search-Box">
|
<el-input class="custom-input" placeholder="请输入内容" v-model="searchContent">
|
<template #suffix>
|
<el-icon @click="getSearchResult" class="hover"><Search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<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
|
><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>
|
</div>
|
</div>
|
<div class="trans" v-if="result.phrase">
|
<div class="title">词组短语</div>
|
<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>
|
</div>
|
</div>
|
<div class="trans" v-if="result.syno">
|
<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>
|
<div class="hwds">
|
<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 class="itemList1">
|
<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>
|
</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(() => {})
|
|
const searchResult = ref([])
|
|
const getSearchResult = () => {
|
if (searchContent.value) {
|
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]
|
}
|
})
|
}
|
}
|
|
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;
|
}
|
.search-Box {
|
width: 90%;
|
margin: 0 auto;
|
.custom-input {
|
height: 40px;
|
|
.el-input__wrapper {
|
border-radius: 10px;
|
width: 100%;
|
}
|
.multiselect__single {
|
background: none;
|
color: #2a2b2e;
|
font-size: 0.15rem;
|
font-weight: 500;
|
margin-bottom: 8px;
|
padding-left: 5px;
|
}
|
}
|
}
|
.noResultBox {
|
padding: 40px;
|
text-align: center;
|
}
|
.resultBox {
|
padding: 20px;
|
.phone_con {
|
.per-phone {
|
width: 200px;
|
align-items: center;
|
background: #f4f5f7;
|
border-radius: 15px;
|
box-sizing: border-box;
|
color: #666;
|
display: flex;
|
font-weight: 500;
|
margin-right: 10px;
|
margin-top: 10px;
|
max-width: 100%;
|
padding: 8px 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;
|
padding: 10px 0;
|
.index {
|
margin-right: 15px;
|
}
|
.pos {
|
margin-right: 30px;
|
}
|
}
|
.hwds {
|
display: flex;
|
div {
|
padding: 0 10px;
|
}
|
}
|
.itemList1 {
|
padding: 10px 0;
|
.index {
|
margin-right: 15px;
|
}
|
.tranCn {
|
margin-left: 20px;
|
margin-top: 5px;
|
}
|
}
|
}
|
}
|
</style>
|
