Преглед изворни кода

对话中的英文显示隐藏

guanchunjie пре 3 година
родитељ
комит
15671f41ca

+ 2 - 2
src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -297,6 +297,7 @@ export default {
     "bodyLeft",
     "bodyWidth",
     "noFont",
+    "isShowEN",
   ],
   components: {
     AudioLine,
@@ -371,7 +372,6 @@ export default {
       curNoteCon: null,
       screenHeight: 0,
       contentWidth: 732,
-      isShowEN: true,
     };
   },
   computed: {
@@ -416,7 +416,7 @@ export default {
   methods: {
     // 英文的显示和隐藏
     changeEN() {
-      this.isShowEN = !this.isShowEN;
+      this.$emit("changeEN");
     },
     handleWav() {},
     getCurTime(curTime) {

+ 3 - 3
src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -189,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>
@@ -254,6 +254,7 @@ export default {
     "themeColor",
     "noFont",
     "currentTreeID",
+    "isShowEN",
   ],
   components: {
     AudioLine,
@@ -334,7 +335,6 @@ export default {
       oldNoteNum: "",
       curNoteCon: null,
       contentWidth: 732,
-      isShowEN: false,
     };
   },
   computed: {},
@@ -398,7 +398,7 @@ export default {
   methods: {
     // 英文的显示和隐藏
     changeEN() {
-      this.isShowEN = !this.isShowEN;
+      this.$emit("changeEN");
     },
     handleWav() {},
     getCurTime(curTime) {

+ 2 - 3
src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -367,7 +367,7 @@ import RoleChs from "./RoleChs.vue";
 import AudioCompare from "../AudioCompare.vue";
 export default {
   name: "ArticleView",
-  props: ["curQue", "colorBox", "noFont", "themeColor"],
+  props: ["curQue", "colorBox", "noFont", "themeColor", "isShowEN"],
   components: {
     AudioLine,
     Soundrecord,
@@ -430,7 +430,6 @@ export default {
       stopAudio: false,
       sentIndex: 0,
       isShowPY: true,
-      isShowEN: true,
       isRepeat: false,
       currSent: null, //当前句子的时间
       isRecord: false,
@@ -644,7 +643,7 @@ export default {
     },
     // 英文的显示和隐藏
     changeEN() {
-      this.isShowEN = !this.isShowEN;
+      this.$emit("changeEN");
     },
     // 单句是否重复播放
     changeRepeat() {

+ 53 - 14
src/components/Adult/preview/DialogueArticleViewChs/WordModelChs.vue

@@ -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;

+ 13 - 0
src/components/Adult/preview/DialogueArticleViewChs/index.vue

@@ -59,6 +59,8 @@
         :NNPEAnnotationList="NNPEAnnotationList"
         :themeColor="themeColor"
         :noFont="noFont"
+        :isShowEN="isShowEN"
+        @changeEN="changeEN"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -72,6 +74,8 @@
         :noFont="noFont"
         :currentTreeID="currentTreeID"
         :bodyLeft="bodyLeft"
+        :isShowEN="isShowEN"
+        @changeEN="changeEN"
         v-if="showPhrases"
       />
       <Practice
@@ -81,6 +85,8 @@
         :colorBox="colorBox"
         :themeColor="themeColor"
         :noFont="noFont"
+        :isShowEN="isShowEN"
+        @changeEN="changeEN"
         v-if="showPractice"
       />
       <WordModel
@@ -94,6 +100,8 @@
         :themeColor="themeColor"
         :noFont="noFont"
         :currentTreeID="currentTreeID"
+        :isShowEN="isShowEN"
+        @changeEN="changeEN"
         v-if="showWord"
       />
     </div>
@@ -130,6 +138,7 @@ export default {
       bodyWidth: 0,
       resColorArr: [],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
+      isShowEN: true,
     };
   },
   computed: {
@@ -149,6 +158,10 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 英文的显示和隐藏
+    changeEN() {
+      this.isShowEN = !this.isShowEN;
+    },
     // 处理字体大小
     handleFontsize(symbol) {
       if (symbol == "+") {