|
|
@@ -0,0 +1,1249 @@
|
|
|
+<template>
|
|
|
+ <div class="wordDetailModule wordDetailChs">
|
|
|
+ <div class="module-inner">
|
|
|
+ <div class="top" v-if="data">
|
|
|
+ <div class="operation">
|
|
|
+ <div>
|
|
|
+ <template v-if="optionRes && optionRes.length > 0">
|
|
|
+ <!-- <img
|
|
|
+ src="../../../../assets/icon/starline-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ v-if="!notshowNext"
|
|
|
+ /> -->
|
|
|
+ <img
|
|
|
+ style="margin-right: 8px"
|
|
|
+ src="../../../../assets/icon/Left-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ @click="lastDetail"
|
|
|
+ v-if="!notshowNext"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../../../assets/icon/Right-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ @click="nextDetail"
|
|
|
+ v-if="!notshowNext"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <img
|
|
|
+ style="margin-right: 0px"
|
|
|
+ @click="closeWordShow"
|
|
|
+ src="../../../../assets/icon/Cross-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wordDetail">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'bwc-Strockplay',
|
|
|
+ themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
|
|
|
+ ]"
|
|
|
+ v-if="data.new_word_str.length <= 4"
|
|
|
+ >
|
|
|
+ <div class="strockplay" v-for="(conItem, conindex) in data.new_word_str" :key="'new_word_' + conindex">
|
|
|
+ <Strockplayredline
|
|
|
+ :key="conItem + detailIndex + conindex"
|
|
|
+ :Book_text="conItem"
|
|
|
+ :playStorkes="true"
|
|
|
+ :targetDiv="'bwcHanziIntp' + conItem + detailIndex + conindex"
|
|
|
+ :wordNum="data.new_word_str.length"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ :class="['bwc-line', themeColor == 'green' ? 'green-bg' : themeColor == 'red' ? 'red-bg' : 'brown-bg']"
|
|
|
+ v-if="conindex < data.new_word_str.length - 1"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p
|
|
|
+ v-else
|
|
|
+ :class="[
|
|
|
+ 'bwc-tolength',
|
|
|
+ themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <span v-for="(item, index) in data.new_word_str" :key="index">{{ item }}</span>
|
|
|
+ </p>
|
|
|
+ <div class="wordInfor">
|
|
|
+ <div class="yinpin">
|
|
|
+ <span class="pinyintext"> {{ data.pinyin.toLowerCase() }}</span>
|
|
|
+ <template v-if="data.newWordMp3">
|
|
|
+ <Audio :mp3="data.newWordMp3" :themeColor="themeColor" :bg="bg" :ed="ed" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="data.mp3_list && data.mp3_list[0] && data.mp3_list[0].id">
|
|
|
+ <Audio :mp3="data.mp3_list[0].id" :themeColor="themeColor" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="data.mp3Url">
|
|
|
+ <Audio :mp3="data.mp3Url" :themeColor="themeColor" :bg="bg" :ed="ed" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i" v-html="fy"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="zhedie-white">
|
|
|
+ <div class="merge" v-loading="loading3">
|
|
|
+ <div class="topTitle">
|
|
|
+ <div class="left">
|
|
|
+ <!-- <div
|
|
|
+ @click="cutLiju(0)"
|
|
|
+ :class="[lijuIndex == 0 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ <span> 全部 </span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ list1.sentence_list &&
|
|
|
+ list2.sentence_list &&
|
|
|
+ list3.sentence_list
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ list1.sentence_list.length +
|
|
|
+ list2.sentence_list.length +
|
|
|
+ list3.sentence_list.length
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ @click="cutLiju(1)"
|
|
|
+ v-if="list1.sentence_list && list1.sentence_list.length > 0"
|
|
|
+ :class="[lijuIndex == 1 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ <span> 本课例句 </span>
|
|
|
+ <span>{{ list1.sentence_list.length }} </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="cutLiju(2)"
|
|
|
+ v-if="list2.sentence_list && list2.sentence_list.length > 0"
|
|
|
+ :class="[lijuIndex == 2 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ <span> 本书例句 </span>
|
|
|
+ <span>
|
|
|
+ {{ list2.sentence_list.length }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="cutLiju(3)"
|
|
|
+ v-if="list3.sentence_list && list3.sentence_list.length > 0"
|
|
|
+ :class="[lijuIndex == 3 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ <span>本套例句</span>
|
|
|
+ <span>{{ list3.sentence_list.length }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="right">
|
|
|
+ <div
|
|
|
+ @click="cutPattern(0)"
|
|
|
+ :class="[lijuPatternIndex == 0 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ 引语模式
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="cutPattern(1)"
|
|
|
+ :class="[lijuPatternIndex == 1 ? 'sele' : '']"
|
|
|
+ >
|
|
|
+ KWIC模式
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cut-area" style="display: none"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Strockplayredline from './Strockplayredline.vue';
|
|
|
+import Audio from './AudioRed.vue';
|
|
|
+import { getContent, getHZChineseInfo, getContentFile } from '../../../../api/ajax';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ Strockplayredline,
|
|
|
+ Audio,
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ 'data',
|
|
|
+ 'changeDetailIndex',
|
|
|
+ 'closeWord',
|
|
|
+ 'detailIndex',
|
|
|
+ 'notshowNext',
|
|
|
+ 'getWordLiju',
|
|
|
+ 'optionRes',
|
|
|
+ 'themeColor',
|
|
|
+ 'isSuccess',
|
|
|
+ 'currentTreeID',
|
|
|
+ 'type',
|
|
|
+ 'bg',
|
|
|
+ 'ed',
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ height: '',
|
|
|
+ margintop: '',
|
|
|
+ wordShow: true,
|
|
|
+ wordShow2: false,
|
|
|
+ wordShow3: false,
|
|
|
+ list1: [],
|
|
|
+ list2: [],
|
|
|
+ list3: [],
|
|
|
+ allList: [],
|
|
|
+ isShow: false,
|
|
|
+ old_word: '',
|
|
|
+ loading1: false,
|
|
|
+ loading2: false,
|
|
|
+ loading3: false,
|
|
|
+ dataDetail: null,
|
|
|
+ lijuIndex: 1,
|
|
|
+ lijuPatternIndex: 0,
|
|
|
+ CurrentList: [],
|
|
|
+ sortIndex: 0,
|
|
|
+ chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；'],
|
|
|
+ punctuationList: ['(', ')', '……', '（', '）', '…', '/'], // 标点数组
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {
|
|
|
+ data: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ const _this = this;
|
|
|
+ if (val) {
|
|
|
+ _this.initData();
|
|
|
+ if (_this.type == 'newWordDetail') {
|
|
|
+ _this.getChineseInfo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ downloadImage() {
|
|
|
+ var cutArea = $('.cut-area');
|
|
|
+ let dom = $('.liju_main');
|
|
|
+ let dataURL = '';
|
|
|
+ html2canvas(dom[0]).then((canvas) => {
|
|
|
+ {
|
|
|
+ // 将生成的 canvas 放入到 dom 中, 这里可以做画布操作
|
|
|
+ cutArea.append(canvas);
|
|
|
+ // 将操作完成的画布转化为 base64 编码的文件
|
|
|
+ dataURL = canvas.toDataURL('image/png');
|
|
|
+ // 将文件设置到下载区, 点击就能下载了
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.download = '例句.png';
|
|
|
+ a.href = dataURL;
|
|
|
+ a.click();
|
|
|
+ window.URL.revokeObjectURL(dataURL);
|
|
|
+ a.remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sortEvent(index, key) {
|
|
|
+ this.sortIndex = index;
|
|
|
+ if (this.lijuIndex == 0) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
|
|
|
+ } else if (this.lijuIndex == 1) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
|
|
|
+ } else if (this.lijuIndex == 2) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
|
|
|
+ } else if (this.lijuIndex == 3) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换模式
|
|
|
+ cutPattern(index) {
|
|
|
+ if (index == this.lijuPatternIndex) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.lijuPatternIndex = index;
|
|
|
+ if (this.lijuPatternIndex == 1) {
|
|
|
+ this.sortEvent(0, 'sentence_list_sort_left');
|
|
|
+ } else {
|
|
|
+ this.cutLiju(this.lijuIndex, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换 例句
|
|
|
+ cutLiju(index, type) {
|
|
|
+ if (index == this.lijuIndex && !type) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.lijuIndex = index;
|
|
|
+ if (this.lijuPatternIndex == 0) {
|
|
|
+ if (index == 0) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list));
|
|
|
+ } else if (index == 1) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list1.sentence_list));
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list2.sentence_list));
|
|
|
+ } else if (index == 3) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list3.sentence_list));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let key = '';
|
|
|
+ if (this.sortIndex == 0) {
|
|
|
+ key = 'sentence_list_sort_left';
|
|
|
+ } else if (this.sortIndex == 1) {
|
|
|
+ key = 'sentence_list_sort_min';
|
|
|
+ } else if (this.sortIndex == 2) {
|
|
|
+ key = 'sentence_list_sort_right';
|
|
|
+ } else {
|
|
|
+ key = 'sentence_list';
|
|
|
+ }
|
|
|
+ if (index == 0) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
|
|
|
+ } else if (index == 1) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
|
|
|
+ } else if (index == 3) {
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playAudio() {},
|
|
|
+ // 关闭单词详情
|
|
|
+ closeWordShow() {
|
|
|
+ this.closeWord(false);
|
|
|
+ },
|
|
|
+ // 上一个单词详情
|
|
|
+ lastDetail() {
|
|
|
+ if (this.detailIndex == 0) {
|
|
|
+ this.$message.warning('当前已经是第一个');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.changeDetailIndex('last');
|
|
|
+ },
|
|
|
+ // 下一个单词详情
|
|
|
+ nextDetail() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.detailIndex == _this.optionRes.length - 1) {
|
|
|
+ this.$message.warning('当前已经是最后一个了 ');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _this.changeDetailIndex('next');
|
|
|
+ },
|
|
|
+ viewIntp() {
|
|
|
+ this.loading1 = true;
|
|
|
+ this.loading2 = true;
|
|
|
+ this.loading3 = true;
|
|
|
+ let Mname = 'book-courseware_manager-GetCoursewareWordExampleSentenceList_Sort';
|
|
|
+ // 获取本课的 本教材的 本套的 的例句
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 0, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_filter_repetitive_sentence: 'true',
|
|
|
+ book_publish_status: 1,
|
|
|
+ sort_mode: 'ASCENT',
|
|
|
+ compare_mode: 'SOURCE',
|
|
|
+ book_id_list: [],
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_contain_stat_data: false,
|
|
|
+ sentence_fc_length_min: -1,
|
|
|
+ sentence_fc_length_max: -1,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.allList = {
|
|
|
+ sentence_list: [],
|
|
|
+ sentence_list_sort_left: [],
|
|
|
+ sentence_list_sort_mid: [],
|
|
|
+ sentence_list_sort_right: [],
|
|
|
+ };
|
|
|
+ this.loading1 = false;
|
|
|
+ this.list1 = res;
|
|
|
+ if (res.sentence_list.length > 0) {
|
|
|
+ this.list1.sentence_list = this.handleExample(res.sentence_list);
|
|
|
+ // this.list1.sentence_list_sort_left = this.handleExample(
|
|
|
+ // res.sentence_list_sort_left,
|
|
|
+ // "left"
|
|
|
+ // );
|
|
|
+ // this.list1.sentence_list_sort_mid = this.handleExample(
|
|
|
+ // res.sentence_list_sort_mid,
|
|
|
+ // "mid"
|
|
|
+ // );
|
|
|
+
|
|
|
+ // this.list1.sentence_list_sort_right = this.handleExample(
|
|
|
+ // res.sentence_list_sort_right,
|
|
|
+ // "right"
|
|
|
+ // );
|
|
|
+
|
|
|
+ this.allList.sentence_list = this.allList.sentence_list.concat(this.list1.sentence_list);
|
|
|
+ // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
|
|
|
+ // this.list1.sentence_list_sort_left
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
|
|
|
+ // this.list1.sentence_list_sort_mid
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
|
|
|
+ // this.list1.sentence_list_sort_right
|
|
|
+ // );
|
|
|
+ }
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 1, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_filter_repetitive_sentence: 'true',
|
|
|
+ book_publish_status: 1,
|
|
|
+ sort_mode: 'ASCENT',
|
|
|
+ compare_mode: 'SOURCE',
|
|
|
+ book_id_list: [],
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_contain_stat_data: false,
|
|
|
+ sentence_fc_length_min: -1,
|
|
|
+ sentence_fc_length_max: -1,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading2 = false;
|
|
|
+ this.list2 = res;
|
|
|
+ if (res.sentence_list.length > 0) {
|
|
|
+ this.list2.sentence_list = this.handleExample(res.sentence_list);
|
|
|
+ // this.list2.sentence_list_sort_left = this.handleExample(
|
|
|
+ // res.sentence_list_sort_left,
|
|
|
+ // "left"
|
|
|
+ // );
|
|
|
+ // this.list2.sentence_list_sort_mid = this.handleExample(
|
|
|
+ // res.sentence_list_sort_mid,
|
|
|
+ // "mid"
|
|
|
+ // );
|
|
|
+ // this.list2.sentence_list_sort_right = this.handleExample(
|
|
|
+ // res.sentence_list_sort_right,
|
|
|
+ // "right"
|
|
|
+ // );
|
|
|
+ this.allList.sentence_list = this.allList.sentence_list.concat(this.list2.sentence_list);
|
|
|
+ // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
|
|
|
+ // this.list2.sentence_list_sort_left
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
|
|
|
+ // this.list2.sentence_list_sort_mid
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
|
|
|
+ // this.list2.sentence_list_sort_right
|
|
|
+ // );
|
|
|
+ }
|
|
|
+
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 2, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_filter_repetitive_sentence: 'true',
|
|
|
+ book_publish_status: 1,
|
|
|
+ sort_mode: 'ASCENT',
|
|
|
+ compare_mode: 'SOURCE',
|
|
|
+ book_id_list: [],
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ is_contain_stat_data: false,
|
|
|
+ sentence_fc_length_min: -1,
|
|
|
+ sentence_fc_length_max: -1,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.list3 = res;
|
|
|
+ if (res.sentence_list.length > 0) {
|
|
|
+ this.list3.sentence_list = this.handleExample(res.sentence_list);
|
|
|
+ // this.list3.sentence_list_sort_left = this.handleExample(
|
|
|
+ // res.sentence_list_sort_left,
|
|
|
+ // "left"
|
|
|
+ // );
|
|
|
+ // this.list3.sentence_list_sort_mid = this.handleExample(
|
|
|
+ // res.sentence_list_sort_mid,
|
|
|
+ // "mid"
|
|
|
+ // );
|
|
|
+ // this.list3.sentence_list_sort_right = this.handleExample(
|
|
|
+ // res.sentence_list_sort_right,
|
|
|
+ // "right"
|
|
|
+ // );
|
|
|
+
|
|
|
+ this.allList.sentence_list = this.allList.sentence_list.concat(this.list3.sentence_list);
|
|
|
+ // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
|
|
|
+ // this.list3.sentence_list_sort_left
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
|
|
|
+ // this.list3.sentence_list_sort_mid
|
|
|
+ // );
|
|
|
+ // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
|
|
|
+ // this.list3.sentence_list_sort_right
|
|
|
+ // );
|
|
|
+ }
|
|
|
+ this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list));
|
|
|
+ this.loading3 = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // handleExample(list) {
|
|
|
+ // // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
|
|
|
+ // list = list.map((item, index) => {
|
|
|
+ // let sentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ // let res = "";
|
|
|
+ // for (let i = 0; i < item.position_list.length; i++) {
|
|
|
+ // let part1 = "";
|
|
|
+ // let part2 = "";
|
|
|
+ // let part3 = "";
|
|
|
+ // if (item.position_list.length > 1) {
|
|
|
+ // if (i == 0) {
|
|
|
+ // part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ // part2 = sentence.substring(
|
|
|
+ // item.position_list[i].begin,
|
|
|
+ // item.position_list[i].end
|
|
|
+ // );
|
|
|
+ // part3 = sentence.substring(
|
|
|
+ // item.position_list[i].end,
|
|
|
+ // item.position_list[i + 1].begin
|
|
|
+ // );
|
|
|
+ // } else if (i == item.position_list.length - 1) {
|
|
|
+ // part2 = sentence.substring(
|
|
|
+ // item.position_list[i].begin,
|
|
|
+ // item.position_list[i].end
|
|
|
+ // );
|
|
|
+ // part3 = sentence.substring(item.position_list[i].end);
|
|
|
+ // } else {
|
|
|
+ // part2 = sentence.substring(
|
|
|
+ // item.position_list[i].begin,
|
|
|
+ // item.position_list[i].end
|
|
|
+ // );
|
|
|
+ // part3 = sentence.substring(
|
|
|
+ // item.position_list[i].end,
|
|
|
+ // item.position_list[i + 1].begin
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ // part2 = sentence.substring(
|
|
|
+ // item.position_list[i].begin,
|
|
|
+ // item.position_list[i].end
|
|
|
+ // );
|
|
|
+ // part3 = sentence.substring(item.position_list[i].end);
|
|
|
+ // }
|
|
|
+ // res +=
|
|
|
+ // part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
|
|
|
+ // }
|
|
|
+ // item.res = res;
|
|
|
+ // return item;
|
|
|
+ // });
|
|
|
+ // return list;
|
|
|
+ // },
|
|
|
+ handleExample(list, type) {
|
|
|
+ if (list.length > 0) {
|
|
|
+ list = list.map((item, index) => {
|
|
|
+ let str = item.source_courseware_name_path;
|
|
|
+ item.show_source_courseware_name_path = str.slice(0, 8) + '...';
|
|
|
+ if (type == 'left') {
|
|
|
+ let sentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
|
|
|
+ arr.forEach((items, indexs) => {
|
|
|
+ if (indexs == item.sentence_fc_list_word_index) {
|
|
|
+ arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
|
|
|
+ item.resArr = data;
|
|
|
+ } else if (type == 'right') {
|
|
|
+ let sentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
|
|
|
+ arr.forEach((items, indexs) => {
|
|
|
+ if (indexs == item.sentence_fc_list_word_index) {
|
|
|
+ arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
|
|
|
+ item.resArr = data;
|
|
|
+ } else if (type == 'mid') {
|
|
|
+ let sentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
|
|
|
+ arr.forEach((items, indexs) => {
|
|
|
+ if (indexs == item.sentence_fc_list_word_index) {
|
|
|
+ arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
|
|
|
+ item.resArr = data;
|
|
|
+ } else {
|
|
|
+ let newsentence = JSON.parse(JSON.stringify(item.sentence));
|
|
|
+ let res = '';
|
|
|
+ for (let i = 0; i < item.position_list.length; i++) {
|
|
|
+ let part1 = '';
|
|
|
+ let part2 = '';
|
|
|
+ let part3 = '';
|
|
|
+ if (item.position_list.length > 1) {
|
|
|
+ if (i == 0) {
|
|
|
+ part1 = newsentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
|
|
|
+ part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
|
|
|
+ } else if (i == item.position_list.length - 1) {
|
|
|
+ part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
|
|
|
+ part3 = newsentence.substring(item.position_list[i].end);
|
|
|
+ } else {
|
|
|
+ part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
|
|
|
+ part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ part1 = newsentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
|
|
|
+ part3 = newsentence.substring(item.position_list[i].end);
|
|
|
+ }
|
|
|
+ res += part1 + '<span style="color:#DE4444;">' + part2 + '</span>' + part3;
|
|
|
+ }
|
|
|
+ item.res = res;
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changefiveword(arr, index, type) {
|
|
|
+ let num = 6;
|
|
|
+ let colorIndex = 0;
|
|
|
+ let colorList = ['#4D7EFF', '#A4430F', '#9342C5', '#FF8718', '#1DAA91'];
|
|
|
+ for (let i = 1; i < num; i++) {
|
|
|
+ if (type == 'left') {
|
|
|
+ if (index - i >= 0) {
|
|
|
+ if (this.chsFhList.indexOf(arr[index - i]) == -1) {
|
|
|
+ arr[index - i] = `<span style=color:${colorList[colorIndex]};>${arr[index - i]}</span>`;
|
|
|
+ colorIndex++;
|
|
|
+ } else {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (type == 'right') {
|
|
|
+ if (index + i <= arr.length - 1) {
|
|
|
+ if (this.chsFhList.indexOf(arr[index + i]) == -1) {
|
|
|
+ arr[index + i] = `<span style=color:${colorList[colorIndex]};>${arr[index + i]}</span>`;
|
|
|
+ colorIndex++;
|
|
|
+ } else {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let newarr = [];
|
|
|
+ let arr1 = [];
|
|
|
+ let arr2 = [];
|
|
|
+ let arr3 = [];
|
|
|
+ arr.forEach((item, i) => {
|
|
|
+ if (i < index) {
|
|
|
+ arr1.push(item);
|
|
|
+ } else if (i == index) {
|
|
|
+ arr2.push(item);
|
|
|
+ } else {
|
|
|
+ arr3.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ newarr.push(arr1);
|
|
|
+ newarr.push(arr2);
|
|
|
+ newarr.push(arr3);
|
|
|
+ return newarr;
|
|
|
+ // arr[indexs - 1] = `<span style=color:#4D7EFF;>${
|
|
|
+ // arr[indexs - 1]
|
|
|
+ // }</span>`;
|
|
|
+ // arr[indexs - 2] = `<span style=color:#1DAA91;>${
|
|
|
+ // arr[indexs - 2]
|
|
|
+ // }</span>`;
|
|
|
+ // arr[indexs - 3] = `<span style=color:#A4430F;>${
|
|
|
+ // arr[indexs - 3]
|
|
|
+ // }</span>`;
|
|
|
+ // arr[indexs - 4] = `<span style=color:#DE4444;>${
|
|
|
+ // arr[indexs - 4]
|
|
|
+ // }</span>`;
|
|
|
+ // arr[indexs - 5] = `<span style=color:#DE4444;>${
|
|
|
+ // arr[indexs - 5]
|
|
|
+ // }</span>`;
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ this.viewIntp();
|
|
|
+ },
|
|
|
+ handleChangeTab(flag) {
|
|
|
+ this[flag] = !this[flag];
|
|
|
+ },
|
|
|
+ getChineseInfo() {
|
|
|
+ let _this = this;
|
|
|
+ let data = {
|
|
|
+ query: _this.data.new_word,
|
|
|
+ };
|
|
|
+ getHZChineseInfo(data).then((res) => {
|
|
|
+ _this.dataDetail = res.data.result;
|
|
|
+ _this.handleChineseDetail();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 处理数据
|
|
|
+ handleChineseDetail() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.dataDetail) {
|
|
|
+ _this.dataDetail.forEach((item) => {
|
|
|
+ if (item.request.queryType == 'entity') {
|
|
|
+ // 读音
|
|
|
+ item.response.entity.forEach((items) => {
|
|
|
+ items.attrs.forEach((itemss) => {
|
|
|
+ if (itemss.key == 'pronunciation') {
|
|
|
+ // 音频
|
|
|
+ let Mname = 'tool-TextToVoiceFile';
|
|
|
+ getContentFile(Mname, {
|
|
|
+ text: this.word.detail.new_word,
|
|
|
+ }).then((res) => {
|
|
|
+ _this.mp3Url = res.file_url;
|
|
|
+ });
|
|
|
+ // _this.data.mp3Url = itemss.objects[0]["@value"]
|
|
|
+ // ? itemss.objects[0]["@value"]
|
|
|
+ // : "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ // 去掉生词里的标点
|
|
|
+ let new_word_str = '';
|
|
|
+ for (let i = 0; i < this.data.new_word.length; i++) {
|
|
|
+ if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
|
|
|
+ new_word_str += this.data.new_word[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.data.new_word_str = new_word_str;
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ _this.initData();
|
|
|
+ if (_this.type == 'newWordDetail') {
|
|
|
+ // _this.getChineseInfo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.wordDetailModule {
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .module-inner {
|
|
|
+ padding: 30px 0;
|
|
|
+ > div {
|
|
|
+ width: 788px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px 32px 40px 32px;
|
|
|
+ .operation {
|
|
|
+ height: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ > :nth-child(3) {
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .module-bottom {
|
|
|
+ width: 788px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ padding-top: 16px;
|
|
|
+ .wordDetail {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ .bwc-Strockplay {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 37px;
|
|
|
+ .strockplay {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .collect-icon {
|
|
|
+ width: 16px;
|
|
|
+ position: absolute;
|
|
|
+ right: 4px;
|
|
|
+ bottom: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bwc-line {
|
|
|
+ width: 2px;
|
|
|
+ height: 128px;
|
|
|
+ }
|
|
|
+ .red-bg {
|
|
|
+ background: #ff5757;
|
|
|
+ }
|
|
|
+ .green-bg {
|
|
|
+ background: #24b99e;
|
|
|
+ }
|
|
|
+ .brown-bg {
|
|
|
+ background: #bd8865;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bwc-tolength {
|
|
|
+ color: #404040;
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-family: FZJCGFKTK;
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid #d47064;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 40px 0;
|
|
|
+ margin: 0 37px 16px 0;
|
|
|
+ }
|
|
|
+ .red-border {
|
|
|
+ border: 2px solid #ff5757;
|
|
|
+ }
|
|
|
+ .green-border {
|
|
|
+ border: 2px solid #24b99e;
|
|
|
+ }
|
|
|
+ .brown-border {
|
|
|
+ border: 2px solid #bd8865;
|
|
|
+ }
|
|
|
+ .wordInfor {
|
|
|
+ flex: 1;
|
|
|
+ .yinpin {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ width: fit-content;
|
|
|
+ .pinyintext {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #2c2c2c;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ word-break: normal;
|
|
|
+ font-family: 'GB-PINYINOK-B';
|
|
|
+ }
|
|
|
+ .content-voices {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .word {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jieshu {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zhedie-white {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ > div {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .topTitle {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 12px 0;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ > :nth-child(1) {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .rotate {
|
|
|
+ animation-name: firstrotate;
|
|
|
+ animation-direction: 2s;
|
|
|
+ animation-fill-mode: both;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .liju {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ padding-right: 24px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-top: none;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ .liju_main {
|
|
|
+ > div {
|
|
|
+ padding-top: 16px;
|
|
|
+ margin-left: 8px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ > :nth-child(1) {
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 6px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .merge {
|
|
|
+ .topTitle {
|
|
|
+ .left {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: flex-end;
|
|
|
+ > div {
|
|
|
+ padding: 0 12px 8px 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 4px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sele {
|
|
|
+ border-bottom: 1px solid #ff5757;
|
|
|
+ > :nth-child(1) {
|
|
|
+ color: #ff5757;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ color: rgba(255, 87, 87, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 144px;
|
|
|
+ height: 28px;
|
|
|
+ display: flex;
|
|
|
+ background: #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px;
|
|
|
+ > div {
|
|
|
+ width: 76px;
|
|
|
+ height: 24px;
|
|
|
+ color: #888888;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .sele {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .KWIC_liju {
|
|
|
+ padding-top: 16px;
|
|
|
+ > div {
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ .sort_dv {
|
|
|
+ margin-left: 24px;
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .sele {
|
|
|
+ background: #f0f0f0;
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .liju_main {
|
|
|
+ margin-top: 24px;
|
|
|
+ > div {
|
|
|
+ margin-top: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 26px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .p1 {
|
|
|
+ width: 117px;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ width: 469px;
|
|
|
+ height: 22px;
|
|
|
+ margin-left: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ > :nth-child(1) {
|
|
|
+ // direction: rtl;
|
|
|
+ // unicode-bidi: plaintext;
|
|
|
+ // text-align: right;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ width: 224px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ > :nth-child(3) {
|
|
|
+ direction: ltr;
|
|
|
+ unicode-bidi: plaintext;
|
|
|
+ text-align: left;
|
|
|
+ width: 224px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ .from {
|
|
|
+ // text-align: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wordDetail {
|
|
|
+ width: 538px;
|
|
|
+ margin-left: 40px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .word {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .yinpin {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ margin-left: 27px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jieshu {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ > :nth-child(1) {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ :nth-child(2) {
|
|
|
+ width: 524px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.el-tooltip__popper,
|
|
|
+.is-dark {
|
|
|
+ z-index: 99999 !important;
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-red {
|
|
|
+ .wordDetailChs {
|
|
|
+ .zhedie-white {
|
|
|
+ .topTitle {
|
|
|
+ height: 40px;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .wordDetailChs {
|
|
|
+ .zhedie-white {
|
|
|
+ .topTitle {
|
|
|
+ height: 40px;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .wordDetailChs {
|
|
|
+ .zhedie-white {
|
|
|
+ .topTitle {
|
|
|
+ height: 40px;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
