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

<!--  -->
<template>
  <div v-if="curQue" class="NNPE-ArticleView">
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'top'
      "
      class="aduioLine-box aduioLine-practice-npc"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="artNormalAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :duration="curQue.mp3_list[0].media_duration"
            :mp3-source="curQue.mp3_list[0].source"
            :width="colLength == 2 ? 200 : 700"
            :ed="ed"
            type="audioLine"
            :attrib="attrib"
            @emptyEd="emptyEd"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>
    <div
      :style="{
        height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
        overflow: 'auto',
      }"
    >
      <template v-if="!config.isHasEN || (config.isHasEN && !config.isShowEN)">
        <template v-if="resArr.length > 0">
          <div class="NPC-sentences-list">
            <div class="NPC-article-empty">
              <div
                :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
                :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
              ></div>
              <div class="empty-right"></div>
            </div>
            <div
              v-for="(item, index) in resArr"
              :key="'detail' + index"
              :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
            >
              <div
                class="wordsList-box"
                :class="[
                  curQue.detail[index].paragraphAttr
                    ? 'wordsList-box-' + curQue.detail[index].paragraphAttr.paragraphAlign
                    : '',
                  'article-content',
                  isHasRemark ? 'hasRemark' : '',
                ]"
                :style="{
                  width: isHasRemark && curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '',
                }"
              >
                <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
                  <img
                    v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                    :src="item.sourceList[0].file_url_open"
                    :style="{
                      width: item.widthNumber + 'px',
                      height: item.heightNumber + 'px',
                    }"
                  />
                  <video
                    :src="item.sourceList[0].file_url_open"
                    width="100%"
                    height="400"
                    controls
                    controlsList="nodownload"
                    v-else
                  ></video>
                </template>

                <div :class="[item.isTitle ? 'NNPE-title' : '', 'para-' + item.paraAlign]">
                  <div
                    v-for="(pItem, pIndex) in item.wordsList"
                    :key="'wordsList' + pIndex"
                    class="NNPE-words"
                    :class="[
                      pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                      pItem.chs == '“' ? 'textRight' : '',
                    ]"
                    @click="
                      handleChangeTime(
                        item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                        item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                        pItem.articleSentIndex,
                      )
                    "
                    @mouseover="handleMouseover(pItem)"
                    @mouseleave="handleMouseleave"
                  >
                    <template v-if="!pItem.width">
                      <template v-if="pItem.isShow">
                        <template
                          v-if="
                            item.wordsList[pIndex + 1] &&
                            item.wordsList[pIndex + 1].chs &&
                            (chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1 ||
                              NumberList.indexOf(item.wordsList[pIndex + 1].chs) > -1)
                          "
                        >
                          <span v-if="pItem.leg > 0" class="NNPE-words-box">
                            <span
                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                pItem.className ? pItem.className : '',
                                noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                              ]"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                            >
                            <span
                              class="NNPE-chs"
                              :class="[
                                item.timeList &&
                                item.timeList[pItem.sentIndex] &&
                                curTime >= item.timeList[pItem.sentIndex].bg &&
                                curTime <= item.timeList[pItem.sentIndex].ed &&
                                curTime
                                  ? 'active'
                                  : '',
                                pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
                              ]"
                              :style="{
                                fontFamily: pItem.config.fontFamily,
                                textDecoration: pItem.config.textDecoration,
                                borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: pItem.config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                backgroundColor:
                                  item.timeList &&
                                  item.timeList[pItem.sentIndex] &&
                                  curTime >= item.timeList[pItem.sentIndex].bg &&
                                  curTime <= item.timeList[pItem.sentIndex].ed &&
                                  curTime &&
                                  attrib
                                    ? attrib.assist_color
                                    : '',
                              }"
                            >
                              <template>
                                <span
                                  v-for="(wItem, wIndex) in pItem.leg"
                                  :key="'ci' + wIndex + pIndex + index"
                                  :class="[
                                    pItem.chstimeList &&
                                    pItem.chstimeList[wIndex] &&
                                    curTime >= pItem.chstimeList[wIndex].wordBg &&
                                    curTime < item.timeList[pItem.sentIndex].ed
                                      ? 'wordActive'
                                      : '',
                                  ]"
                                  :style="{
                                    color:
                                      pItem.chstimeList &&
                                      pItem.chstimeList[wIndex] &&
                                      curTime >= pItem.chstimeList[wIndex].wordBg &&
                                      curTime < item.timeList[pItem.sentIndex].ed &&
                                      attrib
                                        ? attrib.topic_color
                                        : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
                                          ? pItem.matchNotesObj.notesColor
                                          : pItem.config.color,
                                  }"
                                  @click.stop="
                                    viewNotes(
                                      $event,
                                      pItem.chs[wIndex],
                                      item.timeList &&
                                        item.timeList[pItem.sentIndex] &&
                                        item.timeList[pItem.sentIndex].bg,
                                      item.timeList &&
                                        item.timeList[pItem.sentIndex] &&
                                        item.timeList[pItem.sentIndex].ed,
                                      pItem.articleSentIndex,
                                      pItem,
                                    )
                                  "
                                  >{{ convertText(pItem.chs[wIndex]) }}</span
                                >
                                <img
                                  v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                                  :src="pItem.img[0].file_url"
                                  :style="{
                                    height: attrib && attrib.font_size ? attrib.font_size : '20px',
                                  }"
                                />
                              </template>
                            </span>
                            <span
                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                pItem.className ? pItem.className : '',
                                noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                              ]"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                            >
                          </span>
                          <span class="NNPE-words-box">
                            <span
                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 1].pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{
                                NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                  ? item.wordsList[pIndex + 1].pinyin
                                  : ''
                              }}</span
                            >
                            <span
                              class="NNPE-chs"
                              style="text-align: left"
                              :class="[
                                item.timeList &&
                                item.timeList[pItem.sentIndex] &&
                                curTime >= item.timeList[pItem.sentIndex].bg &&
                                curTime <= item.timeList[pItem.sentIndex].ed &&
                                curTime
                                  ? 'active'
                                  : '',
                                pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
                                pItem.chstimeList &&
                                pItem.chstimeList[pItem.leg - 1] &&
                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
                                curQue.wordTime &&
                                curTime <= item.timeList[pItem.sentIndex].ed
                                  ? 'wordActive'
                                  : '',
                              ]"
                              :style="{
                                fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
                                textDecoration: item.wordsList[pIndex + 1].config.textDecoration,
                                borderBottom: item.wordsList[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                width: item.wordsList[pIndex + 1].chs.trim() === '' ? '6px' : '',
                                backgroundColor:
                                  item.timeList &&
                                  item.timeList[pItem.sentIndex] &&
                                  curTime >= item.timeList[pItem.sentIndex].bg &&
                                  curTime <= item.timeList[pItem.sentIndex].ed &&
                                  curTime &&
                                  attrib
                                    ? attrib.assist_color
                                    : '',
                                color:
                                  pItem.chstimeList &&
                                  pItem.chstimeList[pItem.leg - 1] &&
                                  curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
                                  curQue.wordTime &&
                                  curTime <= item.timeList[pItem.sentIndex].ed &&
                                  attrib
                                    ? attrib.topic_color
                                    : item.wordsList[pIndex + 1].matchNotesObj.con &&
                                        item.wordsList[pIndex + 1].matchNotesObj.notesColor
                                      ? item.wordsList[pIndex + 1].matchNotesObj.notesColor
                                      : item.wordsList[pIndex + 1].config.color,
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 1].chs,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              ><span>{{ convertText(item.wordsList[pIndex + 1].chs) }}</span
                              ><img
                                v-if="
                                  item.wordsList[pIndex + 1].img &&
                                  item.wordsList[pIndex + 1].img.length > 0 &&
                                  item.wordsList[pIndex + 1].imgPosition === 'after'
                                "
                                :src="item.wordsList[pIndex + 1].img[0].file_url"
                                :style="{
                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
                                }"
                            /></span>
                            <span
                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 1].pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{
                                NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                  ? item.wordsList[pIndex + 1].pinyin
                                  : ''
                              }}</span
                            >
                          </span>
                          <span
                            v-if="
                              item.wordsList[pIndex + 2] &&
                              item.wordsList[pIndex + 2].chs &&
                              (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
                                NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1)
                            "
                            class="NNPE-words-box"
                          >
                            <span
                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 2].pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{
                                NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                  ? item.wordsList[pIndex + 2].pinyin
                                  : ''
                              }}</span
                            >
                            <span
                              class="NNPE-chs"
                              style="text-align: left"
                              :class="[
                                item.timeList &&
                                item.timeList[pItem.sentIndex] &&
                                curTime >= item.timeList[pItem.sentIndex].bg &&
                                curTime <= item.timeList[pItem.sentIndex].ed &&
                                curTime
                                  ? 'active'
                                  : '',
                                pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
                                pItem.chstimeList &&
                                pItem.chstimeList[pItem.leg - 1] &&
                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
                                curQue.wordTime &&
                                curTime <= item.timeList[pItem.sentIndex].ed
                                  ? 'wordActive'
                                  : '',
                              ]"
                              :style="{
                                fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
                                textDecoration: item.wordsList[pIndex + 2].config.textDecoration,
                                borderBottom: item.wordsList[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                width: item.wordsList[pIndex + 2].chs.trim() === '' ? '6px' : '',
                                backgroundColor:
                                  item.timeList &&
                                  item.timeList[pItem.sentIndex] &&
                                  curTime >= item.timeList[pItem.sentIndex].bg &&
                                  curTime <= item.timeList[pItem.sentIndex].ed &&
                                  curTime &&
                                  attrib
                                    ? attrib.assist_color
                                    : '',
                                color:
                                  pItem.chstimeList &&
                                  pItem.chstimeList[pItem.leg - 1] &&
                                  curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
                                  curQue.wordTime &&
                                  curTime <= item.timeList[pItem.sentIndex].ed &&
                                  attrib
                                    ? attrib.topic_color
                                    : item.wordsList[pIndex + 1].matchNotesObj.con &&
                                        item.wordsList[pIndex + 1].matchNotesObj.notesColor
                                      ? item.wordsList[pIndex + 2].matchNotesObj.notesColor
                                      : item.wordsList[pIndex + 2].config.color,
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 2].chs,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              ><span>{{ convertText(item.wordsList[pIndex + 2].chs) }}</span
                              ><img
                                v-if="
                                  item.wordsList[pIndex + 2].img &&
                                  item.wordsList[pIndex + 2].img.length > 0 &&
                                  item.wordsList[pIndex + 2].imgPosition === 'after'
                                "
                                :src="item.wordsList[pIndex + 2].img[0].file_url"
                                :style="{
                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
                                }"
                            /></span>
                            <span
                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                              :class="[
                                'NNPE-pinyin',
                                noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.wordsList[pIndex + 2].pinyin,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                  pItem.articleSentIndex,
                                  pItem,
                                )
                              "
                              >{{
                                NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                  ? item.wordsList[pIndex + 2].pinyin
                                  : ''
                              }}</span
                            >
                          </span>
                        </template>
                        <template v-else>
                          <span
                            v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.chs != '“' && pItem.padding ? 'padding' : '',
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.pinyin,
                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                pItem.articleSentIndex,
                                pItem,
                              )
                            "
                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                          >
                          <span
                            class="NNPE-chs"
                            :class="[
                              item.timeList &&
                              item.timeList[pItem.sentIndex] &&
                              curTime >= item.timeList[pItem.sentIndex].bg &&
                              curTime <= item.timeList[pItem.sentIndex].ed &&
                              curTime
                                ? 'active'
                                : '',
                              pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                              pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
                            ]"
                            :style="{
                              backgroundColor:
                                item.timeList &&
                                item.timeList[pItem.sentIndex] &&
                                curTime >= item.timeList[pItem.sentIndex].bg &&
                                curTime <= item.timeList[pItem.sentIndex].ed &&
                                curTime &&
                                attrib
                                  ? attrib.assist_color
                                  : '',
                            }"
                          >
                            <template v-for="(wItem, wIndex) in pItem.leg">
                              <span
                                :key="'ci' + wIndex + pIndex + index"
                                :class="[
                                  pItem.chstimeList &&
                                  pItem.chstimeList[wIndex] &&
                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
                                  curTime < item.timeList[pItem.sentIndex].ed
                                    ? 'wordActive'
                                    : '',
                                ]"
                                :style="{
                                  fontFamily: pItem.config.fontFamily,
                                  textDecoration: pItem.config.textDecoration,
                                  borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                  fontWeight: pItem.config.fontWeight,
                                  height:
                                    attrib && attrib.font_size
                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                      : '28px',
                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                  lineHeight:
                                    attrib && attrib.font_size
                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                      : '28px',
                                  width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
                                  color:
                                    pItem.chstimeList &&
                                    pItem.chstimeList[wIndex] &&
                                    curTime >= pItem.chstimeList[wIndex].wordBg &&
                                    curTime < item.timeList[pItem.sentIndex].ed &&
                                    attrib
                                      ? attrib.topic_color
                                      : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
                                        ? pItem.matchNotesObj.notesColor
                                        : pItem.config.color,
                                }"
                                @click.stop="
                                  viewNotes(
                                    $event,
                                    pItem.chs[wIndex],
                                    item.timeList &&
                                      item.timeList[pItem.sentIndex] &&
                                      item.timeList[pItem.sentIndex].bg,
                                    item.timeList &&
                                      item.timeList[pItem.sentIndex] &&
                                      item.timeList[pItem.sentIndex].ed,
                                    pItem.articleSentIndex,
                                    pItem,
                                  )
                                "
                                >{{ convertText(pItem.chs[wIndex]) }}</span
                              >
                            </template>
                            <img
                              v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                              :src="pItem.img[0].file_url"
                              :style="{
                                height: attrib && attrib.font_size ? attrib.font_size : '20px',
                              }"
                            />
                          </span>
                          <span
                            v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.chs != '“' && pItem.padding ? 'padding' : '',
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.pinyin,
                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                pItem.articleSentIndex,
                                pItem,
                              )
                            "
                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                          >
                        </template>
                      </template>
                    </template>
                    <template v-else>
                      <span
                        :style="{
                          height: pItem.height + 'px',
                          width: pItem.width + 'px',
                        }"
                      ></span>
                    </template>
                  </div>
                </div>
                <div
                  v-if="curQue.property.multilingual_position === 'para'"
                  class="multilingual-para"
                  :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
                >
                  {{
                    curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
                      ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
                      : ''
                  }}
                </div>
                <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'after'">
                  <img
                    v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                    :src="item.sourceList[0].file_url_open"
                    :style="{
                      width: item.widthNumber + 'px',
                      height: item.heightNumber + 'px',
                    }"
                  />
                  <video
                    :src="item.sourceList[0].file_url_open"
                    width="100%"
                    height="400"
                    controls
                    controlsList="nodownload"
                    v-else
                  ></video>
                </template>
              </div>
              <div
                v-if="
                  item.remarkDetail &&
                  (item.remarkDetail.chs ||
                    item.remarkDetail.en ||
                    (item.remarkDetail.img_list && item.remarkDetail.img_list.length > 0))
                "
                :class="['remarkBox', 'remark-top-8']"
              >
                <RemarkChs :remark-detail="item.remarkDetail" :margin-top="8" />
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <template v-if="resObj">
          <!-- 段落对齐方式和备注在此模式里没有写，如果段落里添加了英文后需要在此添加段落对齐和备注、大小图片、生词样式 -->
          <div class="NPC-sentences-list">
            <div
              v-for="(item, index) in resObj.sentList"
              :key="'detail' + index"
              :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
            >
              <div
                :class="['NNPE-details']"
                @click="
                  handleChangeTime(
                    curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                    curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                    index,
                  )
                "
              >
                <div
                  v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                >
                  {{ item.enwords }}
                </div>
                <div style="overflow: hidden; clear: both"></div>
                <div
                  v-for="(pItem, pIndex) in item.sentArr"
                  :key="'wordsList' + pIndex"
                  class="NNPE-words"
                  :class="[
                    pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                    pItem.chs == '“' ? 'textRight' : '',
                  ]"
                >
                  <template v-if="!pItem.width">
                    <template v-if="pItem.isShow">
                      <template
                        v-if="
                          item.sentArr[pIndex + 1] &&
                          item.sentArr[pIndex + 1].chs &&
                          (chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1 ||
                            NumberList.indexOf(item.sentArr[pIndex + 1].chs) > -1)
                        "
                      >
                        <span class="NNPE-words-box">
                          <template v-if="curQue.property.pinyin_position == 'top'">
                            <span
                              v-if="config.isShowPY"
                              class="NNPE-pinyin"
                              :class="[
                                pItem.className ? pItem.className : '',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                              ]"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  pItem,
                                )
                              "
                              >{{ pItem.pinyin }}</span
                            >
                          </template>
                          <span
                            class="NNPE-chs"
                            :class="[
                              pItem.padding && config.isShowPY ? 'padding' : '',
                              sentIndex == index ? 'wordBlank' : '',
                            ]"
                          >
                            <template v-for="(wItem, wIndex) in pItem.leg">
                              <span
                                :key="'ci' + wIndex + pIndex + index"
                                :class="[
                                  pItem.timeList[wIndex] &&
                                  curTime >= pItem.timeList[wIndex].wordBg &&
                                  curTime <= curQue.wordTime[index].ed &&
                                  curTime
                                    ? 'active'
                                    : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                :style="{
                                  fontFamily: pItem.config.fontFamily,
                                  color: pItem.config.color,
                                  textDecoration: pItem.config.textDecoration,
                                  borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                  fontWeight: pItem.config.fontWeight,
                                  height:
                                    attrib && attrib.font_size
                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                      : '28px',
                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                  lineHeight:
                                    attrib && attrib.font_size
                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                      : '28px',
                                  width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
                                }"
                                @click.stop="
                                  viewNotes(
                                    $event,
                                    pItem.chs[wIndex],
                                    curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                    curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                    index,
                                    pItem,
                                  )
                                "
                                >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                              >
                            </template>
                          </span>
                          <template v-if="curQue.property.pinyin_position == 'bottom'">
                            <span
                              v-if="config.isShowPY"
                              class="NNPE-pinyin"
                              :class="[
                                pItem.className ? pItem.className : '',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                              ]"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  pItem,
                                )
                              "
                              >{{ pItem.pinyin }}</span
                            >
                          </template>
                        </span>
                        <span class="NNPE-words-box">
                          <template v-if="curQue.property.pinyin_position == 'top'">
                            <span
                              v-if="config.isShowPY"
                              :class="[
                                'NNPE-pinyin',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 1].pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 1],
                                )
                              "
                              >{{ item.sentArr[pIndex + 1].pinyin }}</span
                            >
                          </template>
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            :style="{
                              height:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                              fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                              lineHeight:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            }"
                          >
                            <span
                              :class="[
                                pItem.timeList[pItem.leg - 1] &&
                                curQue.wordTime &&
                                curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                curTime <= curQue.wordTime[index].ed &&
                                curTime
                                  ? 'active'
                                  : '',
                                sentIndex == index ? 'wordBlank' : '',
                              ]"
                              :style="{
                                fontFamily: item.sentArr[pIndex + 1].config.fontFamily,
                                color: item.sentArr[pIndex + 1].config.color,
                                textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
                                borderBottom: item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: item.sentArr[pIndex + 1].config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                width: item.sentArr[pIndex + 1].chs.trim() === '' ? '6px' : '',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 1].chs,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 1],
                                )
                              "
                            >
                              {{
                                NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
                                  ? item.sentArr[pIndex + 1].chs
                                  : ''
                              }}</span
                            >
                          </span>
                          <template v-if="curQue.property.pinyin_position == 'bottom'">
                            <span
                              v-if="config.isShowPY"
                              :class="[
                                'NNPE-pinyin',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 1].pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 1],
                                )
                              "
                              >{{ item.sentArr[pIndex + 1].pinyin }}</span
                            >
                          </template>
                        </span>
                        <span
                          v-if="
                            item.sentArr[pIndex + 2] &&
                            item.sentArr[pIndex + 2].chs &&
                            chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
                          "
                          class="NNPE-words-box"
                        >
                          <template v-if="curQue.property.pinyin_position == 'top'">
                            <span
                              v-if="config.isShowPY"
                              :class="[
                                'NNPE-pinyin',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 2].pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 2],
                                )
                              "
                              >{{ item.sentArr[pIndex + 2].pinyin }}</span
                            >
                          </template>
                          <span class="NNPE-chs" style="text-align: left">
                            <span
                              :class="[
                                pItem.timeList[pItem.leg - 1] &&
                                curQue.wordTime &&
                                curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                curTime <= curQue.wordTime[index].ed &&
                                curTime
                                  ? 'active'
                                  : '',
                                sentIndex == index ? 'wordBlank' : '',
                              ]"
                              :style="{
                                fontFamily: item.sentArr[pIndex + 2].config.fontFamily,
                                color: item.sentArr[pIndex + 2].config.color,
                                textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
                                borderBottom: item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: item.sentArr[pIndex + 2].config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                width: item.sentArr[pIndex + 2].chs.trim() === '' ? '6px' : '',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 2].chs,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 2],
                                )
                              "
                            >
                              {{
                                NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
                                  ? item.sentArr[pIndex + 2].chs
                                  : ''
                              }}</span
                            >
                          </span>
                          <template v-if="curQue.property.pinyin_position == 'bottom'">
                            <span
                              v-if="config.isShowPY"
                              :class="[
                                'NNPE-pinyin',
                                sentIndex == index ? 'wordBlank' : '',
                                noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                              ]"
                              style="text-align: left"
                              :style="{
                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                height:
                                  attrib && attrib.pinyin_size
                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                    : '22px',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  item.sentArr[pIndex + 2].pinyin,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  item.sentArr[pIndex + 2],
                                )
                              "
                              >{{ item.sentArr[pIndex + 2].pinyin }}</span
                            >
                          </template>
                        </span>
                      </template>
                      <template v-else>
                        <template v-if="curQue.property.pinyin_position == 'top'">
                          <span
                            v-if="config.isShowPY"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.chs != '“' && pItem.padding ? 'padding' : '',
                              pItem.className ? pItem.className : '',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.pinyin,
                                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                index,
                                pItem,
                              )
                            "
                            >{{ pItem.pinyin }}</span
                          >
                        </template>
                        <span
                          class="NNPE-chs"
                          :class="[
                            pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                            sentIndex == index ? 'wordBlank' : '',
                          ]"
                          :style="{
                            height:
                              attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                            lineHeight:
                              attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                          }"
                        >
                          <template v-for="(wItem, wIndex) in pItem.leg">
                            <span
                              :key="'ci' + wIndex + pIndex + index"
                              :class="[
                                pItem.timeList[wIndex] &&
                                curQue.wordTime &&
                                curQue.wordTime[index] &&
                                curTime >= pItem.timeList[wIndex].wordBg &&
                                curTime <= curQue.wordTime[index].ed
                                  ? 'active'
                                  : '',
                                sentIndex == index ? 'wordBlank' : '',
                              ]"
                              :style="{
                                fontFamily: pItem.config.fontFamily,
                                color: pItem.config.color,
                                textDecoration: pItem.config.textDecoration,
                                borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                fontWeight: pItem.config.fontWeight,
                                height:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                lineHeight:
                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
                              }"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.chs[wIndex],
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                  index,
                                  pItem,
                                )
                              "
                              >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                            >
                          </template>
                        </span>
                        <template v-if="curQue.property.pinyin_position == 'bottom'">
                          <span
                            v-if="config.isShowPY"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.chs != '“' && pItem.padding ? 'padding' : '',
                              pItem.className ? pItem.className : '',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.pinyin,
                                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                index,
                                pItem,
                              )
                            "
                            >{{ pItem.pinyin }}</span
                          >
                        </template>
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <span
                      :style="{
                        height: pItem.height + 'px',
                        width: pItem.width + 'px',
                      }"
                    ></span>
                  </template>
                </div>
                <div style="overflow: hidden; clear: both"></div>
                <div
                  v-if="
                    item.enwords &&
                    config.isShowEN &&
                    (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
                  "
                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                >
                  {{ item.enwords }}
                </div>
              </div>
              <div
                v-if="curQue.property.multilingual_position === 'para'"
                class="multilingual-para"
                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
              >
                {{ multilingualTextList[multilingual] ? multilingualTextList[multilingual].join(' ') : '' }}
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-for="(items, indexs) in curQue.detail">
        <div
          v-if="
            curQue.property.multilingual_position === 'all' &&
            items.multilingualTextList &&
            items.multilingualTextList[multilingual] &&
            items.multilingualTextList[multilingual].length > 0
          "
          :key="indexs"
          class="multilingual"
        >
          <div
            class="multilingual-para"
            :class="[items.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + items.paraAlign]"
          >
            {{
              items.multilingualTextList && items.multilingualTextList[multilingual]
                ? items.multilingualTextList[multilingual].join(' ')
                : ''
            }}
          </div>
        </div>
      </template>
    </div>
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'bottom'
      "
      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="artNormalAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :duration="curQue.mp3_list[0].media_duration"
            :mp3-source="curQue.mp3_list[0].source"
            :width="colLength == 2 ? 200 : 700"
            :ed="ed"
            type="audioLine"
            :attrib="attrib"
            @emptyEd="emptyEd"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>

    <template v-if="isNoteShow">
      <div
        ref="notecard"
        class="NNPE-noteDetail"
        :style="{
          marginLeft: windowWidth > 642 ? '-321px' : '0px',
          left: windowWidth > 642 ? '' : '0px',
          width: isMobile ? '100%' : '',
        }"
      >
        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" :is-mobile="isMobile" />
      </div>
    </template>
  </div>
</template>

<script>
import AudioLine from '../voice_matrix/components/AudioLine.vue';
import Notecard from './components/Notecard.vue';
import RemarkChs from '../dialogue_article/RemarkChs.vue';
import { data } from 'vis-network';
export default {
  name: 'NormalModelChs',
  components: {
    AudioLine,
    Notecard,
    RemarkChs,
  },
  props: [
    'curQue',
    'noFont',
    'config',
    'NNPEAnnotationList',
    'colLength',
    'themeColor',
    'multilingual',
    'attrib',
    'isMobile',
  ],
  inject: ['convertText'],
  data() {
    return {
      resArr: [],
      resObj: null,
      curTime: 0, // 单位s
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
      enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
      NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
      newWords: ['鱼', '辩礼义'],

      oldHz: '',
      hz: '',
      top: 0,
      left: 0,
      articleImg: {}, // 文章图片
      paraIndex: -1, // 段落索引
      sentIndex: -1, // 句子索引
      ed: undefined,
      noteNum: '',
      curNoteCon: null,
      isNoteShow: false,
      oldNoteNum: '',
      clientY: 0,
      contentWidth: 732,
      windowWidth: window.innerWidth,
      isHasRemark: false,
      annotationList: [],
    };
  },
  computed: {
    isPlaying() {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.isPlaying;
      }
      return playing;
    },
  },
  watch: {
    noteNum: {
      handler(val) {
        let _this = this;
        if (val) {
          _this.handleNote(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isNoteShow: {
      handler(val) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.notecard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
    curQue: {
      handler(val) {
        if (val) {
          this.handleData();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0) {
      this.handleNewword();
    }
    if (this.curQue) {
      this.handleData();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 拼音的显示和隐藏
    changePinyin() {
      if (this.config.isHasPY) {
        this.$emit('changeConfig', 'isShowPY');
      }
    },
    // 英文的显示和隐藏
    changeEN() {
      if (this.config.isHasEN) {
        this.$emit('changeConfig', 'isShowEN');
      }
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
      this.getSentIndex(this.curTime);
    },
    getSentIndex(curTime) {
      if (this.curQue.wordTime) {
        for (let i = 0; i < this.curQue.wordTime.length; i++) {
          let bg = this.curQue.wordTime[i].bg;
          let ed = this.curQue.wordTime[i].ed;
          if (curTime >= bg && curTime <= ed) {
            this.sentIndex = i;
            break;
          }
        }
      }
    },
    handleData() {
      let resArr = [];
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let wordTimeList = curQue.wordTime;
      let asIndex = 0;
      let dhaspinyin = false; // 每段是否有拼音
      this.isHasRemark = false;
      curQue.detail.forEach((dItem, dIndex) => {
        dhaspinyin = false;
        let remarkDetail = dItem.remark;
        if (
          remarkDetail &&
          (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length > 0))
        ) {
          this.isHasRemark = true;
        }
        let paraArr = [];
        if (dItem.paraAlign !== 'center') {
          paraArr = [
            {
              pinyin: '',
              chs: '',
              width: 20,
              height: 20,
            },
            {
              width: 20,
              height: 20,
              pinyin: '',
              chs: '',
            },
          ];
        }
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];
          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.mergeWordSymbol(wItem);
            let obj = {
              paraIndex: dIndex, // 段落索引
              sentIndex: sIndex, // 在段落中句子索引
              articleSentIndex: asIndex, // 在文章中句子索引
              wordIndex: wIndex, // 单词的索引
              pinyin:
                curQue.pinyin_type === 'pinyin'
                  ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
                    ? wItem.pinyin_up
                    : wItem.pinyin
                  : wItem.pinyin_tone,
              chs: wItem.chs,
              padding: true, // wItem.padding,
              className: wItem.className,
              isShow: wItem.isShow,
              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
              startIndex,
              endIndex,
              leg: wItem.chs.length,
              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,
            };
            if (wordTimeList && wordTimeList.length > 0) {
              obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(startIndex, endIndex);
            }
            sentArr.push(obj);
            paraArr.push(obj);
            if (wIndex === sItem.length - 1) {
              asIndex += 1;
            }
            if (wItem.pinyin) dhaspinyin = true;
          });
        });
        let curSentencesLeg = dItem.sentences.length;
        let startLeg = dIndex === 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
        let endLeg = startLeg + curSentencesLeg;
        dItem.endLeg = endLeg;
        let timeList = curQue.wordTime ? curQue.wordTime.slice(startLeg, endLeg) : [];
        let paraObj = {
          wordsList: paraArr,
          timeList,
          isTitle: dItem.isTitle,
          dhaspinyin,
          enwords: dItem.sentencesEn ? dItem.sentencesEn : [],
          paraAlign: dItem.paraAlign,
          remarkDetail,
          sourceList: dItem.sourceList ? dItem.sourceList : [],
          sourcePosition: dItem.sourcePosition,
          widthNumber: dItem.widthNumber,
          heightNumber: dItem.heightNumber,
        };
        resArr.push(paraObj);
      });
      this.resArr = resArr;

      // 循环文章图片
      if (curQue.img_list) {
        curQue.img_list.forEach((item) => {
          this.articleImg[item.imgNumber] = item.id;
        });
      }

      let resArrs = [];
      let sentArrTotal = [];
      let timeArr = [];
      curQue.detail.forEach((dItem, dIndex) => {
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];

          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 obj = {
              paraIndex: dIndex, // 段落索引
              sentIndex: sIndex, // 在段落中句子索引
              wordIndex: wIndex, // 单词的索引
              pinyin:
                curQue.pinyin_type === 'pinyin'
                  ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
                    ? wItem.pinyin_up
                    : wItem.pinyin
                  : wItem.pinyin_tone,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex,
              endIndex,
              leg: wItem.chs.length,
              timeList: [],
            };
            sentArr.push(obj);
          });
          let objs = {
            sentArr,
            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
            paraAlign: dItem.paraAlign,
            sourceList: dItem.sourceList ? dItem.sourceList : [],
            sourcePosition: dItem.sourcePosition,
            widthNumber: dItem.widthNumber,
            heightNumber: dItem.heightNumber,
          };
          sentArrTotal.push(sentArr);
          resArrs.push(objs);
        });
        timeArr.push(dItem.timeList);
      });
      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: resArrs, timeList };
    },
    handleNewword() {
      let annotationList = [];
      this.NNPEAnnotationList.forEach((wItem) => {
        // item.forEach((wItem) => {
        if (wItem.con) {
          annotationList.push(wItem.con.replace(/<[^>]*>?/gm, ''));
        }
        // });
      });
      this.annotationList = JSON.parse(JSON.stringify(annotationList));
    },
    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);
        });
      });
    },
    // 词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    // 判断是否有padding
    judgePad(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        let nextIndex = curIndex + 1;
        let chs = sItem[nextIndex].chs;
        if (this.chsFhList.indexOf(chs) > -1 || this.chsFhList.indexOf(wItem.chs) > -1) {
          wItem.padding = false;
        } else {
          wItem.padding = true;
        }
        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
          wItem.className = 'textLeft';
        }
      }
    },
    // 点击播放某个句子
    handleChangeTime(time, ed, index) {
      this.sentIndex = index;
      if (time) {
        this.curTime = time;
        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
        this.ed = ed;
      }
    },
    emptyEd() {
      this.ed = undefined;
    },
    // 经过每个词，高亮句子
    handleMouseover(pItem) {
      this.paraIndex = pItem.paraIndex;
      this.sentIndex = pItem.sentIndex;
    },
    handleMouseleave() {
      this.paraIndex = -1;
      this.sentIndex = -1;
    },
    viewNotes(e, noteNum, time, ed, index, words) {
      let _this = this;
      let noteIndex = '';
      if (_this.NumberList.indexOf(noteNum) > -1) {
        for (let i = 0; i < _this.NumberList.length; i++) {
          if (_this.NumberList[i] === noteNum) {
            noteIndex = `${String(i)}`;
            break;
          }
        }
      } else if (words.matchNotes) {
        // 关联了注释
        if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
          _this.NNPEAnnotationList.forEach((item, indexs) => {
            let textContent = item.con.replace(/<[^>]*>?/gm, '');
            if (textContent === words.matchNotes.trim() || item.number === words.matchNotes.trim()) {
              noteIndex = `${String(indexs)}`;
            }
          });
        }
      } else if (
        _this.NNPEAnnotationList &&
        _this.NNPEAnnotationList.length > 0 &&
        _this.annotationList.indexOf(words.chs) > -1
      ) {
        _this.NNPEAnnotationList.forEach((item, indexs) => {
          let textContent = item.con.replace(/<[^>]*>?/gm, '');
          if (textContent === words.chs.trim()) {
            noteIndex = `${String(indexs)}`;
          }
        });
      } else {
        _this.handleChangeTime(time, ed, index);
      }
      if (noteIndex) {
        this.showNoteDetail(e, noteIndex);
      }
    },
    showNoteDetail(e, noteNum) {
      let _this = this;
      //   if (_this.oldNoteNum != noteNum) {
      this.isNoteShow = false;
      setTimeout(() => {
        _this.noteNum = noteNum;
      }, 50);
      //   }
      _this.clientY = e.clientY;
      let left = e.clientX;
      let width = 642;

      if (left - this.bodyLeft > this.contentWidth / 2) {
        _this.left = 500;
      } else if (left - 200 > 500) {
        _this.left = 500;
      } else {
        _this.left = left - 200;
      }
      if (_this.oldNoteNum === noteNum) {
        _this.handleNote(noteNum);
      }
    },
    // 处理分词数据
    handleNote(val) {
      let _this = this;
      _this.isNoteShow = true;
      _this.oldNoteNum = val;
      let noteIndex = Number(val);
      if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
        _this.curNoteCon = _this.NNPEAnnotationList[noteIndex] ? _this.NNPEAnnotationList[noteIndex] : null;
      }
    },
    changeCard(isShow) {
      let _this = this;
      _this.isNoteShow = isShow;
      _this.oldNoteNum = '';
      _this.noteNum = '';
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.NNPE-ArticleView {
  width: 100%;

  .aduioLine-practice-npc {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .aduioLine-content {
      flex: 1;
    }

    .aduioLine-right {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 69px;
      height: 40px;
      padding: 0 12px;
      border-left: 1px solid rgba(0, 0, 0, 10%);

      .svg-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

  .NPC-sentences-list {
    overflow: auto;

    // padding: 24px 0;
    color: rgba(0, 0, 0, 85%);

    .NPC-article-empty {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      > div {
        height: 24px;

        &.empty-left {
          box-sizing: border-box;
          width: 100%;

          &.hasRemark {
            box-sizing: border-box;
            width: 70%;
            border-right: 1px rgba(0, 0, 0, 10%) solid;
          }
        }

        &.empty-right {
          flex: 1;
        }
      }

      &-bottom {
        > div {
          height: 40px;
        }
      }
    }
  }

  .NNPE-detail {
    // overflow: hidden; // 为了不遮挡备注内容
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    clear: both;

    .para-center {
      display: flex;
      flex-flow: wrap;
      justify-content: center;
      width: 100%;
    }

    .para-right {
      display: flex;
      flex-flow: wrap;
      justify-content: end;
      width: 100%;
    }

    .NNPE-words {
      float: left;
      padding-bottom: 5px;

      &-box {
        float: left;

        > span {
          display: block;

          &.NNPE-pinyin {
            height: 22px;
            font-family: 'League';
            font-size: 14px;
            font-weight: normal;
            line-height: 1.5;
            color: #000;

            &.noFont {
              font-family: initial;
            }

            &.textLeft {
              text-align: left;
            }

            &.textRight {
              text-align: right;
            }
          }

          &.NNPE-chs {
            display: flex;
            flex-flow: wrap;
            align-items: center;
            font-family: '楷体';
            font-size: 20px;
            line-height: 1.4;
            color: #000;

            &.overActive {
              background: rgba(0, 0, 0, 6%);
            }

            &.active {
              background: rgba(222, 68, 68, 15%);
            }

            &.wordActive {
              color: rgba(222, 68, 68, 100%);
            }

            .wordActive {
              color: rgba(222, 68, 68, 100%);
            }
          }

          &.padding {
            padding: 0 3px;
          }
        }
      }

      &.textLeft {
        text-align: left;
      }

      &.textCenter {
        text-align: center;

        .NNPE-chs {
          justify-content: center;
        }
      }

      &.textRight {
        text-align: right;
      }

      > span {
        display: block;

        &.NNPE-pinyin {
          height: 22px;
          font-family: 'League';
          font-size: 14px;
          font-weight: normal;
          line-height: 1.5;
          color: #000;

          &.noFont {
            font-family: initial;
          }

          &.textLeft {
            text-align: left;
          }

          &.textRight {
            text-align: right;
          }
        }

        &.NNPE-chs {
          display: flex;
          flex-flow: wrap;
          align-items: center;
          font-family: '楷体';
          font-size: 20px;
          line-height: 1.4;
          color: #000;

          &.overActive {
            background: rgba(0, 0, 0, 6%);
          }

          &.active {
            background: rgba(222, 68, 68, 15%);
          }

          &.wordActive {
            color: rgba(222, 68, 68, 100%);
          }

          .wordActive {
            color: rgba(222, 68, 68, 100%);
          }
        }

        &.padding {
          padding: 0 3px;
        }
      }
    }

    &.NNPE-detail-title {
      .NNPE-title {
        margin: 0 auto;
      }

      .wordsList-box {
        > div {
          display: flex;
          flex-flow: wrap;
          justify-content: center;
        }
      }
    }

    .index {
      box-sizing: border-box;
      width: 48px;
      padding: 8px;
      text-align: right;
      border-right: 1px solid rgba(0, 0, 0, 10%);

      b {
        font-weight: 400;
        line-height: 1.5;
        color: #000;
      }
    }

    .wordsList-box {
      // display: flex;
      width: 100%;
      padding: 6px 24px 12px;

      &-left {
        justify-content: flex-start;
      }

      &-center {
        justify-content: center;
      }

      &-right {
        justify-content: flex-end;
      }

      > div {
        overflow: hidden;
        clear: both;
      }

      > img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
      }
    }

    .article-content {
      box-sizing: border-box;

      // display: flex;
      // align-items: flex-start;
      // justify-content: flex-start;
      width: 100%;

      &.hasRemark {
        width: 70%;
        padding: 8px 0 8px 23px;
        border-right: 1px rgba(0, 0, 0, 10%) solid;
      }

      &.paraLast {
        padding-bottom: 24px;
      }
    }
  }

  .remarkBox {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    &.remark72 {
      padding-top: 72px;
    }

    &.remark-top {
      padding-top: 44px;
    }

    &.remark-top-8 {
      padding-top: 8px;
    }
  }

  .NNPE-noteDetail {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    max-width: 100%;
    margin-top: -196px;
    overflow: auto;

    // box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
  }

  .NNPE-detail-box {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 24px;
    margin-bottom: 8px;

    &.active {
      background: rgba(222, 68, 68, 15%);
    }
  }

  .NNPE-details {
    overflow: hidden;
    clear: both;

    .NNPE-words {
      float: left;

      &-box {
        float: left;

        > span {
          display: block;

          &.NNPE-pinyin {
            height: 20px;
            font-family: 'League';
            font-size: 14px;
            font-weight: normal;
            line-height: 20px;
            color: rgba(0, 0, 0, 100%);

            &.noFont {
              font-family: initial;
            }

            &.textLeft {
              text-align: left;
            }

            &.wordBlank {
              color: rgba(0, 0, 0, 100%);
            }
          }

          &.NNPE-chs {
            display: flex;
            flex-flow: wrap;
            align-items: center;
            font-family: '楷体';
            font-size: 20px;
            line-height: 28px;
            color: rgba(0, 0, 0, 100%);

            .active {
              color: #de4444;
            }

            &.wordBlank {
              color: rgba(0, 0, 0, 100%);
            }
          }

          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }

      &.textLeft {
        text-align: left;
      }

      &.textCenter {
        text-align: center;

        .NNPE-chs {
          justify-content: center;
        }
      }

      &.textRight {
        text-align: right;
      }

      > span {
        display: block;

        &.NNPE-pinyin {
          height: 20px;
          font-family: 'League';
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          color: rgba(0, 0, 0, 100%);

          &.noFont {
            font-family: initial;
          }

          &.textLeft {
            text-align: left;
          }

          &.wordBlank {
            color: rgba(0, 0, 0, 100%);
          }
        }

        &.NNPE-chs {
          display: flex;
          flex-flow: wrap;
          align-items: center;
          font-family: '楷体';
          font-size: 20px;
          line-height: 28px;
          color: rgba(0, 0, 0, 100%);

          .active {
            color: #de4444;
          }

          &.wordBlank {
            color: rgba(0, 0, 0, 100%);
          }
        }

        &.padding {
          padding: 0 3px;
        }
      }
    }
  }

  .enwords {
    padding-left: 3px;
    font-family: 'Helvetica';
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    color: rgba(0, 0, 0, 100%);
    word-break: break-word;

    &.wordBlank {
      color: rgba(0, 0, 0, 100%);
    }
  }

  .multilingual {
    padding: 6px 24px 12px;
    word-break: break-word;
  }

  .multilingual-para {
    text-indent: 40px;
    word-break: break-word;

    &-center,
    &.multilingual-center {
      text-align: center;
      text-indent: 0;
    }

    &.multilingual-right {
      text-align: right;
    }
  }
}
</style>