eep_page/src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

<!--  -->
<template>
  <div v-if="curQue" class="NNPE-ArticleView">
    <!-- <a class="ArticleView-full" @click="fullScreen">黑板模式</a> -->
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'top'
      "
      class="aduioLine-box aduioLine-practice-npc"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="diaPraAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :stop-audio="stopAudio"
            :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
            :is-repeat="isRepeat"
            :mp3-source="curQue.mp3_list[0].source"
            :ed="ed"
            type="audioLine"
            :attrib="attrib"
            @handleChangeStopAudio="handleChangeStopAudio"
            @emptyEd="emptyEd"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <!-- <span :class="['Repeat-16', isRepeat ? '' : 'disabled']" @click="changeRepeat"></span> -->
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="repeat-1"
          size="16"
          :class="['Repeat-16', isRepeat ? '' : 'disabled']"
          :style="{ color: isRepeat ? (attrib ? attrib.topic_color : '') : '#DCDFE6', cursor: 'pointer' }"
          @click="changeRepeat"
        />
        <!-- <span
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          @click="changePinyin"
          v-if="config.isHasPY"
        ></span>
        <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <!-- <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>

    <div
      :style="{
        height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
        overflow: 'auto',
      }"
    >
      <template v-if="resObj">
        <p
          v-if="curQue.notice"
          class="notice"
          style="padding-top: 24px"
          :style="{
            fontSize: curQue.property.notice_size ? curQue.property.notice_size + 'px' : '',
            color: curQue.property.notice_color ? curQue.property.notice_color : '',
          }"
        >
          {{ convertText(curQue.notice) }}
        </p>
        <div class="NPC-sentences-list">
          <div
            v-for="(item, index) in resObj.sentList"
            :key="'detail' + index"
            :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
            :style="{
              backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
            }"
          >
            <div
              class="NNPE-detail"
              @click="
                handleChangeTime(
                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                  index,
                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                )
              "
            >
              <template v-if="item.sentArr[0].sentIndex == 0">
                <RoleChs
                  :cur-role="item.roleDetail"
                  :color="
                    (curQue.wordTime &&
                      curQue.wordTime[index] &&
                      curTime >= curQue.wordTime[index].bg &&
                      curTime <= curQue.wordTime[index].ed) ||
                    sentIndex == index
                      ? 'rgba(0,0,0,0.85)'
                      : 'rgba(0,0,0,0.45)'
                  "
                  :type="curQue.property.role_img_type"
                />
              </template>
              <div v-else style="width: 36px; height: 36px"></div>
              <div class="sentence-box">
                <template v-if="item.sentArr[0].sentIndex == 0">
                  <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                  <span
                    :class="[
                      'pinyin',
                      (curQue.wordTime &&
                        curQue.wordTime[index] &&
                        curTime >= curQue.wordTime[index].bg &&
                        curTime <= curQue.wordTime[index].ed) ||
                      sentIndex == index
                        ? 'color85'
                        : 'color45',
                    ]"
                    >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                  >
                  <span
                    :class="[
                      'chs',
                      (curQue.wordTime &&
                        curQue.wordTime[index] &&
                        curTime >= curQue.wordTime[index].bg &&
                        curTime <= curQue.wordTime[index].ed) ||
                      sentIndex == index
                        ? 'color85'
                        : 'color45',
                    ]"
                    >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                  >
                </div> -->
                  <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                    <span
                      :class="[
                        'chs',
                        (curQue.wordTime &&
                          curQue.wordTime[index] &&
                          curTime >= curQue.wordTime[index].bg &&
                          curTime <= curQue.wordTime[index].ed) ||
                        sentIndex == index
                          ? 'color85'
                          : 'color45',
                      ]"
                      >{{ convertText(item.roleDetail.fullName) }}</span
                    >
                    <span
                      :class="[
                        'pinyin',
                        (curQue.wordTime &&
                          curQue.wordTime[index] &&
                          curTime >= curQue.wordTime[index].bg &&
                          curTime <= curQue.wordTime[index].ed) ||
                        sentIndex == index
                          ? 'color85'
                          : 'color45',
                      ]"
                      >{{ item.roleDetail.fullPinyin }}</span
                    >
                  </div>
                </template>
                <div class="sentence-box-inner" :style="{ background: item.roleDetail.color.bg }">
                  <div
                    v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
                    :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                  >
                    {{ convertText(item.enwords) }}
                  </div>
                  <div style="overflow: hidden; clear: both"></div>
                  <div class="NNPE-words-box">
                    <div
                      v-for="(pItem, pIndex) in item.sentArr"
                      :key="'wordsList' + pIndex"
                      class="NNPE-words"
                      :class="[
                        pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                        pItem.chs == '“' ? 'textRight' : '',
                      ]"
                    >
                      <template v-if="!pItem.width">
                        <template v-if="pItem.isShow">
                          <template
                            v-if="
                              (item.sentArr[pIndex + 1] &&
                                item.sentArr[pIndex + 1].chs &&
                                chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1) ||
                              (item.sentArr[pIndex + 1] &&
                                item.sentArr[pIndex + 1].chs &&
                                item.sentArr[pIndex + 1].chs == '#')
                            "
                          >
                            <span class="NNPE-words-box">
                              <template v-if="curQue.property.pinyin_position == 'top'">
                                <span
                                  v-if="config.isShowPY && item.dhaspinyin"
                                  class="NNPE-pinyin"
                                  :class="[
                                    pItem.className ? pItem.className : '',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                                >
                              </template>
                              <span
                                class="NNPE-chs"
                                :class="[
                                  pItem.padding && config.isShowPY && item.dhaspinyin ? 'padding' : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                              >
                                <template>
                                  <span
                                    v-for="(wItem, wIndex) in pItem.leg"
                                    :key="'ci' + wIndex + pIndex + index"
                                    :class="[
                                      isPlaying &&
                                      pItem.timeList &&
                                      pItem.timeList[wIndex] &&
                                      curTime >= pItem.timeList[wIndex].wordBg &&
                                      curQue.wordTime &&
                                      curQue.wordTime[index] &&
                                      curTime <= curQue.wordTime[index].ed
                                        ? 'active'
                                        : '',
                                      sentIndex == index ? 'wordBlank' : '',
                                    ]"
                                    :style="{
                                      fontFamily: pItem.config.fontFamily,
                                      textDecoration: pItem.config.textDecoration,
                                      borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                      fontWeight: pItem.config.fontWeight,
                                      height:
                                        attrib && attrib.font_size
                                          ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                          : '28px',
                                      fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                      lineHeight:
                                        attrib && attrib.font_size
                                          ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                          : '28px',
                                      display: 'inline-block',
                                      color:
                                        isPlaying &&
                                        pItem.timeList &&
                                        pItem.timeList[wIndex] &&
                                        curTime >= pItem.timeList[wIndex].wordBg &&
                                        curQue.wordTime &&
                                        curQue.wordTime[index] &&
                                        curTime <= curQue.wordTime[index].ed &&
                                        attrib
                                          ? attrib.topic_color
                                          : pItem.config.color,
                                    }"
                                    >{{
                                      NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
                                    }}</span
                                  >
                                </template>
                              </span>
                              <template v-if="curQue.property.pinyin_position == 'bottom'">
                                <span
                                  v-if="config.isShowPY && item.dhaspinyin"
                                  class="NNPE-pinyin"
                                  :class="[
                                    pItem.className ? pItem.className : '',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{ 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 && item.dhaspinyin"
                                  :class="[
                                    'NNPE-pinyin',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  style="text-align: left"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{
                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
                                      ? item.sentArr[pIndex + 1].pinyin
                                      : ''
                                  }}</span
                                >
                              </template>
                              <span class="NNPE-chs" style="text-align: left">
                                <span
                                  :class="[
                                    isPlaying &&
                                    pItem.timeList[pItem.leg - 1] &&
                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                    curQue.wordTime &&
                                    curQue.wordTime[index] &&
                                    curTime <= curQue.wordTime[index].ed
                                      ? 'active'
                                      : '',
                                    sentIndex == index ? 'wordBlank' : '',
                                  ]"
                                  :style="{
                                    fontFamily: item.sentArr[pIndex + 1].config.fontFamily,
                                    textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
                                    borderBottom:
                                      item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
                                    fontWeight: item.sentArr[pIndex + 1].config.fontWeight,
                                    height:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                    lineHeight:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    display: 'inline-block',
                                    color:
                                      isPlaying &&
                                      pItem.timeList[pItem.leg - 1] &&
                                      curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                      curQue.wordTime &&
                                      curQue.wordTime[index] &&
                                      curTime <= curQue.wordTime[index].ed &&
                                      attrib
                                        ? attrib.topic_color
                                        : item.sentArr[pIndex + 1].config.color,
                                  }"
                                >
                                  {{
                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
                                      ? convertText(item.sentArr[pIndex + 1].chs)
                                      : ''
                                  }}</span
                                >
                              </span>
                              <template v-if="curQue.property.pinyin_position == 'bottom'">
                                <span
                                  v-if="config.isShowPY && item.dhaspinyin"
                                  :class="[
                                    'NNPE-pinyin',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  style="text-align: left"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{
                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
                                      ? item.sentArr[pIndex + 1].pinyin
                                      : ''
                                  }}</span
                                >
                              </template>
                            </span>
                            <span
                              v-if="
                                item.sentArr[pIndex + 2] &&
                                item.sentArr[pIndex + 2].chs &&
                                chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
                              "
                              class="NNPE-words-box"
                            >
                              <template v-if="curQue.property.pinyin_position == 'top'">
                                <span
                                  v-if="config.isShowPY && item.dhaspinyin"
                                  :class="[
                                    'NNPE-pinyin',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  style="text-align: left"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{
                                    NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
                                      ? item.sentArr[pIndex + 2].pinyin
                                      : ''
                                  }}</span
                                >
                              </template>
                              <span class="NNPE-chs" style="text-align: left">
                                <span
                                  :class="[
                                    isPlaying &&
                                    pItem.timeList[pItem.leg - 1] &&
                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                    curQue.wordTime &&
                                    curQue.wordTime[index] &&
                                    curTime <= curQue.wordTime[index].ed
                                      ? 'active'
                                      : '',
                                    sentIndex == index ? 'wordBlank' : '',
                                  ]"
                                  :style="{
                                    fontFamily: item.sentArr[pIndex + 2].config.fontFamily,
                                    textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
                                    borderBottom:
                                      item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
                                    fontWeight: item.sentArr[pIndex + 2].config.fontWeight,
                                    height:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                    lineHeight:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    display: 'inline-block',
                                    color:
                                      isPlaying &&
                                      pItem.timeList[pItem.leg - 1] &&
                                      curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                      curQue.wordTime &&
                                      curQue.wordTime[index] &&
                                      curTime <= curQue.wordTime[index].ed &&
                                      attrib
                                        ? attrib.topic_color
                                        : item.sentArr[pIndex + 2].config.color,
                                  }"
                                >
                                  {{
                                    NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
                                      ? convertText(item.sentArr[pIndex + 2].chs)
                                      : ''
                                  }}</span
                                >
                              </span>
                              <template v-if="curQue.property.pinyin_position == 'bottom'">
                                <span
                                  v-if="config.isShowPY && item.dhaspinyin"
                                  :class="[
                                    'NNPE-pinyin',
                                    sentIndex == index ? 'wordBlank' : '',
                                    noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                                  ]"
                                  style="text-align: left"
                                  :style="{
                                    fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                    height:
                                      attrib && attrib.pinyin_size
                                        ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                        : '22px',
                                  }"
                                  >{{
                                    NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
                                      ? item.sentArr[pIndex + 2].pinyin
                                      : ''
                                  }}</span
                                >
                              </template>
                            </span>
                          </template>
                          <template v-else>
                            <template v-if="curQue.property.pinyin_position == 'top'">
                              <span
                                v-if="config.isShowPY && item.dhaspinyin"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                  noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                                ]"
                                :style="{
                                  fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                  height:
                                    attrib && attrib.pinyin_size
                                      ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                      : '22px',
                                }"
                                >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                              >
                            </template>
                            <span
                              v-if="pItem.chs != '#'"
                              class="NNPE-chs"
                              :class="[
                                pItem.chs != '“' && pItem.padding && config.isShowPY && item.dhaspinyin
                                  ? 'padding'
                                  : '',
                                sentIndex == index ? 'wordBlank' : '',
                              ]"
                            >
                              <template>
                                <span
                                  v-for="(wItem, wIndex) in pItem.leg"
                                  :key="'ci' + wIndex + pIndex + index"
                                  :class="[
                                    isPlaying &&
                                    pItem.timeList &&
                                    pItem.timeList[wIndex] &&
                                    curTime >= pItem.timeList[wIndex].wordBg &&
                                    curQue.wordTime &&
                                    curQue.wordTime[index] &&
                                    curTime <= curQue.wordTime[index].ed
                                      ? 'active'
                                      : '',
                                  ]"
                                  :style="{
                                    fontFamily: pItem.config.fontFamily,
                                    textDecoration: pItem.config.textDecoration,
                                    borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                    fontWeight: pItem.config.fontWeight,
                                    height:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                    lineHeight:
                                      attrib && attrib.font_size
                                        ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
                                        : '28px',
                                    display: 'inline-block',
                                    color:
                                      isPlaying &&
                                      pItem.timeList &&
                                      pItem.timeList[wIndex] &&
                                      curTime >= pItem.timeList[wIndex].wordBg &&
                                      curQue.wordTime &&
                                      curQue.wordTime[index] &&
                                      curTime <= curQue.wordTime[index].ed &&
                                      attrib
                                        ? attrib.topic_color
                                        : pItem.config.color,
                                  }"
                                  >{{
                                    NumberList.indexOf(pItem.chs[wIndex]) == -1 ? convertText(pItem.chs[wIndex]) : ''
                                  }}</span
                                >
                              </template>
                            </span>
                            <template v-if="curQue.property.pinyin_position == 'bottom'">
                              <span
                                v-if="config.isShowPY && item.dhaspinyin"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                :style="{
                                  fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                                  height:
                                    attrib && attrib.pinyin_size
                                      ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                      : '22px',
                                }"
                                >{{ 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>
                    </div>
                  </div>
                  <div style="overflow: hidden; clear: both"></div>
                  <div
                    v-if="
                      item.enwords &&
                      config.isShowEN &&
                      (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
                    "
                    :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                  >
                    {{ convertText(item.enwords) }}
                  </div>
                  <div
                    v-if="curQue.property.multilingual_position === 'para'"
                    class="multilingual-para"
                    :class="[item.isTitle ? 'multilingual-para-center' : '']"
                  >
                    {{
                      multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
                        ? multilingualTextList[multilingual][index]
                        : ''
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div v-show="sentIndex == index" class="Soundrecord-content">
              <div class="Soundrecord-content-inner">
                <Soundrecord
                  v-if="refresh"
                  type="promax"
                  class="luyin-box"
                  :TaskModel="TaskModel"
                  :answer-record-list="
                    curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
                  "
                  :tm-index="index"
                  :sent-index="sentIndex"
                  :attrib="attrib"
                  @getWavblob="getWavblob"
                  @handleParentPlay="handleParentPlay"
                  @sentPause="sentPause"
                  @handleWav="handleWav"
                />
                <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
                <Audio-compare
                  :theme-color="attrib ? attrib.topic_color : '#e35454'"
                  :index="index"
                  :sent-index="sentIndex"
                  :url="curQue.mp3_list[0].id"
                  :bg="curQue.wordTime[index].bg"
                  :ed="curQue.wordTime[index].ed"
                  :wavblob="wavblob"
                  :get-cur-time="getCurTime"
                  :sent-pause="sentPause"
                  :is-record="isRecord"
                  :handle-change-stop-audio="handleChangeStopAudio"
                  :get-play-status="getPlayStatus"
                  :attrib="attrib"
                />
              </div> -->
              </div>
              <span class="full-screen-icon" @click="fullScreen">
                <svg-icon
                  icon-class="icon-full"
                  size="24"
                  :style="{
                    color: attrib && attrib.topic_color ? attrib.topic_color : '',
                  }"
                />
              </span>
            </div>
          </div>
          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
          {{ items }}
        </div> -->
        </div>
      </template>
      <template v-for="(items, indexs) in curQue.detail">
        <div
          v-if="
            curQue.property.multilingual_position === 'all' &&
            items.multilingualTextList &&
            items.multilingualTextList[multilingual] &&
            items.multilingualTextList[multilingual].length > 0
          "
          :key="indexs"
          class="multilingual"
        >
          <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
            {{
              items.multilingualTextList && items.multilingualTextList[multilingual]
                ? items.multilingualTextList[multilingual].join(' ')
                : ''
            }}
          </div>
        </div>
      </template>
    </div>
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'bottom'
      "
      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="diaPraAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :stop-audio="stopAudio"
            :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
            :is-repeat="isRepeat"
            :mp3-source="curQue.mp3_list[0].source"
            :ed="ed"
            type="audioLine"
            :attrib="attrib"
            @handleChangeStopAudio="handleChangeStopAudio"
            @emptyEd="emptyEd"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="repeat-1"
          size="16"
          :class="['Repeat-16', isRepeat ? '' : 'disabled']"
          :style="{ color: isRepeat ? (attrib ? attrib.topic_color : '') : '#DCDFE6', cursor: 'pointer' }"
          @click="changeRepeat"
        />
        <!-- <span
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          @click="changePinyin"
          v-if="config.isHasPY"
        ></span>
        <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <!-- <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>
    <div :id="'screen-' + mathNum" class="voice-full-screen">
      <Voicefullscreen
        v-if="isFull && resObj"
        :theme-color="attrib ? attrib.topic_color : '#e35454'"
        :cur-que="curQue"
        :sent-list="resObj.sentList"
        :sent-index="sentIndex"
        :mp3="curQue.mp3_list && curQue.mp3_list[0] ? curQue.mp3_list[0].id : ''"
        :no-font="noFont"
        :NNPENewWordList="NNPENewWordList"
        :NNPEAnnotationList="NNPEAnnotationList"
        :current-tree-i-d="currentTreeID"
        :is-full="isFull"
        :config="config"
        :TaskModel="TaskModel"
        :NpcNewWordMp3="NpcNewWordMp3"
        :attrib="attrib"
        @handleWav="handleWav"
        @changePinyin="changePinyin"
        @changeEN="changeEN"
        @exitFullscreen="exitFullscreen"
        @changeIsFull="changeIsFull"
      />
    </div>
  </div>
</template>

<script>
import { timeStrToSen } from '@/utils/transform';
import AudioLine from '../voice_matrix/components/AudioLine.vue';
import Soundrecord from '../../common/SoundRecord.vue'; // 录音模板
import RoleChs from './RoleChs.vue';
import AudioCompare from '../article/components/AudioCompare.vue';
import Voicefullscreen from '../article/Voicefullscreen.vue';
export default {
  name: 'ArticleView',
  components: {
    AudioLine,
    Soundrecord,
    RoleChs,
    AudioCompare,
    Voicefullscreen,
  },
  filters: {
    handlePinyin(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.pinyin} `;
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.chs} `;
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  props: [
    'curQue',
    'colorBox',
    'noFont',
    'attrib',
    'config',
    'NNPENewWordList',
    'NNPEAnnotationList',
    'currentTreeID',
    'TaskModel',
    'colLength',
    'NpcNewWordMp3',
    'isPhone',
    'multilingual',
  ],
  inject: ['convertText'],
  data() {
    return {
      wavblob: null,
      resObj: null,
      curTime: 0, // 单位s
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
      enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
      NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
      stopAudio: false,
      sentIndex: 0,
      isRepeat: false,
      currSent: null, // 当前句子的时间
      isRecord: false,
      isFull: false,
      mathNum: Math.random().toString(36).substr(2),
      ed: undefined,
      refresh: true,
      highWords: null,
      highWordsArr: [],
      highIndex: 0,
      newWordList: [],
      multilingualTextList: {},
    };
  },
  computed: {
    isPlaying() {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.isPlaying;
      }
      return playing;
    },
  },
  watch: {
    sentIndex: {
      handler(newVal, oldVal) {
        let _this = this;
        if (newVal !== oldVal) {
          let Bookanswer = _this.curQue.Bookanswer;
          if (
            Bookanswer &&
            Bookanswer.practiceModel &&
            Bookanswer.practiceModel[newVal] &&
            Bookanswer.practiceModel[newVal].recordList &&
            Bookanswer.practiceModel[newVal].recordList.length > 0
          ) {
            _this.wavblob = Bookanswer.practiceModel[newVal].recordList[0].wavData;
          } else {
            _this.wavblob = '';
          }
        }
      },
      deep: true,
    },
    isFull: {
      handler(newVal, oldVal) {
        let _this = this;
        _this.refresh = false;
        if (!newVal) {
          _this.$nextTick(() => {
            // 重新渲染组件
            _this.refresh = true;
          });
        }
      },
      deep: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      this.handleData();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getPlayStatus(val) {
      // this.isPlaying = val;
    },
    pauseAudio() {
      let audio = document.getElementsByTagName('audio');
      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1) {
        audio.forEach((item) => {
          item.pause();
        });
      }
    },
    pauseVideo() {
      let video = document.getElementsByTagName('video');
      if (video && video.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1) {
        video.forEach((item) => {
          item.pause();
        });
      }
    },
    // 语音全屏
    fullScreen() {
      this.pauseAudio();
      this.pauseVideo();
      this.isFull = true;
      this.goFullscreen();
    },
    goFullscreen() {
      let id = `screen-${this.mathNum}`;
      let element = document.getElementById(id);
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    exitFullscreen() {
      this.isFull = false;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    changeIsFull() {
      this.isFull = false;
    },
    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.currSent.ed || time <= _this.currSent.bg) {
          _this.curTime = _this.currSent.bg;
          this.$refs.audioLine.onTimeupdateTime(_this.currSent.bg / 1000, true);
        } else {
          _this.curTime = curTime * 1000;
        }
      } else {
        _this.curTime = curTime * 1000;
        _this.getSentIndex(_this.curTime);
      }
    },
    getSentIndex(curTime) {
      for (let i = 0; i < this.curQue.wordTime.length; i++) {
        let bg = this.curQue.wordTime[i].bg;
        let ed = this.curQue.wordTime[i].ed;
        if (curTime >= bg && curTime <= ed) {
          this.sentIndex = i;
          break;
        }
      }
    },
    handleData() {
      this.curQue.multilingual.forEach((item) => {
        let trans_arr = item.translation.split('\n');
        this.$set(this.multilingualTextList, item.type, trans_arr);
      });
      let resArr = [];
      let sentArrTotal = [];
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let wordTimeList = curQue.wordTime;
      let dhaspinyin = false; // 每段是否有拼音
      curQue.detail.forEach((dItem, dIndex) => {
        dhaspinyin = false;
        let roleDetail = this.getRole(dItem);

        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];
          let sentence = dItem.sentences[sIndex];
          sItem.forEach((wItem, wIndex) => {
            let startIndex = wIndex === 0 ? 0 : sentArr[wIndex - 1].startIndex + sentArr[wIndex - 1].chs.length;
            let endIndex = wIndex === 0 ? wItem.chs.length : sentArr[wIndex - 1].endIndex + wItem.chs.length;
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            let words = '';
            if (this.newWordList.length > 0) {
              if (!this.highWords) {
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else if (wIndex > this.highWords.endIndex - 1) {
                this.highWords = null;
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else {
                words = this.highWords ? this.highWords.words : '';
              }
            }
            let obj = {
              paraIndex: dIndex, // 段落索引
              sentIndex: sIndex, // 在段落中句子索引
              wordIndex: wIndex, // 单词的索引
              pinyin:
                curQue.pinyin_type === 'pinyin'
                  ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
                    ? wItem.pinyin_up
                    : wItem.pinyin
                  : wItem.pinyin_tone,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex,
              endIndex,
              leg: wItem.chs.length,
              timeList: [],
              words,
              config: {
                fontFamily: wItem.fontFamily,
                color: wItem.color,
                textDecoration: wItem.textDecoration,
                border: wItem.border,
                fontWeight: wItem.fontWeight,
              },

              matchWords: wItem.matchWords,
              matchNotes: wItem.matchNotes,
              notesColor: wItem.notesColor,
              img: wItem.img,
              imgPosition: wItem.imgPosition,
            };
            sentArr.push(obj);
            if (wItem.pinyin) dhaspinyin = true;
          });
          let objs = {
            roleDetail,
            sentArr,
            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
            dhaspinyin,
            type: dItem.type,
            notice: dItem.notice,
            noticeWordList: dItem.noticeWordList,
            notice_size: dItem.notice_size,
            notice_color: dItem.notice_color,
            file_url_open: dItem.file_url_open,
          };
          sentArrTotal.push(sentArr);
          resArr.push(objs);
        });
      });
      if (wordTimeList && wordTimeList.length > 0) {
        this.mergeWordTime(sentArrTotal, wordTimeList);
      }
      this.resObj = { sentList: resArr };
    },
    // 获取角色
    getRole(dItem) {
      let roleIndex = dItem.roleIndex;
      let resObj = null;
      let roleList = JSON.parse(JSON.stringify(this.curQue.property.role_list));
      for (let i = 0; i < roleList.length; i++) {
        let item = roleList[i];
        if (item.id === roleIndex) {
          resObj = item;
          // resObj.color = this.colorBox[i];
          break;
        }
      }

      return resObj;
    },
    mergeWordTime(resArr, wordTimeList) {
      resArr.forEach((item, index) => {
        let wordsResultList = wordTimeList[index].wordsResultList;
        item.forEach((wItem) => {
          let startIndex = wItem.startIndex;
          let endIndex = wItem.endIndex;
          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
        });
      });
    },
    // 词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    findLightWord(wItem, startIndex, sentence, sItem) {
      let endIndex = 0;
      let words = '';
      this.newWordList.forEach((item) => {
        if (item.length === 1) {
          if (item === wItem.chs && !wItem.banLight) {
            words = wItem.chs;
            endIndex = startIndex + 1;
          }
        } else if (item[0] === wItem.chs && sentence.indexOf(item) > -1) {
          let index = null;
          let chsStr = '';
          for (let i = startIndex; i < sItem.length + 1; i++) {
            index = i;
            if (chsStr.length === item.length) {
              break;
            } else {
              chsStr += sItem[i] ? sItem[i].chs : '';
            }
          }
          if (chsStr === item && !wItem.banLight) {
            words = item;
            endIndex = index;
          }
        } else if (wItem.new_word && wItem.new_word === item && !wItem.banLight) {
          words = item;
          endIndex = startIndex + 1;
        }
      });
      if (words) {
        this.highWords = { words, endIndex };
      } else {
        this.highWords = null;
      }
    },
    // 判断是否有padding
    judgePad(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        let nextIndex = curIndex + 1;
        let chs = sItem[nextIndex].chs;
        if (this.chsFhList.indexOf(chs) > -1 || this.chsFhList.indexOf(wItem.chs) > -1) {
          wItem.padding = false;
        } else {
          wItem.padding = true;
        }
        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
          wItem.className = 'textLeft';
        }
      }
    },
    // 转化时间
    handleTimeList(list) {
      let listRes = [];
      list.forEach((item) => {
        let res = timeStrToSen(item);
        listRes.push(res);
      });
      return listRes;
    },
    // 计算总时间
    countWordTime(sentArr) {
      let total = 0;
      sentArr.forEach((item) => {
        total += item.endTime;
      });
      return total;
    },
    // 点击播放某个句子
    handleChangeTime(time, index, ed) {
      let _this = this;
      if (_this.isRepeat) {
        _this.currSent = _this.curQue.wordTime[index];
      }
      _this.sentIndex = index;
      _this.ed = ed;
      if (time) {
        _this.curTime = time;
        _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      }
    },
    emptyEd() {
      this.ed = undefined;
    },
    handleWav(list, tmIndex) {
      let _tmIndex = tmIndex || 0;
      this.curQue.Bookanswer.practiceModel[_tmIndex] = {
        recordList: [],
      };
      this.$set(this.curQue.Bookanswer.practiceModel[_tmIndex], 'recordList', list);
    },
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    // 拼音的显示和隐藏
    changePinyin() {
      if (this.config.isHasPY) {
        this.$emit('changeConfig', 'isShowPY');
      }
    },
    // 英文的显示和隐藏
    changeEN() {
      if (this.config.isHasEN) {
        this.$emit('changeConfig', 'isShowEN');
      }
    },
    // 单句是否重复播放
    changeRepeat() {
      let _this = this;
      _this.isRepeat = !_this.isRepeat;
      this.currSent = _this.curQue.wordTime[_this.sentIndex];
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((wItem) => {
        // item.forEach((wItem) => {
        if (wItem.new_word) {
          NewWordList.push(wItem.new_word);
        } else if (wItem.detail && wItem.detail.sentence) {
          NewWordList.push(wItem.detail.sentence);
        }
        // });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  position: relative;
  width: 100%;

  .ArticleView-full {
    position: absolute;
    top: -44px;
    left: 0;
    z-index: 99999;
    padding-left: 24px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    color: #000;
    background: url('@/assets/full-screen-red.png') left center no-repeat;
    background-size: 16px 16px;
  }

  .NPC-sentences-list {
    padding: 0 0 24px;
    overflow: auto;
  }

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

  .aduioLine-content {
    flex: 1;
  }

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

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

      > span {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

  .NNPE-detail-box {
    &.active {
      background: rgba(0, 0, 0, 6%);
    }
  }

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

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

  .NNPE-detail {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 24px;
    overflow: hidden;
    clear: both;
    color: rgba(0, 0, 0, 45%);

    .sentence-box {
      padding-left: 8px;
      overflow: hidden;
      clear: both;

      &-inner {
        box-sizing: border-box;
        float: left;
        padding: 8px 12px;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 8px;
      }

      .roleDetail {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 36px;

        .pinyin {
          margin-left: 4px;
          font-family: 'League';
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 85%);

          &.noFont {
            font-family: initial;
          }
        }

        .chs {
          font-family: '楷体';
          font-size: 16px;
          line-height: 24px;
          color: rgba(0, 0, 0, 85%);
        }

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

        .color45 {
          color: rgba(0, 0, 0, 45%);
        }
      }
    }

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

      &-box {
        float: left;

        > span {
          display: block;

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

            &.noFont {
              font-family: initial;
            }

            &.textLeft {
              text-align: left;
            }

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

          &.NNPE-chs {
            font-family: '楷体';
            font-size: 20px;
            line-height: 1.4;

            .active {
              color: #de4444;
            }

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

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

      &.textLeft {
        text-align: left;
      }

      &.textCenter {
        text-align: center;
      }

      &.textRight {
        text-align: right;
      }

      > span {
        display: block;

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

          &.noFont {
            font-family: initial;
          }

          &.textLeft {
            text-align: left;
          }

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

        &.NNPE-chs {
          font-family: '楷体';
          font-size: 20px;
          line-height: 1.4;

          .active {
            color: #de4444;
          }

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

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

  .Soundrecord-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 8px 68px;

    &-inner {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      // width: 304px;
      padding: 4px 12px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 8px;

      .luyin-box {
        width: 280px;
      }

      .compare-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
      }
    }

    .full-screen-icon {
      width: 24px;
      height: 24px;
      cursor: pointer;

      // background: url('@/assets/full-screen-red.png') no-repeat left top;
      // background-size: 100% 100%;
    }
  }

  .voice-full-screen {
    // position: fixed;
    // top: 0;
    // left: 0;
    // z-index: 9999;
  }

  .notice {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #000;
    word-break: break-word;
  }

  img {
    max-width: 100%;
  }
}
</style>