GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Voicefullscreen.vue

<!--  -->
<template>
  <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
    <div
      class="voicefull-top voicefull-bottom"
      @mouseover="setTopShow(true)"
      @mouseleave="setTopShow(false)"
    >
      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
        <div></div>
        <!-- <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' : '']"
            @click="changeStatus('isKeyboard')"
            title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
          >
            <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"
              :mp3="mp3"
              :getCurTime="getCurTime"
              ref="audioLineSent"
              :audioId="'artPraAudioId' + curSentIndex"
              :stopAudio="stopAudio"
              :width="120"
              :hideSlider="true"
              :bg="bg"
              :ed="ed"
              :curTime="curTime"
              :maxTime="maxTime"
              :bgIndex="bgIndex"
              :isRepeat="isRepeat"
              :isAuto="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' : '']"
            @click="handleColl"
            title="点击收藏后可在“个人中心”-“我的收藏”查看"
          >
            <span
              :class="[
                'coll-icon',
                !isCollArr[curSentIndex] ? 'disabled' : '',
                isCollArr[curSentIndex] && bgIndex == 1
                  ? 'coll-icon-yellow'
                  : ''
              ]"
            ></span>
          </div>
        </div> -->
        <div
          :class="[
            'page-count',
            bgIndex == 0 ? 'page-count-white' : 'page-count-green'
          ]"
        >
          {{ curSentIndex + 1 }}/{{ sentList.length }}
        </div>
      </div>
    </div>
    <div class="voicefull-content" v-if="item">
      <div
        class="vc-box"
        @mousemove="showPrevNext(true, 'isShowLeft')"
        @mouseleave="showPrevNext(true, 'isShowLeft')"
      >
        <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="clear: both; overflow: hidden"></div>
          <div
            v-if="
              enwords &&
                config.isShowEN &&
                curQue.enPosition &&
                curQue.enPosition == 'top'
            "
            :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
            :style="{ fontSize: enSize + 'px' }"
          >
            {{ enwords }}
          </div>
          <div
            class="NNPE-words"
            v-for="(pItem, pIndex) in item"
            :key="'wordsList' + pIndex"
            :class="[
              pItem.chs != '“' && pItem.wordIndex == 0
                ? 'textLeft'
                : 'textCenter',
              pItem.chs == '“' ? 'textRight' : ''
            ]"
            @dblclick="showWordDetail($event, pItem)"
            @click="playWord(pItem)"
          >
            <template v-if="NumberList.indexOf(pItem.chs) == -1">
              <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.pyPosition == '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'
                          }"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                      <span
                        class="NNPE-chs"
                        :class="[
                          pItem.padding && config.isShowPY ? 'padding' : '',
                          curQue.pyPosition == '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
                                  : '',
                              height: hzSize * 1.17 + 'px',
                              display: 'inline-block',
                              width:
                                pItem.chs[wIndex].trim() === '' ? '10px' : ''
                            }"
                            >{{ pItem.chs[wIndex] }}</span
                          >
                        </template>
                      </span>
                      <template v-if="curQue.pyPosition == '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'
                          }"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </span>
                    <span class="NNPE-words-box">
                      <template v-if="curQue.pyPosition == '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'
                          }"
                          >{{ item[pIndex + 1].pinyin }}</span
                        >
                      </template>
                      <span
                        :class="[
                          'NNPE-chs',
                          curQue.pyPosition == '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
                                : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width:
                              item[pIndex + 1].chs.trim() === '' ? '10px' : ''
                          }"
                          >{{ item[pIndex + 1].chs }}</span
                        >
                      </span>
                      <template v-if="curQue.pyPosition == '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'
                          }"
                          >{{ item[pIndex + 1].pinyin }}</span
                        >
                      </template>
                    </span>
                    <span
                      class="NNPE-words-box"
                      v-if="
                        item[pIndex + 2] &&
                          item[pIndex + 2].chs &&
                          chsFhList.indexOf(item[pIndex + 2].chs) > -1
                      "
                    >
                      <template v-if="curQue.pyPosition == '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'
                          }"
                          >{{ item[pIndex + 2].pinyin }}</span
                        >
                      </template>
                      <span
                        :class="[
                          'NNPE-chs',
                          curQue.pyPosition == '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
                                : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width:
                              item[pIndex + 2].chs.trim() === '' ? '10px' : ''
                          }"
                          >{{ item[pIndex + 2].chs }}</span
                        >
                      </span>
                      <template v-if="curQue.pyPosition == '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'
                          }"
                          >{{ item[pIndex + 2].pinyin }}</span
                        >
                      </template>
                    </span>
                  </template>
                  <template v-else>
                    <template v-if="curQue.pyPosition == 'top'">
                      <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
                        <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'
                          }"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </template>
                    <span
                      v-if="pItem.chs != '#'"
                      class="NNPE-chs"
                      :class="[
                        pItem.chs != '“' && pItem.padding && config.isShowPY
                          ? 'padding'
                          : '',
                        curQue.pyPosition == 'top' ? 'bottom' : ''
                      ]"
                      :style="{
                        height: hzSize * 1.17 + 'px'
                      }"
                    >
                      <template>
                        <span
                          v-for="(wItem, wIndex) in pItem.leg"
                          :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
                                : '',
                            height: hzSize * 1.17 + 'px',
                            display: 'inline-block',
                            width: pItem.chs[wIndex].trim() === '' ? '10px' : ''
                          }"
                          >{{ pItem.chs[wIndex] }}</span
                        >
                      </template>
                    </span>
                    <template v-if="curQue.pyPosition == 'bottom'">
                      <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
                        <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'
                          }"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </template>
                  </template>
                </template>
              </template>
              <template v-else>
                <span
                  :style="{
                    height: pItem.height + 'px',
                    width: pItem.width + 'px'
                  }"
                ></span>
              </template>
            </template>
          </div>
        </div>
        <div style="clear: both; overflow: hidden"></div>

        <div
          v-if="
            enwords &&
              config.isShowEN &&
              (!curQue.enPosition ||
                (curQue.enPosition && curQue.enPosition == 'bottom'))
          "
          :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
          :style="{ fontSize: enSize + 'px' }"
        >
          {{ enwords }}
        </div>
      </div>
      <div
        class="vc-box-right"
        @mousemove="showPrevNext(true, 'isShowRight')"
        @mouseleave="showPrevNext(true, 'isShowRight')"
      >
        <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 voicefull-bottom"
      @mouseover="setTopShow(true)"
      @mouseleave="setTopShow(false)"
    >
      <div :class="[isTopShow ? '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' : '']"
            @click="changeStatus('isKeyboard')"
            title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
          >
            <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"
              :mp3="mp3"
              :getCurTime="getCurTime"
              ref="audioLineSent"
              :audioId="'artPraAudioId' + curSentIndex"
              :stopAudio="stopAudio"
              :width="120"
              :hideSlider="true"
              :bg="bg"
              :ed="ed"
              :curTime="curTime"
              :maxTime="maxTime"
              :bgIndex="bgIndex"
              :isRepeat="isRepeat"
              :isAuto="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' : '']"
            @click="handleColl"
            title="点击收藏后可在“个人中心”-“我的收藏”查看"
          >
            <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>
    <!-- <div
      class="voicefull-bottom"
      @mouseover="setBottomShow(true)"
      @mouseleave="setBottomShow(false)"
    >
      <div
        :class="[
          isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden'
        ]"
      >
        <div
          :class="[
            'bottom-left',
            TaskModel == 'ANSWER' ? 'bottom-left-margin' : ''
          ]"
        >
          <Soundrecorddiff
            ref="Soundrecorddiff"
            @handleWav="handleWav"
            @getWavblob="getWavblob"
            @handleParentPlay="handleParentPlay"
            @sentPause="sentPause"
            @getRerordStatus="getRerordStatus"
            @getMicrophoneStatus="getMicrophoneStatus"
            @getPlayStatus="getPlayStatus"
            :bgIndex="bgIndex"
            :TaskModel="TaskModel"
            :answerRecordList="
              curQue.Bookanswer.practiceModel[curSentIndex] &&
                curQue.Bookanswer.practiceModel[curSentIndex].recordList
            "
            :tmIndex="curSentIndex"
            :key="'Soundrecorddiff' + curSentIndex"
          />
          <div
            :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
            v-if="isShowCompare"
          >
            <Audio-compare
              :bgIndex="bgIndex"
              type="full"
              :themeColor="themeColor"
              :index="curSentIndex"
              :sentIndex="curSentIndex"
              :url="curQue.mp3_list[0].id"
              :bg="bg"
              :ed="ed"
              :wavblob="wavblob"
              :getCurTime="getCurCompareTime"
              :sentPause="sentPause"
              :isRecord="isRecord"
              :handleChangeStopAudio="handleChangeStopAudio"
              :getPlayStatus="getPlayStatus"
              :key="'mp3Compare' + curSentIndex"
            />
          </div>
        </div>
        <div
          :class="[
            'page-count',
            bgIndex == 0 ? 'page-count-white' : 'page-count-green'
          ]"
        >
          {{ curSentIndex + 1 }}/{{ sentList.length }}
        </div>
      </div>
    </div> -->

    <template v-if="isShow">
      <div
        ref="wordcard"
        class="NNPE-wordDetail"
        :style="{ left: left + 'px' }"
      >
        <Wordcard
          :word="word"
          :changeWordCard="changeWordCard"
          :themeColor="themeColor"
          :currentTreeID="currentTreeID"
          :mp3Url="wordPlayMp3"
          :bg="wordbgs"
          :ed="wordeds"
          :isFull="true"
        />
      </div>
    </template>
    <div class="word-play-audio" v-if="isWordPlay || isNewWordPlay">
      <AudioLineSentence
        :mp3="isWordPlay ? NpcNewWordMp3 : isNewWordPlay ? wordPlayMp3 : ''"
        :getCurTime="getCurWordTime"
        ref="audioLineWord"
        :audioId="'artPraAudioId' + curSentIndex + wordIndex"
        :stopAudio="stopAudio"
        :width="120"
        :hideSlider="false"
        :bg="wordbg"
        :ed="worded"
        :maxTime="wordMaxTime"
        :bgIndex="bgIndex"
        :isRepeat="isRepeat"
        :wordPlay="true"
        @changePlayStatus="changePlayStatus"
      />
    </div>
  </div>
</template>

<script>
import AudioLineSentence from "./AudioLineSentence.vue";
import Soundrecorddiff from "./Soundrecorddiff.vue";
import AudioCompare from "./AudioCompare.vue";
import Wordcard from "./components/Wordcard.vue";
import { LearnWebSI } from "../../../api/ajax";
export default {
  components: {
    AudioLineSentence,
    Soundrecorddiff,
    AudioCompare,
    Wordcard
  },
  props: [
    "sentList",
    "sentIndex",
    "mp3",
    "wordTimeList",
    "curQue",
    "noFont",
    "themeColor",
    "NNPENewWordList",
    "currentTreeID",
    "config",
    "TaskModel",
    "NpcNewWordMp3"
  ],
  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: "",
      isPad:
        /(?:iPad)/.test(
          navigator.userAgent || navigator.vendor || window.opera
        ) ||
        /(?:PlayBook)/.test(
          navigator.userAgent || navigator.vendor || window.opera
        ) ||
        (/(?:Android)/.test(
          navigator.userAgent || navigator.vendor || window.opera
        ) &&
          !/(?:Mobile)/.test(
            navigator.userAgent || navigator.vendor || window.opera
          )) ||
        (/(?:Firefox)/.test(
          navigator.userAgent || navigator.vendor || window.opera
        ) &&
          /(?:Tablet)/.test(
            navigator.userAgent || navigator.vendor || window.opera
          ))
    };
  },
  computed: {
    // isPlaying: function () {
    //   let playing = false;
    //   if (this.$refs.audioLineSent) {
    //     playing = this.$refs.audioLineSent.audio.isPlaying;
    //   }
    //   console.log(playing);
    //   return playing;
    // },
  },
  watch: {
    isRecording: {
      handler: function(newVal, oldVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true
    },
    recordPlaying: {
      handler: function(newVal, oldVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true
    },
    sentIndex: {
      handler: function(newVal, oldVal) {
        this.curSentIndex = newVal;
        this.getSentence();
      },
      deep: true
    },
    hz: {
      handler: function(val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNewWords(val);
        }
      },
      // 深度观察监听
      deep: true
    },
    isShow: {
      handler: function(val, oldVal) {
        let _this = this;
        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
    }
  },
  //方法集合
  methods: {
    setTopShow(bool) {
      if (this.isPad) {
        this.isTopShow = true;
      } else {
        this.isTopShow = bool;
      }
    },
    setBottomShow(bool) {
      if (!this.recordPlaying && !this.isRecording) {
        this.isBottomShow = bool;
      }
    },
    getPlayStatus(bool) {
      this.recordPlaying = bool;
    },
    setFontSize(type) {
      let _this = this;
      if (type == "-") {
        if (_this.hzSize >= 34) {
          this.hzSize = this.hzSize - 4;
        }
      }
      if (type == "+") {
        if (_this.hzSize <= 76) {
          this.hzSize = this.hzSize + 4;
        }
      }
      _this.pySize = parseInt(_this.hzSize / 1.5);
      _this.enSize = parseInt(_this.hzSize / 2);
    },
    playChange(bool) {
      this.isPlaying = bool;
    },
    handleColl() {
      let _this = this;
      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.pyPosition
        };
        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({
          showClose: true,
          message: "权限不足！",
          type: "warning",
          duration: 2000
        });
      }
    },
    //取消收藏
    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" ? true : false;
        this.$set(this.isCollArr, this.curSentIndex, collFlag);
      });
    },
    showPrevNext(bool, key) {
      this[key] = bool;
    },
    prevSentence() {
      let _this = this;
      if (_this.curSentIndex == 0) {
        // _this.$message.warning("已经是第一个句子了");
        return;
      }
      _this.curSentIndex = _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 = this.curSentIndex + 1;
      this.getSentence();
    },
    rollSentence() {
      if (this.curSentIndex == this.sentList.length - 1) {
        this.curSentIndex = 0;
      } else {
        this.curSentIndex = 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() {
      let _this = this;
      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) {
      let _this = this;
      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) {
      let _this = this;
      _this.curTime = curTime * 1000;
    },
    getCurWordTime(curTime) {
      let _this = this;
      _this.curWordTime = curTime * 1000;
    },
    changeBg(bgIndex) {
      this.bgIndex = bgIndex;
    },
    getSentence() {
      let _this = this;
      _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(item => {
          item.pause();
        });
      }
    },
    exitFullScreen() {
      this.pauseAudio();
      this.$emit("exitFullscreen");
    },
    changeFullScreen() {
      this.pauseAudio();
      this.$emit("changeIsFull");
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      this.$emit("handleWav", list, tmIndex);
    },
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    //播放音频
    // playWord(item) {
    //   let _this = this;
    //   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) {
      let _this = this;
      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(items => {
          items.forEach(itemn => {
            if (itemn.new_word === new_word) {
              _this.wordbg = itemn.bg;
              _this.worded = itemn.ed;
              _this.wordPlayMp3 = itemn.newWordMp3;
            }
          });
        });
        setTimeout(() => {
          _this.isNewWordPlay = true;
        }, 50);
      }
    },
    changePlayStatus() {
      this.isWordPlay = false;
      this.isNewWordPlay = false;
      this.wordIndex = -1;
    },
    showWordDetail(e, item) {
      let _this = this;
      if (_this.TaskModel == "ANSWER") {
        return;
      }
      if (
        _this.chsFhList.indexOf(item.chs) > -1 ||
        /^[a-zA-Z0-9]/.test(item.chs)
      ) {
        return;
      }
      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(items => {
        items.forEach(itemn => {
          if (itemn.new_word === new_word) {
            _this.wordbgs = itemn.bg;
            _this.wordeds = itemn.ed;
            _this.wordPlayMp3 = itemn.newWordMp3;
          }
        });
      });
      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;
      //}
    },
    changeWordCard(isShow) {
      let _this = this;
      _this.isShow = isShow;
      _this.oldHz = "";
      _this.hz = "";
      _this.wordIndex = -1;
    },
    // 处理分词数据
    handleNewWords(val) {
      let _this = this;
      _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];
          for (let j = 0; j < pItem.length; j++) {
            let item = pItem[j];
            if (item.new_word.trim() == val.trim()) {
              let wordlist = val.split("");
              this.word = { list: wordlist, detail: item };
              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(item => {
        item.forEach(wItem => {
          NewWordList.push(wItem.new_word);
        });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
    getScreenHeight() {
      this.screenHeight = window.innerHeight;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.isPad) {
      this.isTopShow = true;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    $(window).resize(() => {
      _this.getScreenHeight();
    });
    _this.getScreenHeight();
    document.addEventListener("keyup", function(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) {
          _this.$nextTick(() => {
            _this.$refs.Soundrecorddiff.microphone();
          });
        }
      }
    });
    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() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.voicefull {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .NNPE-wordDetail {
    position: fixed;
    z-index: 9999;
    top: 50%;
    margin-top: -196px;
  }
  &.bg1 {
    background: #fff;
  }
  &.bg2 {
    background: linear-gradient(180deg, #274533 0%, #385f45 100%);
    .newActive {
      color: #ffc600 !important;
    }
  }
  &-top {
    height: 136px;
    width: 100%;
    box-sizing: border-box;

    padding: 0 40px;

    .voicefull-top-hidden {
      width: 100%;
      height: 136px;
      visibility: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .voicefull-top-show {
      width: 100%;
      height: 136px;
      visibility: visible;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .select-bg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 96px;
      height: 56px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      margin-right: 32px;
      &.select-bg-blue {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > div {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.bg-white-box {
          background: 0 0;
          margin-right: 4px;
          &.active {
            background: #de4444;
          }
        }
        &.bg-green-box {
          background: #fff;
          &.active {
            background: #ffc600;
          }
        }

        > span {
          width: 24px;
          height: 24px;
          border-radius: 100%;
          box-sizing: border-box;
          cursor: pointer;
          &.bg-white {
            background: #fff;
          }
          &.bg-green {
            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
          }
        }
      }
    }
    .set-fontSize {
      padding: 0 20px;
      height: 56px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      &-green {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > span {
        width: 24px;
        height: 24px;
        margin: 0 4px;
        &.font-jian {
          &-black {
            background: url("../../../assets/NPC/jian-black.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow {
            background: url("../../../assets/NPC/jian-white.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-white-disabled {
            background: url("../../../assets/NPC/jian-white-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow-disabled {
            background: url("../../../assets/NPC/jian-yellow-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
        &.font-img {
          &-black {
            background: url("../../../assets/NPC/fontSize-black.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
          &-yellow {
            background: url("../../../assets/NPC/fontSize-white.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
        }
        &.font-jia {
          &-black {
            background: url("../../../assets/NPC/jia-black.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow {
            background: url("../../../assets/NPC/jia-white.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-white-disabled {
            background: url("../../../assets/NPC/jia-white-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow-disabled {
            background: url("../../../assets/NPC/jia-yellow-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
      }
    }
    .top-middle {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 360px;
      .audio-box {
        width: 56px;
        height: 56px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-green {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
  .op-btn {
    width: 56px;
    height: 56px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    // margin-left: 32px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    flex-shrink: 0;
    &-green {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    &.close-btn {
      background: #274533;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    > 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 {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .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/NPC/left-grey.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-black {
        background: url("../../../assets/NPC/left-black.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-white {
        background: url("../../../assets/NPC/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/NPC/right-grey.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-black {
        background: url("../../../assets/NPC/right-black.png") no-repeat left
          top;
        background-size: 100% 100%;
      }
      &-white {
        background: url("../../../assets/NPC/right-white.png") no-repeat left
          top;
        background-size: 100% 100%;
      }
    }
    .vc-main {
      width: fit-content;
      margin: 0 auto;
      padding: 0 67px;
      .enwords {
        padding: 0 3px;
        margin-top: 24px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 24px;
        line-height: 32px;
        font-family: Helvetica;
        word-break: break-word;
        &-green {
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
    .NNPE-words {
      float: left;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 32px;
            line-height: 1.25;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.85);
            &.bottom {
              padding-bottom: 16px;
            }
            &.noFont {
              font-family: initial;
            }
            &.textLeft {
              text-align: left;
            }
            &.font-white {
              color: #fff;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.85);
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 48px;
            line-height: 1.17;
            color: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-flow: wrap; // 兼容不是汉字的内容
            &.bottom {
              padding-bottom: 16px;
            }
            .font-white {
              color: #fff;
            }
            .active {
              color: #de4444;
              &-yellow {
                color: #ffc600;
              }
            }

            .wordActive {
              color: #de4444;
            }
            .wordActive-blue {
              color: #ffc600;
            }
            .newActive {
              color: #de4444;
            }
          }
          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      &.textRight {
        text-align: right;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 32px;
          line-height: 1.25;
          box-sizing: border-box;
          color: rgba(0, 0, 0, 0.85);
          &.bottom {
            padding-bottom: 16px;
          }
          &.font-white {
            color: #fff;
          }
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.85);
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 48px;
          line-height: 1.17;
          color: rgba(0, 0, 0, 0.85);
          display: flex;
          flex-flow: wrap; // 兼容不是汉字的内容
          &.bottom {
            padding-bottom: 16px;
          }
          .font-white {
            color: #fff;
          }
          .active {
            color: #de4444;
            &-yellow {
              color: #ffc600;
            }
          }
          .wordActive {
            color: #de4444;
          }
          .wordActive-blue {
            color: #ffc600;
          }
          .newActive {
            color: #de4444;
          }
        }
        &.padding {
          padding-left: 3px;
          padding-right: 3px;
        }
      }
    }
  }
  &-bottom {
    height: 136px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;

    .voicefull-bottom-show {
      height: 136px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      visibility: visible;
    }
    .voicefull-bottom-hidden {
      height: 136px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      visibility: hidden;
    }
    .bottom-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &-margin {
        margin-left: 40px;
      }
      .compare-box {
        height: 56px;
        padding: 16px 16px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0 40px 40px 0;
        border-left: 0px solid rgba(0, 0, 0, 0.1);
        &-white {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-left: 0;
        }
        &-answer {
          border-radius: 40px;
        }
      }
    }
    .page-count {
      padding: 8px;
      font-size: 16px;
      line-height: 24px;
      font-family: "robot";
      color: #000000;
      min-width: 60px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #fff;
      text-align: center;
      &-green {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
.word-play-audio {
  position: absolute;
  left: -1000px;
}
</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>