资源

litian

3 天以前 8bb0a518dd4d9450370582c4d4ac3ae1dba1466b

 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;
      }
    }
  }