精读阅读

src/components/common/AudioLine.vue

@@ -135,7 +135,7 @@ export default {
     "audio.playing": {
       handler(val) {
         this.$emit("playChange", val);
-        if (val) this.$emit("handleChangeStopAudio");
+        if (val) this.$emit("handleChangeStopAudio",this.audio.playing);
       },
     },
     mp3:{
@@ -214,6 +214,7 @@ export default {
       if (this.audio.playing) {
         this.$refs[audioId].pause();
         this.audio.playing = false;
+        this.$emit("handleChangeStopAudio",false);
         this.$emit("handleListenRead", false);
         this.isClick = false;
       } else {
@@ -222,7 +223,7 @@ export default {
           this.count++;
         }
         this.$refs[audioId].play();
-        this.$emit("handleChangeStopAudio");
+        this.$emit("handleChangeStopAudio",true);
         this.$emit("handleListenRead", true);
         this.isClick = true;
       }

src/components/common/AudioLine2.vue

@@ -0,0 +1,511 @@
+<template>
+  <div
+    :class="['AudioNNPE', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '']"
+  >
+    <div class="audioLine" v-if="!hideSlider">
+      <div class="playBox" @click="PlayAudio">
+        <div
+          class="play"
+          :class="[
+            audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+          ]"
+        ></div>
+      </div>
+
+      <template v-if="!isRepeat">
+        <el-slider
+          v-model="playValue"
+          :style="{ width: sliderWidth + 'px', height: '2px' }"
+          :format-tooltip="formatProcessToolTip"
+          @change="changeCurrentTime"
+        />
+        <span
+          ><template v-if="audio.playing">-</template
+          >{{
+            audio.maxTime
+              ? realFormatSecond(audio.maxTime - audio.currentTime)
+              : ""
+          }}</span
+        >
+      </template>
+        <el-popover
+            class="NNPE-popover"
+            placement="bottom"
+            width="446"
+            trigger="hover"
+            @show="showPopover(1)"
+            @hide="hidePopover"
+            v-if="audioData&&(audioData.script||audioData.translation)">
+            <template slot="reference">
+                <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
+                <img v-else class="icon_popover" src="../../../assets/NNPE/icon-popover.png" /> -->
+            </template>
+            <div class="popover-content">
+                <div class="popover-script" v-if="activeContent==1">
+                    {{audioData.script}}
+                    <div v-html="audioData.tinyscript" class="tiny-boxpopover-script"></div>
+                </div>
+                <div class="popover-script popover-translation" v-if="activeContent==2">
+                    {{audioData.translation}}
+                    <div v-html="audioData.tinytranslation" class="tiny-boxpopover-script"></div>
+                </div>
+                <div class="popover-bottom">
+                    <a :class="[activeContent==1?'active':'']" @click="activeContent=1">脚本</a>
+                    <a :class="[activeContent==2?'active':'']" @click="activeContent=2">译文</a>
+                </div>
+            </div>
+        </el-popover>
+    </div>
+    <div class="audioLine2" v-else>
+      <div
+        class="play-icon"
+        :class="[
+          audio.loading
+            ? 'loadBtn'
+            : audio.playing
+            ? 'playBtn-icon'
+            : 'pauseBtn-icon',
+          type == 'full' ? 'play-icon-big' : '',
+        ]"
+        @click="PlayAudio"
+      />
+        <el-popover
+            class="NNPE-popover"
+            placement="bottom"
+            width="446"
+            trigger="hover"
+            @show="showPopover(1)"
+            @hide="hidePopover"
+            v-if="audioData&&(audioData.script||audioData.translation)">
+            <template slot="reference">
+                <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
+                <img v-else class="icon_popover" src="../../../assets/NNPE/icon-popover.png" /> -->
+            </template>
+            <div class="popover-content">
+                <div class="popover-script" v-if="activeContent==1">
+                    {{audioData.script}}
+                </div>
+                <div class="popover-script popover-translation" v-if="activeContent==2">
+                    {{audioData.translation}}
+                </div>
+                <div class="popover-bottom">
+                    <a :class="[activeContent==1?'active':'']" @click="activeContent=1">脚本</a>
+                    <a :class="[activeContent==2?'active':'']" @click="activeContent=2">译文</a>
+                </div>
+            </div>
+        </el-popover>
+    </div>
+    <audio
+      :ref="audioId"
+      :src="mp3"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+      preload="meta"
+      :id="audioId"
+    />
+  </div>
+</template>
+
+<script>
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: [
+    "mp3",
+    "mp3Source",
+    "getCurTime",
+    "stopAudio",
+    "width",
+    "isRepeat",
+    "themeColor",
+    "hideSlider",
+    "ed",
+    "bg",
+    "audioId",
+    "type",
+    "audioData",
+  ],
+  data() {
+    // 这里存放数据
+    return {
+      playValue: 0,
+      audio: {
+        // 该字段是音频是否处于播放状态的属性
+        playing: false,
+        // 音频当前播放时长
+        currentTime: 0,
+        // 音频最大播放时长
+        maxTime: 0,
+        isPlaying: false,
+        loading: false,
+      },
+      audioAllTime: null, // 展示总时间
+      duioCurrentTime: null, // 剩余时间
+      count: 0,
+      isClick: false,
+      activeIndex: null,
+      activeContent: 1,
+    };
+  },
+  // 计算属性 类似于data概念
+  computed: {
+    sliderWidth() {
+      let width = 0;
+      if (this.width) {
+        width = this.width;
+      } else {
+        width = 662;
+      }
+      return width;
+    },
+  },
+  // 监控data中数据变化
+  watch: {
+    // stopAudio: {
+    //   handler(val, oldVal) {
+    //     const _this = this;
+    //     if (val) {
+    //       _this.$refs[_this.audioId].pause();
+    //       _this.audio.playing = false;
+    //     }
+    //   },
+    //   // 深度观察监听
+    //   deep: true,
+    // },
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+        if (val) this.$emit("handleChangeStopAudio",this.audio.playing);
+      },
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    let audioId = _this.audioId;
+    _this.$refs[audioId].addEventListener("loadstart", function () {
+    });
+    _this.$refs[audioId].addEventListener("play", function () {
+      _this.audio.playing = true;
+      _this.audio.isPlaying = true;
+      _this.audio.loading = false;
+    });
+    _this.$refs[audioId].addEventListener("pause", function () {
+      _this.audio.playing = false;
+      if (_this.hideSlider && _this.audio.currentTime + 0.5 > _this.ed) {
+        _this.$emit("handleChangeStopAudio",false);
+      }
+      _this.$emit("handleListenRead", false);
+    });
+    _this.$refs[audioId].addEventListener("ended", function () {
+      _this.audio.playing = false;
+      _this.audio.isPlaying = false;
+      _this.isClick = false;
+      _this.$emit("handleListenRead", false);
+    });
+
+    this.$nextTick(() => {
+      if (
+        document.getElementsByClassName("el-slider__button-wrapper") &&
+        document.getElementsByClassName("el-slider__button-wrapper")[0]
+      ) {
+        document
+          .getElementsByClassName("el-slider__button-wrapper")[0]
+          .addEventListener("mousedown", function () {
+            _this.$refs[audioId].pause();
+            _this.audio.playing = false;
+          });
+      }
+    });
+  },
+  // 生命周期-挂载之前
+  beforeMount() {},
+  // 生命周期-更新之后
+  updated() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+  // 方法集合
+  methods: {
+    PlayAudio() {
+      let audioId = this.audioId;
+      let audio = document.getElementsByTagName("audio");
+      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
+        audio.forEach((item) => {
+            if (item.src == this.mp3) {
+            if (item.id !== audioId) {
+                item.pause();
+            }
+            } else {
+            item.pause();
+            }
+        });
+      }
+      if (this.audio.playing) {
+        this.$refs[audioId].pause();
+        this.audio.playing = false;
+        this.isClick = false;
+      } else {
+        if (this.hideSlider) {
+          this.$refs[audioId].play();
+        //   this.onTimeupdateTime(this.bg);
+        } else {
+          this.$refs[audioId].pause();
+          this.$refs[audioId].play();
+        }
+        this.audio.playing = true;
+        this.isClick = true;
+      }
+      this.$emit("handleChangeStopAudio",this.audio.playing);
+    },
+    oncanplaythrough() {
+      let _this = this;
+      //setTimeout(() => {
+      _this.audio.loading = false;
+      //}, 10000);
+    },
+    // 点击 拖拽播放音频
+    changeCurrentTime(value) {
+      let audioId = this.audioId;
+      this.$refs[audioId].play();
+      this.audio.playing = true;
+      this.$refs[audioId].currentTime = parseInt(
+        (value / 100) * this.audio.maxTime
+      );
+    },
+    mousedown() {
+      let audioId = this.audioId;
+      this.$refs[audioId].pause();
+      this.audio.playing = false;
+    },
+    // 进度条格式化toolTip
+    formatProcessToolTip(index) {
+      index = parseInt((this.audio.maxTime / 100) * index);
+      return this.realFormatSecond(index);
+    },
+    // 音频加载完之后
+    onLoadedmetadata(res) {
+      this.audio.maxTime = parseInt(res.target.duration);
+      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
+    },
+    // 当音频当前时间改变后，进度条也要改变
+    onTimeupdate(res) {
+      let _this = this
+      let audioId = this.audioId;
+      this.audio.currentTime = res.target.currentTime;
+      this.getCurTime(res.target.currentTime);
+      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
+      if (this.type == "audioLine") {
+          setTimeout(()=>{
+              if (!_this.isClick && _this.audio.currentTime > _this.ed) {
+                        if(_this.$refs[audioId]){
+                            _this.$refs[audioId].pause();
+                            _this.$emit("emptyEd");
+                        }
+                
+              }
+          },50)
+      } else {
+        if (this.hideSlider) {
+          if (this.audio.currentTime + 0.5 > this.ed) {
+            this.$refs[audioId].pause();
+            this.$emit("handleChangeStopAudio",false);
+          }
+        }
+      }
+    },
+    onTimeupdateTime(res, playFlag) {
+      if (!res && res !== 0) return;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
+      if (playFlag) {
+        let audio = document.getElementsByTagName("audio");
+        audio.forEach((item) => {
+            if (item.id !== audioId) {
+                item.pause();
+            }
+        });
+        
+        this.$refs[audioId].play();
+        this.audio.playing = true;
+      }
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
+    showPopover(e){
+        this.activeIndex = e
+    },
+    hidePopover(){
+        this.activeIndex = null
+        this.activeContent = 1
+    }
+  },
+  // 生命周期-创建之前
+  beforeCreated() {},
+  // 生命周期-更新之前
+  beforUpdate() {},
+  // 生命周期-销毁之前
+  beforeDestory() {},
+  // 生命周期-销毁完成
+  destoryed() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.AudioNNPE {
+  width: 100%;
+  .audioLine {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background: #ffffff;
+    // border: 1px solid rgba(0, 0, 0, 0.1);
+    // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+    .playBox {
+      min-width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 7px;
+      cursor: pointer;
+    }
+    .play {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      display: block;
+      &.playBtn {
+        // background: url("../../../assets/NNPE/icon-pause-blue.png") no-repeat
+        //   left top;
+        // background-size: 100% 100%;
+      }
+      &.pauseBtn {
+        // background: url("../../../assets/NNPE/icon-play-blue.png") no-repeat
+        //   left top;
+        // background-size: 100% 100%;
+      }
+    }
+
+    span {
+      font-size: 16px;
+      line-height: 19px;
+      color: #000;
+      margin-left: 8px;
+      margin-right: 12px;
+      min-width: 56px;
+      text-align: right;
+    }
+  }
+  .audioLine2 {
+    .play-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      &-big {
+        width: 24px;
+        height: 24px;
+      }
+      &.playBtn-icon {
+        // background: url("../../../assets/icon/pauseC-16-normal-blue.png")
+        //   no-repeat left top;
+        // background-size: 100% 100%;
+      }
+      &.pauseBtn-icon {
+        // background: url("../../../assets/NNPE/compare-pause-blue.png") no-repeat
+        //   left top;
+        // background-size: 100% 100%;
+      }
+    }
+  }
+  .loadBtn {
+    // background: url("../../../assets/NNPE/loading-blue.png") no-repeat left top;
+    // background-size: 100% 100%;
+  }
+  &.Audio-tts {
+    .audioLine {
+      .playBtn {
+        // background: url("../../../assets/NNPE/tts-play-blue.png") no-repeat left
+        //   top;
+        // background-size: 100% 100%;
+      }
+      .pauseBtn {
+        // background: url("../../../assets/NNPE/tts-blue.png") no-repeat left top;
+        // background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.AudioNNPE {
+  .el-slider__button-wrapper {
+    position: relative;
+    z-index: 0;
+  }
+  .el-slider__button {
+    width: 8px;
+    height: 8px;
+    top: 12px;
+    position: absolute;
+  }
+  .el-slider__runway {
+    margin: 0;
+    padding: 0;
+    background: #e5e5e5;
+    border-radius: 0px;
+    height: 2px;
+  }
+  .el-slider {
+    position: relative;
+  }
+  .el-slider__bar {
+    height: 2px;
+    background: #1890ff;
+  }
+  .el-slider__button {
+    background: #1890ff;
+    border: none;
+  }
+}
+</style>

src/views/bookShelf/articlePeruseDetail.vue

@@ -30,19 +30,19 @@
                     <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">讲解</a>
                 </div>
                 <div v-for="(item,index) in peruseDetail.content.article" :key="item.sectionId">
-                    <div class="article-en" :class="[index===0?'article-en-title':'',tabsIndex===0?'original':'']" :style="{color:index===0?bgColorList[activeIndex].titleColor:bgColorList[activeIndex].contentColor,fontSize:index===0?(wordFontsize+16)+'px':wordFontsize+'px',lineHeight:index===0?(wordFontsize+24)+'px':(wordFontsize+8)+'px'}" v-html="item.sentenceStyle"></div>
-                    <div class="article-cn" :class="[index===0?'article-cn-title':'']" v-if="translateFlag" :style="{color:index===0?bgColorList[activeIndex].sourceColor:bgColorList[activeIndex].contentColor,fontSize:wordFontsize+'px',lineHeight:(wordFontsize+8)+'px'}">{{item.chArticle}}</div>
+                    <div class="article-en" :class="[index===0?'article-en-title':'',tabsIndex===0?'original':'',tabsIndex===0&&stopAudios&&curTime>=item.start&&curTime<item.end?'active':'',tabsIndex===1&&stopAudio&&curTime>=item.explainStart&&curTime<item.explainEnd?'active':'']" :style="{color:index===0?bgColorList[activeIndex].titleColor:bgColorList[activeIndex].contentColor,fontSize:index===0?(wordFontsize+16)+'px':wordFontsize+'px',lineHeight:index===0?(wordFontsize+24)+'px':(wordFontsize+8)+'px'}" v-html="item.sentenceStyle"></div>
+                    <div class="article-cn" :class="[index===0?'article-cn-title':'',tabsIndex===0&&stopAudio&&curTime>=item.start&&curTime<item.end?'active':'',tabsIndex===1&&stopAudio&&curTime>=item.explainStart&&curTime<item.explainEnd?'active':'']" v-if="translateFlag" :style="{color:index===0?bgColorList[activeIndex].sourceColor:bgColorList[activeIndex].contentColor,fontSize:wordFontsize+'px',lineHeight:(wordFontsize+8)+'px'}">{{item.chArticle}}</div>
                     <div class="voice-box" v-if="tabsIndex===1">
                         <img class="avatar" :src='peruseDetail.content.teacherInfo&&peruseDetail.content.teacherInfo.image?peruseDetail.content.teacherInfo.image:require("../../assets/article-avatar.png")' />
-                        <svg-icon  @click="PlayAudio(item.explainStart,item.explainEnd,index)" :icon-class="articleIndex===index&&audio.playing?'pause':'play-fill'"></svg-icon>
-                        <img class="article-voice" :src="articleIndex===index&&audio.playing?require('../../assets/article-voice-play.png'):require('../../assets/article-voice.png')" />
-                        <span>{{item.explainEnd-item.explainStart}}''</span>
+                        <svg-icon  @click="handleChangeTime(item.explainStart,item.explainEnd,index)" :icon-class="articleIndex===index&&stopAudio?'pause':'play-fill'"></svg-icon>
+                        <img class="article-voice" :src="articleIndex===index&&stopAudio?require('../../assets/article-voice-play.png'):require('../../assets/article-voice.png')" />
+                        <span>{{articleIndex===index&&stopAudio?parseInt(item.explainEnd-curTime):item.explainEnd-item.explainStart}}''</span>
                     </div>
                     <div class="backgroundImg" v-if="index===0&&peruseDetail.content.backgroundImg">
                         <el-image style="width: 100%; height: 100%" :src="peruseDetail.content.backgroundImg" fit="contain"></el-image>
                     </div>
                     <div v-if="tabsIndex===0&&index===0" class="peruse-detail-audio-box">
-                        <audio-line audioId='peruse-detail-audio' :mp3="peruseDetail.content.voiceUrl"></audio-line>
+                        <audio-line audioId='peruse-detail-audio' :mp3="peruseDetail.content.voiceUrl" :getCurTime="getCurTime" @handleChangeStopAudio="handleChangeStopAudios"></audio-line>
                     </div>
                 </div>
             </div>
@@ -84,13 +84,27 @@
             <div class="explain" v-html="itemw.content" :key="index"></div>
         </template>
     </div>
-    <audio
+    <!-- <audio
       id="article-peruse"
       :ref="audioId"
       :src="peruseDetail.content.explainVoiceUrl"
       preload="metadata"
       @loadedmetadata="onLoadedmetadata"
       @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+    /> -->
+    <AudioLines
+        audioId="artPraAudio"
+        :mp3="peruseDetail.content.explainVoiceUrl"
+        class="aduioLine-peruse"
+        :getCurTime="getCurTime"
+        :width="'0'"
+        ref="audioLine"
+        :hideSlider="true"
+        :bg="bg"
+        :ed="ed"
+        :stopAudio="stopAudio"
+        @handleChangeStopAudio="handleChangeStopAudio"
     />
   </div>
 </template>
@@ -100,15 +114,23 @@ import Header from "../../components/Header.vue";
 import NavBar from "../../components/common/NavBar.vue"
 import { getLogin } from "@/api/ajax";
 import AudioLine from "@/components/common/AudioLine.vue"
+import AudioLines from "@/components/common/AudioLine2.vue"
 export default {
   name: 'articleDetail',
   computed: {
-    
+    isPlaying: function () {
+      let playing = false;
+      if (this.$refs.audioLine) {
+        playing = this.$refs.audioLine.audio.isPlaying;
+      }
+      return playing;
+    },
   },
   components: {
     Header,
     NavBar,
-    AudioLine
+    AudioLine,
+    AudioLines
   },
   data(){
     return{
@@ -305,7 +327,11 @@ export default {
         audioId: 'article-peruse',
         bg: null,
         ed: null,
-        articleIndex: null
+        articleIndex: null,
+        articleIndexOld: null,
+        stopAudio: false,
+        curTime: null,
+        stopAudios: false,
     }
   },
   methods: {
@@ -397,46 +423,40 @@ export default {
         this.tabsIndex = val
         this.translateFlag = false
         this.wordsNotes = false
+        if(this.$refs.audioLine.audio.isPlaying){
+            this.$refs.audioLine.PlayAudio()
+        }
     },
     // 音频加载完之后
     onLoadedmetadata(res) {
       this.audio.maxTime = parseInt(res.target.duration);
     },
-    PlayAudio(bg,ed,index) {
-      this.bg = bg
-      this.ed = ed
-      this.audio.currentTime = bg
-      this.articleIndex = index
-      let audioId = this.audioId;
-      let audio = document.getElementsByTagName("audio");
-      audio.forEach((item) => {
-        if (item.src == this.mp3) {
-        if (item.id !== audioId) {
-            item.pause();
-        }
-        } else {
-          item.pause();
-        }
-      });
-      if (this.audio.playing) {
-        this.$refs[audioId].pause();
-        this.audio.playing = false;
-      } else {
-        this.audio.playing = true;
-        this.$refs[audioId].pause();
-        this.$refs[audioId].play();
-      }
+    getCurTime(curTime) {
+    
+      let _this = this;
+      _this.curTime = curTime;
+    //   console.log(_this.stopAudio)
     },
-    // 当音频当前时间改变后，进度条也要改变
-    onTimeupdate(res) {
-      let _this = this
-      let audioId = this.audioId;
-      this.audio.currentTime = res.target.currentTime;
-      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
-      if (this.audio.currentTime * 1000 + 500 > this.ed) {
-        this.$refs[audioId].pause();
-      }
+    handleChangeTime(bg,ed,index) {
+        this.bg = bg
+        this.ed = ed
+        this.articleIndex = index
+        this.curTime = bg
+        if(this.$refs.audioLine.audio.isPlaying&&this.articleIndexOld===index){
+            // this.handleChangeStopAudio()
+            this.$refs.audioLine.PlayAudio()
+        }else{
+            this.$refs.audioLine.onTimeupdateTime(bg, true);
+            this.articleIndexOld = index
+        }
+    },
+    // 音频播放时改变布尔值
+    handleChangeStopAudio(flag) {
+      this.stopAudio = flag;
     },
+    handleChangeStopAudios(flag){
+        this.stopAudios = flag;
+    }
   },
   created(){
     if(this.peruseId){
@@ -538,7 +558,7 @@ export default {
                 word-break: break-word;
                 text-indent: 2em;
                 &.active{
-                    color: #5E89EF;
+                    color: #5E89EF !important;
                 }
                 &.original{
                     margin-bottom: 24px;
@@ -785,6 +805,7 @@ export default {
     background:#F2F3F5;
     padding: 4px 16px;
     margin-bottom: 24px;
+    height: 42px;
 }
 </style>
 <style lang="scss">
@@ -916,4 +937,8 @@ export default {
         }
     }
 }
+.aduioLine-peruse{
+    height: 0px;
+    overflow: hidden;
+}
 </style>