对话课文英文位置

src/components/Adult/inputModules/DialogueArticleChs/index.vue

@@ -163,6 +163,13 @@
         <el-radio :label="'bottom'">字下面</el-radio>
       </el-radio-group>
     </div>
+    <div class="NPC-Book-model">
+      <span class="adult-book-input-lable">英文位置：</span>
+      <el-radio-group v-model="curQue.enPosition">
+        <el-radio :label="'top'">字上面</el-radio>
+        <el-radio :label="'bottom'">字下面</el-radio>
+      </el-radio-group>
+    </div>
     <!---上传rlc文件-->
     <!-- <div class="NPC-Book-Paragraph" v-if="isClause">
       <el-button
@@ -339,6 +346,7 @@ export default {
         name: "课文",
         model: 1,
         pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+        enPosition: "bottom", 
         notice: "", //文章提示信息
         mp3_list: [],
         img_list: [],
@@ -792,6 +800,9 @@ export default {
       this.fileCon.img_list = JSON.parse(JSON.stringify(this.curQue.img_list));
       let mp3_list = JSON.parse(JSON.stringify(this.curQue.mp3_list));
       this.fileCon.mp3_list = mp3_list.filter((item) => item.source !== "tts");
+      if (!this.curQue.hasOwnProperty("enPosition")) {
+        this.$set(this.curQue, "enPosition", 'bottom');
+      }
     } else {
       this.initCurQueData();
     }

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -91,6 +91,10 @@
                 class="para-con"
                 :style="{ background: item.roleDetail.color.bg }"
               >
+                <div v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'" class="enwords">
+                  {{ item.enwords }}
+                </div>
+                <div style="clear: both; overflow: hidden"></div>
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -411,7 +415,7 @@
                   </template>
                 </div>
                 <div style="clear: both; overflow: hidden"></div>
-                <div v-if="config.isShowEN && item.enwords" class="enwords">
+                <div v-if="config.isShowEN && item.enwords && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')" class="enwords">
                   {{ item.enwords }}
                 </div>
               </div>
@@ -1045,6 +1049,7 @@ export default {
       line-height: 22px;
       color: rgba(0, 0, 0, 0.85);
       padding-left: 3px;
+      word-break: break-word;
     }
     &.NNPE-detail-title {
       .wordsList-box {

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -77,6 +77,10 @@
                 class="para-con"
                 :style="{ background: item.roleDetail.color.bg }"
               >
+                <div v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'" class="enwords">
+                  {{ item.enwords }}
+                </div>
+                <div style="clear: both; overflow: hidden"></div>
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -349,7 +353,7 @@
                   </template>
                 </div>
                 <div style="clear: both; overflow: hidden"></div>
-                <div v-if="config.isShowEN && item.enwords" class="enwords">
+                <div v-if="config.isShowEN && item.enwords && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')" class="enwords">
                   {{ item.enwords }}
                 </div>
               </div>
@@ -973,6 +977,7 @@ export default {
       line-height: 22px;
       color: rgba(0, 0, 0, 0.85);
       padding-left: 3px;
+      word-break: break-word;
     }
     .NNPE-words {
       float: left;

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -127,6 +127,13 @@
                 class="sentence-box-inner"
                 :style="{ background: item.roleDetail.color.bg }"
               >
+                <div
+                  v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
+                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                >
+                  {{ item.enwords }}
+                </div>
+                <div style="clear: both; overflow: hidden"></div>
                 <div class="NNPE-words-box">
                   <div
                     class="NNPE-words"
@@ -407,7 +414,7 @@
                 </div>
                 <div style="clear: both; overflow: hidden"></div>
                 <div
-                  v-if="item.enwords && config.isShowEN"
+                  v-if="item.enwords && config.isShowEN && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')"
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                 >
                   {{ item.enwords }}
@@ -959,6 +966,7 @@ export default {
     line-height: 22px;
     color: rgba(0, 0, 0, 0.45);
     padding-left: 3px;
+    word-break: break-word;
     &.wordBlank {
       color: rgba(0, 0, 0, 0.85);
     }

src/components/Adult/preview/DialogueArticleViewChs/WordModelChs.vue

@@ -71,6 +71,10 @@
                 class="para-con"
                 :style="{ background: item.roleDetail.color.bg }"
               >
+                <div v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'" class="enwords">
+                  {{ item.enwords }}
+                </div>
+                <div style="clear: both; overflow: hidden"></div>
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -270,7 +274,7 @@
                   </template>
                 </div>
                 <div style="clear: both; overflow: hidden"></div>
-                <div v-if="config.isShowEN && item.enwords" class="enwords">
+                <div v-if="config.isShowEN && item.enwords && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')" class="enwords">
                   {{ item.enwords }}
                 </div>
               </div>
@@ -888,6 +892,7 @@ export default {
       line-height: 22px;
       color: rgba(0, 0, 0, 0.85);
       padding-left: 3px;
+      word-break: break-word;
     }
 
     .NNPE-words {

src/components/Adult/preview/Voicefullscreen.vue

@@ -186,6 +186,14 @@
       </div>
       <div class="vc-main">
         <div class="NNPE-words-box">
+          <div style="clear: both; overflow: hidden"></div>
+          <div
+            v-if="enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
+            :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
+            :style="{ fontSize: enSize + 'px' }"
+          >
+            {{ enwords }}
+          </div>
           <div
             class="NNPE-words"
             v-for="(pItem, pIndex) in item"
@@ -479,7 +487,7 @@
         <div style="clear: both; overflow: hidden"></div>
 
         <div
-          v-if="enwords && config.isShowEN"
+          v-if="enwords && config.isShowEN && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')"
           :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
           :style="{ fontSize: enSize + 'px' }"
         >
@@ -1642,6 +1650,7 @@ export default {
         font-size: 24px;
         line-height: 32px;
         font-family: "robot";
+        word-break: break-word;
         &-green {
           color: rgba(255, 255, 255, 0.65);
         }