|
@@ -32,21 +32,23 @@
|
|
|
v-show="wordShow"
|
|
|
>
|
|
|
<div
|
|
|
- class="aduioLine-box"
|
|
|
- v-if="
|
|
|
- curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
|
|
|
- "
|
|
|
- >
|
|
|
- <AudioLine
|
|
|
- audioId="SelectYinjieAudio"
|
|
|
- :mp3="curQue.mp3_list[0].url"
|
|
|
- :getCurTime="getCurTime"
|
|
|
- :themeColor="themeColor"
|
|
|
- :ed="ed"
|
|
|
- type="audioLine"
|
|
|
- ref="audioLine"
|
|
|
- @handleListenRead="handleListenRead"
|
|
|
- />
|
|
|
+ class="aduioLine-box"
|
|
|
+ v-if="
|
|
|
+ curQue.mp3_list &&
|
|
|
+ curQue.mp3_list.length > 0 &&
|
|
|
+ curQue.mp3_list[0].url
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="SelectYinjieAudio"
|
|
|
+ :mp3="curQue.mp3_list[0].url"
|
|
|
+ :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
|
|
@@ -58,11 +60,9 @@
|
|
|
:class="[
|
|
|
'NPC-word-row',
|
|
|
playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
- curTime >= sItem.bg &&
|
|
|
- curTime < sItem.ed &&
|
|
|
- stopAudioS
|
|
|
- ? 'active'
|
|
|
- : '',
|
|
|
+ curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
]"
|
|
|
v-for="(sItem, sIndex) in item"
|
|
|
:key="'curQue.option.child' + sIndex"
|
|
@@ -81,7 +81,7 @@
|
|
|
: themeColor == 'red'
|
|
|
? 'NPC-play-btn-red'
|
|
|
: 'NPC-play-btn-brown',
|
|
|
- playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
+ playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
]"
|
|
|
@click="palyAudio(sItem.sIndex)"
|
|
|
></span>
|
|
@@ -90,17 +90,15 @@
|
|
|
:src="sItem.mp3_list[0].id"
|
|
|
></audio>
|
|
|
</template>
|
|
|
- <template v-else-if="sItem.bg||sItem.ed">
|
|
|
- <a
|
|
|
- :class="[
|
|
|
+ <template v-else-if="sItem.bg || sItem.ed">
|
|
|
+ <a
|
|
|
+ :class="[
|
|
|
'play-btn',
|
|
|
- curTime >= sItem.bg &&
|
|
|
- curTime < sItem.ed &&
|
|
|
- stopAudioS
|
|
|
- ? 'active'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- @click="handleChangeTime(sItem.bg,sItem.ed)"
|
|
|
+ curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
></a>
|
|
|
</template>
|
|
|
<template v-else>
|
|
@@ -260,7 +258,7 @@ export default {
|
|
|
mp3: "",
|
|
|
curTime: 0,
|
|
|
stopAudioS: false,
|
|
|
- ed:null,
|
|
|
+ ed: null,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -423,7 +421,7 @@ export default {
|
|
|
this.$refs.newwordAudio.pause();
|
|
|
},
|
|
|
initData() {
|
|
|
- let _this = this
|
|
|
+ let _this = this;
|
|
|
if (this.curQue.type == "NewWord_chs") {
|
|
|
let resIndex = 0;
|
|
|
let optionRes = [];
|
|
@@ -442,9 +440,9 @@ export default {
|
|
|
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
|
|
|
+ if (_this.curQue.wordTime && _this.curQue.wordTime[itemNumber]) {
|
|
|
+ sItem.bg = _this.curQue.wordTime[itemNumber].bg;
|
|
|
+ sItem.ed = _this.curQue.wordTime[itemNumber].ed;
|
|
|
}
|
|
|
itemNumber++;
|
|
|
});
|
|
@@ -460,19 +458,19 @@ export default {
|
|
|
this.curTime = curTime * 1000;
|
|
|
},
|
|
|
//点击播放某个句子
|
|
|
- handleChangeTime(time,edTime) {
|
|
|
+ handleChangeTime(time, edTime) {
|
|
|
let _this = this;
|
|
|
_this.curTime = time;
|
|
|
- _this.stopAudioS = true
|
|
|
+ _this.stopAudioS = true;
|
|
|
_this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
- _this.ed = edTime
|
|
|
+ _this.ed = edTime;
|
|
|
},
|
|
|
handleListenRead(playFlag) {
|
|
|
this.stopAudioS = playFlag;
|
|
|
},
|
|
|
- emptyEd(){
|
|
|
- this.ed = null;
|
|
|
- }
|
|
|
+ emptyEd() {
|
|
|
+ this.ed = null;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -509,8 +507,8 @@ export default {
|
|
|
.NPC-zhedie {
|
|
|
width: 780px;
|
|
|
margin-bottom: 24px;
|
|
|
- .aduioLine-box{
|
|
|
- margin-bottom: 8px;
|
|
|
+ .aduioLine-box {
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
.practiceBox {
|
|
|
position: fixed;
|
|
@@ -684,8 +682,8 @@ export default {
|
|
|
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;
|
|
|
+ background-image: url("../../../assets/NPC/icon-voice-play-red.png");
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -693,25 +691,25 @@ export default {
|
|
|
.NPC-Big-Book-preview-green {
|
|
|
.NPC-zhedie {
|
|
|
.play-btn {
|
|
|
- background: url("../../../assets/NPC/play-green.png") center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- &.active {
|
|
|
+ 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: 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 {
|