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

<template>
  <div
    class="NPC-zhedie"
    v-if="curQue"
    :class="[isPhone ? 'NPC-zhedie-phone' : '']"
  >
    <div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
      <div class="NPC-top-left">
        <template v-if="curQue.conDetail && curQue.conDetail.sentence">
          <div class="item-intro">
            <OneSentenceTemp
              :detail="curQue.conDetail"
              :TaskModel="TaskModel"
              :Bookanswer="[]"
              :correctAnswer="[]"
              :isInput="false"
              :fn_check_list="[]"
              :pyNumber="0"
              :record_check="[]"
            />
          </div>
        </template>
        <span class="NPC-topTitle-text" v-else>{{ curQue.title }}</span>
        <!-- <span
          :class="['NPC-play-all', playClass]"
          @click.stop="playNewwords"
        ></span> -->
      </div>
      <div class="NPC-top-right" @click="handleChangeTab">
        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
        <template v-if="curQue.titleBg == 'white'">
          <img
            v-if="wordShow"
            src="../../../assets/NPC/down-black.png"
            alt=""
          />
          <img v-else src="../../../assets/NPC/up-black.png" alt="" />
        </template>
        <template v-else>
          <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
          <img v-else src="../../../assets/NPC/up.png" alt="" />
        </template>
      </div>
    </div>
    <el-collapse-transition>
      <div
        class="NPC-word-list"
        v-if="curQue.option && curQue.option.length > 0"
        v-show="wordShow"
      >
        <div
          class="aduioLine-box"
          v-if="
            curQue.mp3_list &&
              curQue.mp3_list.length > 0 &&
              curQue.mp3_list[0].id
          "
        >
          <AudioLine
            :audioId="'SelectYinjieAudio' + indexStr"
            :mp3="curQue.mp3_list[0].id"
            :getCurTime="getCurTime"
            :themeColor="themeColor"
            :ed="ed"
            type="audioLine"
            ref="audioLine"
            @handleListenRead="handleListenRead"
          />
        </div>
        <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
          <li
            class="NPC-word-tr"
            v-for="(item, index) in curQue.option"
            :key="'curQue.option' + index"
          >
            <div
              :class="[
                'NPC-word-row',
                playClass && mp3_index == sItem.sIndex ? 'active' : '',
                curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
                  ? 'active'
                  : ''
              ]"
              v-for="(sItem, sIndex) in item"
              :key="'curQue.option.child' + sIndex"
            >
              <template v-if="sItem.bg || sItem.ed">
                <a
                  :class="[
                    'play-btn',
                    curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
                      ? 'active'
                      : ''
                  ]"
                  @click="handleChangeTime(sItem.bg, sItem.ed)"
                ></a>
              </template>
              <template
                v-else-if="
                  sItem.mp3_list &&
                    sItem.mp3_list.length > 0 &&
                    sItem.mp3_list[0].id
                "
              >
                <span
                  :class="[
                    themeColor == 'green'
                      ? 'NPC-play-btn-green'
                      : themeColor == 'red'
                      ? 'NPC-play-btn-red'
                      : 'NPC-play-btn-brown',
                    playClass && mp3_index == sItem.sIndex ? 'active' : ''
                  ]"
                  @click="palyAudio(sItem.sIndex)"
                ></span>
                <audio
                  :id="'word' + indexStr + sItem.sIndex"
                  :src="sItem.mp3_list[0].id"
                ></audio>
              </template>

              <template v-else>
                <span style="width: 16px; height: 16px"></span>
              </template>
              <div class="tabNum-box">
                <template v-if="sItem.mIndex == 0 || sItem.number">
                  <b class="tabNum">{{
                    sItem.number ? sItem.number : index + 1
                  }}</b>
                </template>
                <div
                  v-else
                  style="width: 16px; height: 16px; margin-left: 8px"
                ></div>
                <img
                  v-if="sItem.starFlag"
                  class="star-label"
                  :src="
                    require('../../../assets/NPC/asterisk-' +
                      themeColor +
                      '.png')
                  "
                />
              </div>
              <template
                v-if="
                  sItem.pinyin_site &&
                    (sItem.pinyin_site == 'top' ||
                      sItem.pinyin_site == 'bottom')
                "
              >
                <div class="NPC-word-tab-box">
                  <span
                    class="NPC-word-tab-common NPC-word-tab-pinyin"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-pinyin-' + themeColor
                        : ''
                    ]"
                    v-if="sItem.pinyin_site == 'top'"
                  >
                    {{ sItem.pinyin }}
                  </span>
                  <span
                    class="NPC-word-tab-common NPC-word-tab-word"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-word-' + themeColor
                        : '',
                      curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
                    ]"
                  >
                    {{ sItem.new_word }}
                  </span>
                  <span
                    class="NPC-word-tab-common NPC-word-tab-pinyin"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-pinyin-' + themeColor
                        : ''
                    ]"
                    v-if="sItem.pinyin_site == 'bottom'"
                  >
                    {{ sItem.pinyin }}
                  </span>
                </div>
                <span
                  class="NPC-word-tab-common NPC-word-tab-cixing"
                  :class="[
                    /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
                      ? 'hasCn'
                      : '',
                    sItem.motif_color ? 'NPC-word-tab-cixing-' + themeColor : ''
                  ]"
                  v-html="sItem.cixing"
                ></span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-def"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-def-' + themeColor : ''
                  ]"
                  v-html="sItem.def_str"
                ></span>
              </template>
              <template v-else>
                <span
                  class="NPC-word-tab-common NPC-word-tab-pinyin"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-pinyin-' + themeColor : ''
                  ]"
                  v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
                >
                  {{ sItem.pinyin }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-word"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-word-' + themeColor : '',
                    curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
                  ]"
                >
                  {{ sItem.new_word }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-pinyin"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-pinyin-' + themeColor : ''
                  ]"
                  v-if="sItem.pinyin_site == 'last'"
                >
                  {{ sItem.pinyin }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-cixing"
                  :class="[
                    /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
                      ? 'hasCn'
                      : '',
                    sItem.motif_color ? 'NPC-word-tab-cixing-' + themeColor : ''
                  ]"
                  v-html="sItem.cixing"
                ></span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-def"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-def-' + themeColor : ''
                  ]"
                  v-html="sItem.def_str"
                ></span>
              </template>
              <span v-if="curQue.type == 'NewWord_chs'">
                <Soundrecord
                  :tmIndex="index"
                  :tmsIndex="sIndex"
                  :TaskModel="TaskModel"
                  @handleWav="handleWav"
                  :modelType="curQue.type"
                  :answerRecordList="
                    judgeAnswer != 'standardAnswer'
                      ? curQue.Bookanswer[index][sIndex].recordList
                      : []
                  "
                  type="mini"
                  class="luyin-box-wordphrase"
                  :style="{ marginLeft: '8px' }"
                />
              </span>
              <span v-if="curQue.isInfor">
                <img
                  src="../../../assets/NPC/detail-icon.png"
                  class="detail-icon"
                  @click="showDetail(sItem)"
                />
              </span>
              <div v-if="sItem.collocation" class="collocation">
                <span>搭配：</span><b v-html="sItem.collocation"></b>
              </div>
              <div
                v-if="
                  sItem.liju_list &&
                    sItem.liju_list.length > 0 &&
                    sItem.liju_list[0]
                "
                class="collocation"
              >
                <span>例句：</span>
                <div>
                  <b
                    v-html="items"
                    v-for="(items, indexs) in sItem.liju_list"
                    :key="indexs"
                  ></b>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-collapse-transition>
    <div class="practiceBox" v-if="detailShow">
      <WordPhraseDetail
        :data="data"
        :changeDetailIndex="changeDetailIndex"
        :closeWord="closeWordShow"
        :detailIndex="detailIndex"
        :optionRes="optionRes"
        :themeColor="themeColor"
        :currentTreeID="currentTreeID"
        :bg="data && data.bg ? data.bg : null"
        :ed="data && data.ed ? data.ed : null"
        type="newWordDetail"
        :isPhone="isPhone"
      />
    </div>
    <audio ref="newwordAudio" />
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import WordPhraseDetail from "./components/WordPhraseDetail.vue";
import AudioLine from "../preview/AudioLine.vue";
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import OneSentenceTemp from "./components/OneSentenceTemp.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    WordPhraseDetail,
    AudioLine,
    Soundrecord,
    OneSentenceTemp
  },
  props: [
    "curQue",
    "themeColor",
    "currentTreeID",
    "indexs",
    "indexss",
    "indexStr",
    "TaskModel",
    "judgeAnswer",
    "isPhone"
  ],
  data() {
    //这里存放数据
    return {
      wordShow: this.curQue.hasOwnProperty("isWordShow")
        ? this.curQue.isWordShow
        : true,
      data: null,
      detailShow: false,
      detailIndex: 0,
      audio: new Audio(),
      playClass: "",
      mp3_index: -1,
      playWord: null,
      optionRes: [],
      mp3List: [],
      isSuccess: false,
      loading: false,
      mp3: "",
      curTime: 0,
      stopAudioS: false,
      ed: null,
      chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"]
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    currentTreeID: {
      handler: function() {
        this.mp3_index = -1; // 全文预览
        this.optionRes = []; // 显示单词和短语
        this.mp3List = []; // 语音练习
        this.initData();
      },
      deep: true
    }
  },
  //方法集合
  methods: {
    handleChange(val) {},
    palyAudio(sIndex) {
      let _this = this;
      _this.stopAudio();
      let node = document.getElementById("word" + _this.indexStr + sIndex);
      let mp3 = node.src;
      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          if (item.src != mp3) {
            item.pause();
          }
        });
      }
      _this.playWord = node;
      if (node) {
        this.mp3_index = sIndex;
        node.play();
      }
      this.handleListenPlay(sIndex);
    },
    handleListenPlay(sIndex) {
      let _this = this;
      if (_this.playWord) {
        let _this = this;
        _this.playWord.addEventListener("play", function() {
          _this.playClass = "nn";
        });
        _this.playWord.addEventListener("pause", function() {
          _this.mp3_index = -1;
          _this.playClass = "";
        });
        _this.playWord.addEventListener("ended", function() {
          _this.mp3_index = -1;
          _this.playClass = "";
        });
      }
    },
    // 打开单词详情
    showDetail(item) {
      this.data = null;
      this.data = item;
      this.detailShow = true;
      this.detailIndex = item.sIndex;
    },

    // 关闭单词详情
    closeWordShow(val) {
      this.detailShow = val;
    },
    changeDetailIndex(val) {
      let _this = this;
      if (val == "last") {
        _this.detailIndex--;
      } else {
        _this.detailIndex++;
      }
      _this.data = null;
      _this.data = _this.optionRes[_this.detailIndex];
      //_this.getWordLiju(_this.data.new_word);
    },

    playNewwords() {
      let _this = this;
      if (_this.playWord) {
        _this.playWord.pause();
      }
      if (_this.playClass) {
        _this.$refs.newwordAudio.pause();
        // _this.mp3_index = -1;
        _this.playClass = "";
      } else {
        let mp3_index = _this.mp3_index == -1 ? 0 : _this.mp3_index;
        let leg = _this.mp3List.length;
        let mp3 = _this.mp3List[mp3_index].mp3_list[0].id;
        _this.mp3_index = _this.mp3List[mp3_index].sIndex;
        _this.handlePlayVoice(mp3);
        _this.$refs.newwordAudio.addEventListener("ended", function() {
          setTimeout(() => {
            if (_this.playClass != "nn") {
              if (mp3_index < leg - 1) {
                if (_this.playClass) {
                  mp3_index = mp3_index + 1;
                  _this.mp3_index = _this.mp3List[mp3_index].sIndex;
                  mp3 =
                    _this.mp3List[mp3_index].mp3_list.length > 0 &&
                    _this.mp3List[mp3_index].mp3_list[0].id;
                  if (mp3) {
                    _this.handlePlayVoice(mp3);
                  }
                }
              } else {
                _this.mp3_index = -1;
                _this.playClass = "";
              }
            }
          }, 1000);
        });
      }
    },
    handlePlayVoice3(mp3) {
      let _this = this;
      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          if (item.src != mp3) {
            item.pause();
          }
        });
      }
      if (!mp3) {
        return;
      }
      if (!_this.audio.paused) {
        _this.audio.pause();
      } else {
        _this.audio.pause();
        _this.audio.load();
        _this.audio.src = mp3;
        _this.audio.loop = false;
        _this.audio.play();
      }
    },
    handlePlayVoice(mp3) {
      let _this = this;

      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          if (item.src != mp3) {
            item.pause();
          }
        });
      }
      if (!mp3) {
        return;
      }
      // setTimeout(() => {
      //_this.$refs.newwordAudio.pause();
      _this.$refs.newwordAudio.src = mp3;
      //_this.$refs.newwordAudio.load();
      _this.$refs.newwordAudio.play();
      // }, 1000);
    },
    stopAudio() {
      this.$refs.newwordAudio.pause();
    },
    initData() {
      let _this = this;
      if (this.curQue.type == "NewWord_chs") {
        let resIndex = 0;
        let optionRes = [];
        let mp3List = [];
        let itemNumber = 0;
        let Bookanswer = [];
        this.curQue.option.forEach((item, index) => {
          optionRes = optionRes.concat(item);
          Bookanswer.push([]);
          item.forEach((sItem, sIndex) => {
            sItem.mIndex = sIndex;
            sItem.sIndex = resIndex;
            resIndex++;
            sItem.def_str =
              sItem.definition_list.length > 0
                ? sItem.definition_list.join("; ")
                : "";
            if (sItem.mp3_list[0]) {
              mp3List.push(sItem);
            }
            if (_this.curQue.wordTime && _this.curQue.wordTime[itemNumber]) {
              sItem.bg = _this.curQue.wordTime[itemNumber].bg;
              sItem.ed = _this.curQue.wordTime[itemNumber].ed;
            }
            itemNumber++;
            Bookanswer[index].push({
              recordList: []
            });
          });
        });
        this.optionRes = JSON.parse(JSON.stringify(optionRes));
        this.mp3List = mp3List;
        if (!this.curQue.Bookanswer) {
          this.$set(this.curQue, "Bookanswer", Bookanswer);
        }
      }
      if (this.curQue.hasOwnProperty("conDetail")) {
        if (this.curQue.conDetail.wordsList.length > 0) {
          this.curQue.conDetail.wordsList.forEach((sItem, sIndex) => {
            this.mergeWordSymbol(sItem);
            sItem.fontColor = "rgba(255, 255, 255, 1)";
            sItem.fontSize = "16px";
            sItem.fontWeight = "bold";
          });
        }
        this.$set(this.curQue.conDetail, "config", {
          fontColor: "#fff",
          fontFamily:
            "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif, alabo",
          fontSize: "16px",
          fontWeight: "bold"
        });
      }
    },
    //词和标点合一起
    mergeWordSymbol(sItem) {
      if (this.titleChsFhList.indexOf(sItem.chs) > -1) {
        sItem.isShow = false;
      } else {
        sItem.isShow = true;
      }
    },
    handleChangeTab() {
      this.wordShow = !this.wordShow;
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    //点击播放某个句子
    handleChangeTime(time, edTime) {
      let _this = this;
      _this.curTime = time;
      _this.stopAudioS = true;
      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime;
    },
    handleListenRead(playFlag) {
      this.stopAudioS = playFlag;
    },
    emptyEd() {
      this.ed = null;
    },
    handleWav(list, tmIndex, tmsIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      tmsIndex = tmsIndex ? tmsIndex : 0;
      this.$set(this.curQue.Bookanswer[tmIndex][tmsIndex], "recordList", list);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.$refs.newwordAudio.addEventListener("play", function() {
      _this.playClass = "active";
    });
    _this.$refs.newwordAudio.addEventListener("pause", function() {
      //_this.playClass = "";
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.NPC-zhedie {
  width: 780px;
  margin-bottom: 24px;
  .aduioLine-box {
    margin-bottom: 8px;
  }
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }
  .NPC-word-list {
    background: #f7f7f7;
  }
  .NPC-word-table {
    width: 100%;
    > .NPC-word-tr {
      background: #fff;
      border-radius: 8px;

      margin-bottom: 8px;

      .NPC-word-row {
        cursor: pointer;
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start;
        padding: 8px 13px 8px 12px;
        border-radius: 8px;
        &.active {
          background: linear-gradient(
              0deg,
              rgba(0, 0, 0, 0.08),
              rgba(0, 0, 0, 0.08)
            ),
            #ffffff;
        }
        > span {
          font-size: 16px;
          line-height: 150%;
          color: #000000;
        }
      }
      .tabNum-box {
        position: relative;
        .star-label {
          position: absolute;
          right: -6px;
          top: 1px;
          width: 6px;
          height: 6px;
        }
      }
      .tabNum {
        background: #de4444;
        text-align: center;
        width: 16px;
        height: 16px;
        color: #ffffff;
        border-radius: 50%;
        font-size: 12px;
        font-family: "robot", "alabo";
        line-height: 16px;
        margin-top: 4px;
        margin-left: 8px;
        display: block;
      }
      .NPC-word-tab-box {
        width: 240px;
        span {
          display: block;
          width: 100%;
          color: #000000;
          margin: 2px 0;
        }
      }
      .NPC-word-tab-common {
        padding-left: 8px;
        width: 125px;
        box-sizing: border-box;
      }
      .NPC-word-tab-pinyin {
        font-family: "GB-PINYINOK-B";
        // white-space: nowrap;
        font-size: 12px;
        word-break: break-word;
        &.NPC-word-tab-pinyin-red {
          color: #e35454;
        }
        &.NPC-word-tab-pinyin-green {
          color: #24b99e;
        }
        &.NPC-word-tab-pinyin-brown {
          color: #bd8865;
        }
      }
      .NPC-word-tab-word {
        font-family: "FZJCGFKTK";
        white-space: nowrap;
        font-size: 16px;
        &.NPC-word-tab-word-red {
          color: #e35454;
        }
        &.NPC-word-tab-word-green {
          color: #24b99e;
        }
        &.NPC-word-tab-word-brown {
          color: #bd8865;
        }
        &-break {
          white-space: normal;
          word-break: break-word;
        }
      }
      .NPC-word-tab-cixing {
        font-family: "robot", "alabo";
        // width: 48px;
        width: 60px;
        word-break: break-word;
        box-sizing: border-box;
        text-align: left;
        // font-style: italic;  // 要求改为正体
        &.NPC-word-tab-cixing-red {
          color: #e35454;
        }
        &.NPC-word-tab-cixing-green {
          color: #24b99e;
        }
        &.NPC-word-tab-cixing-brown {
          color: #bd8865;
        }
        &.hasCn {
          font-size: 13px;
        }
      }
      .NPC-word-tab-def {
        flex: 1;
        font-family: "robot", "alabo";
        word-break: break-word;
        box-sizing: border-box;
        white-space: pre-wrap;
        &.NPC-word-tab-def-red {
          color: #e35454;
        }
        &.NPC-word-tab-def-green {
          color: #24b99e;
        }
        &.NPC-word-tab-def-brown {
          color: #bd8865;
        }
      }
      .collocation {
        width: 100%;
        display: flex;
        padding-top: 8px;
        > span {
          color: #000;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          flex-shrink: 0;
        }
        > div b {
          display: block;
        }
        > b,
        > div b {
          flex: 1;
          color: rgba(0, 0, 0, 0.65);
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          font-family: "robot", "FZJCGFKTK", "alabo";
        }
      }
    }
  }
  .NPC-play-btn-brown {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-play-btn-green {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-play-btn-red {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-word-list {
    padding: 20px 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
  }
  .detail-icon {
    width: 24px;
    height: 24px;
    display: block;
    cursor: pointer;
    opacity: 0.5;
  }
  .play-btn {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    background: url("../../../assets/NPC/play-red.png") center no-repeat;
    background-size: cover;
    &.active {
      background-image: url("../../../assets/NPC/icon-voice-play-red.png");
      background-size: cover;
    }
  }
  &-phone {
    width: 100%;
  }
}

.NPC-Big-Book-preview-green {
  .NPC-zhedie {
    .play-btn {
      background: url("../../../assets/NPC/play-green.png") center no-repeat;
      background-size: cover;
      &.active {
        background-image: url("../../../assets/NPC/icon-voice-play-green.png");
        background-size: cover;
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-zhedie {
    .play-btn {
      background: url("../../../assets/NPC/play-brown.png") center no-repeat;
      background-size: cover;
      &.active {
        background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
        background-size: cover;
      }
    }
  }
}
@keyframes firstrotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(180deg);
  }
}
@keyframes huifuRotate {
  0% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
.luyin-box-wordphrase {
  height: 24px;
}
</style>
<style lang="scss">
.NPC-zhedie {
  .topTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 16px;
    height: 48px;
    background: #e35454;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px 8px 0 0;

    .NPC-top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .NPC-topTitle-text {
        font-family: "sourceR";
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin-right: 8px;
        white-space: pre;
      }
      .NPC-play-all {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-white.png") no-repeat left top;
        background-size: 100% 100%;
        cursor: pointer;
        &.active {
          width: 16px;
          height: 16px;
          background: url("../../../assets/NPC/icon-voice-play-white.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .NPC-top-right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      &-text {
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        color: #ffffff;
      }
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    img {
      width: 24px;
      height: 24px;
    }
    .rotate {
      animation-name: firstrotate;
      animation-direction: 2s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
  .topTitleWhite {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 16px;
    height: 48px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px 8px 0 0;

    .NPC-top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .NPC-topTitle-text {
        font-family: "sourceR";
        font-size: 16px;
        color: #000;
        font-weight: bold;
        margin-right: 8px;
      }
      .NPC-play-all {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
        background-size: 100% 100%;
        cursor: pointer;
        &.active {
          width: 16px;
          height: 16px;
          background: url("../../../assets/NPC/icon-voice-play-red.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .NPC-top-right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      &-text {
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        color: #000;
      }
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    img {
      width: 24px;
      height: 24px;
    }
    .rotate {
      animation-name: firstrotate;
      animation-direction: 2s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .el-slider__button {
    width: 8px;
    height: 8px;
  }
  .el-slider__runway {
    margin: 0;
    padding: 0;
  }
  .el-slider {
    position: relative;
    // top: -3px;
  }
  .el-collapse {
    background: #f7f7f7;
    box-sizing: border-box;
    border-radius: 8px;
  }

  .el-collapse-item__wrap {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 0;
    background: #f7f7f7;
    border-radius: 0px 0px 8px 8px;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .el-table__row {
    padding: 4px 0;
  }
}
.NPC-Big-Book-preview-green {
  .NPC-zhedie {
    .topTitle {
      background: #24b99e !important;
    }
    .tabNum {
      background: #24b99e !important;
    }
    .topTitleWhite {
      .NPC-top-left {
        .NPC-play-all {
          background: url("../../../assets/NPC/play-green.png") no-repeat left
            top;
          background-size: 100% 100%;
          &.active {
            background: url("../../../assets/NPC/play-green.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-zhedie {
    .topTitle {
      background: #bd8865 !important;
    }
    .tabNum {
      background: #bd8865 !important;
    }
    .topTitleWhite {
      .NPC-top-left {
        .NPC-play-all {
          background: url("../../../assets/NPC/play-brown.png") no-repeat left
            top;
          background-size: 100% 100%;
          &.active {
            background: url("../../../assets/NPC/play-brown.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>