组件修改

src/components/RichText.vue

@@ -65,6 +65,7 @@ export default {
     Editor,
     MathDialog,
   },
+  inject: ['getBookUnifiedAttr'],
   inheritAttrs: false,
   props: {
     inline: {
@@ -102,8 +103,12 @@ export default {
       default: false,
     },
     fontSize: {
-      type: Number,
-      default: 16,
+      type: String,
+      default: '12pt',
+    },
+    fontFamily: {
+      type: String,
+      default: 'Arial',
     },
     isHasSpace: {
       type: Boolean,
@@ -137,6 +142,7 @@ export default {
         left: 0,
       },
       id: getRandomNumber(),
+      bookUnifiedAttr: this.getBookUnifiedAttr(),
       init: {
         content_style: `
           mjx-container, mjx-container * {
@@ -148,6 +154,7 @@ export default {
         extended_valid_elements: 'span[*],mjx-container[*],svg[*],path[*]', // 明确允许 MathJax 标签
         inline: this.inline,
         font_size: this.fontSize,
+        font_family: this.fontFamily,
         language_url: `${process.env.BASE_URL}tinymce/langs/zh_CN.js`,
         placeholder: this.placeholder,
         language: 'zh_CN',
@@ -156,7 +163,7 @@ export default {
         min_height: this.height,
         width: '100%',
         autoresize_bottom_margin: 0,
-        plugins: 'link lists image hr media autoresize ax_wordlimit paste lineheight',
+        plugins: 'link lists image hr media autoresize ax_wordlimit paste', // 移除 lineheight
         toolbar: this.toolbar, // 工具栏
         lineheight_formats: '0.5 1.0 1.2 1.5 2.0 2.5 3.0', // 行高选项（倍数）
         contextmenu: false, // 右键菜单
@@ -168,11 +175,40 @@ export default {
           let isRendered = false; // 标记是否已渲染
           let that = this;
           editor.on('init', () => {
-            editor.getBody().style.fontSize = `${this.font_size}pt`; // 设置默认字体大小
-            editor.getBody().style.fontFamily = 'Arial'; // 设置默认字体
+            editor.getBody().style.fontSize = this.init.font_size; // 设置默认字体大小
+            editor.getBody().style.fontFamily = this.init.font_family; // 设置默认字体
+          });
+
+          // 自定义行高下拉（因为没有内置 lineheight 插件）
+          editor.ui.registry.addMenuButton('lineheight', {
+            text: '行高',
+            tooltip: '行高',
+            fetch: (callback) => {
+              const formats = (this.init.lineheight_formats || '').split(/\s+/).filter(Boolean);
+              const items = formats.map((v) => {
+                return {
+                  type: 'menuitem',
+                  text: v,
+                  onAction: () => {
+                    try {
+                      const name = `lineheight_${v.replace(/\./g, '_')}`;
+                      // 动态注册格式（会覆盖同名注册，安全）
+                      editor.formatter.register(name, {
+                        inline: 'span',
+                        styles: { lineHeight: v },
+                      });
+                      editor.formatter.apply(name);
+                    } catch (err) {
+                      // 容错处理
+                    }
+                  },
+                };
+              });
+              callback(items);
+            },
           });
 
-          editor.on('click', (e) => {
+          editor.on('click', () => {
             if (editor?.queryCommandState('ToggleToolbarDrawer')) {
               editor.execCommand('ToggleToolbarDrawer');
             }
@@ -194,19 +230,19 @@ export default {
           // 内容变化时重新渲染公式
           editor.on('change', () => this.renderMath());
 
-          editor.on('KeyDown', function (e) {
+          editor.on('KeyDown', (e) => {
             // 检测删除或退格键
             if (e.keyCode === 8 || e.keyCode === 46) {
               // 延迟执行以确保删除已完成
-              setTimeout(function () {
+              setTimeout(() => {
                 that.cleanupRemovedAnnotations(editor);
               }, 500);
             }
           });
 
           // 也可以监听剪切操作
-          editor.on('Cut', function () {
-            setTimeout(function () {
+          editor.on('Cut', () => {
+            setTimeout(() => {
               that.cleanupRemovedAnnotations(editor);
             }, 500);
           });
@@ -257,7 +293,7 @@ export default {
   },
   watch: {
     isViewNote: {
-      handler(newVal, oldVal) {
+      handler(newVal) {
         if (newVal) {
           let editor = tinymce.get(this.id);
           if (editor) {
@@ -267,6 +303,51 @@ export default {
         }
       },
     },
+    fontSize: {
+      handler(newVal) {
+        const editor = tinymce.get(this.id);
+        if (!editor || typeof editor.execCommand !== 'function') return;
+
+        const applyFontSize = () => {
+          try {
+            editor.execCommand('FontSize', false, newVal);
+            editor.setContent(this.value); // 触发内容更新，解决 value 在设置后变为空字符串的问题
+          } catch (e) {
+            // 容错：某些情况下 execCommand 会抛错，忽略即可
+            // console.warn('apply fontSize failed', e);
+          }
+        };
+
+        // 如果 selection 暂不可用，延迟一次执行以避免其他监听器中访问 selection 报错
+        if (!editor.selection || typeof editor.selection.getRng !== 'function') {
+          setTimeout(applyFontSize, 100);
+        } else {
+          applyFontSize();
+        }
+      },
+    },
+    fontFamily: {
+      handler(newVal) {
+        const editor = tinymce.get(this.id);
+        if (!editor || typeof editor.execCommand !== 'function') return;
+
+        const applyFontFamily = () => {
+          try {
+            editor.execCommand('FontName', false, newVal);
+            editor.setContent(this.value); // 触发内容更新，解决 value 在设置后变为空字符串的问题
+          } catch (e) {
+            // 容错：忽略因 selection 不可用或其它原因导致的错误
+          }
+        };
+
+        // 如果 selection 暂不可用，延迟执行
+        if (!editor.selection || typeof editor.selection.getRng !== 'function') {
+          setTimeout(applyFontFamily, 100);
+        } else {
+          applyFontFamily();
+        }
+      },
+    },
   },
   created() {
     if (this.pageFrom !== 'audit') {
@@ -607,9 +688,7 @@ export default {
           if (/<[^>]+>/g.test(item)) return item;
 
           return item
-            .map((li) =>
-              li.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
-            )
+            .map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || ''))
             .flat();
         })
         // 如果是数组，将数组字符串每两个之间加一个空格

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

@@ -445,9 +445,9 @@
                 </div>
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -865,9 +865,9 @@
               </div>
             </div>
             <div
+              v-if="curQue.property.multilingual_position === 'para'"
               class="multilingual-para"
               :class="[item.isTitle ? 'multilingual-para-center' : '']"
-              v-if="curQue.property.multilingual_position === 'para'"
             >
               {{ multilingualTextList[multilingual] ? multilingualTextList[multilingual].join(' ') : '' }}
             </div>
@@ -875,11 +875,11 @@
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -942,7 +942,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :change-card="changeCard" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -1281,7 +1281,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] === noteNum) {
-            noteIndex = String(i) + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }

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

@@ -271,9 +271,9 @@
                 </div>
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -564,9 +564,9 @@
                 {{ item.enwords }}
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -582,11 +582,11 @@
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -665,6 +665,7 @@
           :mp3-url="activeWord ? activeWord.newWordMp3 : ''"
           :bg="activeWord ? activeWord.bg : null"
           :ed="activeWord ? activeWord.ed : null"
+          :attrib="attrib"
           @changeCurQue="changeCurQue"
         />
       </div>
@@ -678,7 +679,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :change-card="changeCard" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -983,8 +984,8 @@ export default {
       this.resObj = { sentList: resArrs, timeList };
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let endIndex = 0,
-        words = '';
+      let endIndex = 0;
+      let words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
@@ -1088,7 +1089,7 @@ export default {
       }
       let pos = time.indexOf(':');
       let min = 0;
-      var sec = 0;
+      let sec = 0;
       if (pos > 0) {
         min = parseInt(time.substring(0, pos));
         sec = parseFloat(time.substring(pos + 1));
@@ -1206,7 +1207,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = String(i) + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }

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

@@ -353,9 +353,9 @@
             </div>
           </div>
           <div
+            v-if="curQue.property.multilingual_position === 'para'"
             class="multilingual-para"
             :class="[item.isTitle ? 'multilingual-para-center' : '']"
-            v-if="curQue.property.multilingual_position === 'para'"
           >
             {{
               multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
@@ -375,10 +375,10 @@
           >
             <div class="Soundrecord-content-inner">
               <Soundrecord
+                v-if="refresh"
                 type="promax"
                 class="luyin-box"
                 :TaskModel="TaskModel"
-                v-if="refresh"
                 :answer-record-list="
                   curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
                 "
@@ -414,11 +414,11 @@
         </div> -->
       </div>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -507,6 +507,7 @@
         :current-tree-i-d="currentTreeID"
         :config="config"
         :TaskModel="TaskModel"
+        :attrib="attrib"
         @handleWav="handleWav"
         @changePinyin="changePinyin"
         @changeEN="changeEN"
@@ -845,7 +846,7 @@ export default {
       }
       let pos = time.indexOf(':');
       let min = 0;
-      var sec = 0;
+      let sec = 0;
       if (pos > 0) {
         min = parseInt(time.substring(0, pos));
         sec = parseFloat(time.substring(pos + 1));

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

@@ -270,9 +270,9 @@
                 </div>
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -536,9 +536,9 @@
                 {{ item.enwords }}
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -554,11 +554,11 @@
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -634,6 +634,7 @@
           :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
           :write-list="curQue.Bookanswer.writeModel"
+          :attrib="attrib"
           @changeCurQue="changeCurQue"
         />
       </div>
@@ -644,7 +645,6 @@
 <script>
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
 import Wordcard from './components/Wordcard.vue'; // 卡片
-import $ from 'jquery';
 export default {
   name: 'WordModelChs',
   components: {
@@ -961,7 +961,7 @@ export default {
       }
       let pos = time.indexOf(':');
       let min = 0;
-      var sec = 0;
+      let sec = 0;
       if (pos > 0) {
         min = parseInt(time.substring(0, pos));
         sec = parseFloat(time.substring(pos + 1));

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

@@ -78,6 +78,7 @@
           <span v-else>暂无释义</span>
         </span> -->
         <div class="bwc-word-en" :class="['bwc-word-en' + word.detail.new_word.length]">
+          <span v-html="word.detail.cixing"></span>
           <span v-if="defChsArr.length > 0" class="word-chs" v-html="defChsArr[0]"></span>
           <span v-if="defEnArr.length > 0" class="word-en" v-html="defEnArr[0]"></span>
         </div>
@@ -608,6 +609,10 @@ export default {
       color: rgba(0, 0, 0, 85%);
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      :deep p {
+        margin: 0;
+      }
     }
 
     .word-chs {

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

@@ -1,26 +1,26 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div v-if="curQue" class="NNPE-ArticleView">
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((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 class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaNormalAudio"
+            ref="audioLine"
+            audio-id="diaNormalAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
             :ed="ed"
             type="audioLine"
-            ref="audioLine"
             @emptyEd="emptyEd"
           />
         </template>
@@ -56,10 +56,12 @@
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
-        <p :class="['notice', isHasRemark ? 'hasRemark' : '']" v-if="curQue.notice">
+        <p v-if="curQue.notice" :class="['notice', isHasRemark ? 'hasRemark' : '']">
           {{ curQue.notice }}
         </p>
         <div
+          v-for="(item, index) in resArr"
+          :key="'detail' + index"
           :class="[
             'NNPE-detail',
             item.isTitle ? 'NNPE-detail-title' : '',
@@ -69,18 +71,16 @@
               ? 'active'
               : '',
           ]"
-          v-for="(item, index) in resArr"
-          :key="'detail' + index"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" :type="curQue.property.role_img_type" />
+            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
             <div class="wordsList-box">
-              <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
               <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                 <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
-              <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                 <span class="chs">{{ item.roleDetail.fullName }}</span>
                 <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
               </div>
@@ -98,9 +98,9 @@
                 </div>
                 <div style="overflow: hidden; clear: both"></div>
                 <div
-                  class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
+                  class="NNPE-words"
                   :class="[
                     pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                     pItem.chs == '“' ? 'textRight' : '',
@@ -155,6 +155,11 @@
                                     ? 'wordActive'
                                     : '',
                                 ]"
+                                :style="{
+                                  fontFamily: pItem.config.fontFamily,
+                                  height: '28px',
+                                  display: 'inline-block',
+                                }"
                                 @click.stop="
                                   viewNotes(
                                     $event,
@@ -164,11 +169,6 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                                   )
                                 "
-                                :style="{
-                                  fontFamily: pItem.config.fontFamily,
-                                  height: '28px',
-                                  display: 'inline-block',
-                                }"
                                 >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                               >
                             </template>
@@ -197,6 +197,7 @@
                             v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
                             :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -206,7 +207,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -221,6 +221,11 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -230,11 +235,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].chs
@@ -245,6 +245,7 @@
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
                             :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -254,18 +255,17 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
                         <span
-                          class="NNPE-words-box"
                           v-if="
                             item.wordsList[pIndex + 2] &&
                             item.wordsList[pIndex + 2].chs &&
                             (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
                               NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1)
                           "
+                          class="NNPE-words-box"
                         >
                           <span
                             v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
@@ -273,6 +273,7 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -282,7 +283,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -297,6 +297,11 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -306,11 +311,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].chs
@@ -323,6 +323,7 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -332,7 +333,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -375,6 +375,11 @@
                                   ? 'wordActive'
                                   : '',
                               ]"
+                              :style="{
+                                fontFamily: pItem.config.fontFamily,
+                                height: '28px',
+                                display: 'inline-block',
+                              }"
                               @click.stop="
                                 viewNotes(
                                   $event,
@@ -384,11 +389,6 @@
                                   item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                                 )
                               "
-                              :style="{
-                                fontFamily: pItem.config.fontFamily,
-                                height: '28px',
-                                display: 'inline-block',
-                              }"
                               >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                             >
                           </template>
@@ -436,9 +436,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -448,19 +448,19 @@
                 </div>
               </div>
 
-              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
           <div
+            v-if="item.remarkDetail"
             :class="[
               'remarkBox',
               item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 'remark-top' : 'remark-top-8',
             ]"
-            v-if="item.remarkDetail"
           >
             <RemarkChs
-              :remarkDetail="item.remarkDetail"
-              :marginTop="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
+              :remark-detail="item.remarkDetail"
+              :margin-top="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
             />
           </div>
         </div>
@@ -471,9 +471,9 @@
 
         <template v-for="(items, indexs) in curQue.detail">
           <div
-            class="multilingual"
-            :key="indexs"
             v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+            :key="indexs"
+            class="multilingual"
           >
             <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
               {{
@@ -484,37 +484,37 @@
             </div>
           </div>
         </template>
-        <div class="dia-article-record" v-if="curQue.Bookanswer">
+        <div v-if="curQue.Bookanswer" class="dia-article-record">
           <Soundrecord
             type="promax"
             class="luyin-box"
             :TaskModel="TaskModel"
-            :answerRecordList="curQue.Bookanswer.normalModel.recordList"
+            :answer-record-list="curQue.Bookanswer.normalModel.recordList"
             @handleWav="handleWav"
           />
         </div>
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       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
-            audioId="diaNormalAudio"
+            ref="audioLine"
+            audio-id="diaNormalAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
             :ed="ed"
             type="audioLine"
-            ref="audioLine"
             @emptyEd="emptyEd"
           />
         </template>
@@ -547,7 +547,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -562,20 +562,6 @@ import Soundrecord from '../../common/SoundRecord.vue';
 import Notecard from '../article/components/Notecard.vue';
 export default {
   name: 'DialogueNormalModelChs',
-  props: [
-    'curQue',
-    'colorBox',
-    'NNPEAnnotationList',
-    'bodyLeft',
-    'bodyWidth',
-    'noFont',
-    'config',
-    'TaskModel',
-    'colLength',
-    'isPhone',
-    'multilingual',
-    'attrib',
-  ],
   components: {
     AudioLine,
     RoleChs,
@@ -588,7 +574,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -599,7 +585,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -607,10 +593,24 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'colorBox',
+    'NNPEAnnotationList',
+    'bodyLeft',
+    'bodyWidth',
+    'noFont',
+    'config',
+    'TaskModel',
+    'colLength',
+    'isPhone',
+    'multilingual',
+    'attrib',
+  ],
   data() {
     return {
       resArr: [],
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -631,7 +631,7 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
+    isPlaying() {
       let playing = false;
       if (this.$refs.audioLine) {
         playing = this.$refs.audioLine.audio.isPlaying;
@@ -650,7 +650,7 @@ export default {
       immediate: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -660,7 +660,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -677,9 +677,28 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      this.handleData();
+      window.addEventListener('resize', this.getScreenHeight);
+      this.getScreenHeight();
+    }
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getScreenHeight);
+  }, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -692,7 +711,7 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.$set(this.curQue.Bookanswer.normalModel, 'recordList', list);
     },
     getCurTime(curTime) {
@@ -719,15 +738,15 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           let sentArr = [];
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
             let startIndex = wIndex == 0 ? 0 : sentArr[wIndex - 1].startIndex + sentArr[wIndex - 1].chs.length;
             let endIndex = wIndex == 0 ? wItem.chs.length : sentArr[wIndex - 1].endIndex + wItem.chs.length;
             this.mergeWordSymbol(wItem);
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              articleSentIndex: asIndex, //在文章中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              articleSentIndex: asIndex, // 在文章中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -735,13 +754,13 @@ export default {
                     : wItem.pinyin
                   : wItem.pinyin_tone,
               chs: wItem.chs,
-              padding: true, //wItem.padding,
+              padding: true, // wItem.padding,
               className: wItem.className,
               isShow: wItem.isShow,
               isNumShow: wItem.isNumShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
-              startIndex: startIndex,
-              endIndex: endIndex,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
+              startIndex,
+              endIndex,
               leg: wItem.chs.length,
               chstimeList: [],
               fontSize: wItem.fontSize,
@@ -773,11 +792,11 @@ export default {
           dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\'/g, '’') : '';
         let paraObj = {
           wordsList: paraArr,
-          enwords: enwords,
-          timeList: timeList,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          dhaspinyin: dhaspinyin,
+          enwords,
+          timeList,
+          roleDetail,
+          remarkDetail,
+          dhaspinyin,
         };
         resArr.push(paraObj);
       });
@@ -800,7 +819,7 @@ export default {
         });
       });
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -808,7 +827,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -824,7 +843,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -840,7 +859,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -849,7 +868,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, item, ed) {
       if (item.timeList && item.timeList.length > 0) {
         this.curTime = time;
@@ -866,7 +885,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] === noteNum) {
-            noteIndex = '' + i + '';
+            noteIndex = String(i) + '';
             break;
           }
         }
@@ -890,12 +909,10 @@ export default {
 
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
+      } else if (left - 200 > 500) {
+        _this.left = 500;
       } else {
-        if (left - 200 > 500) {
-          _this.left = 500;
-        } else {
-          _this.left = left - 200;
-        }
+        _this.left = left - 200;
       }
       if (_this.oldNoteNum === noteNum) {
         _this.handleNote(noteNum);
@@ -921,26 +938,7 @@ export default {
       _this.oldNoteNum = '';
       _this.noteNum = '';
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      this.handleData();
-      window.addEventListener('resize', this.getScreenHeight);
-      this.getScreenHeight();
-    }
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.removeEventListener('resize', this.getScreenHeight);
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

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

@@ -1,24 +1,24 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div v-if="curQue" class="NNPE-ArticleView">
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((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 class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -54,23 +54,23 @@
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
-        <p :class="['notice', isHasRemark ? 'hasRemark' : '']" v-if="curQue.notice">
+        <p v-if="curQue.notice" :class="['notice', isHasRemark ? 'hasRemark' : '']">
           {{ curQue.notice }}
         </p>
         <div
-          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
+          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" :type="curQue.property.role_img_type" />
+            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
             <div class="wordsList-box">
-              <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
               <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                 <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
-              <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                 <span class="chs">{{ item.roleDetail.fullName }}</span>
                 <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
               </div>
@@ -83,9 +83,9 @@
                 </div>
                 <div style="overflow: hidden; clear: both"></div>
                 <div
-                  class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
+                  class="NNPE-words"
                   :class="[
                     pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                     pItem.chs == '“' ? 'textRight' : '',
@@ -119,12 +119,12 @@
                               newWordList.indexOf(pItem.chs) > -1 ? 'newActive' : '',
                               pItem.words ? 'newActive' : '',
                             ]"
-                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
                             }"
+                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                           >
                           <span
@@ -150,6 +150,11 @@
                           <span
                             class="NNPE-chs"
                             style="text-align: left"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -158,11 +163,6 @@
                                   : item.wordsList[pIndex + 1].chs,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].chs
@@ -173,19 +173,19 @@
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
                             :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
                         <span
-                          class="NNPE-words-box"
                           v-if="
                             item.wordsList[pIndex + 2] &&
                             item.wordsList[pIndex + 2].chs &&
                             (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
                               NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1)
                           "
+                          class="NNPE-words-box"
                         >
                           <span
                             v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
@@ -193,8 +193,8 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -209,6 +209,11 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -217,11 +222,6 @@
                                   : item.wordsList[pIndex + 2].chs,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].chs
@@ -234,8 +234,8 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -260,12 +260,12 @@
                             pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                             pItem.words ? 'newActive' : '',
                           ]"
-                          @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
                           }"
+                          @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                         >
                         <span
@@ -303,9 +303,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -314,13 +314,13 @@
                   }}
                 </div>
               </div>
-              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
           <div class="remarkBox remark-top">
             <RemarkChs
-              :remarkDetail="item.remarkDetail"
-              :marginTop="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
+              :remark-detail="item.remarkDetail"
+              :margin-top="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
             />
           </div>
         </div>
@@ -330,9 +330,9 @@
         </div>
         <template v-for="(items, indexs) in curQue.detail">
           <div
-            class="multilingual"
-            :key="indexs"
             v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+            :key="indexs"
+            class="multilingual"
           >
             <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
               {{
@@ -343,29 +343,29 @@
             </div>
           </div>
         </template>
-        <div class="dia-article-record" v-if="1 == 2">
-          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+        <div v-if="1 == 2" class="dia-article-record">
+          <Soundrecord type="promax" class="luyin-box" @handleWav="handleWav" />
         </div>
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       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
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -404,15 +404,16 @@
       >
         <Wordcard
           :word="word"
-          :changeWordCard="changeWordCard"
-          :themeColor="attrib ? attrib.topic_color : '#e35454'"
-          :currentTreeID="currentTreeID"
+          :change-word-card="changeWordCard"
+          :theme-color="attrib ? attrib.topic_color : '#e35454'"
+          :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
-          :writeList="curQue.Bookanswer.writeModel"
-          @changeCurQue="changeCurQue"
-          :mp3Url="wordPlayMp3"
+          :write-list="curQue.Bookanswer.writeModel"
+          :mp3-url="wordPlayMp3"
           :bg="wordbgs"
           :ed="wordeds"
+          :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
     </template>
@@ -425,7 +426,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -441,22 +442,6 @@ import RemarkChs from './RemarkChs.vue';
 import Soundrecord from '../../common/SoundRecord.vue';
 export default {
   name: 'PhraseModelChs',
-  props: [
-    'curQue',
-    'bodyLeft',
-    'NNPENewWordList',
-    'NNPEAnnotationList',
-    'colorBox',
-    'attrib',
-    'noFont',
-    'currentTreeID',
-    'config',
-    'TaskModel',
-    'colLength',
-    'NpcNewWordMp3',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Wordcard,
@@ -470,7 +455,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -481,7 +466,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -489,10 +474,26 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'bodyLeft',
+    'NNPENewWordList',
+    'NNPEAnnotationList',
+    'colorBox',
+    'attrib',
+    'noFont',
+    'currentTreeID',
+    'config',
+    'TaskModel',
+    'colLength',
+    'NpcNewWordMp3',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       resArr: [],
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -527,7 +528,7 @@ export default {
   computed: {},
   watch: {
     hz: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNewWords(val, _this.top, _this.left);
@@ -537,11 +538,10 @@ export default {
       deep: true,
     },
     isShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
-            console.log(_this.$refs.dialogueWordcard);
             _this.cardHeight = _this.$refs.dialogueWordcard.offsetHeight;
             if (_this.screenHeight - _this.clientY > _this.cardHeight) {
               _this.top = _this.clientY + 20;
@@ -555,7 +555,7 @@ export default {
       deep: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -565,7 +565,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -582,9 +582,31 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
+      this.handleNewword();
+    }
+    if (this.curQue) {
+      this.handleData();
+    }
+    window.addEventListener('resize', this.getScreenHeight);
+    this.getScreenHeight();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getScreenHeight);
+  }, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -620,27 +642,25 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           let sentence = dItem.sentences[sIndex];
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
             this.mergeWordSymbol(wItem);
             let words = '';
             if (this.newWordList.length > 0) {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -648,11 +668,11 @@ export default {
                     : wItem.pinyin
                   : wItem.pinyin_tone,
               chs: wItem.chs,
-              padding: true, //wItem.padding,
+              padding: true, // wItem.padding,
               className: wItem.className,
               isShow: wItem.isShow,
-              words: words,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              words,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -665,10 +685,10 @@ export default {
           dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\'/g, '’') : '';
         let paraObj = {
           wordsList: paraArr,
-          enwords: enwords,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          dhaspinyin: dhaspinyin,
+          enwords,
+          roleDetail,
+          remarkDetail,
+          dhaspinyin,
         };
         resArr.push(paraObj);
       });
@@ -682,43 +702,41 @@ export default {
       }
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0,
+        words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
-            }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
+        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length == item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr == item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -726,7 +744,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -742,7 +760,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -758,7 +776,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -767,7 +785,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time);
@@ -854,8 +872,8 @@ export default {
             JSON.stringify({
               list: wordlist,
               detail: item,
-              top: top,
-              left: left,
+              top,
+              left,
             }),
           );
           break;
@@ -881,36 +899,34 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = '' + i + '';
+            noteIndex = String(i) + '';
             break;
           }
         }
         this.showNoteDetail(e, noteIndex);
-      } else {
-        if (this.newWordList.indexOf(noteNum) > -1) {
-          if (_this.oldHz != noteNum) {
-            this.isShow = false;
-            setTimeout(() => {
-              _this.hz = noteNum;
-            }, 50);
-          }
-          _this.clientY = e.clientY;
-          let left = e.clientX;
-          let width = 0;
-
-          if (noteNum.length == 1 || noteNum.length == 2) {
-            width = 304;
-          } else if (noteNum.length == 3 || noteNum.length == 4) {
-            width = 432;
-          } else if (noteNum.length > 3) {
-            width = 560;
-          }
+      } else if (this.newWordList.indexOf(noteNum) > -1) {
+        if (_this.oldHz != noteNum) {
+          this.isShow = false;
+          setTimeout(() => {
+            _this.hz = noteNum;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let left = e.clientX;
+        let width = 0;
 
-          if (left - this.bodyLeft > this.contentWidth / 2) {
-            _this.left = left - width + 10;
-          } else {
-            _this.left = left;
-          }
+        if (noteNum.length == 1 || noteNum.length == 2) {
+          width = 304;
+        } else if (noteNum.length == 3 || noteNum.length == 4) {
+          width = 432;
+        } else if (noteNum.length > 3) {
+          width = 560;
+        }
+
+        if (left - this.bodyLeft > this.contentWidth / 2) {
+          _this.left = left - width + 10;
+        } else {
+          _this.left = left;
         }
       }
     },
@@ -961,29 +977,7 @@ export default {
         }
       }
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
-      this.handleNewword();
-    }
-    if (this.curQue) {
-      this.handleData();
-    }
-    window.addEventListener('resize', this.getScreenHeight);
-    this.getScreenHeight();
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.removeEventListener('resize', this.getScreenHeight);
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

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

@@ -1,27 +1,27 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div v-if="curQue" class="NNPE-ArticleView">
     <!-- <a class="ArticleView-full" @click="fullScreen">黑板模式</a> -->
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((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 class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPraAudio"
-            :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
             ref="audioLine"
-            :stopAudio="stopAudio"
+            audio-id="diaPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
             :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
-            :isRepeat="isRepeat"
-            :mp3Source="curQue.mp3_list[0].source"
+            :is-repeat="isRepeat"
+            :mp3-source="curQue.mp3_list[0].source"
             :ed="ed"
             type="audioLine"
             @handleChangeStopAudio="handleChangeStopAudio"
@@ -66,14 +66,14 @@
     </div>
 
     <template v-if="resObj">
-      <p class="notice" v-if="curQue.notice" style="padding-top: 24px">
+      <p v-if="curQue.notice" class="notice" style="padding-top: 24px">
         {{ curQue.notice }}
       </p>
       <div class="NPC-sentences-list">
         <div
-          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
           v-for="(item, index) in resObj.sentList"
           :key="'detail' + index"
+          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
         >
           <div
             class="NNPE-detail"
@@ -87,7 +87,7 @@
           >
             <template v-if="item.sentArr[0].sentIndex == 0">
               <RoleChs
-                :curRole="item.roleDetail"
+                :cur-role="item.roleDetail"
                 :color="
                   (curQue.wordTime &&
                     curQue.wordTime[index] &&
@@ -131,7 +131,7 @@
                     >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                   >
                 </div> -->
-                <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+                <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                   <span
                     :class="[
                       'chs',
@@ -170,9 +170,9 @@
                 <div style="overflow: hidden; clear: both"></div>
                 <div class="NNPE-words-box">
                   <div
-                    class="NNPE-words"
                     v-for="(pItem, pIndex) in item.sentArr"
                     :key="'wordsList' + pIndex"
+                    class="NNPE-words"
                     :class="[
                       pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                       pItem.chs == '“' ? 'textRight' : '',
@@ -301,12 +301,12 @@
                             </template>
                           </span>
                           <span
-                            class="NNPE-words-box"
                             v-if="
                               item.sentArr[pIndex + 2] &&
                               item.sentArr[pIndex + 2].chs &&
                               chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
                             "
+                            class="NNPE-words-box"
                           >
                             <template v-if="curQue.property.pinyin_position == 'top'">
                               <span
@@ -447,9 +447,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
@@ -465,32 +465,32 @@
               <Soundrecord
                 type="promax"
                 class="luyin-box"
-                @getWavblob="getWavblob"
-                @handleParentPlay="handleParentPlay"
-                @sentPause="sentPause"
                 :TaskModel="TaskModel"
-                :answerRecordList="
+                v-if="refresh"
+                :answer-record-list="
                   curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
                 "
-                :tmIndex="index"
+                :tm-index="index"
+                :sent-index="sentIndex"
+                @getWavblob="getWavblob"
+                @handleParentPlay="handleParentPlay"
+                @sentPause="sentPause"
                 @handleWav="handleWav"
-                :sentIndex="sentIndex"
-                v-if="refresh"
               />
-              <div class="compare-box" v-if="curQue.mp3_list && curQue.mp3_list.length > 0">
+              <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
                 <Audio-compare
-                  :themeColor="attrib ? attrib.topic_color : '#e35454'"
+                  :theme-color="attrib ? attrib.topic_color : '#e35454'"
                   :index="index"
-                  :sentIndex="sentIndex"
+                  :sent-index="sentIndex"
                   :url="curQue.mp3_list[0].id"
                   :bg="curQue.wordTime[index].bg"
                   :ed="curQue.wordTime[index].ed"
                   :wavblob="wavblob"
-                  :getCurTime="getCurTime"
-                  :sentPause="sentPause"
-                  :isRecord="isRecord"
-                  :handleChangeStopAudio="handleChangeStopAudio"
-                  :getPlayStatus="getPlayStatus"
+                  :get-cur-time="getCurTime"
+                  :sent-pause="sentPause"
+                  :is-record="isRecord"
+                  :handle-change-stop-audio="handleChangeStopAudio"
+                  :get-play-status="getPlayStatus"
                 />
               </div>
             </div>
@@ -504,9 +504,9 @@
     </template>
     <template v-for="(items, indexs) in curQue.detail">
       <div
-        class="multilingual"
-        :key="indexs"
         v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+        :key="indexs"
+        class="multilingual"
       >
         <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
           {{
@@ -518,25 +518,25 @@
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       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
-            audioId="diaPraAudio"
-            :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
             ref="audioLine"
-            :stopAudio="stopAudio"
+            audio-id="diaPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
             :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
-            :isRepeat="isRepeat"
-            :mp3Source="curQue.mp3_list[0].source"
+            :is-repeat="isRepeat"
+            :mp3-source="curQue.mp3_list[0].source"
             :ed="ed"
             type="audioLine"
             @handleChangeStopAudio="handleChangeStopAudio"
@@ -578,26 +578,27 @@
         />
       </div>
     </div>
-    <div class="voice-full-screen" :id="'screen-' + mathNum">
+    <div :id="'screen-' + mathNum" class="voice-full-screen">
       <Voicefullscreen
         v-if="isFull && resObj"
-        :themeColor="attrib ? attrib.topic_color : '#e35454'"
-        :curQue="curQue"
-        :sentList="resObj.sentList"
-        :sentIndex="sentIndex"
+        :theme-color="attrib ? attrib.topic_color : '#e35454'"
+        :cur-que="curQue"
+        :sent-list="resObj.sentList"
+        :sent-index="sentIndex"
         :mp3="curQue.mp3_list && curQue.mp3_list[0] ? curQue.mp3_list[0].id : ''"
-        :noFont="noFont"
+        :no-font="noFont"
         :NNPENewWordList="NNPENewWordList"
-        :currentTreeID="currentTreeID"
-        :isFull="isFull"
+        :current-tree-i-d="currentTreeID"
+        :is-full="isFull"
         :config="config"
         :TaskModel="TaskModel"
+        :NpcNewWordMp3="NpcNewWordMp3"
+        :attrib="attrib"
         @handleWav="handleWav"
         @changePinyin="changePinyin"
         @changeEN="changeEN"
         @exitFullscreen="exitFullscreen"
         @changeIsFull="changeIsFull"
-        :NpcNewWordMp3="NpcNewWordMp3"
       />
     </div>
   </div>
@@ -612,20 +613,6 @@ import AudioCompare from '../article/components/AudioCompare.vue';
 import Voicefullscreen from '../article/Voicefullscreen.vue';
 export default {
   name: 'ArticleView',
-  props: [
-    'curQue',
-    'colorBox',
-    'noFont',
-    'attrib',
-    'config',
-    'NNPENewWordList',
-    'currentTreeID',
-    'TaskModel',
-    'colLength',
-    'NpcNewWordMp3',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Soundrecord,
@@ -638,7 +625,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -649,7 +636,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -657,18 +644,32 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'colorBox',
+    'noFont',
+    'attrib',
+    'config',
+    'NNPENewWordList',
+    'currentTreeID',
+    'TaskModel',
+    'colLength',
+    'NpcNewWordMp3',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       wavblob: null,
       resObj: null,
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
       stopAudio: false,
       sentIndex: 0,
       isRepeat: false,
-      currSent: null, //当前句子的时间
+      currSent: null, // 当前句子的时间
       isRecord: false,
       isFull: false,
       mathNum: Math.random().toString(36).substr(2),
@@ -682,7 +683,7 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
+    isPlaying() {
       let playing = false;
       if (this.$refs.audioLine) {
         playing = this.$refs.audioLine.audio.isPlaying;
@@ -692,7 +693,7 @@ export default {
   },
   watch: {
     sentIndex: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         if (newVal != oldVal) {
           let Bookanswer = _this.curQue.Bookanswer;
@@ -712,7 +713,7 @@ export default {
       deep: true,
     },
     isFull: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         _this.refresh = false;
         if (!newVal) {
@@ -725,10 +726,25 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      this.handleData();
+    }
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
     getPlayStatus(val) {
-      //this.isPlaying = val;
+      // this.isPlaying = val;
     },
     pauseAudio() {
       let audio = document.getElementsByTagName('audio');
@@ -746,7 +762,7 @@ export default {
         });
       }
     },
-    //语音全屏
+    // 语音全屏
     fullScreen(type) {
       this.pauseAudio();
       this.pauseVideo();
@@ -754,8 +770,8 @@ export default {
       this.goFullscreen();
     },
     goFullscreen() {
-      let id = 'screen-' + this.mathNum;
-      var element = document.getElementById(id);
+      let id = `screen-${this.mathNum}`;
+      let element = document.getElementById(id);
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.msRequestFullscreen) {
@@ -817,8 +833,8 @@ export default {
         let trans_arr = item.translation.split('\n');
         this.$set(this.multilingualTextList, item.type, trans_arr);
       });
-      let resArr = [],
-        sentArrTotal = [];
+      let resArr = [];
+      let sentArrTotal = [];
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let wordTimeList = curQue.wordTime;
       let dhaspinyin = false; // 每段是否有拼音
@@ -839,20 +855,18 @@ export default {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -863,11 +877,11 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              startIndex: startIndex,
-              endIndex: endIndex,
+              startIndex,
+              endIndex,
               leg: wItem.chs.length,
               timeList: [],
-              words: words,
+              words,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -876,10 +890,10 @@ export default {
             if (wItem.pinyin) dhaspinyin = true;
           });
           let objs = {
-            roleDetail: roleDetail,
-            sentArr: sentArr,
+            roleDetail,
+            sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/\'/g, '’'),
-            dhaspinyin: dhaspinyin,
+            dhaspinyin,
           };
           sentArrTotal.push(sentArr);
           resArr.push(objs);
@@ -891,7 +905,7 @@ export default {
 
       this.resObj = { sentList: resArr };
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -917,7 +931,7 @@ export default {
         });
       });
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.pinyin) > -1) {
         wItem.isShow = false;
@@ -926,43 +940,41 @@ export default {
       }
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0,
+        words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
+        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length == item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
-            }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr == item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -978,7 +990,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -987,7 +999,7 @@ export default {
       });
       return listRes;
     },
-    //计算总时间
+    // 计算总时间
     countWordTime(sentArr) {
       let total = 0;
       sentArr.forEach((item) => {
@@ -995,7 +1007,7 @@ export default {
       });
       return total;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, index, ed) {
       let _this = this;
       if (_this.isRepeat) {
@@ -1012,7 +1024,7 @@ export default {
       this.ed = undefined;
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.curQue.Bookanswer.practiceModel[tmIndex] = {
         recordList: [],
       };
@@ -1026,7 +1038,7 @@ export default {
     handleChangeStopAudio() {
       this.stopAudio = false;
     },
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -1057,22 +1069,7 @@ export default {
       });
       this.newWordList = JSON.parse(JSON.stringify(NewWordList));
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      this.handleData();
-    }
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

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

@@ -1,24 +1,24 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" ref="ArticleView" v-if="curQue">
+  <div v-if="curQue" ref="ArticleView" class="NNPE-ArticleView">
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((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 class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -54,21 +54,21 @@
           <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
         </div>
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p v-if="curQue.notice" class="notice">{{ curQue.notice }}</p>
         <div
-          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
+          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
         >
           <div class="article-content">
-            <RoleChs :curRole="item.roleDetail" :type="curQue.property.role_img_type" />
+            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
             <div class="wordsList-box">
-              <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
               <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                 <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
-              <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                 <span class="chs">{{ item.roleDetail.fullName }}</span>
                 <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
               </div>
@@ -81,9 +81,9 @@
                 </div>
                 <div style="overflow: hidden; clear: both"></div>
                 <div
-                  class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
+                  class="NNPE-words"
                   :class="[
                     pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                     pItem.chs == '“' ? 'textRight' : '',
@@ -169,12 +169,12 @@
                           >
                         </span>
                         <span
-                          class="NNPE-words-box"
                           v-if="
                             item.wordsList[pIndex + 2] &&
                             item.wordsList[pIndex + 2].chs &&
                             chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1
                           "
+                          class="NNPE-words-box"
                           @click="showWordDetail($event, item.wordsList[pIndex + 2])"
                         >
                           <span
@@ -242,12 +242,12 @@
                               ? 'wordActive'
                               : '',
                           ]"
-                          @click="showWordDetail($event, pItem)"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
                           }"
+                          @click="showWordDetail($event, pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                         >
                         <span
@@ -285,9 +285,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -296,7 +296,7 @@
                   }}
                 </div>
               </div>
-              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
         </div>
@@ -306,9 +306,9 @@
         </div>
         <template v-for="(items, indexs) in curQue.detail">
           <div
-            class="multilingual"
-            :key="indexs"
             v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+            :key="indexs"
+            class="multilingual"
           >
             <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
               {{
@@ -319,35 +319,35 @@
             </div>
           </div>
         </template>
-        <div class="dia-article-record" v-if="curQue.Bookanswer">
+        <div v-if="curQue.Bookanswer" class="dia-article-record">
           <Soundrecord
-            @handleWav="handleWav"
             :TaskModel="TaskModel"
-            :answerRecordList="curQue.Bookanswer.wordModel.recordList"
+            :answer-record-list="curQue.Bookanswer.wordModel.recordList"
             type="promax"
             class="luyin-box"
+            @handleWav="handleWav"
           />
         </div>
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       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
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -386,11 +386,12 @@
       >
         <Wordcard
           :word="word"
-          :changeWordCard="changeWordCard"
-          :themeColor="attrib ? attrib.topic_color : '#e35454'"
-          :currentTreeID="currentTreeID"
+          :change-word-card="changeWordCard"
+          :theme-color="attrib ? attrib.topic_color : '#e35454'"
+          :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
-          :writeList="curQue.Bookanswer.writeModel"
+          :write-list="curQue.Bookanswer.writeModel"
+          :attrib="attrib"
           @changeCurQue="changeCurQue"
         />
       </div>
@@ -404,7 +405,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -420,20 +421,6 @@ import RemarkChs from './RemarkChs.vue';
 import Soundrecord from '../../common/SoundRecord.vue';
 export default {
   name: 'WordModelChs',
-  props: [
-    'curQue',
-    'bodyLeft',
-    'NNPENewWordList',
-    'colorBox',
-    'attrib',
-    'noFont',
-    'currentTreeID',
-    'config',
-    'TaskModel',
-    'colLength',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Wordcard,
@@ -447,7 +434,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -458,7 +445,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -466,10 +453,24 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'bodyLeft',
+    'NNPENewWordList',
+    'colorBox',
+    'attrib',
+    'noFont',
+    'currentTreeID',
+    'config',
+    'TaskModel',
+    'colLength',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       resArr: [],
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、', '……'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -501,7 +502,7 @@ export default {
   computed: {},
   watch: {
     hz: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           if (_this.NumberList.indexOf(val) > -1) {
@@ -514,7 +515,7 @@ export default {
       deep: true,
     },
     isShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -531,7 +532,7 @@ export default {
       deep: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -541,7 +542,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -558,9 +559,30 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      this.handleData();
+    }
+
+    window.addEventListener('resize', this.getScreenHeight);
+    this.getScreenHeight();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {
+    this.isShow = false;
+    window.removeEventListener('resize', this.getScreenHeight);
+  }, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -573,11 +595,10 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.$set(this.curQue.Bookanswer.wordModel, 'recordList', list);
     },
     getCurTime(curTime) {
-      console.log(curTime);
       this.curTime = curTime * 1000;
     },
     handleData() {
@@ -595,12 +616,12 @@ export default {
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
             this.mergeWordSymbol(wItem);
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -611,7 +632,7 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -630,11 +651,11 @@ export default {
           dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\'/g, '’') : '';
         let paraObj = {
           wordsList: paraArr,
-          enwords: enwords,
-          timeList: timeList,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          dhaspinyin: dhaspinyin,
+          enwords,
+          timeList,
+          roleDetail,
+          remarkDetail,
+          dhaspinyin,
         };
         resArr.push(paraObj);
       });
@@ -646,7 +667,7 @@ export default {
         });
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.pinyin) > -1) {
         wItem.isShow = false;
@@ -654,7 +675,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -670,7 +691,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -686,7 +707,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -695,7 +716,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time / 1000);
@@ -796,7 +817,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = '' + i + '';
+            noteIndex = String(i) + '';
             break;
           }
         }
@@ -817,12 +838,10 @@ export default {
 
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
+      } else if (left - 200 > 500) {
+        _this.left = 500;
       } else {
-        if (left - 200 > 500) {
-          _this.left = 500;
-        } else {
-          _this.left = left - 200;
-        }
+        _this.left = left - 200;
       }
     },
     // 处理注释数据
@@ -853,28 +872,7 @@ export default {
         console.log(this.curQue.Bookanswer);
       }
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      this.handleData();
-    }
-
-    window.addEventListener('resize', this.getScreenHeight);
-    this.getScreenHeight();
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    this.isShow = false;
-    window.removeEventListener('resize', this.getScreenHeight);
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -389,6 +389,7 @@ export default {
       align-items: center;
       width: 120px;
       margin: 0 2px;
+      vertical-align: bottom;
 
       &.pinyin :deep input.el-input__inner {
         font-family: 'PINYIN-B', sans-serif;

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -14,7 +14,7 @@
         >
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
-            <span class="NPC-topTitle-text" v-if="showLang">
+            <span v-if="showLang" class="NPC-topTitle-text">
               {{ titleTrans[getLang()] }}
             </span>
           </div>
@@ -38,8 +38,8 @@
                   :get-cur-time="getCurTime"
                   :ed="ed"
                   type="audioLine"
-                  @handleListenRead="handleListenRead"
                   :attrib="data.unified_attrib"
+                  @handleListenRead="handleListenRead"
                 />
               </div>
               <ul
@@ -71,7 +71,6 @@
                       ></a> -->
                       <SvgIcon
                         v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
-                        @click="handleChangeTime(sItem.bg, sItem.ed)"
                         icon-class="animated"
                         :style="{
                           color:
@@ -80,10 +79,10 @@
                               : '',
                           marginTop: '4px',
                         }"
+                        @click="handleChangeTime(sItem.bg, sItem.ed)"
                       />
                       <SvgIcon
                         v-else
-                        @click="handleChangeTime(sItem.bg, sItem.ed)"
                         icon-class="play-btn"
                         :style="{
                           color:
@@ -91,6 +90,7 @@
                               ? data.unified_attrib.topic_color
                               : '',
                         }"
+                        @click="handleChangeTime(sItem.bg, sItem.ed)"
                       />
                     </template>
                     <template v-else-if="sItem.mp3_list">
@@ -171,14 +171,14 @@
                         >
                         </span>
                         <span
-                          class="NPC-word-tab-common"
-                          :style="{ width: data.col_width[0].value + 'px' }"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][0]
                           "
+                          class="NPC-word-tab-common"
+                          :style="{ width: data.col_width[0].value + 'px' }"
                         >
                           {{ multilingualTextList[getLang()][index][0] }}
                         </span>
@@ -190,13 +190,13 @@
                           v-html="sItem.cixing"
                         ></p>
                         <span
-                          class="NPC-word-tab-common"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][1]
                           "
+                          class="NPC-word-tab-common"
                         >
                           {{ multilingualTextList[getLang()][index][1] }}
                         </span>
@@ -204,13 +204,13 @@
                       <span :style="{ width: data.col_width[3].value + 'px' }">
                         <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
                         <span
-                          class="NPC-word-tab-common"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][2]
                           "
+                          class="NPC-word-tab-common"
                         >
                           {{ multilingualTextList[getLang()][index][2] }}
                         </span>
@@ -227,14 +227,14 @@
                       <span :style="{ width: data.col_width[0].value + 'px' }">
                         <p class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"></p>
                         <span
-                          class="NPC-word-tab-common"
-                          :style="{ width: data.col_width[0].value + 'px' }"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][0]
                           "
+                          class="NPC-word-tab-common"
+                          :style="{ width: data.col_width[0].value + 'px' }"
                         >
                           {{ multilingualTextList[getLang()][index][0] }}
                         </span>
@@ -254,13 +254,13 @@
                         ></p>
 
                         <span
-                          class="NPC-word-tab-common"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][1]
                           "
+                          class="NPC-word-tab-common"
                         >
                           {{ multilingualTextList[getLang()][index][1] }}
                         </span>
@@ -268,13 +268,13 @@
                       <span :style="{ width: data.col_width[3].value + 'px' }">
                         <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
                         <span
-                          class="NPC-word-tab-common"
                           v-if="
                             showLang &&
                             multilingualTextList[getLang()] &&
                             multilingualTextList[getLang()][index] &&
                             multilingualTextList[getLang()][index][2]
                           "
+                          class="NPC-word-tab-common"
                         >
                           {{ multilingualTextList[getLang()][index][2] }}
                         </span>
@@ -291,8 +291,8 @@
                           type="mini"
                           class="luyin-box-wordphrase"
                           :style="{ marginLeft: '8px' }"
-                          @handleWav="handleWav"
                           :attrib="data.unified_attrib"
+                          @handleWav="handleWav"
                         />
                       </span>
                       <span v-if="isEnable(data.property.is_has_infor)">
@@ -302,7 +302,7 @@
 
                     <div v-if="sItem.collocation" :style="{ width: data.col_width[4].value + 'px' }">
                       <span class="collocation"><span>搭配：</span><b v-html="sItem.collocation"></b></span>
-                      <span class="" v-if="showLang">
+                      <span v-if="showLang" class="">
                         {{
                           multilingualTextList[getLang()] &&
                           multilingualTextList[getLang()][index] &&
@@ -319,7 +319,7 @@
                           <b v-html="sItem.liju_list"></b>
                         </div>
                       </span>
-                      <span class="" v-if="showLang">
+                      <span v-if="showLang" class="">
                         {{
                           multilingualTextList[getLang()] &&
                           multilingualTextList[getLang()][index] &&
@@ -579,9 +579,9 @@ export default {
     AudioPlay,
     Strockplay,
   },
-  props: ['newData'],
   mixins: [PreviewMixin],
   inject: ['bookInfo'],
+  props: ['newData'],
   data() {
     return {
       data: this.newData ? this.newData : getNewWordData(),
@@ -625,6 +625,14 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    this.width = `${
+      document.querySelector('.preview-main').offsetWidth -
+      73 -
+      (this.data.property.sn_display_mode === 'true' ? 15 : 0) -
+      (this.newData ? 16 : 0)
+    }px`;
+  },
   methods: {
     palyAudio(url, sIndex) {
       this.stopAudio();
@@ -734,6 +742,9 @@ export default {
       });
       this.rowWidth += 132;
       this.is_change = true;
+      setTimeout(() => {
+        this.is_change = false;
+      }, 2000);
       let resIndex = 0;
       let optionRes = [];
       let itemNumber = 0;
@@ -836,14 +847,6 @@ export default {
       item.isFlipped = !item.isFlipped;
     },
   },
-  mounted() {
-    this.width =
-      document.querySelector('.preview-main').offsetWidth -
-      73 -
-      (this.data.property.sn_display_mode === 'true' ? 15 : 0) -
-      (this.newData ? 16 : 0) +
-      'px';
-  },
 };
 </script>
 

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -14,7 +14,7 @@
         >
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
-            <span class="NPC-topTitle-text" v-if="showLang">
+            <span v-if="showLang" class="NPC-topTitle-text">
               {{ titleTrans[getLang()] }}
             </span>
           </div>
@@ -30,56 +30,89 @@
               <div class="NPC-notes-con">
                 <span
                   class="NPC-notes-con-number"
-                  v-html="item.number"
                   :style="{
                     color:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                   }"
+                  v-html="item.number"
                 ></span>
                 <div class="NPC-notes-con-box">
                   <template v-if="isEnable(data.property.view_pinyin)">
                     <p class="pinyin-text">
-                      <span v-if="data.property.pinyin_position === 'top'" class="pinyin" v-html="item.pinyin"> </span>
+                      <span
+                        v-if="data.property.pinyin_position === 'top'"
+                        class="pinyin"
+                        :style="{
+                          fontSize:
+                            data.unified_attrib && data.unified_attrib.pinyin_size
+                              ? data.unified_attrib.pinyin_size
+                              : '',
+                        }"
+                        v-html="item.pinyin"
+                      >
+                      </span>
                       <span>
                         <span
                           v-if="data.property.pinyin_position === 'front'"
-                          v-html="item.pinyin"
                           class="pinyin pinyin-front"
+                          :style="{
+                            fontSize:
+                              data.unified_attrib && data.unified_attrib.pinyin_size
+                                ? data.unified_attrib.pinyin_size
+                                : '',
+                          }"
+                          v-html="item.pinyin"
                         ></span
                         ><span
                           class="NPC-notes-con-text"
-                          v-html="item.con"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            fontSize:
+                              data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                           }"
+                          v-html="item.con"
                         ></span
                         ><span
                           v-if="data.property.pinyin_position === 'back'"
-                          v-html="item.pinyin"
                           class="pinyin pinyin-back"
+                          :style="{
+                            fontSize:
+                              data.unified_attrib && data.unified_attrib.pinyin_size
+                                ? data.unified_attrib.pinyin_size
+                                : '',
+                          }"
+                          v-html="item.pinyin"
                         ></span>
                       </span>
                       <span
                         v-if="data.property.pinyin_position === 'bottom'"
                         class="pinyin"
+                        :style="{
+                          fontSize:
+                            data.unified_attrib && data.unified_attrib.pinyin_size
+                              ? data.unified_attrib.pinyin_size
+                              : '',
+                        }"
                         v-html="item.pinyin"
                       ></span>
                     </p>
                   </template>
 
                   <span
-                    class="NPC-notes-con-text"
-                    v-html="item.con"
                     v-else
+                    class="NPC-notes-con-text"
                     :style="{
                       color:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                      fontSize:
+                        data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                     }"
+                    v-html="item.con"
                   ></span>
-                  <span class="multilingual" v-if="showLang">
+                  <span v-if="showLang" class="multilingual">
                     {{
                       multilingualTextList[getLang()] &&
                       multilingualTextList[getLang()][index] &&
@@ -96,7 +129,7 @@
               <div v-if="item.file_list[0]" class="NPC-notes-note-img">
                 <el-image :src="item.pic_url" :preview-src-list="[item.pic_url]" fit="contain" />
               </div>
-              <div class="NPC-notes-note" v-if="showLang">
+              <div v-if="showLang" class="NPC-notes-note">
                 {{
                   multilingualTextList[getLang()] &&
                   multilingualTextList[getLang()][index] &&
@@ -122,8 +155,8 @@ import { GetFileURLMap } from '@/api/app';
 export default {
   name: 'NotesPreview',
   components: {},
-  props: ['notesData'],
   mixins: [PreviewMixin],
+  props: ['notesData'],
   data() {
     return {
       data: this.notesData ? this.notesData : getNotesData(),

src/views/book/courseware/preview/components/select/SelectPreview.vue

@@ -18,9 +18,7 @@
           <span class="checkbox">
             <SvgIcon icon-class="check-mark" width="10" height="7" />
           </span>
-          <span class="serial-number">
-            {{ i + 1 }}
-          </span>
+          <span class="serial-number"> {{ computedOptionNumber(i) }}. </span>
           <PinyinText
             v-if="isEnable(data.property.view_pinyin)"
             class="content"
@@ -44,10 +42,11 @@
 </template>
 
 <script>
-import { getSelectData, arrangeTypeList } from '@/views/book/courseware/data/select';
-
 import PreviewMixin from '../common/PreviewMixin';
 
+import { getSelectData, arrangeTypeList } from '@/views/book/courseware/data/select';
+import { serialNumberTypeList, computeOptionMethods } from '@/views/book/courseware/data/common';
+
 export default {
   name: 'SelectPreview',
   mixins: [PreviewMixin],
@@ -74,6 +73,11 @@ export default {
     },
   },
   methods: {
+    computedOptionNumber(number) {
+      let type = serialNumberTypeList.find((item) => item.value === this.data.property.option_serial_type)?.value;
+      if (!type) return number + 1;
+      return computeOptionMethods[type](number);
+    },
     isAnswer(mark) {
       return this.answer.answer_list.includes(mark);
     },