|
@@ -1,19 +1,31 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="NNPE-ArticleView" ref="ArticleView" v-if="curQue">
|
|
|
- <div
|
|
|
- class="aduioLine-box"
|
|
|
- v-if="
|
|
|
- curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
|
|
|
- "
|
|
|
- >
|
|
|
- <AudioLine
|
|
|
- audioId="diaWordAudio"
|
|
|
- :mp3="curQue.mp3_list[0].id"
|
|
|
- :getCurTime="getCurTime"
|
|
|
- :mp3Source="curQue.mp3_list[0].source"
|
|
|
- ref="audioLine"
|
|
|
- />
|
|
|
+ <div class="aduioLine-box aduioLine-practice">
|
|
|
+ <div class="aduioLine-content">
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ curQue.mp3_list &&
|
|
|
+ curQue.mp3_list.length > 0 &&
|
|
|
+ curQue.mp3_list[0].id
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="diaPhraAudio"
|
|
|
+ :mp3="curQue.mp3_list[0].id"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ :mp3Source="curQue.mp3_list[0].source"
|
|
|
+ :width="625"
|
|
|
+ ref="audioLine"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="aduioLine-right">
|
|
|
+ <span
|
|
|
+ :class="['EN-16', isShowEN ? '' : 'disabled']"
|
|
|
+ @click="changeEN"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<template v-if="resArr.length > 0">
|
|
|
<div class="NPC-sentences-list">
|
|
@@ -177,7 +189,7 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
<div style="clear: both; overflow: hidden"></div>
|
|
|
- <div v-if="item.enwords" class="enwords">
|
|
|
+ <div v-if="isShowEN && item.enwords" class="enwords">
|
|
|
{{ item.enwords }}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -238,6 +250,7 @@ export default {
|
|
|
"themeColor",
|
|
|
"noFont",
|
|
|
"currentTreeID",
|
|
|
+ "isShowEN",
|
|
|
],
|
|
|
components: {
|
|
|
AudioLine,
|
|
@@ -382,6 +395,10 @@ export default {
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ // 英文的显示和隐藏
|
|
|
+ changeEN() {
|
|
|
+ this.$emit("changeEN");
|
|
|
+ },
|
|
|
handleWav() {},
|
|
|
getCurTime(curTime) {
|
|
|
console.log(curTime);
|
|
@@ -664,6 +681,28 @@ export default {
|
|
|
.NNPE-ArticleView {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
+ .aduioLine-practice {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .aduioLine-content {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .aduioLine-right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ > span {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.NPC-sentences-list {
|
|
|
.NPC-article-empty {
|
|
|
display: flex;
|