From bdc230636170b264c3ece04a1b222cfbf7b9968a Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期六, 11 五月 2024 18:23:45 +0800 Subject: [PATCH] qiankun --- src/views/components/dictionary.vue | 93 +++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 90 insertions(+), 3 deletions(-) diff --git a/src/views/components/dictionary.vue b/src/views/components/dictionary.vue index 7531fff..f17db7c 100644 --- a/src/views/components/dictionary.vue +++ b/src/views/components/dictionary.vue @@ -1,5 +1,5 @@ <template> - <div> + <div class="page"> <div class="searchBox"> <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchContent"> <template #suffix> @@ -10,8 +10,47 @@ <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 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> @@ -45,6 +84,13 @@ console.log(JSON.parse(res[0].sentence)[0].sCn) // encodeURIComponent(res[0].syno[0].tran) 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 } }) @@ -53,6 +99,10 @@ </script> <style lang="less"> +.page{ + height:100%; + overflow-y:auto +} .searchBox { width: 400px; margin: 0 auto; @@ -74,6 +124,7 @@ } } .resultBox{ + padding:20px; .phone_con{ .per-phone{ width:150px; @@ -88,6 +139,42 @@ 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; + } } } } -- Gitblit v1.9.1