修复问题

src/components/CommonPreview.vue

@@ -809,21 +809,20 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
     overflow: auto;
     background: url('@/assets/preview-bg.png') repeat;
 
-    &.fullscreen {
+    .catalogue-bar {
+      position: absolute;
+      top: 0;
+      left: 240px;
       display: flex;
-
-      & .catalogue-bar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 54px;
-        height: 54px;
-        margin: -9px 6px 0 240px;
-        cursor: pointer;
-        background-color: #fff;
-        border-radius: 2px;
-        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
-      }
+      align-items: center;
+      justify-content: center;
+      width: 54px;
+      height: 54px;
+      margin: -9px 6px 0 240px;
+      cursor: pointer;
+      background-color: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
     }
 
     .sidebar-bar {
@@ -892,14 +891,14 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       width: $courseware-left-margin;
       min-width: $courseware-left-margin;
       max-width: $courseware-left-margin;
-      background-color: #ecf0f1;
+      background-color: #f9f9f9;
     }
 
     .preview-right {
       width: $courseware-right-margin;
       min-width: $courseware-right-margin;
       max-width: $courseware-right-margin;
-      background-color: #ecf0f1;
+      background-color: #f9f9f9;
     }
 
     &.no-audit {

src/styles/variables.scss

@@ -25,8 +25,8 @@ $header-h: 64px; // 顶部内容高度
 $courseware-width: 1000px; // 教材内容宽度
 $courseware-left-margin: 100px; // 教材左页边距
 $courseware-right-margin: 100px; // 教材右页边距
-$courseware-top-margin: 65px; // 教材顶部页边距
-$courseware-bottom-margin: 65px; // 教材底部页边距
+$courseware-top-padding: 65px; // 教材顶部页边距
+$courseware-bottom-padding: 65px; // 教材底部页边距
 $component-spacing: 24px; // 组件间间距
 $title-content-spacing: 65px; // 标题与内容间距
 $border-component-spacing: 10px; // 组件边框与组件内容间距

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -388,13 +388,33 @@ export default {
   width: 100%;
   height: 100%;
   min-height: 500px;
-  margin-top: $courseware-top-margin;
-  margin-bottom: $courseware-bottom-margin;
+  padding-top: $courseware-top-padding;
+  padding-bottom: $courseware-bottom-padding;
+  margin: 15px 0;
   background-color: #fff;
   background-repeat: no-repeat;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
 
+  &::before,
+  &::after {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    pointer-events: none;
+    content: '';
+    background: #f9f9f9;
+  }
+
+  &::before {
+    top: -15px;
+  }
+
+  &::after {
+    bottom: -15px;
+  }
+
   .row {
     display: grid;
     gap: $component-spacing;

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

@@ -105,8 +105,8 @@
                     :tab-index="0"
                     :TaskModel="TaskModel"
                     :write-list="writeList"
-                    @saveWriteAnswer="saveWriteAnswer"
                     :attrib="attrib"
+                    @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
                     <div class="pen-colors"></div>
@@ -118,20 +118,20 @@
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
                 <li
                   :class="navIndex == 0 ? 'active' : ''"
-                  @click="changeNav(0)"
                   :style="{
                     background: attrib ? attrib.topic_color : '',
                   }"
+                  @click="changeNav(0)"
                 >
                   描红
                 </li>
                 <li
                   :class="navIndex == 1 ? 'active' : ''"
-                  @click="changeNav(1)"
                   :style="{
                     background: attrib ? attrib.assist_color : '',
                     color: attrib ? attrib.topic_color : '',
                   }"
+                  @click="changeNav(1)"
                 >
                   临摹
                 </li>
@@ -212,8 +212,8 @@
                     :tab-index="1"
                     :TaskModel="TaskModel"
                     :write-list="writeList"
-                    @saveWriteAnswer="saveWriteAnswer"
                     :attrib="attrib"
+                    @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
                     <div class="pen-colors"></div>
@@ -225,20 +225,20 @@
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
                 <li
                   :class="navIndex == 0 ? 'active' : ''"
-                  @click="changeNav(0)"
                   :style="{
                     background: attrib ? attrib.topic_color : '',
                   }"
+                  @click="changeNav(0)"
                 >
                   描红
                 </li>
                 <li
                   :class="navIndex == 1 ? 'active' : ''"
-                  @click="changeNav(1)"
                   :style="{
                     background: attrib ? attrib.assist_color : '',
                     color: attrib ? attrib.topic_color : '',
                   }"
+                  @click="changeNav(1)"
                 >
                   临摹
                 </li>

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

@@ -13,8 +13,8 @@
               ? 'brown-border'
               : 'red-border',
       ]"
-      @click="playHanzi"
       :style="{ color: attrib ? attrib.topic_color : '' }"
+      @click="playHanzi"
     >
       <SvgIcon icon-class="hanzi-strock-play" size="22" class="strock-play-btn" />
     </div>

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

@@ -192,8 +192,8 @@
           :write-list="writeList"
           :bg="bg"
           :ed="ed"
-          @changeCurQue="changeCurQue"
           :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
       <!-- </el-dialog> -->

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

@@ -1,28 +1,28 @@
 <!--  -->
 <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"
             :attrib="attrib"
+            @emptyEd="emptyEd"
           />
         </template>
       </div>
@@ -57,10 +57,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' : '',
@@ -70,18 +72,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>
@@ -99,9 +99,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' : '',
@@ -156,15 +156,6 @@
                                     ? 'wordActive'
                                     : '',
                                 ]"
-                                @click.stop="
-                                  viewNotes(
-                                    $event,
-                                    pItem.chs[wIndex],
-                                    item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
-                                    item,
-                                    item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
-                                  )
-                                "
                                 :style="{
                                   fontFamily: pItem.config.fontFamily,
                                   height: '28px',
@@ -178,6 +169,15 @@
                                       ? attrib.topic_color
                                       : '',
                                 }"
+                                @click.stop="
+                                  viewNotes(
+                                    $event,
+                                    pItem.chs[wIndex],
+                                    item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
+                                    item,
+                                    item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                  )
+                                "
                                 >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                               >
                             </template>
@@ -206,6 +206,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,
@@ -215,7 +216,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -230,15 +230,6 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
-                            @click.stop="
-                              viewNotes(
-                                $event,
-                                item.wordsList[pIndex + 1].chs,
-                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
-                                item,
-                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
-                              )
-                            "
                             :style="{
                               fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
@@ -253,6 +244,15 @@
                                   ? attrib.topic_color
                                   : '',
                             }"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 1].chs,
+                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
+                                item,
+                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                              )
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].chs
@@ -263,6 +263,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,
@@ -272,18 +273,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"
@@ -291,6 +291,7 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -300,7 +301,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -315,15 +315,6 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
-                            @click.stop="
-                              viewNotes(
-                                $event,
-                                item.wordsList[pIndex + 2].chs,
-                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
-                                item,
-                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
-                              )
-                            "
                             :style="{
                               fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
@@ -338,6 +329,15 @@
                                   ? attrib.topic_color
                                   : '',
                             }"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].chs,
+                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
+                                item,
+                                item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                              )
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].chs
@@ -350,6 +350,7 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            style="text-align: left"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -359,7 +360,6 @@
                                 item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
                               )
                             "
-                            style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -402,15 +402,6 @@
                                   ? 'wordActive'
                                   : '',
                               ]"
-                              @click.stop="
-                                viewNotes(
-                                  $event,
-                                  pItem.chs[wIndex],
-                                  item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
-                                  item,
-                                  item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
-                                )
-                              "
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
@@ -424,6 +415,15 @@
                                     ? attrib.topic_color
                                     : '',
                               }"
+                              @click.stop="
+                                viewNotes(
+                                  $event,
+                                  pItem.chs[wIndex],
+                                  item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
+                                  item,
+                                  item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                )
+                              "
                               >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                             >
                           </template>
@@ -471,9 +471,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]
@@ -483,19 +483,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>
@@ -506,9 +506,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' : '']">
               {{
@@ -519,40 +519,40 @@
             </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"
-            @handleWav="handleWav"
+            :answer-record-list="curQue.Bookanswer.normalModel.recordList"
             :attrib="attrib"
+            @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"
             :attrib="attrib"
+            @emptyEd="emptyEd"
           />
         </template>
       </div>
@@ -584,7 +584,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" :attrib="attrib" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -599,20 +599,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,
@@ -625,7 +611,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -636,7 +622,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -644,10 +630,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: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -668,7 +668,7 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
+    isPlaying() {
       let playing = false;
       if (this.$refs.audioLine) {
         playing = this.$refs.audioLine.audio.isPlaying;
@@ -687,7 +687,7 @@ export default {
       immediate: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -697,7 +697,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -714,9 +714,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');
@@ -729,7 +748,7 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.$set(this.curQue.Bookanswer.normalModel, 'recordList', list);
     },
     getCurTime(curTime) {
@@ -756,15 +775,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
@@ -772,13 +791,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,
@@ -810,11 +829,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);
       });
@@ -837,7 +856,7 @@ export default {
         });
       });
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -845,7 +864,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -861,7 +880,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -877,7 +896,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -886,7 +905,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, item, ed) {
       if (item.timeList && item.timeList.length > 0) {
         this.curTime = time;
@@ -903,7 +922,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;
           }
         }
@@ -927,12 +946,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);
@@ -958,26 +975,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/Practicechs.vue

@@ -1,32 +1,32 @@
 <!--  -->
 <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"
+            :attrib="attrib"
             @handleChangeStopAudio="handleChangeStopAudio"
             @emptyEd="emptyEd"
-            :attrib="attrib"
           />
         </template>
       </div>
@@ -67,14 +67,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' : '']"
           :style="{
             backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
           }"
@@ -91,7 +91,7 @@
           >
             <template v-if="item.sentArr[0].sentIndex == 0">
               <RoleChs
-                :curRole="item.roleDetail"
+                :cur-role="item.roleDetail"
                 :color="
                   (curQue.wordTime &&
                     curQue.wordTime[index] &&
@@ -135,7 +135,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',
@@ -174,9 +174,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' : '',
@@ -326,12 +326,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
@@ -493,9 +493,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]
@@ -511,33 +511,33 @@
               <Soundrecord
                 type="promax"
                 class="luyin-box"
-                @getWavblob="getWavblob"
-                @handleParentPlay="handleParentPlay"
-                @sentPause="sentPause"
                 :TaskModel="TaskModel"
-                :answerRecordList="
+                :answer-record-list="
                   curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
                 "
-                :tmIndex="index"
-                @handleWav="handleWav"
-                :sentIndex="sentIndex"
-                :attrib="attrib"
+                :tm-index="index"
                 v-if="refresh"
+                :sent-index="sentIndex"
+                :attrib="attrib"
+                @getWavblob="getWavblob"
+                @handleParentPlay="handleParentPlay"
+                @sentPause="sentPause"
+                @handleWav="handleWav"
               />
-              <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"
                   :attrib="attrib"
                 />
               </div>
@@ -560,9 +560,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' : '']">
           {{
@@ -574,30 +574,30 @@
       </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"
+            :attrib="attrib"
             @handleChangeStopAudio="handleChangeStopAudio"
             @emptyEd="emptyEd"
-            :attrib="attrib"
           />
         </template>
       </div>
@@ -635,27 +635,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"
-        :attrib="attrib"
       />
     </div>
   </div>
@@ -670,20 +670,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,
@@ -696,7 +682,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -707,7 +693,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -715,18 +701,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),
@@ -740,7 +740,7 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
+    isPlaying() {
       let playing = false;
       if (this.$refs.audioLine) {
         playing = this.$refs.audioLine.audio.isPlaying;
@@ -750,7 +750,7 @@ export default {
   },
   watch: {
     sentIndex: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         if (newVal != oldVal) {
           let Bookanswer = _this.curQue.Bookanswer;
@@ -770,7 +770,7 @@ export default {
       deep: true,
     },
     isFull: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         _this.refresh = false;
         if (!newVal) {
@@ -783,10 +783,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');
@@ -804,7 +819,7 @@ export default {
         });
       }
     },
-    //语音全屏
+    // 语音全屏
     fullScreen(type) {
       this.pauseAudio();
       this.pauseVideo();
@@ -812,8 +827,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) {
@@ -875,8 +890,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; // 每段是否有拼音
@@ -897,20 +912,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
@@ -921,11 +934,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,
               },
@@ -934,10 +947,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);
@@ -949,7 +962,7 @@ export default {
 
       this.resObj = { sentList: resArr };
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -975,7 +988,7 @@ export default {
         });
       });
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.pinyin) > -1) {
         wItem.isShow = false;
@@ -984,43 +997,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;
       }
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -1036,7 +1047,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -1045,7 +1056,7 @@ export default {
       });
       return listRes;
     },
-    //计算总时间
+    // 计算总时间
     countWordTime(sentArr) {
       let total = 0;
       sentArr.forEach((item) => {
@@ -1053,7 +1064,7 @@ export default {
       });
       return total;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, index, ed) {
       let _this = this;
       if (_this.isRepeat) {
@@ -1070,7 +1081,7 @@ export default {
       this.ed = undefined;
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.curQue.Bookanswer.practiceModel[tmIndex] = {
         recordList: [],
       };
@@ -1084,7 +1095,7 @@ export default {
     handleChangeStopAudio() {
       this.stopAudio = false;
     },
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -1115,22 +1126,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/login/index.vue

@@ -25,7 +25,7 @@
         <el-form-item>
           <div class="protocol">
             <span>
-              <el-checkbox v-model="isAgree" /> 我已阅读并同意<span
+              <el-checkbox v-model="isAgree" @change="changeAgree" /> 我已阅读并同意<span
                 style="color: #4d78ff; cursor: pointer"
                 @click="viewUserAgreement"
                 >《用户协议》</span
@@ -63,7 +63,7 @@ export default {
   components: { UserAgreement },
   data() {
     return {
-      isAgree: false, // 是否同意用户协议
+      isAgree: getLocalStore('isAgree'), // 是否同意用户协议
       form: {
         user_type: 'USER',
         user_name: '',
@@ -105,7 +105,6 @@ export default {
       this.$refs.loginForm.validate((valid) => {
         if (!valid) return false;
         if (!this.isAgree) {
-          // "阅读并同意用户协议"
           this.$message.warning('阅读并同意用户协议');
           return;
         }
@@ -123,6 +122,13 @@ export default {
     goRegister() {
       this.$router.push({ path: '/register' });
     },
+    /**
+     * 同意用户协议变化
+     * @param {Boolean} flag - 是否同意
+     */
+    changeAgree(flag) {
+      setLocalStore('isAgree', flag);
+    },
     viewUserAgreement() {
       this.showUseragreement = true;
     },