EEP_BookPreview/src/views/book/courseware/preview/components/article/Voicefullscreen.vue

<!--  -->
<template>
  <div
    v-if="sentList"
    :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2', isLandscape ? 'voicefull-scape' : '']"
    :style="{
      paddingRight: isLandscape ? '100px' : '',
    }"
  >
    <div class="voicefull-bottom" @mouseover="setTopShow(true)" @mouseleave="setTopShow(false)">
      <div :class="[isTopShow || isPhone ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
        <div :class="['bottom-left', TaskModel == 'ANSWER' ? 'bottom-left-margin' : '']"></div>
        <div :class="['page-count', bgIndex == 0 ? 'page-count-white' : 'page-count-green']">
          {{ curSentIndex + 1 }}/{{ sentList.length }}
        </div>
      </div>
    </div>
    <div v-if="item" class="voicefull-content">
      <div class="vc-box">
        <div
          :class="[
            'vc-left vc-left-grey',
            isShowLeft && bgIndex == 0 ? 'vc-left-black' : '',
            isShowLeft && bgIndex == 1 ? 'vc-left-white' : '',
            curSentIndex == 0 ? 'hidden' : '',
          ]"
          @click="prevSentence"
        ></div>
      </div>
      <div class="vc-main">
        <div class="NNPE-words-box">
          <div style="overflow: hidden; clear: both"></div>
          <div
            v-if="enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
            :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
            :style="{ fontSize: enSize + 'px' }"
          >
            {{ convertText(enwords) }}
          </div>
          <div
            v-for="(pItem, pIndex) in item"
            :key="'wordsList' + pIndex"
            class="NNPE-words"
            :class="[
              pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
              pItem.chs == '“' ? 'textRight' : '',
            ]"
            @dblclick="showWordDetail($event, pItem)"
            @click="playWord(pItem)"
          >
            <template>
              <template v-if="!pItem.width">
                <template v-if="pItem.isShow">
                  <template
                    v-if="item[pIndex + 1] && item[pIndex + 1].chs && chsFhList.indexOf(item[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 : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                        >
                      </template>
                      <span
                        class="NNPE-chs"
                        :class="[
                          pItem.padding && config.isShowPY ? 'padding' : '',
                          curQue.property.pinyin_position == 'top' ? 'bottom' : '',
                        ]"
                        :style="{
                          height: hzSize * 1.17 + 'px',
                        }"
                      >
                        <template>
                          <span
                            v-for="(wItem, wIndex) in pItem.leg"
                            :key="'ci' + wIndex + pIndex"
                            :class="[
                              pItem.timeList &&
                              pItem.timeList[wIndex] &&
                              curTime >= pItem.timeList[wIndex].wordBg &&
                              curQue.wordTime &&
                              curQue.wordTime[curSentIndex] &&
                              curTime <= curQue.wordTime[curSentIndex].ed
                                ? bgIndex == 0
                                  ? 'active'
                                  : 'active-yellow'
                                : '',
                              bgIndex == 1 ? 'font-white' : '',
                              bgIndex == 0 && wordIndex == pItem.wordIndex ? 'wordActive' : '',
                              bgIndex == 1 && wordIndex == pItem.wordIndex ? 'wordActive-blue' : '',
                              newWordList.indexOf(pItem.chs) > -1 && !isPlaying ? 'newActive' : '',
                              pItem.words && !isPlaying ? 'newActive' : '',
                            ]"
                            :style="{
                              fontSize: hzSize + 'px',
                              fontFamily: pItem.config && pItem.config.fontFamily ? pItem.config.fontFamily : '',
                              textDecoration:
                                pItem.config && pItem.config.textDecoration ? pItem.config.textDecoration : '',
                              borderBottom: pItem.config && pItem.config.border === 'dotted' ? '1px dotted' : '',
                              fontWeight: pItem.config && pItem.config.fontWeight ? pItem.config.fontWeight : '',
                              color: pItem.config && pItem.config.color ? pItem.config.color : '',
                              height: hzSize * 1.17 + 'px',
                              display: 'inline-block',
                              width: pItem.chs[wIndex].trim() === '' ? '10px' : '',
                            }"
                            >{{ 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="{
                            width: hzSize + 'px',
                            height: hzSize + 'px',
                          }"
                        />
                      </span>
                      <template v-if="curQue.property.pinyin_position == 'bottom'">
                        <span
                          v-if="config.isShowPY"
                          class="NNPE-pinyin bottom"
                          :class="[
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? 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',
                            noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            textAlign: left,
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(item[pIndex + 1].pinyin) == -1 ? item[pIndex + 1].pinyin : '' }}</span
                        >
                      </template>
                      <span
                        :class="['NNPE-chs', curQue.property.pinyin_position == 'top' ? 'bottom' : '']"
                        :style="{
                          fontSize: hzSize + 'px',
                          textAlign: left,
                          height: hzSize * 1.17 + 'px',
                        }"
                      >
                        <span
                          :class="[
                            pItem.timeList[pItem.leg - 1] &&
                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                            curQue.wordTime &&
                            curQue.wordTime[curSentIndex] &&
                            curTime <= curQue.wordTime[curSentIndex].ed
                              ? bgIndex == 0
                                ? 'active'
                                : 'active-yellow'
                              : '',
                            bgIndex == 1 ? 'font-white' : '',
                            newWordList.indexOf(item[pIndex + 1].chs) > -1 && !isPlaying ? 'newActive' : '',
                            item[pIndex + 1].words && !isPlaying ? 'newActive' : '',
                          ]"
                          :style="{
                            fontSize: hzSize + 'px',
                            fontFamily:
                              item[pIndex + 1].config && item[pIndex + 1].config.fontFamily
                                ? item[pIndex + 1].config.fontFamily
                                : '',
                            textDecoration:
                              item[pIndex + 1].config && item[pIndex + 1].config.textDecoration
                                ? item[pIndex + 1].config.textDecoration
                                : '',
                            borderBottom:
                              item[pIndex + 1].config && item[pIndex + 1].config.border === 'dotted'
                                ? '1px dotted'
                                : '',
                            fontWeight:
                              item[pIndex + 1].config && item[pIndex + 1].config.fontWeight
                                ? item[pIndex + 1].config.fontWeight
                                : '',
                            color:
                              item[pIndex + 1].config && item[pIndex + 1].config.color
                                ? item[pIndex + 1].config.color
                                : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width: item[pIndex + 1].chs.trim() === '' ? '10px' : '',
                          }"
                          >{{ convertText(item[pIndex + 1].chs) }}</span
                        >
                        <img
                          v-if="
                            item[pIndex + 1].img &&
                            item[pIndex + 1].img.length > 0 &&
                            item[pIndex + 1].imgPosition === 'after'
                          "
                          :src="item[pIndex + 1].img[0].file_url"
                          :style="{
                            width: hzSize + 'px',
                            height: hzSize + 'px',
                          }"
                        />
                      </span>
                      <template v-if="curQue.property.pinyin_position == 'bottom'">
                        <span
                          v-if="config.isShowPY"
                          :class="[
                            'NNPE-pinyin',
                            noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                            'bottom',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            textAlign: left,
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(item[pIndex + 1].pinyin) == -1 ? item[pIndex + 1].pinyin : '' }}</span
                        >
                      </template>
                    </span>
                    <span
                      v-if="item[pIndex + 2] && item[pIndex + 2].chs && chsFhList.indexOf(item[pIndex + 2].chs) > -1"
                      class="NNPE-words-box"
                    >
                      <template v-if="curQue.property.pinyin_position == 'top'">
                        <span
                          v-if="config.isShowPY"
                          :class="[
                            'NNPE-pinyin',
                            noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            textAlign: left,
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(item[pIndex + 2].pinyin) == -1 ? item[pIndex + 2].pinyin : '' }}</span
                        >
                      </template>
                      <span
                        :class="['NNPE-chs', curQue.property.pinyin_position == 'top' ? 'bottom' : '']"
                        :style="{
                          fontSize: hzSize + 'px',
                          textAlign: left,
                          height: hzSize * 1.17 + 'px',
                        }"
                      >
                        <span
                          :class="[
                            pItem.timeList[pItem.leg - 1] &&
                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                            curQue.wordTime &&
                            curQue.wordTime[curSentIndex] &&
                            curTime <= curQue.wordTime[curSentIndex].ed
                              ? bgIndex == 0
                                ? 'active'
                                : 'active-yellow'
                              : '',
                            bgIndex == 1 ? 'font-white' : '',
                            newWordList.indexOf(item[pIndex + 2].chs) > -1 && !isPlaying ? 'newActive' : '',
                            item[pIndex + 2].words && !isPlaying ? 'newActive' : '',
                          ]"
                          :style="{
                            fontSize: hzSize + 'px',
                            fontFamily:
                              item[pIndex + 2].config && item[pIndex + 2].config.fontFamily
                                ? item[pIndex + 2].config.fontFamily
                                : '',
                            textDecoration:
                              item[pIndex + 2].config && item[pIndex + 2].config.textDecoration
                                ? item[pIndex + 2].config.textDecoration
                                : '',
                            borderBottom:
                              item[pIndex + 2].config && item[pIndex + 2].config.border === 'dotted'
                                ? '1px dotted'
                                : '',
                            fontWeight:
                              item[pIndex + 2].config && item[pIndex + 2].config.fontWeight
                                ? item[pIndex + 2].config.fontWeight
                                : '',
                            color:
                              item[pIndex + 2].config && item[pIndex + 2].config.color
                                ? item[pIndex + 2].config.color
                                : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width: item[pIndex + 2].chs.trim() === '' ? '10px' : '',
                          }"
                          >{{ convertText(item[pIndex + 2].chs) }}</span
                        >
                        <img
                          v-if="
                            item[pIndex + 2].img &&
                            item[pIndex + 2].img.length > 0 &&
                            item[pIndex + 2].imgPosition === 'after'
                          "
                          :src="item[pIndex + 2].img[0].file_url"
                          :style="{
                            width: hzSize + 'px',
                            height: hzSize + 'px',
                          }"
                        />
                      </span>
                      <template v-if="curQue.property.pinyin_position == 'bottom'">
                        <span
                          v-if="config.isShowPY"
                          :class="[
                            'NNPE-pinyin',
                            noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                            bgIndex == 1 ? 'font-white' : '',
                            'bottom',
                          ]"
                          :style="{
                            fontSize: pySize + 'px',
                            textAlign: left,
                            height: pySize * 1.25 + 'px',
                          }"
                          >{{ NumberList.indexOf(item[pIndex + 2].pinyin) == -1 ? item[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 : '',
                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{
                          fontSize: pySize + 'px',
                          height: pySize * 1.25 + 'px',
                        }"
                        >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                      >
                    </template>
                    <span
                      v-if="pItem.chs != '#'"
                      class="NNPE-chs"
                      :class="[
                        pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                        curQue.property.pinyin_position == 'top' ? 'bottom' : '',
                      ]"
                      :style="{
                        height: hzSize * 1.17 + 'px',
                      }"
                    >
                      <template v-for="(wItem, wIndex) in pItem.leg">
                        <span
                          :key="'ci' + wIndex + pIndex + curSentIndex"
                          :class="[
                            pItem.timeList &&
                            pItem.timeList[wIndex] &&
                            curTime >= pItem.timeList[wIndex].wordBg &&
                            curQue.wordTime &&
                            curQue.wordTime[curSentIndex] &&
                            curTime <= curQue.wordTime[curSentIndex].ed
                              ? bgIndex == 0
                                ? 'active'
                                : 'active-yellow'
                              : '',
                            bgIndex == 1 ? 'font-white' : '',
                            bgIndex == 0 && wordIndex == pItem.wordIndex ? 'wordActive' : '',
                            bgIndex == 1 && wordIndex == pItem.wordIndex ? 'wordActive-blue' : '',
                            newWordList.indexOf(pItem.chs) > -1 && !isPlaying ? 'newActive' : '',
                            pItem.words && !isPlaying ? 'newActive' : '',
                          ]"
                          :style="{
                            fontSize: hzSize + 'px',
                            fontFamily: pItem.config && pItem.config.fontFamily ? pItem.config.fontFamily : '',
                            textDecoration:
                              pItem.config && pItem.config.textDecoration ? pItem.config.textDecoration : '',
                            borderBottom: pItem.config && pItem.config.border === 'dotted' ? '1px dotted' : '',
                            fontWeight: pItem.config && pItem.config.fontWeight ? pItem.config.fontWeight : '',
                            color: pItem.config && pItem.config.color ? pItem.config.color : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width: pItem.chs[wIndex].trim() === '' ? '10px' : '',
                          }"
                          >{{ 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="{
                          width: hzSize + 'px',
                          height: hzSize + 'px',
                        }"
                      />
                    </span>
                    <template v-if="curQue.property.pinyin_position == 'bottom'">
                      <span
                        v-if="config.isShowPY"
                        class="NNPE-pinyin bottom"
                        :class="[
                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                          pItem.className ? pItem.className : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{
                          fontSize: pySize + 'px',
                          height: pySize * 1.25 + 'px',
                        }"
                        >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                      >
                    </template>
                  </template>
                </template>
              </template>
              <template v-else>
                <span
                  :style="{
                    height: pItem.height + 'px',
                    width: pItem.width + 'px',
                  }"
                ></span>
              </template>
            </template>
          </div>
        </div>
        <div style="overflow: hidden; clear: both"></div>

        <div
          v-if="
            enwords && config.isShowEN && (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
          "
          :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
          :style="{ fontSize: enSize + 'px' }"
        >
          {{ convertText(enwords) }}
        </div>
      </div>
      <div class="vc-box-right">
        <div
          :class="[
            'vc-left vc-right-grey',
            isShowRight && bgIndex == 0 ? 'vc-right-black' : '',
            isShowRight && bgIndex == 1 ? 'vc-right-white' : '',
            curSentIndex == sentList.length - 1 ? 'hidden' : '',
          ]"
          @click="nextSentence"
        ></div>
      </div>
    </div>
    <div class="voicefull-top" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
      <div :class="[isBottomShow || isPhone ? 'voicefull-top-show' : 'voicefull-top-hidden']">
        <div class="top-left">
          <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
            <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
              <span :class="['bg-green', bgIndex == 1 ? 'active' : '']" @click="changeBg(1)"></span>
            </div>
            <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
              <span :class="['bg-white', bgIndex == 0 ? 'active' : '']" @click="changeBg(0)"></span>
            </div>
          </div>
          <div :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']">
            <template v-if="hzSize >= 34">
              <span
                :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
                @click="setFontSize('-')"
              ></span>
            </template>
            <template v-else>
              <span
                :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow-disabled' : 'font-jian-white-disabled']"
              ></span>
            </template>
            <span :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"></span>
            <template v-if="hzSize <= 76">
              <span :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']" @click="setFontSize('+')"></span>
            </template>
            <template v-else>
              <span
                :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow-disabled' : 'font-jia-white-disabled']"
              ></span>
            </template>
          </div>
          <div
            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
            :title="convertText('键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音')"
            @click="changeStatus('isKeyboard')"
          >
            <span
              :class="[
                'keyboard-icon',
                !isKeyboard ? 'disabled' : '',
                isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
              ]"
            ></span>
          </div>
        </div>
        <div class="top-middle">
          <template v-if="mp3">
            <AudioLineSentence
              :key="'sent' + curSentIndex"
              ref="audioLineSent"
              :mp3="mp3"
              :get-cur-time="getCurTime"
              :audio-id="'artPraAudioId' + curSentIndex"
              :stop-audio="stopAudio"
              :width="120"
              :hide-slider="true"
              :bg="bg"
              :ed="ed"
              :cur-time="curTime"
              :max-time="maxTime"
              :bg-index="bgIndex"
              :is-repeat="isRepeat"
              :is-auto="isAuto"
              @playChange="playChange"
              @rollSentence="rollSentence"
            />
          </template>
          <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="setStatus">
            <span
              :class="[
                'repeat-icon',
                !isRepeat && !isAuto ? 'disabled' : '',
                !isRepeat && isAuto ? 'auto-icon' : '',
                isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
                !isRepeat && isAuto && bgIndex == 1 ? 'auto-icon-yellow' : '',
              ]"
            ></span>
          </div>
          <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changePinyin">
            <span
              :class="[
                'pinyin-icon',
                !config.isShowPY ? 'disabled' : '',
                config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
              ]"
            ></span>
          </div>
          <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changeEN">
            <span
              :class="[
                'en-icon',
                !enwords ? 'disabled' : '',
                !config.isShowEN ? 'disabled' : '',
                config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
              ]"
            ></span>
          </div>
          <!-- <div
            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
            title="点击收藏后可在“个人中心”-“我的收藏”查看"
            @click="handleColl"
          >
            <span
              :class="[
                'coll-icon',
                !isCollArr[curSentIndex] ? 'disabled' : '',
                isCollArr[curSentIndex] && bgIndex == 1 ? 'coll-icon-yellow' : '',
              ]"
            ></span>
          </div> -->
        </div>
        <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="exitFullScreen">
          <span :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"></span>
        </div>
      </div>
    </div>

    <template v-if="isShow">
      <div ref="wordcard" class="NNPE-wordDetail" :style="{ left: left + 'px' }">
        <Wordcard
          :word="word"
          :change-word-card="changeWordCard"
          :theme-color="themeColor"
          :current-tree-i-d="currentTreeID"
          :mp3-url="wordPlayMp3"
          :bg="wordbgs"
          :ed="wordeds"
          :attrib="attrib"
          :is-mobile="isMobile"
          :is-full="true"
          page-from="fullscreen"
        />
      </div>
    </template>
    <div v-if="isWordPlay || isNewWordPlay" class="word-play-audio">
      <AudioLineSentence
        ref="audioLineWord"
        :mp3="isWordPlay ? NpcNewWordMp3 : isNewWordPlay ? wordPlayMp3 : ''"
        :get-cur-time="getCurWordTime"
        :audio-id="'artPraAudioId' + curSentIndex + wordIndex"
        :stop-audio="stopAudio"
        :width="120"
        :hide-slider="false"
        :bg="wordbg"
        :ed="worded"
        :max-time="wordMaxTime"
        :bg-index="bgIndex"
        :is-repeat="isRepeat"
        :word-play="true"
        @changePlayStatus="changePlayStatus"
      />
    </div>
    <template v-if="isNoteShow">
      <div
        ref="notecard"
        class="NNPE-wordDetail"
        :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 AudioLineSentence from './components/AudioLineSentence.vue';
import Wordcard from './components/Wordcard.vue';
import Notecard from './components/Notecard.vue'; // 注释
import { LearnWebSI } from '@/api/app';

export default {
  name: 'VoiceFullScreen',
  components: {
    AudioLineSentence,
    Wordcard,
    Notecard,
  },
  inject: ['convertText'],
  props: [
    'sentList',
    'sentIndex',
    'mp3',
    'wordTimeList',
    'curQue',
    'noFont',
    'themeColor',
    'NNPENewWordList',
    'NNPEAnnotationList',
    'currentTreeID',
    'config',
    'TaskModel',
    'NpcNewWordMp3',
    'attrib',
    'isMobile',
  ],
  data() {
    return {
      pySize: 32,
      hzSize: 48,
      enSize: 24,
      bgIndex: 1,
      maxTime: 0,
      item: null,
      bg: 0,
      ed: 0,
      isRepeat: false,
      NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
      enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
      curTime: 0,
      wavblob: null,
      stopAudio: false,
      isRecord: false,
      isShowCompare: false,
      isShowRight: true,
      isShowLeft: true,
      curSentIndex: 0,
      oldHz: '',
      hz: '',
      clientY: 0,
      top: 0,
      left: 0,
      newWordList: [],
      pinyin: '',
      wordIndex: -1,
      isShow: false,
      wordbg: 0,
      worded: 0,
      wordbgs: 0,
      wordeds: 0,
      wordMaxTime: 0,
      isWordPlay: false,
      isNewWordPlay: false,
      curWordTime: 0,
      isPlaying: false,
      isAuto: false,
      key: 'isRepeat',
      isKeyboard: true,
      isTopShow: false,
      isBottomShow: false,
      isRecording: false,
      recordPlaying: false,
      isCollArr: [],
      enwords: '',
      screenHeight: 0,
      wordPlayMp3: '',
      curNoteCon: null,
      isNoteShow: false,
      oldNoteNum: '',
      windowWidth: window.innerWidth,
      isLandscape: window.innerWidth < window.innerHeight, // 手机是否为竖屏
      isPhone: false,
    };
  },
  computed: {
    // isPlaying: function () {
    //   let playing = false;
    //   if (this.$refs.audioLineSent) {
    //     playing = this.$refs.audioLineSent.audio.isPlaying;
    //   }
    //   console.log(playing);
    //   return playing;
    // },
  },
  watch: {
    isRecording: {
      handler(newVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true,
    },
    recordPlaying: {
      handler(newVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true,
    },
    sentIndex: {
      handler(newVal) {
        this.curSentIndex = newVal;
        this.getSentence();
      },
      deep: true,
    },
    hz: {
      handler(val) {
        if (val) {
          this.handleNewWords(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isShow: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.cardHeight = this.$refs.wordcard.offsetHeight;
            if (this.screenHeight - this.clientY > this.cardHeight) {
              this.top = this.clientY + 20;
            } else {
              this.top = this.clientY - this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isNoteShow: {
      handler(val) {
        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,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener('resize', this.getScreenHeight);
    this.getScreenHeight();
    document.addEventListener('keyup', (e) => {
      if (this.isKeyboard) {
        if (e.keyCode === 32) {
          // 空格
          this.$nextTick(() => {
            if (this.$refs.audioLineSent) {
              this.$refs.audioLineSent.PlayAudio();
            }
          });
        } else if (e.keyCode === 38) {
          this.prevSentence();
        } else if (e.keyCode === 40) {
          this.nextSentence();
        } else if (e.keyCode === 13) {
        } else if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
          this.exitFullScreen();
        }
      }
    });
    if (this.NNPENewWordList) {
      this.handleNewword();
    }
    this.curSentIndex = this.sentIndex;
    this.getSentence();
    document.addEventListener('fullscreenchange', () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        this.changeFullScreen();
      }
    });
    document.addEventListener('mozfullscreenchange', () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        this.changeFullScreen();
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        this.changeFullScreen();
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        this.changeFullScreen();
      }
    });
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener('resize', this.getScreenHeight);
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    setTopShow(bool) {
      this.isTopShow = bool;
    },
    setBottomShow(bool) {
      if (!this.recordPlaying && !this.isRecording) {
        this.isBottomShow = bool;
      }
    },
    getPlayStatus(bool) {
      this.recordPlaying = bool;
    },
    setFontSize(type) {
      if (type === '-') {
        if (this.hzSize >= 34) {
          this.hzSize -= 4;
        }
      }
      if (type === '+') {
        if (this.hzSize <= 76) {
          this.hzSize += 4;
        }
      }
      this.pySize = parseInt(this.hzSize / 1.5);
      this.enSize = parseInt(this.hzSize / 2);
    },
    playChange(bool) {
      this.isPlaying = bool;
    },
    handleColl() {
      if (this.isCollArr[this.curSentIndex]) {
        this.cancleColl();
      } else {
        this.addColl();
      }
    },
    // 添加收藏
    addColl() {
      let Bookdetail = sessionStorage.getItem('Bookdetail');
      // if (Bookdetail) {
      Bookdetail = JSON.parse(Bookdetail);

      let MethodName = 'order-collection_manager-AddMyCollection';
      let text = '';
      this.item.forEach((item) => {
        if (item.chs !== '#') {
          text += item.chs;
        }
      });
      let sentence_json = {
        item: JSON.stringify(this.item),
        bg: this.bg,
        ed: this.ed,
        mp3: this.mp3,
        pyPosition: this.curQue.property.pinyin_position,
      };
      let data = {
        goods_id: this.currentTreeID,
        goods_type: 502,
        goods_name: Bookdetail.name,
        goods_person_name_desc: Bookdetail.author ? Bookdetail.author : '',
        goods_picture_id: Bookdetail.picture_id ? Bookdetail.picture_id : '',
        goods_price: Bookdetail.price,
        sentence: {
          sentence_text: text,
          sentence_json: JSON.stringify(sentence_json),
        },
      };
      LearnWebSI(MethodName, data).then((res) => {
        this.$set(this.isCollArr, this.curSentIndex, true);
        this.$message.success('收藏成功！');
      });
      // } else {
      //   this.$message.warning('权限不足！');
      // }
    },
    // 取消收藏
    cancleColl() {
      let text = '';
      this.item.forEach((item) => {
        if (item.chs !== '#') {
          text += item.chs;
        }
      });
      let MethodName = 'order-collection_manager-CancelMyGoodsCollection_WS';
      let data = {
        goods_type: 502,
        goods_list: [
          {
            goods_id: this.currentTreeID, // 课件的id
            sentence_text: text,
          },
        ],
      };
      LearnWebSI(MethodName, data).then((res) => {
        this.$set(this.isCollArr, this.curSentIndex, false);
        this.$message.success('取消成功！');
      });
    },
    // 检查收藏状态
    checkCollStatus() {
      let text = '';
      this.item.forEach((item) => {
        if (item.chs !== '#') {
          text += item.chs;
        }
      });
      let MethodName = 'order-collection_manager-CheckMyGoodsCollectionStatus';
      let data = {
        goods_type: 502,
        goods_id: this.currentTreeID, // 课件的id
        sentence_text: text,
      };
      LearnWebSI(MethodName, data).then((res) => {
        let collFlag = res.is_collection === 'true';
        this.$set(this.isCollArr, this.curSentIndex, collFlag);
      });
    },
    showPrevNext(bool, key) {
      this[key] = bool;
    },
    prevSentence() {
      if (this.curSentIndex === 0) {
        // this.$message.warning("已经是第一个句子了");
        return;
      }
      this.curSentIndex -= 1;
      this.getSentence();
      if (this.isAuto) {
        this.curTime = this.bg;
        this.$refs.audioLineSent.onTimeupdateTime(this.bg / 1000);
      }
    },
    nextSentence() {
      if (this.curSentIndex === this.sentList.length - 1) {
        // this.$message.warning("已经是最后一个句子了");
        return;
      }
      this.curSentIndex += 1;
      this.getSentence();
    },
    rollSentence() {
      if (this.curSentIndex === this.sentList.length - 1) {
        this.curSentIndex = 0;
      } else {
        this.curSentIndex += 1;
      }
      this.getSentence();
    },
    changeStatus(key) {
      if (key === 'config.isShowEN') {
        if (this.enwords) {
          this[key] = !this[key];
        }
      } else {
        this[key] = !this[key];
      }
    },
    changePinyin() {
      this.$emit('changePinyin');
    },
    changeEN() {
      this.$emit('changeEN');
    },
    setStatus() {
      if (this.key === 'isRepeat') {
        if (this.isRepeat) {
          this.isRepeat = false;
          this.isAuto = true;
          this.key = 'isAuto';
        } else {
          this.isRepeat = true;
          this.key = 'isRepeat';
        }
      } else if (this.key === 'isAuto') {
        if (this.isAuto) {
          this.isRepeat = false;
          this.isAuto = false;
          this.key = 'isRepeat';
        }
      }
    },
    getRerordStatus(bool) {
      this.isShowCompare = bool;
    },
    getMicrophoneStatus(bool) {
      this.isRecording = bool;
    },
    getWavblob(wavblob) {
      this.wavblob = wavblob;
    },
    sentPause(isRecord) {
      this.isRecord = isRecord;
    },
    getCurTime(curTime) {
      if (this.isRepeat) {
        let time = curTime * 1000;
        if (time > this.ed || time < this.bg) {
          this.curTime = this.bg;
          this.$refs.audioLineSent.onTimeupdateTime(this.bg / 1000);
        } else {
          this.curTime = curTime * 1000;
        }
      } else if (this.isAuto) {
        let time = curTime * 1000;

        if (time > this.ed) {
          this.rollSentence();
          this.curTime = this.bg;
          this.$refs.audioLineSent.onTimeupdateTime(this.bg / 1000);
        } else {
          this.curTime = curTime * 1000;
        }
      } else {
        this.curTime = curTime * 1000;
      }
    },
    getCurCompareTime(curTime) {
      this.curTime = curTime * 1000;
    },
    getCurWordTime(curTime) {
      this.curWordTime = curTime * 1000;
    },
    changeBg(bgIndex) {
      this.bgIndex = bgIndex;
    },
    getSentence() {
      this.isShowCompare =
        this.curQue.Bookanswer.practiceModel[this.curSentIndex] &&
        this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordList &&
        this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordList.length > 0;
      this.pauseAudio();
      this.isPlaying = false;
      let item = JSON.parse(JSON.stringify(this.sentList[this.curSentIndex]));
      if (item.sentArr) {
        this.item = item.sentArr;
        this.enwords = item.enwords;
      } else {
        this.item = item;
      }
      this.sentList.forEach((item) => {
        this.isCollArr.push(false);
      });
      this.bg =
        this.curQue.wordTime && this.curQue.wordTime[this.curSentIndex]
          ? this.curQue.wordTime[this.curSentIndex].bg
          : 0;
      this.ed =
        this.curQue.wordTime && this.curQue.wordTime[this.curSentIndex]
          ? this.curQue.wordTime[this.curSentIndex].ed
          : 0;
      let maxTime = (this.ed - this.bg) / 1000;
      if (maxTime < 1) {
        this.maxTime = 1;
      } else {
        this.maxTime = maxTime;
      }
      // this.checkCollStatus();
    },
    pauseAudio() {
      let audio = document.getElementsByTagName('audio');
      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1 && audio.forEach) {
        audio.forEach((item) => {
          item.pause();
        });
      }
    },
    exitFullScreen() {
      this.pauseAudio();
      this.$emit('exitFullscreen');
    },
    changeFullScreen() {
      this.pauseAudio();
      this.$emit('changeIsFull');
    },
    handleWav(list, tmIndex) {
      let _tmIndex = tmIndex || 0;
      this.$emit('handleWav', list, _tmIndex);
    },
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    // 播放音频
    // playWord(item) {
    //
    //   if (this.newWordList.indexOf(item.chs) > -1 || item.words) {
    //     this.pauseAudio();
    //     this.isWordPlay = false;
    //     this.wordIndex = item.wordIndex;
    //     setTimeout(() => {
    //       let leg = item.timeList.length;
    //       this.wordbg = item.timeList[0].wordBg;
    //       this.worded = item.timeList[leg - 1].wordEd;
    //       let wordMaxTime = (this.worded - this.wordbg) / 1000;
    //       if (wordMaxTime < 1) {
    //         this.wordMaxTime = 1;
    //       } else {
    //         this.wordMaxTime = wordMaxTime;
    //       }
    //       this.isWordPlay = true;
    //     }, 50);
    //   }
    // },
    playWord(item) {
      if (this.newWordList.indexOf(item.chs) > -1 || item.words) {
        this.pauseAudio();
        this.isNewWordPlay = false;
        let new_word = item.words ? item.words : item.chs;
        this.NNPENewWordList.forEach((itemn) => {
          // items.forEach((itemn) => {
          if (itemn.new_word === new_word) {
            this.wordbg = itemn.audio_begin_time || itemn.bg;
            this.worded = itemn.audio_end_time || itemn.ed;
            this.wordPlayMp3 = itemn.newWordMp3 || itemn.audio_file_url;
          }
          // });
        });
        setTimeout(() => {
          this.isNewWordPlay = true;
        }, 50);
      }
    },
    changePlayStatus() {
      this.isWordPlay = false;
      this.isNewWordPlay = false;
      this.wordIndex = -1;
    },
    showWordDetail(e, item) {
      let noteIndex = '';
      if (this.TaskModel === 'ANSWER') {
        return;
      }
      if (this.chsFhList.indexOf(item.chs) > -1 || /^[a-zA-Z0-9]/.test(item.chs)) {
        return;
      }
      if (this.NumberList.indexOf(item.chs) > -1) {
        for (let i = 0; i < this.NumberList.length; i++) {
          if (this.NumberList[i] === item.chs) {
            noteIndex = `${String(i)}`;
            break;
          }
        }

        this.showNoteDetail(e, noteIndex);
      } else if (item.matchNotes) {
        // 关联了注释
        if (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0) {
          this.NNPEAnnotationList.forEach((items, indexs) => {
            let textContent = items.con.replace(/<[^>]*>?/gm, '');
            if (textContent === item.matchNotes.trim()) {
              noteIndex = `${String(indexs)}`;
              this.showNoteDetail(e, noteIndex);
            }
          });
        }
      } else if (this.newWordList.indexOf(item.chs) > -1) {
        if (this.oldHz !== item.chs) {
          this.isShow = false;

          setTimeout(() => {
            this.hz = item.words ? item.words : item.chs;
            this.pinyin = item.pinyin;
            this.wordIndex = item.wordIndex;
          }, 50);
        }
        this.clientY = e.clientY;
        let new_word = item.words ? item.words : item.chs;
        this.wordPlayMp3 = '';
        this.NNPENewWordList.forEach((itemn) => {
          // items.forEach((itemn) => {
          if (itemn.new_word === new_word) {
            this.wordbgs = itemn.audio_begin_time || itemn.bg;
            this.wordeds = itemn.audio_end_time || itemn.ed;
            this.wordPlayMp3 = itemn.newWordMp3 || itemn.audio_file_url;
          }
          // });
        });
        let left = e.clientX;
        let width = 0;
        if (item.chs.length === 1 || item.chs.length === 2) {
          width = 304;
        } else if (item.chs.length === 3 || item.chs.length === 4) {
          width = 432;
        } else if (item.chs.length > 3) {
          width = 560;
        }
        // if (left - this.bodyLeft > this.contentWidth / 2) {
        //   this.left = left - width + 10;
        // } else {
        this.left = left - width / 2;
        // }
      } else if (item.matchWords && this.newWordList.indexOf(item.matchWords) > -1) {
        // 关联了生词
        if (this.oldHz !== item.matchWords) {
          this.isShow = false;

          setTimeout(() => {
            this.hz = item.matchWords;
            this.pinyin = item.pinyin;
            this.wordIndex = item.wordIndex;
          }, 50);
        }
        this.clientY = e.clientY;
        let new_word = item.matchWords;
        this.wordPlayMp3 = '';
        this.NNPENewWordList.forEach((itemn) => {
          // items.forEach((itemn) => {
          if (itemn.new_word === new_word) {
            this.wordbgs = itemn.audio_begin_time || itemn.bg;
            this.wordeds = itemn.audio_end_time || itemn.ed;
            this.wordPlayMp3 = itemn.newWordMp3 || itemn.audio_file_url;
          }
          // });
        });
        let left = e.clientX;
        let width = 0;
        if (item.matchWords.length === 1 || item.matchWords.length === 2) {
          width = 304;
        } else if (item.matchWords.length === 3 || item.matchWords.length === 4) {
          width = 432;
        } else if (item.matchWords.length > 3) {
          width = 560;
        }

        this.left = left - width / 2;
      }
    },
    showNoteDetail(e, noteNum) {
      if (this.oldNoteNum !== noteNum) {
        this.isNoteShow = false;
        setTimeout(() => {
          this.noteNum = noteNum;
          this.handleNote(noteNum);
        }, 50);
      }
      this.clientY = e.clientY;
      let left = e.clientX;
      let width = 642;
      if (left - this.bodyLeft > this.contentWidth / 2) {
        this.left = left - width + 10;
      } else if (left - 200 > 500) {
        this.left = 500;
      } else {
        this.left = left - 200;
      }
    },
    changeWordCard(isShow) {
      this.isShow = isShow;
      this.oldHz = '';
      this.hz = '';
      this.wordIndex = -1;
    },
    // 处理分词数据
    handleNewWords(val) {
      this.isShow = true;
      this.word = null;
      if (this.newWordList.indexOf(val) > -1) {
        for (let i = 0; i < this.NNPENewWordList.length; i++) {
          let pItem = this.NNPENewWordList[i];
          if (pItem.new_word.trim() === val.trim()) {
            let wordlist = val.split('');
            this.word = { list: wordlist, detail: pItem };
            break;
          }
        }
      } else {
        let wordlist = val.split('');
        let option = {
          definition_list: [],
          mp3_list: [],
          new_word: val,
          pinyin: this.pinyin,
        };
        this.word = { list: wordlist, detail: option };
      }
      this.oldHz = val;
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((wItem) => {
        // item.forEach((wItem) => {
        NewWordList.push(wItem.new_word);
        // });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
    getScreenHeight() {
      this.screenHeight = window.innerHeight;
    },
    // 处理注释数据
    handleNote(val) {
      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) {
      this.isNoteShow = isShow;
      this.oldNoteNum = '';
      this.noteNum = '';
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.voicefull {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;

  &-scape {
    display: flex;
    flex-direction: column;
    width: 100vh;
    height: 100vw;
    margin-left: 100vw;
    transform: rotate(90deg);
    transform-origin: 0% 0%;

    .vc-main {
      max-height: calc(100vw - 132px) !important;
    }

    .op-btn {
      margin-left: 16px !important;
    }
  }

  .NNPE-wordDetail {
    position: fixed;
    top: 50%;
    z-index: 9999;
    margin-top: -196px;

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

  &.bg1 {
    background: #fff;
  }

  &.bg2 {
    background: linear-gradient(180deg, #274533 0%, #385f45 100%);

    .NNPE-words > span.NNPE-chs .newActive,
    .NNPE-words-box > span.NNPE-chs .newActive {
      color: #ffc600 !important;
    }
  }

  &-top {
    box-sizing: border-box;
    width: 100%;
    height: 136px;
    padding: 0 40px;

    .voicefull-top-hidden {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 136px;
      visibility: hidden;
    }

    .voicefull-top-show {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 136px;
      visibility: visible;
    }

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

    .select-bg {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      justify-content: center;
      width: 96px;
      height: 56px;
      margin-right: 32px;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 40px;

      &.select-bg-blue {
        background: rgba(255, 255, 255, 10%);
        border: 1px solid rgba(0, 0, 0, 10%);
      }

      > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 100%;

        &.bg-white-box {
          margin-right: 4px;
          background: 0 0;

          &.active {
            background: #de4444;
          }
        }

        &.bg-green-box {
          background: #fff;

          &.active {
            background: #ffc600;
          }
        }

        > span {
          box-sizing: border-box;
          width: 24px;
          height: 24px;
          cursor: pointer;
          border-radius: 100%;

          &.bg-white {
            background: #fff;
          }

          &.bg-green {
            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
          }
        }
      }
    }

    .set-fontSize {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 56px;
      padding: 0 20px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 40px;

      &-green {
        background: rgba(255, 255, 255, 10%);
        border: 1px solid rgba(0, 0, 0, 10%);
      }

      > span {
        width: 24px;
        height: 24px;
        margin: 0 4px;

        &.font-jian {
          &-black {
            cursor: pointer;
            background: url('@/assets/jian-black.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-yellow {
            cursor: pointer;
            background: url('@/assets/jian-white.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-white-disabled {
            cursor: pointer;
            background: url('@/assets/jian-white-disabled.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-yellow-disabled {
            cursor: pointer;
            background: url('@/assets/jian-yellow-disabled.png') no-repeat left top;
            background-size: 100% 100%;
          }
        }

        &.font-img {
          &-black {
            background: url('@/assets/fontSize-black.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-yellow {
            background: url('@/assets/fontSize-white.png') no-repeat left top;
            background-size: 100% 100%;
          }
        }

        &.font-jia {
          &-black {
            cursor: pointer;
            background: url('@/assets/jia-black.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-yellow {
            cursor: pointer;
            background: url('@/assets/jia-white.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-white-disabled {
            cursor: pointer;
            background: url('@/assets/jia-white-disabled.png') no-repeat left top;
            background-size: 100% 100%;
          }

          &-yellow-disabled {
            cursor: pointer;
            background: url('@/assets/jia-yellow-disabled.png') no-repeat left top;
            background-size: 100% 100%;
          }
        }
      }
    }

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

      .audio-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 40px;

        &-green {
          background: rgba(255, 255, 255, 10%);
          border: 1px solid rgba(0, 0, 0, 10%);
        }
      }
    }
  }

  .op-btn {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-left: 32px;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 10%);
    border-radius: 100%;

    &-green {
      background: rgba(255, 255, 255, 10%);
      border: 1px solid rgba(0, 0, 0, 10%);
    }

    &.close-btn {
      background: #274533;
      border: 1px solid rgba(0, 0, 0, 10%);
    }

    > span {
      width: 24px;
      height: 24px;

      &.close-icon {
        background: url('@/assets/icon/cross-24-normal-black.png') no-repeat left top;
        background-size: 100% 100%;

        &-white {
          background: url('@/assets/icon/cross-24-normal-white.png') no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
  }

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

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

    &-yellow {
      background: url('@/assets/icon/Repeat-24-normal-yellow.png') no-repeat left top;
      background-size: 100% 100%;
    }

    &.auto-icon {
      background: url('@/assets/icon/Auto-24-next-red.png') no-repeat left top;
      background-size: 100% 100%;

      &-yellow {
        background: url('@/assets/icon/Auto-24-next-yellow.png') no-repeat left top;
        background-size: 100% 100%;
      }
    }
  }

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

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

    &-yellow {
      background: url('@/assets/icon/pinyin-24-normal-yellow.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }

  .en-icon {
    background: url('@/assets/icon/EN-24-normal-Red.png') no-repeat left top;
    background-size: 100% 100%;

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

    &-yellow {
      background: url('@/assets/icon/EN-24-normal-yellow.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }

  .coll-icon {
    background: url('@/assets/icon/bookmarkfill-24-normal-red.png') no-repeat left top;
    background-size: 100% 100%;

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

    &-yellow {
      background: url('@/assets/icon/bookmarkfill-24-normal-yellow.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }

  .keyboard-icon {
    background: url('@/assets/icon/enter-24-keyboard-red.png') no-repeat left top;
    background-size: 100% 100%;

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

    &-yellow {
      background: url('@/assets/icon/enter-24-keyboard-yellow.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }

  &-content {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    align-items: center;
    width: 100%;

    .vc-box {
      padding: 0 8px 0 36px;

      &-right {
        padding: 0 36px 0 8px;
      }
    }

    .vc-left {
      width: 64px;
      height: 64px;
      cursor: pointer;

      &-grey {
        background: url('@/assets/left-grey.png') no-repeat left top;
        background-size: 100% 100%;
      }

      &-black {
        background: url('@/assets/left-black.png') no-repeat left top;
        background-size: 100% 100%;
      }

      &-white {
        background: url('@/assets/left-white.png') no-repeat left top;
        background-size: 100% 100%;
      }

      &.hidden {
        visibility: hidden;
      }
    }

    .vc-right {
      width: 64px;
      height: 64px;
      cursor: pointer;

      &-grey {
        background: url('@/assets/right-grey.png') no-repeat left top;
        background-size: 100% 100%;
      }

      &-black {
        background: url('@/assets/right-black.png') no-repeat left top;
        background-size: 100% 100%;
      }

      &-white {
        background: url('@/assets/right-white.png') no-repeat left top;
        background-size: 100% 100%;
      }
    }

    .vc-main {
      width: fit-content;
      padding: 0 67px;
      margin: 0 auto;

      .enwords {
        padding: 0 3px;
        margin-top: 24px;
        font-family: 'Helvetica';
        font-size: 24px;
        line-height: 32px;
        color: rgba(0, 0, 0, 45%);
        word-break: break-word;

        &-green {
          color: rgba(255, 255, 255, 65%);
        }
      }
    }

    .NNPE-words {
      float: left;
      user-select: none;

      &-box {
        float: left;

        > span {
          display: block;

          &.NNPE-pinyin {
            box-sizing: border-box;
            font-family: 'League';
            font-size: 32px;
            font-weight: normal;
            line-height: 1.25;
            color: rgba(0, 0, 0, 85%);

            &.bottom {
              padding-bottom: 16px;
            }

            &.noFont {
              font-family: initial;
            }

            &.textLeft {
              text-align: left;
            }

            &.font-white {
              color: #fff !important;
            }

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

          &.NNPE-chs {
            display: flex;
            flex-flow: wrap; // 兼容不是汉字的内容
            font-family: '楷体';
            font-size: 48px;
            line-height: 1.17;
            color: rgba(0, 0, 0, 85%);

            &.bottom {
              padding-bottom: 16px;
            }

            .font-white {
              color: #fff !important;
            }

            .active {
              color: #de4444 !important;

              &-yellow {
                color: #ffc600 !important;
              }
            }

            .wordActive {
              color: #de4444 !important;
            }

            .wordActive-blue {
              color: #ffc600 !important;
            }

            .newActive {
              color: #de4444 !important;
            }
          }

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

      &.textLeft {
        text-align: left;
      }

      &.textCenter {
        text-align: center;
      }

      &.textRight {
        text-align: right;
      }

      > span {
        display: block;

        &.NNPE-pinyin {
          box-sizing: border-box;
          font-family: 'League';
          font-size: 32px;
          font-weight: normal;
          line-height: 1.25;
          color: rgba(0, 0, 0, 85%);

          &.bottom {
            padding-bottom: 16px;
          }

          &.font-white {
            color: #fff !important;
          }

          &.noFont {
            font-family: initial;
          }

          &.textLeft {
            text-align: left;
          }

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

        &.NNPE-chs {
          display: flex;
          flex-flow: wrap; // 兼容不是汉字的内容
          font-family: '楷体';
          font-size: 48px;
          line-height: 1.17;
          color: rgba(0, 0, 0, 85%);

          &.bottom {
            padding-bottom: 16px;
          }

          .font-white {
            color: #fff !important;
          }

          .active {
            color: #de4444 !important;

            &-yellow {
              color: #ffc600 !important;
            }
          }

          .wordActive {
            color: #de4444 !important;
          }

          .wordActive-blue {
            color: #ffc600 !important;
          }

          .newActive {
            color: #de4444 !important;
          }
        }

        &.padding {
          padding-right: 3px;
          padding-left: 3px;
        }
      }
    }
  }

  &-bottom {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 136px;
    padding-right: 40px;

    .voicefull-bottom-show {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 136px;
      visibility: visible;
    }

    .voicefull-bottom-hidden {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 136px;
      visibility: hidden;
    }

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

      &-margin {
        margin-left: 40px;
      }

      .compare-box {
        box-sizing: border-box;
        height: 56px;
        padding: 16px;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-left: 0 solid rgba(0, 0, 0, 10%);
        border-radius: 0 40px 40px 0;

        &-white {
          background: rgba(255, 255, 255, 10%);
          border: 1px solid rgba(0, 0, 0, 10%);
          border-left: 0;
        }

        &-answer {
          border-radius: 40px;
        }
      }
    }

    .page-count {
      box-sizing: border-box;
      min-width: 60px;
      padding: 8px;
      font-family: 'robot';
      font-size: 16px;
      line-height: 24px;
      color: #000;
      text-align: center;
      background: #fff;
      border-radius: 8px;

      &-green {
        color: #fff;
        background: rgba(255, 255, 255, 20%);
      }
    }
  }
}

.word-play-audio {
  position: absolute;
  left: -1000px;
}

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

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

  //   width: 260px;
  //   height: 200px;
  //   background: #cc0;
}
</style>
<style lang="scss">
.NPC-Big-Book-preview-green {
  .bg1 {
    .repeat-icon {
      background: url('@/assets/icon/Repeat-24-normal-Green.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .pinyin-icon {
      background: url('@/assets/icon/pinyin-24-normal-green.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .en-icon {
      background: url('@/assets/icon/EN-24-normal-Green.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .coll-icon {
      background: url('@/assets/icon/bookmarkfill-24-normal-green.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }
}

.NPC-Big-Book-preview-brown {
  .bg1 {
    .repeat-icon {
      background: url('@/assets/icon/Repeat-24-normal-Brown.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .pinyin-icon {
      background: url('@/assets/icon/pinyin-24-normal-brown.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .en-icon {
      background: url('@/assets/icon/EN-24-normal-Brown.png') no-repeat left top;
      background-size: 100% 100%;
    }

    .coll-icon {
      background: url('@/assets/icon/bookmarkfill-24-normal-brown.png') no-repeat left top;
      background-size: 100% 100%;
    }
  }
}
</style>