HM21St_Page_User/src/views/bookShelf/components/InnerTextSearch.vue

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="articleInfo">
    <template
      v-if="
        resArr[0] &&
        resArr[0].wordsList[0] &&
        resArr[0].wordsList[0].hasOwnProperty('pno') &&
        resArr[0].wordsList[0].pno === 0
      "
    >
      <h2 :class="['NNPE-words']">
        <span
          v-for="(itemR, indexR) in resArr[0].wordsList"
          :key="indexR"
          :style="{
            color: colorObj.titleColor,
            fontSize: titleFontsize + 'px',
            lineHeight: titleFontsize + 8 + 'px',
            marginRight: itemR.tokens[9] === '' ? '' : '10px',
            fontWeight: '700',
            cursor: 'pointer',
          }"
          :class="[
            itemR.tokens[9] === '' ? 'marginRight' : '',
            itemR.marginRight ? 'marginSingleRight' : '',
          ]"
        >
          <!-- <template v-if="itemR.isShow"> -->
          <span
            class="NNPE-chs"
            :class="[
              itemR.type,
              itemR.tokens[9] === '' ? 'marginRight' : '',
              itemR.marginRight ? 'marginSingleRight' : '',
              itemR.highIndex ? 'fontWeight' : '',
              itemR.color ? 'wordSelected' : '',
            ]"
            :style="{
              background: itemR.color ? itemR.color : '',
              borderColor: itemR.borderColor ? itemR.borderColor : '',
            }"
            >{{ itemR.tokens[2] }}</span
          >
          <!-- <span
              class="NNPE-chs NNPE-chs-both"
              v-if="
                resArr[0].wordsList[indexR + 1] &&
                resArr[0].wordsList[indexR + 1].tokens[2] &&
                enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1
              "
              :class="[
                resArr[0].wordsList[indexR + 1].type,
                resArr[0].wordsList[indexR + 1].tokens[8] === ''
                  ? 'marginLeft'
                  : '',
                resArr[0].wordsList[indexR + 1].marginRight
                  ? 'marginSingleRight'
                  : '',
                resArr[0].wordsList[indexR + 1].highIndex ? 'fontWeight' : '',
                resArr[0].wordsList[indexR + 1].color ? 'wordSelected' : '',
              ]"
              :style="{
                background: resArr[0].wordsList[indexR + 1].color
                  ? resArr[0].wordsList[indexR + 1].color
                  : '',
                borderColor: resArr[0].wordsList[indexR + 1].borderColor
                  ? resArr[0].wordsList[indexR + 1].borderColor
                  : '',
              }"
              >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
            >
          </template> -->
          <!-- {{itemR.tokens[2]}} -->
        </span>
      </h2>
    </template>
    <h2 v-else>
      <span
        :style="{
          color: colorObj.titleColor,
          fontSize: titleFontsize + 'px',
          lineHeight: titleFontsize + 8 + 'px',
          marginRight: '10px',
          fontWeight: '700',
          cursor: 'pointer',
          wordBreak: 'break-word',
          textAlign: 'center',
        }"
        >{{ articleInfo.art_title }}</span
      >
    </h2>
    <h6
      class="nnpe-article-author"
      :style="{
        color: colorObj.sourceColor,
        fontSize: '14px',
        lineHeight: '22px',
        fontWeight: '400',
      }"
    >
      {{
        articleInfo.art_author +
        " · " +
        articleInfo.study_phase_name +
        "版 · 第 " +
        articleInfo.iss_no +
        " 期 · " +
        articleInfo.release_date +
        " · " +
        articleInfo.chn_item +
        (articleInfo.page_no_in_pub ? " · P" + articleInfo.page_no_in_pub : "")
      }}
    </h6>
    <div class="audio-box">
      <div
        class="aduioLine-content aduioLine-box"
        v-if="articleInfo.art_sound_url"
        :style="{
          background: colorObj.audiobg,
          borderColor: colorObj.audioBorder,
        }"
      >
        <AudioLine
          audioId="artNormalAudio"
          :mp3="articleInfo.art_sound_url"
          :getCurTime="getCurTime"
          ref="audioLine"
          :mp3Source="articleInfo.sound_type === 2 ? 'tts' : 'mp3'"
          :colorObj="colorObj"
        />
        <svg-icon
          icon-class="icon-wrapper"
          class="wrapper"
          @click="fullScreen"
          :style="{ color: colorObj.audioBtnColor }"
        ></svg-icon>
      </div>
    </div>
    <template v-if="resArr.length > 0">
      <div class="table-box">
        <div
          :class="['NNPE-detail']"
          v-for="(item, index) in resArr"
          :key="'detail' + index"
        >
          <div class="wordsList-box">
            <div class="nnpe-sentence-box">
              <div
                v-for="(pItem, pIndex) in item.wordsList"
                :key="'wordsList' + pIndex"
              >
                <template v-if="pItem.pno !== 0">
                  <!-- <template v-if="pItem.isShow"> -->
                  <div :class="['NNPE-words']">
                    <span
                      class="NNPE-chs"
                      :class="[
                        pItem.noBefore ? 'marginLeft' : '',
                        pItem.noAfter ? 'marginRight' : '',
                        pItem.marginRight ? 'marginSingleRight' : '',
                        pItem.color ? 'wordSelected' : '',
                      ]"
                      :style="{
                        fontSize: wordFontsize + 'px',
                        color: colorObj.contentColor,
                        background: pItem.color ? pItem.color : '',
                        borderColor: pItem.borderColor ? pItem.borderColor : '',
                      }"
                      >{{ pItem.tokens[2] }}</span
                    >
                    <!-- <span
                        class="NNPE-chs NNPE-chs-both"
                        v-if="
                          item.wordsList[pIndex + 1] &&
                          item.wordsList[pIndex + 1].tokens[2] &&
                          enFhList.indexOf(
                            item.wordsList[pIndex + 1].tokens[2]
                          ) > -1
                        "
                        :class="[
                          item.wordsList[pIndex + 1].tokens[8] === ''
                            ? 'marginLeft'
                            : '',
                          item.wordsList[pIndex + 1].marginRight
                            ? 'marginSingleRight'
                            : '',
                          item.wordsList[pIndex + 1].color
                            ? 'wordSelected'
                            : '',
                        ]"
                        :style="{
                          fontSize: wordFontsize + 'px',
                          color: colorObj.contentColor,
                          background: item.wordsList[pIndex + 1].color
                            ? item.wordsList[pIndex + 1].color
                            : '',
                          borderColor: item.wordsList[pIndex + 1].borderColor
                            ? item.wordsList[pIndex + 1].borderColor
                            : '',
                        }"
                        >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                      > -->
                  </div>
                  <!-- </template> -->
                </template>
              </div>
            </div>
            <template v-if="articleImg && articleImg[index]">
              <figure
                v-for="(itemI, indexI) in articleImg[index]"
                :key="indexI"
              >
                <el-image
                  :width="itemI.width"
                  :height="itemI.height"
                  :src="itemI.src"
                  fit="contain"
                  :preview-src-list="[itemI.src]"
                ></el-image>
              </figure>
            </template>
          </div>
        </div>
      </div>
    </template>

    <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
    <div class="search-box" v-if="showSearch">
      <div id="dragDrop" @mousedown="positionChange" class="search-show-btn">
        <span></span>
        <b>注：点击灰条后按住灰条可拖动位置</b>
      </div>

      <div class="search">
        <div class="select-result" @click="showSearchColorList">
          <span
            class="selectBg"
            :style="{ background: colorValue, borderColor: borderColorValue }"
          ></span>
          <i class="tri el-icon-arrow-down"></i>
        </div>
        <input
          class="searchVal"
          v-model="searchVal"
          @keyup.enter="onSearch"
          :style="{ color: colorValue }"
          @blur="searchVal = searchVal.trim()"
          @keydown="searchValChange"
        />
        <i class="search-icon" style="cursor: pointer" @click="onSearch"
          >查找</i
        >
        <ul class="searchColorList" v-if="isSCL">
          <li
            v-for="(item, index) in searchColorList"
            :key="'search' + index"
            @click="selectSearchColor(item, index)"
          >
            <span
              class="searchColor"
              :style="{ background: item, borderColor: borderColorList[index] }"
            ></span>
          </li>
          <li class="close" @click="closeSearchColor">关闭</li>
        </ul>
      </div>
      <div class="result-left-numberclose" v-if="searchWordShow">
        <div>
          <span>
            <span
              style="
                font-size: 12px;
                line-height: 20px;
                color: rgba(146, 156, 168, 1);
              "
            >
              匹配 {{ SearchwordNumber }} 次
            </span>
          </span>
          <span class="resule-right-btn" @click="clearSelected('all')"
            ><i class="el-icon-close"></i>清除标记</span
          >
        </div>
        <ul class="search-list">
          <li
            v-for="(itemS, indexs) in searchResultList.slice().reverse()"
            :key="indexs"
          >
            <p>
              <span
                class="searchColor"
                :style="{ background: itemS.bg, borderColor: itemS.border }"
              ></span>
              <b>{{ itemS.text }}</b>
              <span>{{ itemS.number }}</span>
              <i>{{ itemS.percent }}%</i>
              <i
                class="el-icon-close"
                @click="
                  deleteSearchList(
                    searchResultList.length - 1 - indexs,
                    itemS.text
                  )
                "
              ></i>
            </p>
            <label
              :style="{ width: itemS.percent + '%', background: itemS.border }"
            ></label>
          </li>
        </ul>
      </div>
    </div>
    <div class="voice-full-screen" :id="'screen-' + mathNum">
      <Voicefullscreen
        v-if="isFull"
        :curQue="articleInfo"
        :sentIndex="0"
        :mp3="articleInfo.art_sound_url"
        :likeSentencelist="likeSentencelist"
        @exitFullscreen="exitFullscreen"
        @changeIsFull="changeIsFull"
        :likeWord="likeWord"
      />
    </div>
  </div>
</template>

<script>
import AudioLine from "@/components/common/AudioLine.vue";
import Voicefullscreen from "./Voicefullscreen.vue";
export default {
  name: "ArticleView",
  props: [
    "titleFontsize",
    "wordFontsize",
    "colorObj",
    "articleType",
    "articleInfo",
    "likeSentencelist",
    "likeWord",
    "articleImg",
  ],
  components: {
    AudioLine,
    Voicefullscreen,
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      enFhList: [
        ",",
        ".",
        ";",
        "?",
        "!",
        ":",
        ">",
        "<",
        "'",
        "’",
        "n't",
        "n’t",
        "n’ts",
        "n‘t",
        "'t",
        "’t",
        "‘t",
        "'s",
        "’s",
        "‘s",
        "'m",
        "’m",
        "‘m",
        "'re",
        "’re",
        "‘re",
        "'d",
        "’d",
        "‘d",
        "'ve",
        "’ve",
        "‘ve",
        ")",
        "'ll",
        "’ll",
        "‘ll",
        "”",
      ],
      paraIndex: -1, //段落索引
      sentIndex: -1, // 句子索引
      showSearch: false,
      colorValue: "#F5D90A",
      borderColorValue: "#FEF2A4",
      colorIndex: 0,
      searchVal: "",
      isSCL: false,
      searchColorList: [
        "#F5D90A",
        "#FA934E",
        "#65BA75",
        "#3DB9CF",
        "#D09E72",
        "#99D52A",
        "#BE93E4",
        "#F2555A",
        "#F04F88",
        "#306EFF",
      ],
      borderColorList: [
        "#FEF2A4",
        "#FFDCC3",
        "#CEEBCF",
        "#C4EAEF",
        "#EFDDCC",
        "#D7F2B0",
        "#EDDBF9",
        "#EB9091",
        "#E58FB1",
        "#5E89EF",
      ],
      SearchwordNumber: 0,
      searchWord: [],
      searchWordShow: false,
      currentcolorValue: [],
      currentBorderColorValue: [],
      searchResultList: [], // 匹配结果list
      alreadySelectIndex: 0,
      isFull: false,
      mathNum: Math.random().toString(36).substr(2),
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleData() {
      let resArr = [];
      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
      let leg =
        articleInfo.art_corpus_data.sentList[
          articleInfo.art_corpus_data.sentList.length - 1
        ].pno;
      for (let i = 0; i < leg + 1; i++) {
        let obj = {
          wordsList: [],
          timeList: [],
        };
        resArr.push(obj);
      }
      articleInfo.art_corpus_data.sentList.forEach((item, index) => {
        item.tokens.forEach((items, indexs) => {
          let obj = {
            sent_id: item.id,
            sno: item.sno - 1,
            pno: item.pno,
            text: item.text,
            tokens: items,
            wIndex: indexs,
            isShow: this.enFhList.indexOf(items[2]) == -1,
            marginRight: indexs === item.tokens.length - 1,
            noBefore: indexs !== 0 && !items[8],
            noAfter: !items[9],
            color: "",
            borderColor: "",
          };
          resArr[item.pno].wordsList.push(obj);
        });
        if (
          articleInfo.art_sound_srt_data &&
          articleInfo.art_sound_srt_data.sents &&
          articleInfo.art_sound_srt_data.sents[index]
        ) {
          resArr[item.pno].timeList.push(
            articleInfo.art_sound_srt_data.sents[index]
          );
        }
      });
      this.resArr = resArr;
    },
    changeShow() {
      this.showSearch = !this.showSearch;
    },
    showSearchColorList() {
      this.isSCL = !this.isSCL;
    },
    closeSearchColor() {
      this.isSCL = false;
    },
    selectSearchColor(item, index) {
      this.isSCL = false;
      this.colorValue = item;
      this.borderColorValue = this.borderColorList[index];
      this.colorIndex = index;
    },
    searchValChange(e) {
      if (this.searchVal.length == 1 && e.keyCode == 8) {
        if (
          this.colorIndex == this.alreadySelectIndex + 1 ||
          this.searchWord.length == 0
        ) {
          this.alreadySelectIndex = 0;
          return;
        }
        this.colorIndex = this.alreadySelectIndex + 1;
        this.colorValue = this.searchColorList[this.colorIndex];
        this.borderColorValue = this.borderColorList[this.colorIndex];
      }
    },
    onSearch() {
      if (!this.searchVal) {
        return;
      }
      this.searchWordShow = true;
      let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
      if (index == -1) {
        this.searchWord.push(this.searchVal.toLowerCase());
        this.currentcolorValue.push(this.colorValue);
        this.currentBorderColorValue.push(this.borderColorValue);
      } else {
        // this.currentcolorValue[index] = this.colorValue;
        this.$set(this.currentcolorValue, index, this.colorValue);
        this.$set(this.currentBorderColorValue, index, this.borderColorValue);
      }
      this.type = "";
      this.calculateSearchwordNumber();
      // this.searchVal = "";
    },
    // 计算匹配个数
    async calculateSearchwordNumber() {
      let arr = [];
      //   await this.searchWord.forEach((item) => {
      //     this.calculateIndex(this.textContent, item).then((res) => {
      //       arr.push(res);
      //     });
      //   });
      this.searchResultList = [];
      this.SearchwordNumber = 0;
      // 匹配高亮
      this.searchWord.forEach((searchItem, i) => {
        let SearchwordNumber = 0;
        this.resArr.forEach((item) => {
          item.wordsList.forEach((items, indexs) => {
            // 字符串拼接相等即为匹配相同
            let searchArr = searchItem.trim().replace(/\s+/g, " ").split(" ");
            if (
              items.tokens[4].toLowerCase() == searchArr[0] ||
              items.tokens[2].toLowerCase() == searchArr[0]
            ) {
              let mateFlag = true;
              searchArr.forEach((itemi, indexi) => {
                if (
                  itemi.trim() ===
                    item.wordsList[indexs + indexi].tokens[4]
                      .toLowerCase()
                      .trim() ||
                  itemi.trim() ===
                    item.wordsList[indexs + indexi].tokens[2]
                      .toLowerCase()
                      .trim()
                ) {
                } else {
                  mateFlag = false;
                }
              });
              if (mateFlag) {
                SearchwordNumber++;
                searchArr.forEach((itemi, indexi) => {
                  item.wordsList[indexs + indexi].color =
                    this.currentcolorValue[i];
                  item.wordsList[indexs + indexi].borderColor =
                    this.currentBorderColorValue[i];
                });
              }
            }
          });
        });
        if (SearchwordNumber > 0) {
          this.searchResultList.push({
            number: SearchwordNumber,
            percent: (
              (SearchwordNumber /
                this.articleInfo.art_corpus_data.artStatInfo.wdc) *
              100
            ).toFixed(2),
            text: searchItem,
            border: this.currentBorderColorValue[i],
            bg: this.currentcolorValue[i],
          });
        }
        this.SearchwordNumber = SearchwordNumber; //高亮最后一次
        if (SearchwordNumber > 0 && i === this.searchWord.length - 1) {
          this.alreadySelectIndex++;
        }
      });
    },
    // 找出对应字符的索引
    calculateIndex(txt, key) {
      return new Promise((reslove, reject) => {
        // 去除标点
        let keylength = key.length;
        let arr = [];
        for (let i = 0; i < txt.length; i++) {
          if (txt[i] == key[0]) {
            arr.push(i);
          }
        }
        let indexArr = [];
        arr.forEach((item) => {
          let arr = [];
          for (let i = 0; i < keylength; i++) {
            if (txt[item + i] == key[i]) {
              arr.push(item + i);
            } else {
              arr = [];
            }
          }
          if (arr.length > 0) {
            indexArr.push(arr);
          }
        });
        reslove(indexArr);
      });
    },
    clearSelected(all) {
      let _this = this;
      _this.type = "";
      _this.searchVal = "";
      _this.searchWord = [];
      _this.currentcolorValue = [];
      _this.currentBorderColorValue = [];
      _this.SearchwordNumber = 0;
      if (all) {
        this.seleLevelMapList = [];
        _this.searchWordShow = false;
        sessionStorage.setItem("tablehighlight", false);
      }
      this.colorIndex = 0;
      this.colorValue = this.searchColorList[this.colorIndex];
      this.borderColorValue = this.borderColorList[this.colorIndex];
      this.searchResultList = [];
      this.closeSearchhighlight();
    },
    // 取消搜索高亮
    closeSearchhighlight() {
      this.resArr.forEach((item) => {
        // item.forEach((items) => {
        item.wordsList.forEach((itemss) => {
          itemss.color = null;
        });
        // });
      });
    },
    deleteSearchList(index, text) {
      this.searchResultList.splice(index, 1);
      this.currentcolorValue.splice(index, 1);
      this.searchWord.splice(index, 1);
      this.currentBorderColorValue.splice(index, 1);
      this.resArr.forEach((item) => {
        item.wordsList.forEach((items) => {
          if (
            items.tokens[4].toLowerCase() == text ||
            items.tokens[2].toLowerCase() == text
          ) {
            items.color = "";
            items.borderColor = "";
          }
        });
      });
    },
    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        item.pause();
      });
    },
    pauseVideo() {
      let video = document.getElementsByTagName("video");
      video.forEach((item) => {
        item.pause();
      });
    },
    //语音全屏
    fullScreen() {
      this.pauseAudio();
      this.pauseVideo();
      this.isFull = true;
      this.goFullscreen();
    },
    goFullscreen() {
      let id = "screen-" + this.mathNum;
      var 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;
    },
    positionChange() {
      // 获取拖动时点击的元素（子div）
      const el = document.getElementById("dragDrop");
      //获取拖动时移动的元素（父div）
      let p_el = el.parentElement;
      //添加鼠标按下监听事件
      document.getElementById("dragDrop").addEventListener(
        "mousedown",
        function (e) {
          var disx = e.pageX - p_el.offsetLeft;
          var disy = e.pageY - p_el.offsetTop;

          document.onmousemove = function (e) {
            p_el.style.left = e.pageX - disx + "px";
            p_el.style.top = e.pageY - disy + "px";
            el.style.cursor = "grabbing";
          };
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
            el.style.cursor = "grab";
          };
        },
        true
      );
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.articleInfo) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .nnpe-article-author {
    margin: 24px 0;
    text-align: center;
  }
  h2 {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    &.sentActive {
      background: rgba(24, 144, 255, 0.1);
    }
    &.overActive {
      background: rgba(0, 0, 0, 0.06);
    }
    .wordActive {
      color: #175dff !important;
    }
    .wordSelected {
      border-radius: 4px;
      border: 1px solid #fef2a4;
      box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
        0px 4px 5px 0px rgba(0, 0, 0, 0.08),
        0px 1px 10px 0px rgba(0, 0, 0, 0.05);
    }
  }
  .table-box {
    // background: #f7f7f7;
    // border-top: 1px solid rgba(0, 0, 0, 0.1);
    :last-child {
      :last-child.wordsList-box {
        padding-bottom: 40px;
      }
    }
    .wordsList-box {
      flex: 1;
      padding: 6px 0 12px 0;
      .nnpe-sentence-box {
        display: flex;
        flex-flow: wrap;
      }
      > img {
        max-width: 50%;
        display: block;
        padding: 16px 0;
        margin: 0 auto;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    display: flex;
    .NNPE-words {
      float: left;
      padding: 0;
      &.noPadding {
        padding: 0;
      }
      &.sentActive {
        background: rgba(24, 144, 255, 0.1);
      }
      &.overActive {
        background: rgba(0, 0, 0, 0.06);
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      > span {
        float: left;
        cursor: pointer;
        &.NNPE-chs {
          //   font-size: 24px;
          font-family: "Smartisan";
          line-height: 150%;
          color: #000000;
          padding: 0 3px;
          &.wordActive {
            color: #175dff !important;
          }
          &.marginRight {
            padding-right: 0;
          }
          &.marginLeft {
            padding-left: 0;
          }
          &.marginSingleRight {
            padding-right: 3px;
          }
          &.wordSelected {
            border-radius: 4px;
            border: 1px solid #fef2a4;
            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
              0px 4px 5px 0px rgba(0, 0, 0, 0.08),
              0px 1px 10px 0px rgba(0, 0, 0, 0.05);
          }
        }
        &.padding {
          padding: 0 3px;
          cursor: pointer;
        }
      }
    }
  }
}
.audio-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aduioLine-box {
  width: 516px;
  height: 48px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 8px 24px;
  .wrapper {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #175dff;
    margin-left: 8px;
  }
  .Audio {
    width: 430px;
  }
}
.search-box {
  position: fixed;
  top: 200px;
  width: 298px;
  border-radius: 8px;
  border: 1px solid #e5e6eb;
  background: #fff;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08),
    0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
  // min-height: 204px;
  right: calc((100% - 1000px) / 2);
  padding: 0 16px 16px;
  .search-show-btn {
    cursor: move;
    padding: 6px 0;
    span {
      border-radius: 4px;
      background: #d0d3d9;
      width: 48px;
      display: block;
      height: 4px;
      margin: 0 auto;
    }
    b {
      font-size: 11px;
      color: #d0d3d9;
    }
  }
  .search {
    position: relative;
    height: 40px;
    width: 100%;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    padding: 7px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .select-result {
      height: 24px;
      width: 57px;
      padding: 4px 11px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      cursor: pointer;
      .selectBg {
        width: 16px;
        height: 16px;
        background: #de4444;
        border-radius: 2px;
        border: 1px solid #fef2a4;
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
          0px 4px 5px 0px rgba(0, 0, 0, 0.08),
          0px 1px 10px 0px rgba(0, 0, 0, 0.05);
      }
      .tri {
        width: 10px;
        height: 10px;
        font-size: 10px;
        margin-left: 4px;
        // background: url("../../assets/teacherdev/down-icon.png") no-repeat
        // left top;
        // background-size: 100% 100%;
      }
    }
    .searchVal {
      font-weight: bold;
      width: 142px;
      border: 0;
      border-left: 1px solid #dddddd;
      box-sizing: border-box;
      outline: 0;
      padding-left: 12px;
    }
    .search-icon {
      position: absolute;
      right: 12px;
      display: block;
      color: #175dff;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
    .searchColorList {
      width: 58px;
      position: absolute;
      top: 38px;
      left: 0;
      border: 1px #d9d9d9 solid;
      background: #fff;
      list-style: none;
      padding: 0;
      margin: 0;
      z-index: 2;
      > li {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
        cursor: pointer;
        > span {
          width: 14px;
          height: 14px;
          border-radius: 2px;
          border: 1px solid #fef2a4;
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
            0px 4px 5px 0px rgba(0, 0, 0, 0.08),
            0px 1px 10px 0px rgba(0, 0, 0, 0.05);
        }
        &.close {
          font-size: 12px;
          border-top: 1px #d9d9d9 solid;
        }
      }
    }
  }
  .result-left-numberclose {
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    border-radius: 4px;
    background: #f7f8fa;
    padding: 8px;
    // min-height: 126px;
    > div {
      display: flex;
      justify-content: space-between;
    }
    .resule-right-btn {
      display: inline-block;
      border-radius: 3px;
      border: 1px solid#E5E6EB;
      background: #fff;
      cursor: pointer;
      height: 24px;
      padding: 2px 8px;
      color: var(--slate-10, #2f3742);
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      .el-icon-close {
        margin-right: 8px;
      }
    }
    .search-list {
      width: 100%;
      margin: 8px 0 0;
      padding: 0;
      max-height: 250px;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        padding: 1px 8px;
        margin: 2px 0;
        border-radius: 4px;
        background: #fff;
        position: relative;
        height: 34px;
        .searchColor {
          width: 12px;
          height: 12px;
          border-radius: 2px;
          border: 1px solid rgba(255, 255, 255, 0.4);
          background: #f5d90a;
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
            0px 4px 5px 0px rgba(0, 0, 0, 0.08),
            0px 1px 10px 0px rgba(0, 0, 0, 0.05);
        }
        p {
          position: absolute;
          width: 234px;
          height: 34px;
          left: 8px;
          top: 1px;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          z-index: 1;
        }
        b {
          color: #2f3742;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          width: 77px;
        }
        span {
          width: 20px;
          text-align: right;
        }
        i {
          text-align: right;
          width: 81px;
          padding: 0 4px;
          margin: 0;
          height: 34px;
          line-height: 34px;
          font-style: normal;
        }
        .el-icon-close {
          font-size: 16px;
          color: #929ca8;
          cursor: pointer;
          width: 16px;
          height: 16px;
          padding: 0;
          line-height: 16px;
        }
        label {
          position: absolute;
          top: 1px;
          right: 28px;
          border-radius: 3px;
          background: rgba(240, 192, 0, 0.16);
          display: block;
          height: 32px;
          z-index: 0;
        }
      }
    }
  }
}
</style>