eep_page/src/views/book/courseware/preview/components/article/index.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="article-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <div class="NPC-ArticleView NPC-ArticleView-container">
        <div class="ArticleView-header">
          <a class="ArticleView-full" :title="convertText('黑板模式')" @click="fullScreen">
            <svg-icon
              icon-class="icon-full"
              size="24"
              :style="{
                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
              }"
            />
          </a>
          <div>
            <div :style="{ marginLeft: '40px', cursor: 'pointer' }" :title="convertText('文本分析')" @click="submit">
              <svg-icon
                icon-class="icon-wbfx"
                size="24"
                :style="{
                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                }"
              />
            </div>
          </div>
          <div class="right">
            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
              <el-switch
                v-model="showPhrases"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="本课生词"
                @change="handleSwitchChange('showPractice', 'showWord')"
              />
            </template>
            <template v-if="data.property.is_enable_read === 'true'">
              <el-switch
                v-model="showPractice"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="语音练习"
                @change="handleSwitchChange('showPhrases', 'showWord')"
              />
            </template>
            <template v-if="data.property.is_enable_word === 'true'">
              <el-switch
                v-model="showWord"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="取词"
                @change="handleSwitchChange('showPhrases', 'showPractice')"
              />
            </template> -->
            <a
              v-if="data.property.is_enable_new_word === 'true'"
              :style="{
                color:
                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              :title="convertText('本课生词')"
              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
            >
              <svg-icon icon-class="icon-article-ci" size="24" />
            </a>
            <a
              v-if="data.property.is_enable_read === 'true'"
              :style="{
                color:
                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              :title="convertText('语音练习')"
              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
            >
              <svg-icon icon-class="icon-article-practice" size="24" />
            </a>
            <a
              v-if="data.property.is_enable_word === 'true'"
              :style="{
                color:
                  showWord && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              :title="'取词模式'"
              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
            >
              <svg-icon icon-class="icon-article-phrase" size="24" />
            </a>
          </div>
          <!-- <div class="setting-fontsize">
        <a @click="handleFontsize('-')"
          ><img src="@/assets/newImage/common/btn-reduce.png"
        /></a>
        <img src="@/assets/newImage/common/font-size.png" />
        <a @click="handleFontsize('+')"
          ><img src="@/assets/newImage/common/btn-increase.png"
        /></a>
      </div> -->
        </div>
        <div ref="ArticleViewbody" class="ArticleView-body">
          <NormalModelChs
            v-if="!showPhrases && !showPractice && !showWord"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :body-left="bodyLeft"
            :body-width="bodyWidth"
            :theme-color="bookInfo.theme_color"
            :no-font="noFont"
            :config="config"
            :NNPEAnnotationList="NNPEAnnotationList"
            :col-length="colLength"
            :multilingual="showLang && getLang() ? getLang() : ''"
            :attrib="data.unified_attrib"
            :is-mobile="isMobile"
            @changeConfig="changeConfig"
          />
          <PhraseModel
            v-if="showPhrases"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :NNPENewWordList="NNPENewWordList"
            :theme-color="bookInfo.theme_color"
            :no-font="noFont"
            :current-tree-i-d="courseware_id"
            :body-left="bodyLeft"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :NNPEAnnotationList="NNPEAnnotationList"
            :col-length="colLength"
            :NpcNewWordMp3="NpcNewWordMp3"
            :multilingual="showLang && getLang() ? getLang() : ''"
            :attrib="data.unified_attrib"
            :is-mobile="isMobile"
            @changeConfig="changeConfig"
          />
          <Practice
            v-if="showPractice"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :theme-color="bookInfo.theme_color"
            :no-font="noFont"
            :NNPENewWordList="NNPENewWordList"
            :NNPEAnnotationList="NNPEAnnotationList"
            :current-tree-i-d="courseware_id"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :col-length="colLength"
            :NpcNewWordMp3="NpcNewWordMp3"
            :is-full="isFull"
            :multilingual="showLang && getLang() ? getLang() : ''"
            :attrib="data.unified_attrib"
            :is-mobile="isMobile"
            @changeConfig="changeConfig"
          />
          <WordModel
            v-if="showWord"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :body-left="bodyLeft"
            :body-width="bodyWidth"
            :NNPENewWordList="NNPENewWordList"
            :theme-color="bookInfo.theme_color"
            :no-font="noFont"
            :current-tree-i-d="courseware_id"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :col-length="colLength"
            :multilingual="showLang && getLang() ? getLang() : ''"
            :attrib="data.unified_attrib"
            :is-mobile="isMobile"
            @changeConfig="changeConfig"
          />
        </div>
        <div :id="'screen-' + mathNum" class="voice-full-screen">
          <Voicefullscreen
            v-if="isFull && resObj"
            :theme-color="bookInfo.theme_color"
            :cur-que="data"
            :sent-list="resObj.sentList"
            :sent-index="0"
            :mp3="data.mp3_list && data.mp3_list[0] ? data.mp3_list[0].url : ''"
            :no-font="noFont"
            :NNPENewWordList="NNPENewWordList"
            :NNPEAnnotationList="NNPEAnnotationList"
            :current-tree-i-d="courseware_id"
            :is-full="isFull"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :NpcNewWordMp3="NpcNewWordMp3"
            :attrib="data.unified_attrib"
            :is-mobile="isMobile"
            @handleWav="handleWav"
            @changePinyin="changePinyins"
            @changeEN="changeENs"
            @exitFullscreen="exitFullscreen"
            @changeIsFull="changeIsFull"
          />
        </div>
      </div>
      <template
        v-if="
          data.new_word_list &&
          data.new_word_list.new_word_list &&
          data.new_word_list.new_word_list.length > 0 &&
          data.new_word_list.property.is_show === 'true'
        "
      >
        <NewWordPreview :new-data="data.new_word_list" :is-mobile="isMobile" />
      </template>
      <template
        v-if="
          data.other_word_list &&
          data.other_word_list.new_word_list &&
          data.other_word_list.new_word_list.length > 0 &&
          data.other_word_list.property.is_show === 'true'
        "
      >
        <NewWordPreview :new-data="data.other_word_list" :is-mobile="isMobile" />
      </template>
      <template
        v-if="
          data.notes_list &&
          data.notes_list.option &&
          data.notes_list.option.length > 0 &&
          data.notes_list.property.is_show === 'true'
        "
      >
        <NotesPreview :notes-data="data.notes_list" :is-mobile="isMobile" />
      </template>
    </div>
  </div>
</template>

<script>
import { getArticleData } from '@/views/book/courseware/data/article';

import PreviewMixin from '../common/PreviewMixin';

import PhraseModel from './PhraseModelChs.vue';
import NormalModelChs from './NormalModelChs.vue';
import Practice from './Practicechs.vue'; // 语音练习模式
import WordModel from './WordModelChs.vue'; // 语音练习模式
import Voicefullscreen from './Voicefullscreen.vue';
import { getToken } from '@/utils/auth';
import { GetFileURLMap } from '@/api/app';
import { analysSubmit, getSysConfig } from '@/api/article';
import NewWordPreview from '../new_word/NewWordPreview.vue';
import NotesPreview from '../notes/NotesPreview.vue';

export default {
  name: 'ArticlePreview',
  components: {
    NormalModelChs,
    Practice,
    WordModel,
    PhraseModel,
    Voicefullscreen,
    NewWordPreview,
    NotesPreview,
  },
  mixins: [PreviewMixin],
  inject: ['bookInfo'],
  props: ['isMobile'],
  data() {
    return {
      data: getArticleData(),
      showPreview: true, // 全文预览
      showPhrases: false, // 显示单词和短语
      showPractice: false, // 语音练习

      showWord: false, // 取词
      titleFontsize: 20, // 标题字号初始值
      wordFontsize: 16, // 文章内容字号初始值
      bodyLeft: 0,
      bodyWidth: 0,
      noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
      config: {
        isShowEN: false,
        isHasEN: false,
        isShowPY: false,
        isHasPY: false,
      },
      userAnswer: {
        normalModel: {
          recordList: [],
        },
        writeModel: {}, // 生词/取词模式
        practiceModel: {}, // 练习模式
      },
      tokenData: getToken(),
      mathNum: Math.random().toString(36).substr(2),
      isFull: false,
      resObj: null,
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
      highWords: null,
      highWordsArr: [],
      highIndex: 0,
      newWordList: [],
      NNPEAnnotationList: [],
      NNPENewWordList: [],
      NpcNewWordMp3: [],
      colLength: 1,
      courseware_id: this.$route.params.id,
      multilingualTextList: {},
      analyser_url: '',
    };
  },
  computed: {},
  watch: {
    showLang: {
      handler(val) {
        if (val) {
          this.data.multilingual.forEach((item) => {
            let trans_arr = item.translation ? item.translation.split('\n') : [];
            this.data.detail.forEach((items) => {
              let items_trans_arr = [];
              if (!items.hasOwnProperty('multilingualTextList')) {
                this.$set(items, 'multilingualTextList', {});
              }
              if (items.para) {
                items_trans_arr = trans_arr.splice(0, items.sentences.length);
              }
              this.$set(items.multilingualTextList, item.type, items_trans_arr);
            });
          });
        }
      },
      deep: true,
      immediate: true,
    },
    'data.content': {
      handler(val) {
        if (val) {
          this.handleData();
          let _this = this;
          if (!this.isJudgingRightWrong) {
            let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
            _this.$set(this.data, 'Bookanswer', userAnswer);
            this.answer.answer_list = this.data.Bookanswer;
          }
          _this.$nextTick(() => {
            _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;
          });
          for (let i = 0; i < this.data.detail.length; i++) {
            let enStr = this.data.detail[i].sentencesEn ? this.data.detail[i].sentencesEn.join('') : '';
            if (enStr) {
              this.config.isShowEN = false;
              this.config.isHasEN = true;
            }
            let pinyin = this.handleObj(this.data.detail[i].wordsList);
            if (pinyin && this.isEnable(this.data.property.view_pinyin)) {
              this.config.isShowPY = true;
              this.config.isHasPY = true;
            }
            if (enStr && pinyin) {
              break;
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
    isJudgingRightWrong(val) {
      if (!val) return;
      this.data.Bookanswer = this.answer.answer_list;
    },
  },
  created() {},
  methods: {
    changeConfig(obj) {
      this.config[obj] = !this.config[obj];
    },
    changeIsFull() {
      this.isFull = false;
    },
    // 拼音的显示和隐藏
    changePinyins() {
      if (this.config.isHasPY) {
        this.changeConfig('isShowPY');
      }
    },
    // 英文的显示和隐藏
    changeENs() {
      if (this.config.isHasEN) {
        this.changeConfig('isShowEN');
      }
    },
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol === '+') {
        if (this.wordFontsize < 24) {
          this.titleFontsize += 2;
          this.wordFontsize += 2;
        }
      } else if (symbol === '-') {
        if (this.wordFontsize > 12) {
          this.titleFontsize -= 2;
          this.wordFontsize -= 2;
        }
      }
    },
    // 切换开关
    handleSwitchChange(obj1, obj2, obj3) {
      this[obj1] = false;
      this[obj2] = false;
      this[obj3] = !this[obj3];
      this.showPreview = false;
    },
    handleObj(list) {
      let pinyin = '';
      list.forEach((item) => {
        item.forEach((items) => {
          if (items.pinyin) pinyin += items.pinyin;
        });
      });
      return pinyin;
    },
    submit() {
      let access_token =
        this.tokenData && this.tokenData.gcls_sys_session_info ? this.tokenData.gcls_sys_session_info.access_token : '';
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      getSysConfig()
        .then((ress) => {
          analysSubmit({
            app_user_id: '',
            text: this.data.content,
          })
            .then((res) => {
              window.open(
                `${ress.text_analyser_page_address}GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析&AccessToken=${access_token}&fromEEP=true`,
              );
              loading.close();
            })
            .catch((res) => {
              loading.close();
            });
        })
        .catch((res) => {
          loading.close();
        });
    },
    // 语音全屏
    fullScreen() {
      this.pauseAudio();
      this.pauseVideo();
      this.isFull = true;
      this.goFullscreen();
    },
    pauseAudio() {
      let audio = document.getElementsByTagName('audio');
      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1 && audio.forEach) {
        audio.forEach((item) => {
          item.pause();
        });
      }
    },
    pauseVideo() {
      let video = document.getElementsByTagName('video');
      if (video && video.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1 && video.forEach) {
        video.forEach((item) => {
          item.pause();
        });
      }
    },
    goFullscreen() {
      let id = `screen-${this.mathNum}`;
      let element = document.getElementById(id);
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    exitFullscreen() {
      this.isFull = false;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    handleData() {
      if (this.data.new_word_list) {
        this.$set(this.data.new_word_list, 'unified_attrib', this.data.unified_attrib);
      }
      if (this.data.other_word_list) {
        this.$set(this.data.other_word_list, 'unified_attrib', this.data.unified_attrib);
      }
      if (this.data.notes_list) {
        this.$set(this.data.notes_list, 'unified_attrib', this.data.unified_attrib);
      }

      if (this.showLang) {
        this.data.multilingual.forEach((item) => {
          let trans_arr = item.translation ? item.translation.split('\n') : [];
          this.data.detail.forEach((items) => {
            let items_trans_arr = [];
            if (!items.hasOwnProperty('multilingualTextList')) {
              this.$set(items, 'multilingualTextList', {});
            }
            if (items.para) {
              items_trans_arr = trans_arr.splice(0, items.sentences.length);
            }
            this.$set(items.multilingualTextList, item.type, items_trans_arr);
          });
        });
      }
      if (this.data.mp3_list && this.data.mp3_list.length > 0) {
        this.data.mp3_list[0].url = this.data.mp3_list[0].temporary_url;
        // GetFileURLMap({ file_id_list: [this.data.mp3_list[0].file_id] }).then(({ url_map }) => {
        //   this.data.mp3_list[0].url = url_map[this.data.mp3_list[0].file_id];
        // });
      }
      this.NNPENewWordList = (
        this.data.new_word_list_other_component_input ? this.data.new_word_list_other_component_input : []
      )
        .concat(
          this.data.new_word_list && this.data.new_word_list.new_word_list ? this.data.new_word_list.new_word_list : [],
        )
        .concat(
          this.data.other_word_list && this.data.other_word_list.new_word_list
            ? this.data.other_word_list.new_word_list
            : [],
        );
      this.NNPEAnnotationList = this.data.notes_list && this.data.notes_list.option ? this.data.notes_list.option : [];
      let resArr = [];
      let sentArrTotal = [];
      let timeArr = [];
      let curQue = JSON.parse(JSON.stringify(this.data));
      let wordTimeList = curQue.wordTime;
      let dhaspinyin = false; // 每段是否有拼音
      let dhaspinyinArr = [];
      curQue.detail.forEach((dItem, dIndex) => {
        dhaspinyin = false;
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];
          let sentence = dItem.sentences[sIndex];
          sItem.forEach((wItem, wIndex) => {
            let startIndex = wIndex === 0 ? 0 : sentArr[wIndex - 1].startIndex + sentArr[wIndex - 1].chs.length;
            let endIndex = wIndex === 0 ? wItem.chs.length : sentArr[wIndex - 1].endIndex + wItem.chs.length;
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            let words = '';
            if (this.newWordList.length > 0) {
              if (!this.highWords) {
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else if (wIndex > this.highWords.endIndex - 1) {
                this.highWords = null;
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else {
                words = this.highWords ? this.highWords.words : '';
              }
            }
            let obj = {
              paraIndex: dIndex, // 段落索引
              sentIndex: sIndex, // 在段落中句子索引
              wordIndex: wIndex, // 单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex,
              endIndex,
              leg: wItem.chs.length,
              timeList: [],
              words,
              config: {
                fontFamily: wItem.fontFamily,
                color: wItem.color,
                textDecoration: wItem.textDecoration,
                border: wItem.border,
                fontWeight: wItem.fontWeight,
              },

              matchWords: wItem.matchWords,
              matchNotes: wItem.matchNotes,
              notesColor: wItem.notesColor,
              matchNotesObj: wItem.matchNotesObj,
              img: wItem.img,
              imgPosition: wItem.imgPosition,
            };
            sentArr.push(obj);
            if (wItem.pinyin) dhaspinyin = true;
          });
          let objs = {
            sentArr,
            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
          };
          sentArrTotal.push(sentArr);
          resArr.push(objs);
        });
        timeArr.push(dItem.timeList);
        if (this.isEnable(curQue.property.view_pinyin)) {
          dhaspinyinArr.push(dhaspinyin);
        }
      });
      if (wordTimeList && wordTimeList.length > 0) {
        this.mergeWordTime(sentArrTotal, wordTimeList);
      }
      let timeList = [];
      timeArr.forEach((item) => {
        item.forEach((aItem) => {
          if (timeList.indexOf(aItem) < 0) {
            timeList.push(aItem);
          }
        });
      });
      this.resObj = {
        sentList: resArr,
        timeList,
        dhaspinyinArr,
      };
    },
    mergeWordTime(resArr, wordTimeList) {
      resArr.forEach((item, index) => {
        let wordsResultList = wordTimeList[index].wordsResultList;
        item.forEach((wItem) => {
          let startIndex = wItem.startIndex;
          let endIndex = wItem.endIndex;
          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
        });
      });
    },
    findLightWord(wItem, startIndex, sentence, sItem) {
      let endIndex = 0;
      let words = '';
      this.newWordList.forEach((item) => {
        if (item.length === 1) {
          if (item === wItem.chs && !wItem.banLight) {
            words = wItem.chs;
            endIndex = startIndex + 1;
          }
        } else if (item[0] === wItem.chs && sentence.indexOf(item) > -1) {
          let index = null;
          let chsStr = '';
          for (let i = startIndex; i < sItem.length + 1; i++) {
            index = i;
            if (chsStr.length === item.length) {
              break;
            } else {
              chsStr += sItem[i] ? sItem[i].chs : '';
            }
          }
          if (chsStr === item && !wItem.banLight) {
            words = item;
            endIndex = index;
          }
        } else if (wItem.new_word && wItem.new_word === item && !wItem.banLight) {
          words = item;
          endIndex = startIndex + 1;
        }
      });
      if (words) {
        this.highWords = { words, endIndex };
      } else {
        this.highWords = null;
      }
    },
    // 词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    handleWav(list, tmIndex) {
      let _tmIndex = tmIndex || 0;
      this.data.Bookanswer.practiceModel[_tmIndex] = {
        recordList: [],
      };
      this.$set(this.data.Bookanswer.practiceModel[_tmIndex], 'recordList', list);
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((wItem) => {
        // item.forEach((wItem) => {
        if (wItem.new_word) {
          NewWordList.push(wItem.new_word);
        } else if (wItem.detail && wItem.detail.sentence) {
          NewWordList.push(wItem.detail.sentence);
        }
        // });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.article-preview {
  @include preview-base;

  .main {
    display: grid;
    row-gap: 24px;
    align-items: center;
  }

  .NPC-ArticleView {
    width: 100%;

    .ArticleView-full {
      position: absolute;
      top: -2px;
      left: 0;
      z-index: 1;
      font-size: 16px;
      font-weight: bold;
      line-height: 24px;
      color: #000;
      cursor: pointer;

      // background: url('@/assets/full-screen-red.png') left center no-repeat;
      // background-size: 20px 20px;
    }

    .ArticleView-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 24px;
      margin-bottom: 16px;

      .left {
        display: flex;
        align-items: center;
        justify-content: center;

        // padding-left: 24px;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        cursor: pointer;

        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
        // background-size: 20px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .right {
        display: flex;
        gap: 24px;

        a {
          display: flex;
          gap: 4px;
          align-items: center;
          color: rgba(0, 0, 0, 65%);
          cursor: pointer;
        }
      }

      .setting-fontsize {
        display: flex;
        margin-left: 24px;

        a {
          box-sizing: border-box;
          display: block;
          width: 24px;
          height: 24px;
          border: 1px solid rgba(0, 0, 0, 10%);
          border-radius: 4px;
        }

        img {
          width: 100%;
        }

        > img {
          width: 24px;
          margin: 0 8px;
        }
      }
    }

    .ArticleView-body {
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 8px;

      .aduioLine-box {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 10%);

        &-bottom {
          border-top: 1px solid rgba(0, 0, 0, 10%);
          border-bottom: none;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.NPC-ArticleView {
  .ArticleView-header {
    .el-switch {
      margin-left: 24px;
    }

    .el-switch__core {
      width: 44px !important;
      height: 24px;
      border-radius: 20px;
    }

    .el-switch__core::after {
      top: 3px;
      left: 3px;
    }

    .el-switch.is-checked .el-switch__core::after {
      left: 100%;
      margin-left: -19px;
    }

    .el-switch__label {
      color: #000;
    }

    .el-switch__label.is-active {
      color: rgba($color: #000, $alpha: 30%);
    }

    .el-switch__label--left {
      margin-right: 8px;
    }
  }

  .pinyin-16 {
    cursor: pointer;

    // background: url('@/assets/icon/pinyin-16-normal-red.png') no-repeat left top;
    // background-size: 100% 100%;

    // &.disabled {
    //   background: url('@/assets/icon/pinyin-16-disable-Black.png') no-repeat left top;
    //   background-size: 100% 100%;
    // }
  }

  .EN-16 {
    cursor: pointer;

    // background: url('@/assets/icon/EN-16-normal-red.png') no-repeat left top;
    // background-size: 100% 100%;

    // &.disabled {
    //   background: url('@/assets/icon/EN-16-disable-Black.png') no-repeat left top;
    //   background-size: 100% 100%;
    // }
  }
}

.ArticleView-body {
  .aduioLine-box {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 10%);

    &-bottom {
      border-top: 1px solid rgba(0, 0, 0, 10%);
      border-bottom: none !important;
    }
  }

  .el-slider {
    flex: 1;
    width: auto !important;
  }
}
</style>