mediaAll/src/view/allMedia/AIeditor/components/dictionary.vue

<template>
  <div class="dictionary">
    <el-input
      style="width: 310px"
      v-model="input1"
      placeholder="请输入您要查询的字词"
    >
      <template #append>
        <el-button
          type="primary"
          :loading="is_status === 'load'"
          @click="search"
          >查询</el-button
        >
      </template>
    </el-input>
    <el-card style="margin-top: 1em" v-if="oriD.pinyin">
      <el-tabs v-model="activeName">
        <el-tab-pane v-if="oriD.cyjs" label="词语解释" name="词语解释">
          <div class="tab_pane">
            <div class="pinyin" v-text="'拼音:' + oriD.pinyin"></div>
            <ul class="dictionary-ul">
              <li
                v-for="(v, i) in oriD.chinese_words_name"
                :key="i"
                v-text="v"
              ></li>
            </ul>
            <div class="note" v-html="oriD.cyjs"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="oriD.gycd" label="国语辞典" name="国语辞典">
          <div class="note" v-html="oriD.gycd"></div>
        </el-tab-pane>
        <el-tab-pane v-if="oriD.wljs" label="网络解释" name="网络解释">
          <div class="bknr" v-html="oriD.wljs"></div>
        </el-tab-pane>
        <el-tab-pane v-if="oriD.bushou" label="基本解释" name="基本解释">
          <ul class="dictionary-ul">
            <li v-text="oriD.chinese_words_name"></li>
          </ul>
          <div style="display: inline-block; ,argin-left: 15px">
            <div class="pinyin" v-text="'拼音:' + oriD.pinyin"></div>
            <div class="pinyin" v-text="'部首:' + oriD.bushou"></div>
          </div>
          <div class="note" v-html="oriD.jbjs"></div>
        </el-tab-pane>
        <el-tab-pane v-if="oriD.xxjs" label="详细解释" name="详细解释">
          <div class="note" v-html="oriD.xxjs"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div
      v-if="oriD.find === 2"
      style="width: 100%; height: 50px; line-height: 50px; text-align: center"
    >
      抱歉，没有找到该词语
    </div>
  </div>
</template>

<script setup>
// 词典
import { getVocabularyInfo } from '@/api/aleditor.js';
import { ref } from 'vue';
const is_status = ref('none');
const input1 = ref('');
const activeName = ref('词语解释');
const oriD = ref({
  find: 0,
});

const search = () => {
  if (!input1.value) return;
  is_status.value = 'load';
  oriD.value.find = 1;
  getVocabularyInfo({
    data: {
      isSampleDocument: false,
      name: input1.value,
    },
  })
    .then(r => {
      console.log(r);
      is_status.value = 'none';
      oriD.value.bushou && (activeName.value = '基本解释');
      !oriD.value.pinyin ? (oriD.value.find = 2) : (oriD.value.find = 0);
    })
    .catch(() => {
      oriD.value.find = 2;
      is_status.value = 'none';
    });
};
</script>

<style scoped>
.dictionary {
  padding: 2px 10px 10px;
}
.pinyin {
  margin: 5px 5px 5px 0;
  display: block;
  font-size: 20px;
  color: #000;
}
.tab_pane {
  font-family: BlinkMacSystemFont, -apple-system, PingFang SC, Hiragino Sans GB,
    Source Han Sans SC, Noto Sans CJK SC, Microsoft YaHei, WenQuanYi Micro Hei,
    SimHei, sans-serif;
}
.note {
  font-family: 微软雅黑, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  color: #888;
  font-size: 14px;
}

.dictionary-ul {
  display: inline-block;
  margin-left: 0 !important;
}

.dictionary-ul li {
  color: #000 !important;
  margin-left: 0 !important;
  font-family: '\6977\4F53', '\6977\4F53_gb2312' !important;
  display: inline-block !important;
  width: 80px;
  height: 80px;
  font-size: 58px;
  text-align: center !important;
  line-height: 80px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS0yIDQwaDgyTTQwLTJ2ODIiIHN0cm9rZS1kYXNoYXJyYXk9IjQsNCIgc3Ryb2tlPSIjNjY2IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEgMWg3OHY3OEgxeiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiMxMTEiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) !important;
  margin: 0 5px 5px 0 !important;
  background-size: contain;
}

.bknr {
  width: 100%;
  color: #888;
  font-size: 14px;
  font-family: \\5fae软雅黑, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bknr h3 {
  font-weight: 600;
  font-size: 20px;
}
</style>