<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">
|
<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>
|
<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">
|
<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">
|
<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">
|
<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>
|
</template>
|
<script setup lang="ts">
|
import { ref, reactive, watch, onMounted, inject } from 'vue'
|
const request = inject('request')
|
const props = defineProps({
|
searchCon: String
|
})
|
const searchContent = ref('')
|
const isFull = ref(false)
|
watch(props, (newValue) => {
|
// 统监听props的值变化，动态修改isShow的值
|
searchContent.value = newValue.searchCon
|
getSearchResult()
|
})
|
|
onMounted(() => {
|
if(props){
|
searchContent.value = props.searchCon
|
getSearchResult()
|
}
|
})
|
|
const searchResult = ref([])
|
|
|
const getSearchResult = () => {
|
if (searchContent.value) {
|
request({
|
url: '/edu/api/FindWords',
|
method: 'post',
|
data: {
|
word: searchContent.value,
|
isFull: isFull.value
|
}
|
}).then((res) => {
|
if (res.length > 0) {
|
res.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
|
}
|
})
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.page{
|
height:100%;
|
overflow-y:auto
|
}
|
.search-Box {
|
width: 400px;
|
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;
|
}
|
}
|
}
|
.resultBox{
|
padding:20px;
|
.phone_con{
|
.per-phone{
|
width:150px;
|
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;
|
}
|
}
|
}
|
.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>
|
