|  | @@ -28,33 +28,51 @@
 | 
	
		
			
				|  |  |            }}</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"/>
 | 
	
		
			
				|  |  | +      <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>
 | 
	
		
			
				|  |  | +        </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
 | 
	
	
		
			
				|  | @@ -69,31 +87,43 @@
 | 
	
		
			
				|  |  |          ]"
 | 
	
		
			
				|  |  |          @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"/>
 | 
	
		
			
				|  |  | +      <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>
 | 
	
		
			
				|  |  | +        </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"
 | 
	
	
		
			
				|  | @@ -178,7 +208,7 @@ export default {
 | 
	
		
			
				|  |  |      "audio.playing": {
 | 
	
		
			
				|  |  |        handler(val) {
 | 
	
		
			
				|  |  |          this.$emit("playChange", val);
 | 
	
		
			
				|  |  | -        if (val) this.$emit("handleChangeStopAudio",this.audio.playing);
 | 
	
		
			
				|  |  | +        if (val) this.$emit("handleChangeStopAudio", this.audio.playing);
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |    },
 | 
	
	
		
			
				|  | @@ -188,8 +218,7 @@ export default {
 | 
	
		
			
				|  |  |    mounted() {
 | 
	
		
			
				|  |  |      let _this = this;
 | 
	
		
			
				|  |  |      let audioId = _this.audioId;
 | 
	
		
			
				|  |  | -    _this.$refs[audioId].addEventListener("loadstart", function () {
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | +    _this.$refs[audioId].addEventListener("loadstart", function () {});
 | 
	
		
			
				|  |  |      _this.$refs[audioId].addEventListener("play", function () {
 | 
	
		
			
				|  |  |        _this.audio.playing = true;
 | 
	
		
			
				|  |  |        _this.audio.isPlaying = true;
 | 
	
	
		
			
				|  | @@ -197,8 +226,9 @@ export default {
 | 
	
		
			
				|  |  |      });
 | 
	
		
			
				|  |  |      _this.$refs[audioId].addEventListener("pause", function () {
 | 
	
		
			
				|  |  |        _this.audio.playing = false;
 | 
	
		
			
				|  |  | +      _this.audio.isPlaying = false;
 | 
	
		
			
				|  |  |        if (_this.hideSlider && _this.audio.currentTime + 0.5 > _this.ed) {
 | 
	
		
			
				|  |  | -        _this.$emit("handleChangeStopAudio",false);
 | 
	
		
			
				|  |  | +        _this.$emit("handleChangeStopAudio", false);
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        _this.$emit("handleListenRead", false);
 | 
	
		
			
				|  |  |      });
 | 
	
	
		
			
				|  | @@ -234,15 +264,19 @@ export default {
 | 
	
		
			
				|  |  |      PlayAudio() {
 | 
	
		
			
				|  |  |        let audioId = this.audioId;
 | 
	
		
			
				|  |  |        let audio = document.getElementsByTagName("audio");
 | 
	
		
			
				|  |  | -      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
 | 
	
		
			
				|  |  | +      if (
 | 
	
		
			
				|  |  | +        audio &&
 | 
	
		
			
				|  |  | +        audio.length > 0 &&
 | 
	
		
			
				|  |  | +        window.location.href.indexOf("GCLS-Learn") == -1
 | 
	
		
			
				|  |  | +      ) {
 | 
	
		
			
				|  |  |          audio.forEach((item) => {
 | 
	
		
			
				|  |  | -            if (item.src == this.mp3) {
 | 
	
		
			
				|  |  | +          if (item.src == this.mp3) {
 | 
	
		
			
				|  |  |              if (item.id !== audioId) {
 | 
	
		
			
				|  |  | -                item.pause();
 | 
	
		
			
				|  |  | +              item.pause();
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  | -            } else {
 | 
	
		
			
				|  |  | +          } else {
 | 
	
		
			
				|  |  |              item.pause();
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          });
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        if (this.audio.playing) {
 | 
	
	
		
			
				|  | @@ -252,7 +286,7 @@ export default {
 | 
	
		
			
				|  |  |        } else {
 | 
	
		
			
				|  |  |          if (this.hideSlider) {
 | 
	
		
			
				|  |  |            this.$refs[audioId].play();
 | 
	
		
			
				|  |  | -        //   this.onTimeupdateTime(this.bg);
 | 
	
		
			
				|  |  | +          //   this.onTimeupdateTime(this.bg);
 | 
	
		
			
				|  |  |          } else {
 | 
	
		
			
				|  |  |            this.$refs[audioId].pause();
 | 
	
		
			
				|  |  |            this.$refs[audioId].play();
 | 
	
	
		
			
				|  | @@ -260,7 +294,7 @@ export default {
 | 
	
		
			
				|  |  |          this.audio.playing = true;
 | 
	
		
			
				|  |  |          this.isClick = true;
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | -      this.$emit("handleChangeStopAudio",this.audio.playing);
 | 
	
		
			
				|  |  | +      this.$emit("handleChangeStopAudio", this.audio.playing);
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      oncanplaythrough() {
 | 
	
		
			
				|  |  |        let _this = this;
 | 
	
	
		
			
				|  | @@ -294,26 +328,25 @@ export default {
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      // 当音频当前时间改变后,进度条也要改变
 | 
	
		
			
				|  |  |      onTimeupdate(res) {
 | 
	
		
			
				|  |  | -      let _this = this
 | 
	
		
			
				|  |  | +      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)
 | 
	
		
			
				|  |  | +        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);
 | 
	
		
			
				|  |  | +            this.$emit("handleChangeStopAudio", false);
 | 
	
		
			
				|  |  |            }
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |        }
 | 
	
	
		
			
				|  | @@ -325,11 +358,11 @@ export default {
 | 
	
		
			
				|  |  |        if (playFlag) {
 | 
	
		
			
				|  |  |          let audio = document.getElementsByTagName("audio");
 | 
	
		
			
				|  |  |          audio.forEach((item) => {
 | 
	
		
			
				|  |  | -            if (item.id !== audioId) {
 | 
	
		
			
				|  |  | -                item.pause();
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | +          if (item.id !== audioId) {
 | 
	
		
			
				|  |  | +            item.pause();
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          });
 | 
	
		
			
				|  |  | -        
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |          this.$refs[audioId].play();
 | 
	
		
			
				|  |  |          this.audio.playing = true;
 | 
	
		
			
				|  |  |        }
 | 
	
	
		
			
				|  | @@ -369,13 +402,13 @@ export default {
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        return result;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    showPopover(e){
 | 
	
		
			
				|  |  | -        this.activeIndex = e
 | 
	
		
			
				|  |  | +    showPopover(e) {
 | 
	
		
			
				|  |  | +      this.activeIndex = e;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    hidePopover() {
 | 
	
		
			
				|  |  | +      this.activeIndex = null;
 | 
	
		
			
				|  |  | +      this.activeContent = 1;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    hidePopover(){
 | 
	
		
			
				|  |  | -        this.activeIndex = null
 | 
	
		
			
				|  |  | -        this.activeContent = 1
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    // 生命周期-创建之前
 | 
	
		
			
				|  |  |    beforeCreated() {},
 |