文章多语言

src/views/book/courseware/create/components/question/article/Article.vue

@@ -445,7 +445,14 @@ export default {
     handleMultilingual() {
       this.multilingualText = '';
       this.data.detail.forEach((item) => {
-        this.multilingualText += item.para ? '<p>' + item.para + '<p>' : '<p>&nbsp;</p>';
+        if (item.para) {
+          item.sentences.forEach((items) => {
+            this.multilingualText += '<p>' + items + '<p>';
+          });
+        } else {
+          this.multilingualText += '<p>&nbsp;</p>';
+        }
+        // this.multilingualText += item.para ? '<p>' + item.para + '<p>' : '<p>&nbsp;</p>';
       });
       this.multilingualVisible = true;
     },

src/views/book/courseware/create/components/question/article/ArticleSetting.vue

@@ -46,6 +46,13 @@
       <el-form-item v-if="property.is_enable_pinyin" label="">
         <el-checkbox v-model="property.is_enable_sentence_case">句首大写</el-checkbox>
       </el-form-item>
+      <el-form-item label="多语言">
+        <el-radio-group v-model="property.multilingual_position">
+          <el-radio v-for="{ value, label } in multilingualList" :key="value" :label="value" :value="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -53,7 +60,13 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
-import { getArticleProperty, switchOption, positionList, isEnable } from '@/views/book/courseware/data/article';
+import {
+  getArticleProperty,
+  switchOption,
+  positionList,
+  isEnable,
+  multilingualList,
+} from '@/views/book/courseware/data/article';
 
 export default {
   name: 'ArticleSetting',
@@ -64,6 +77,7 @@ export default {
       switchOption,
       isEnable,
       positionList,
+      multilingualList,
     };
   },
   methods: {},

src/views/book/courseware/create/components/question/dialogue_article/ArticleSetting.vue

@@ -104,6 +104,13 @@
       <el-form-item label="" v-if="property.is_enable_pinyin">
         <el-checkbox v-model="property.is_enable_sentence_case">句首大写</el-checkbox>
       </el-form-item>
+      <el-form-item label="多语言">
+        <el-radio-group v-model="property.multilingual_position">
+          <el-radio v-for="{ value, label } in multilingualList" :key="value" :label="value" :value="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -119,6 +126,7 @@ import {
   isEnable,
   getRole,
   roleTypeList,
+  multilingualList,
 } from '@/views/book/courseware/data/dialogueArticle';
 const Base64 = require('js-base64').Base64;
 import cnchar from 'cnchar';
@@ -133,6 +141,7 @@ export default {
       isEnable,
       positionList,
       roleTypeList,
+      multilingualList,
     };
   },
   computed: {

src/views/book/courseware/create/components/question/table/Table.vue

@@ -223,7 +223,7 @@ export default {
             text += `${items.content.replace(/<[^>]+>/g, '')}\n`;
           });
         });
-        if (text) {
+        if (text && isEnable(this.data.property.view_pinyin)) {
           this.data.paragraph_list_parameter.text = text;
           this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case = val;
           this.createParsedTextInfoPinyin(text);

src/views/book/courseware/data/article.js

@@ -74,7 +74,7 @@ export function getArticleProperty() {
     is_enable_pinyin: true,
     pinyin_position: positionList[0].value,
     is_enable_sentence_case: true,
-    multilingualPosition: multilingualList[1].value,
+    multilingual_position: multilingualList[1].value,
   };
 }
 

src/views/book/courseware/data/dialogueArticle.js

@@ -96,7 +96,7 @@ export function getArticleProperty() {
     role_img_type: 'word',
     role_list: [getRole(0), getRole(1)],
     
-    multilingualPosition: multilingualList[1].value,
+    multilingual_position: multilingualList[1].value,
   };
 }
 

src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -3,7 +3,10 @@
   <div v-if="curQue" class="NNPE-ArticleView">
     <div
       v-if="
-        (curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) || config.isHasPY || config.isHasEN
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'top'
       "
       class="aduioLine-box aduioLine-practice-npc"
     >
@@ -447,6 +450,17 @@
                   </template>
                 </div>
               </div>
+              <div
+                class="multilingual-para"
+                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                v-if="curQue.property.multilingual_position === 'para'"
+              >
+                {{
+                  curQue.detail[index].multilingualTextList[multilingual]
+                    ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
+                    : ''
+                }}
+              </div>
               <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
@@ -857,13 +871,70 @@
                 {{ item.enwords }}
               </div>
             </div>
+            <div
+              class="multilingual-para"
+              :class="[item.isTitle ? 'multilingual-para-center' : '']"
+              v-if="curQue.property.multilingual_position === 'para'"
+            >
+              {{ multilingualTextList[multilingual] ? multilingualTextList[multilingual].join(' ') : '' }}
+            </div>
           </div>
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
-      {{ items }}
+    <div
+      v-if="
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'bottom'
+      "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
+    >
+      <div class="aduioLine-content">
+        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+          <AudioLine
+            ref="audioLine"
+            audio-id="artNormalAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :duration="curQue.mp3_list[0].media_duration"
+            :mp3-source="curQue.mp3_list[0].source"
+            :width="colLength == 2 ? 200 : 700"
+            :ed="ed"
+            type="audioLine"
+            @emptyEd="emptyEd"
+          />
+        </template>
+      </div>
+      <div class="aduioLine-right">
+        <SvgIcon
+          v-if="config.isHasPY"
+          icon-class="PinYin"
+          size="16"
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changePinyin"
+        />
+        <!-- <span
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          @click="changePinyin"
+          v-if="config.isHasPY"
+        ></span> -->
+        <!-- <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
+        <SvgIcon
+          v-if="config.isHasEN"
+          icon-class="PinYin"
+          size="16"
+          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changeEN"
+        />
+      </div>
     </div>
+    <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+      {{ items }}
+    </div> -->
     <template v-if="isNoteShow">
       <div
         ref="notecard"
@@ -888,7 +959,7 @@ export default {
     AudioLine,
     Notecard,
   },
-  props: ['curQue', 'noFont', 'config', 'NNPEAnnotationList', 'colLength', 'themeColor', 'multilingualTextList'],
+  props: ['curQue', 'noFont', 'config', 'NNPEAnnotationList', 'colLength', 'themeColor', 'multilingual'],
   data() {
     return {
       resArr: [],
@@ -1467,7 +1538,7 @@ export default {
     }
 
     .wordsList-box {
-      display: flex;
+      // display: flex;
       width: 100%;
       padding: 6px 24px 12px;
 
@@ -1656,6 +1727,16 @@ export default {
     padding: 6px 24px 12px;
     word-break: break-word;
   }
+
+  .multilingual-para {
+    text-indent: 40px;
+    word-break: break-word;
+
+    &-center {
+      text-align: center;
+      text-indent: 0;
+    }
+  }
 }
 
 .NPC-Big-Book-preview-green {

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -3,7 +3,10 @@
   <div v-if="curQue" class="NNPE-ArticleView">
     <div
       v-if="
-        (curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) || config.isHasPY || config.isHasEN
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'top'
       "
       class="aduioLine-box aduioLine-practice-npc"
     >
@@ -267,12 +270,23 @@
                   </template>
                 </div>
               </div>
+              <div
+                class="multilingual-para"
+                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                v-if="curQue.property.multilingual_position === 'para'"
+              >
+                {{
+                  curQue.detail[index].multilingualTextList[multilingual]
+                    ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
+                    : ''
+                }}
+              </div>
               <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
-          <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
             {{ items }}
-          </div>
+          </div> -->
         </div>
       </template>
     </template>
@@ -549,14 +563,71 @@
               >
                 {{ item.enwords }}
               </div>
+              <div
+                class="multilingual-para"
+                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                v-if="curQue.property.multilingual_position === 'para'"
+              >
+                {{
+                  curQue.detail[index].multilingualTextList[multilingual]
+                    ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
+                    : ''
+                }}
+              </div>
             </div>
           </div>
-          <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
             {{ items }}
-          </div>
+          </div> -->
         </div>
       </template>
     </template>
+    <div
+      v-if="
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'bottom'
+      "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
+    >
+      <div class="aduioLine-content">
+        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+          <AudioLine
+            ref="audioLine"
+            audio-id="artPhraseAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
+            :width="colLength == 2 ? 200 : 700"
+          />
+        </template>
+      </div>
+      <div class="aduioLine-right">
+        <!-- <span
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          @click="changePinyin"
+          v-if="config.isHasPY"
+        ></span>
+        <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
+        <SvgIcon
+          v-if="config.isHasPY"
+          icon-class="PinYin"
+          size="16"
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changePinyin"
+        />
+        <SvgIcon
+          v-if="config.isHasEN"
+          icon-class="PinYin"
+          size="16"
+          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changeEN"
+        />
+      </div>
+    </div>
     <template v-if="isShow">
       <div
         ref="wordcard"
@@ -623,7 +694,7 @@ export default {
     'TaskModel',
     'NNPEAnnotationList',
     'colLength',
-    'multilingualTextList',
+    'multilingual',
   ],
   data() {
     return {
@@ -721,7 +792,6 @@ export default {
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    console.log(this.NNPENewWordList);
     if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
       this.handleNewword();
     }
@@ -762,7 +832,6 @@ export default {
       let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let dhaspinyin = false; // 每段是否有拼音
-      console.log(1);
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let paraArr = [];
@@ -1113,7 +1182,6 @@ export default {
         } else {
           writeModel[hz] = [answer];
         }
-        console.log(this.curQue.Bookanswer);
       }
     },
     viewNotes(e, noteNum) {
@@ -1360,7 +1428,7 @@ export default {
     }
 
     .wordsList-box {
-      display: flex;
+      // display: flex;
       width: 100%;
       padding: 6px 24px 12px;
 
@@ -1540,5 +1608,15 @@ export default {
       color: rgba(0, 0, 0, 65%);
     }
   }
+
+  .multilingual-para {
+    text-indent: 40px;
+    word-break: break-word;
+
+    &-center {
+      text-align: center;
+      text-indent: 0;
+    }
+  }
 }
 </style>

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -4,24 +4,29 @@
     <!-- <a class="ArticleView-full" @click="fullScreen">全屏模式</a> -->
     <div
       v-if="
-        (curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) || config.isHasPY || config.isHasEN
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'top'
       "
       class="aduioLine-box aduioLine-practice-npc"
     >
-      <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url" class="aduioLine-content">
-        <AudioLine
-          ref="audioLine"
-          audio-id="artPraAudio"
-          :mp3="curQue.mp3_list[0].url"
-          :get-cur-time="getCurTime"
-          :stop-audio="stopAudio"
-          :width="colLength == 2 ? 175 : 700"
-          :mp3-source="curQue.mp3_list[0].source"
-          :ed="ed"
-          type="audioLine"
-          @handleChangeStopAudio="handleChangeStopAudio"
-          @emptyEd="emptyEd"
-        />
+      <div class="aduioLine-content">
+        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+          <AudioLine
+            ref="audioLine"
+            audio-id="artPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
+            :width="colLength == 2 ? 175 : 700"
+            :mp3-source="curQue.mp3_list[0].source"
+            :ed="ed"
+            type="audioLine"
+            @handleChangeStopAudio="handleChangeStopAudio"
+            @emptyEd="emptyEd"
+          />
+        </template>
       </div>
       <div class="aduioLine-right">
         <!-- <span :class="['Repeat-16', isRepeat ? '' : 'disabled']" @click="changeRepeat"></span>
@@ -347,6 +352,17 @@
             </div>
           </div>
           <div
+            class="multilingual-para"
+            :class="[item.isTitle ? 'multilingual-para-center' : '']"
+            v-if="curQue.property.multilingual_position === 'para'"
+          >
+            {{
+              multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
+                ? multilingualTextList[multilingual][index]
+                : ''
+            }}
+          </div>
+          <div
             v-show="
               (curQue.wordTime &&
                 curQue.wordTime[index] &&
@@ -392,11 +408,70 @@
             <span class="full-screen-icon" @click="fullScreen"> </span>
           </div>
         </div>
-        <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+        <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
           {{ items }}
-        </div>
+        </div> -->
       </div>
     </template>
+    <div
+      v-if="
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'bottom'
+      "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
+    >
+      <div class="aduioLine-content">
+        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+          <AudioLine
+            ref="audioLine"
+            audio-id="artPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
+            :width="colLength == 2 ? 175 : 700"
+            :mp3-source="curQue.mp3_list[0].source"
+            :ed="ed"
+            type="audioLine"
+            @handleChangeStopAudio="handleChangeStopAudio"
+            @emptyEd="emptyEd"
+          />
+        </template>
+      </div>
+      <div class="aduioLine-right">
+        <!-- <span :class="['Repeat-16', isRepeat ? '' : 'disabled']" @click="changeRepeat"></span>
+        <span
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          @click="changePinyin"
+          v-if="config.isHasPY"
+        ></span>
+        <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
+        <SvgIcon
+          icon-class="repeat"
+          size="16"
+          :class="['Repeat-16', isRepeat ? '' : 'disabled']"
+          :style="{ color: isRepeat ? themeColor : 'rgba(0,0,0,0.1)' }"
+          @click="changeRepeat"
+        />
+        <SvgIcon
+          v-if="config.isHasPY"
+          icon-class="PinYin"
+          size="16"
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changePinyin"
+        />
+        <SvgIcon
+          v-if="config.isHasEN"
+          icon-class="PinYin"
+          size="16"
+          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changeEN"
+        />
+      </div>
+    </div>
     <div :id="'screen-' + mathNum" class="voice-full-screen">
       <Voicefullscreen
         v-if="isFull && resObj"
@@ -443,7 +518,7 @@ export default {
     'TaskModel',
     'colLength',
     'isFull',
-    'multilingualTextList',
+    'multilingual',
   ],
   data() {
     return {
@@ -461,6 +536,7 @@ export default {
       mathNum: Math.random().toString(36).substr(2),
       ed: undefined,
       refresh: true,
+      multilingualTextList: {},
     };
   },
   computed: {
@@ -622,6 +698,10 @@ export default {
       }
     },
     handleData() {
+      this.curQue.multilingual.forEach((item) => {
+        let trans_arr = item.translation.split('\n');
+        this.$set(this.multilingualTextList, item.type, trans_arr);
+      });
       let resArr = [];
       let sentArrTotal = [];
       let timeArr = [];
@@ -1036,5 +1116,14 @@ export default {
       color: rgba(0, 0, 0, 85%);
     }
   }
+
+  .multilingual-para {
+    word-break: break-word;
+
+    &-center {
+      text-align: center;
+      text-indent: 0;
+    }
+  }
 }
 </style>

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -3,7 +3,10 @@
   <div v-if="curQue" class="NNPE-ArticleView">
     <div
       v-if="
-        (curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) || config.isHasPY || config.isHasEN
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'top'
       "
       class="aduioLine-box aduioLine-practice-npc"
     >
@@ -266,12 +269,23 @@
                   </template>
                 </div>
               </div>
+              <div
+                class="multilingual-para"
+                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                v-if="curQue.property.multilingual_position === 'para'"
+              >
+                {{
+                  curQue.detail[index].multilingualTextList[multilingual]
+                    ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
+                    : ''
+                }}
+              </div>
               <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
-          <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
             {{ items }}
-          </div>
+          </div> -->
         </div>
       </template>
     </template>
@@ -521,14 +535,71 @@
               >
                 {{ item.enwords }}
               </div>
+              <div
+                class="multilingual-para"
+                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                v-if="curQue.property.multilingual_position === 'para'"
+              >
+                {{
+                  curQue.detail[index].multilingualTextList[multilingual]
+                    ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
+                    : ''
+                }}
+              </div>
             </div>
           </div>
-          <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
             {{ items }}
-          </div>
+          </div> -->
         </div>
       </template>
     </template>
+    <div
+      v-if="
+        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
+          config.isHasPY ||
+          config.isHasEN) &&
+        curQue.property.mp3_position === 'bottom'
+      "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
+    >
+      <div class="aduioLine-content">
+        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
+          <AudioLine
+            ref="audioLine"
+            audio-id="artPhraseAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
+            :width="colLength == 2 ? 200 : 700"
+          />
+        </template>
+      </div>
+      <div class="aduioLine-right">
+        <!-- <span
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          @click="changePinyin"
+          v-if="config.isHasPY"
+        ></span>
+        <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
+        <SvgIcon
+          v-if="config.isHasPY"
+          icon-class="PinYin"
+          size="16"
+          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changePinyin"
+        />
+        <SvgIcon
+          v-if="config.isHasEN"
+          icon-class="PinYin"
+          size="16"
+          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
+          :style="{ color: themeColor }"
+          @click="changeEN"
+        />
+      </div>
+    </div>
     <template v-if="isShow">
       <div
         ref="wordcard"
@@ -577,7 +648,7 @@ export default {
     'TaskModel',
     'colLength',
     'noFont',
-    'multilingualTextList',
+    'multilingual',
   ],
   data() {
     return {
@@ -1134,7 +1205,7 @@ export default {
     }
 
     .wordsList-box {
-      display: flex;
+      // display: flex;
       width: 100%;
       padding: 6px 24px 12px;
 
@@ -1316,6 +1387,16 @@ export default {
   }
 }
 
+.multilingual-para {
+  text-indent: 40px;
+  word-break: break-word;
+
+  &-center {
+    text-align: center;
+    text-indent: 0;
+  }
+}
+
 .NPC-Big-Book-preview-green {
   .NNPE-ArticleView {
     .NNPE-detail-box {

src/views/book/courseware/preview/components/article/index.vue

@@ -80,7 +80,7 @@
             :NNPEAnnotationList="NNPEAnnotationList"
             :col-length="colLength"
             @changeConfig="changeConfig"
-            :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+            :multilingual="showLang && getLang() ? getLang() : ''"
           />
           <PhraseModel
             v-if="showPhrases"
@@ -98,7 +98,7 @@
             :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
             @changeConfig="changeConfig"
-            :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+            :multilingual="showLang && getLang() ? getLang() : ''"
           />
           <Practice
             v-if="showPractice"
@@ -115,7 +115,7 @@
             :NpcNewWordMp3="NpcNewWordMp3"
             :is-full="isFull"
             @changeConfig="changeConfig"
-            :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+            :multilingual="showLang && getLang() ? getLang() : ''"
           />
           <WordModel
             v-if="showWord"
@@ -132,7 +132,7 @@
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :col-length="colLength"
             @changeConfig="changeConfig"
-            :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+            :multilingual="showLang && getLang() ? getLang() : ''"
           />
         </div>
         <div :id="'screen-' + mathNum" class="voice-full-screen">
@@ -263,7 +263,7 @@ export default {
               this.config.isHasEN = true;
             }
             let pinyin = this.handleObj(this.data.detail[i].wordsList);
-            if (pinyin) {
+            if (pinyin && this.data.property.is_enable_pinyin) {
               this.config.isShowPY = true;
               this.config.isHasPY = true;
             }
@@ -397,7 +397,16 @@ export default {
       if (this.showLang) {
         this.data.multilingual.forEach((item) => {
           let trans_arr = item.translation.split('\n');
-          this.$set(this.multilingualTextList, item.type, trans_arr);
+          this.data.detail.forEach((items) => {
+            let items_trans_arr = [];
+            if (!items.hasOwnProperty('multilingualTextList')) {
+              this.$set(items, 'multilingualTextList', {});
+            }
+            if (items.para) {
+              items_trans_arr = trans_arr.splice(0, items.sentences.length);
+            }
+            this.$set(items.multilingualTextList, item.type, items_trans_arr);
+          });
         });
       }
       if (this.data.mp3_list && this.data.mp3_list.length > 0) {
@@ -471,7 +480,9 @@ export default {
           resArr.push(objs);
         });
         timeArr.push(dItem.timeList);
-        dhaspinyinArr.push(dhaspinyin);
+        if (curQue.property.is_enable_pinyin) {
+          dhaspinyinArr.push(dhaspinyin);
+        }
       });
       if (wordTimeList && wordTimeList.length > 0) {
         this.mergeWordTime(sentArrTotal, wordTimeList);
@@ -660,6 +671,11 @@ export default {
       .aduioLine-box {
         width: 100%;
         border-bottom: 1px solid rgba(0, 0, 0, 10%);
+
+        &-bottom {
+          border-top: 1px solid rgba(0, 0, 0, 10%);
+          border-bottom: none;
+        }
       }
     }
   }
@@ -726,6 +742,11 @@ export default {
   .aduioLine-box {
     width: 100%;
     border-bottom: 1px solid rgba(0, 0, 0, 10%);
+
+    &-bottom {
+      border-top: 1px solid rgba(0, 0, 0, 10%);
+      border-bottom: none !important;
+    }
   }
 }
 </style>