|
|
@@ -33,11 +33,17 @@
|
|
|
<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="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>
|
|
|
</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>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="article-bottom">
|
|
|
@@ -78,6 +84,14 @@
|
|
|
<div class="explain" v-html="itemw.content" :key="index"></div>
|
|
|
</template>
|
|
|
</div>
|
|
|
+ <audio
|
|
|
+ id="article-peruse"
|
|
|
+ :ref="audioId"
|
|
|
+ :src="peruseDetail.content.explainVoiceUrl"
|
|
|
+ preload="metadata"
|
|
|
+ @loadedmetadata="onLoadedmetadata"
|
|
|
+ @timeupdate="onTimeupdate"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -85,6 +99,7 @@
|
|
|
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"
|
|
|
export default {
|
|
|
name: 'articleDetail',
|
|
|
computed: {
|
|
|
@@ -92,7 +107,8 @@ export default {
|
|
|
},
|
|
|
components: {
|
|
|
Header,
|
|
|
- NavBar
|
|
|
+ NavBar,
|
|
|
+ AudioLine
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
@@ -276,6 +292,20 @@ export default {
|
|
|
'3':'难句解析'
|
|
|
},
|
|
|
tabsIndex: 1,
|
|
|
+ audio: {
|
|
|
+ // 该字段是音频是否处于播放状态的属性
|
|
|
+ playing: false,
|
|
|
+ // 音频当前播放时长
|
|
|
+ currentTime: 0,
|
|
|
+ // 音频最大播放时长
|
|
|
+ maxTime: 0,
|
|
|
+ isPlaying: false,
|
|
|
+ loading: false,
|
|
|
+ },
|
|
|
+ audioId: 'article-peruse',
|
|
|
+ bg: null,
|
|
|
+ ed: null,
|
|
|
+ articleIndex: null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -367,7 +397,46 @@ export default {
|
|
|
this.tabsIndex = val
|
|
|
this.translateFlag = false
|
|
|
this.wordsNotes = false
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 音频加载完之后
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 当音频当前时间改变后，进度条也要改变
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
created(){
|
|
|
if(this.peruseId){
|
|
|
@@ -497,8 +566,34 @@ export default {
|
|
|
border-radius: 40px;
|
|
|
border: 1px solid #E5E6EB;
|
|
|
background:#F2F3F5;
|
|
|
- width: 191px;
|
|
|
margin: 24px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: fit-content;
|
|
|
+ .avatar{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .article-voice{
|
|
|
+ width: 73px;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ .svg-icon{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: rgba(23, 93, 255, 1);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color:#4E5969;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.article-bottom{
|
|
|
@@ -684,6 +779,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.peruse-detail-audio-box{
|
|
|
+ border-radius: 40px;
|
|
|
+ border: 1px solid#E5E6EB;
|
|
|
+ background:#F2F3F5;
|
|
|
+ padding: 4px 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.article-fontsize{
|
natasha
