文章显示修改

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

@@ -49,7 +49,12 @@
                 class="NNPE-words"
                 v-for="(pItem, pIndex) in item.wordsList"
                 :key="'wordsList' + pIndex"
-                :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                :class="[
+                  pItem.chs != '“' && pItem.wordIndex == 0
+                    ? 'textLeft'
+                    : 'textCenter',
+                  pItem.chs == '“' ? 'textRight' : '',
+                ]"
                 @click="
                   handleChangeTime(
                     item.timeList &&
@@ -180,13 +185,74 @@
                           >{{ 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
+                        "
+                      >
+                        <span
+                          v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                        <span
+                          class="NNPE-chs"
+                          style="text-align: left"
+                          :class="[
+                            isPlaying &&
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
+                            curTime >= item.timeList[pItem.sentIndex].bg &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'active'
+                              : '',
+                            pItem.paraIndex == paraIndex &&
+                            pItem.sentIndex == sentIndex
+                              ? 'overActive'
+                              : '',
+                            pItem.chstimeList &&
+                            pItem.chstimeList[pItem.leg - 1] &&
+                            curTime >=
+                              pItem.chstimeList[pItem.leg - 1].wordBg &&
+                            curQue.wordTime &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'wordActive'
+                              : '',
+                          ]"
+                          >{{ item.wordsList[pIndex + 2].chs }}</span
+                        >
+                        <span
+                          v-if="
+                            curQue.pyPosition == 'bottom' && config.isShowPY
+                          "
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                      </span>
                     </template>
                     <template v-else>
                       <span
                         v-if="curQue.pyPosition == 'top' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
@@ -201,7 +267,7 @@
                           curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
                             : '',
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.paraIndex == paraIndex &&
                           pItem.sentIndex == sentIndex
                             ? 'overActive'
@@ -229,7 +295,7 @@
                         v-if="curQue.pyPosition == 'bottom' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
@@ -269,7 +335,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
 
@@ -522,6 +588,9 @@ export default {
             &.textLeft {
               text-align: left;
             }
+            &.textRight {
+              text-align: right;
+            }
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
@@ -553,6 +622,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {
@@ -568,6 +640,9 @@ export default {
           &.textLeft {
             text-align: left;
           }
+          &.textRight {
+            text-align: right;
+          }
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";

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

@@ -45,13 +45,19 @@
                 class="NNPE-words"
                 v-for="(pItem, pIndex) in item.wordsList"
                 :key="'wordsList' + pIndex"
-                :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                :class="[
+                  pItem.chs != '“' && pItem.wordIndex == 0
+                    ? 'textLeft'
+                    : 'textCenter',
+                  pItem.chs == '“' ? 'textRight' : '',
+                ]"
                 @click="showWordDetail($event, pItem.chs)"
               >
                 <template v-if="!pItem.width">
                   <template v-if="pItem.isShow">
                     <template
                       v-if="
+                        item.wordsList[pIndex + 1] &&
                         item.wordsList[pIndex + 1].chs &&
                         chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                       "
@@ -116,13 +122,74 @@
                           >{{ 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
+                        "
+                      >
+                        <span
+                          v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                        <span
+                          class="NNPE-chs"
+                          style="text-align: left"
+                          :class="[
+                            isPlaying &&
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
+                            curTime >= item.timeList[pItem.sentIndex].bg &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'active'
+                              : '',
+                            pItem.paraIndex == paraIndex &&
+                            pItem.sentIndex == sentIndex
+                              ? 'overActive'
+                              : '',
+                            pItem.chstimeList &&
+                            pItem.chstimeList[pItem.leg - 1] &&
+                            curTime >=
+                              pItem.chstimeList[pItem.leg - 1].wordBg &&
+                            curQue.wordTime &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'wordActive'
+                              : '',
+                          ]"
+                          >{{ item.wordsList[pIndex + 2].chs }}</span
+                        >
+                        <span
+                          v-if="
+                            curQue.pyPosition == 'bottom' && config.isShowPY
+                          "
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                      </span>
                     </template>
                     <template v-else>
                       <span
                         v-if="curQue.pyPosition == 'top' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
@@ -131,7 +198,7 @@
                       <span
                         class="NNPE-chs"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
                         ]"
                         >{{ pItem.chs }}</span
@@ -140,7 +207,7 @@
                         v-if="curQue.pyPosition == 'bottom' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
@@ -208,7 +275,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
       oldHz: "",
@@ -554,6 +621,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -64,12 +64,18 @@
               class="NNPE-words"
               v-for="(pItem, pIndex) in item"
               :key="'wordsList' + pIndex"
-              :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+              :class="[
+                pItem.chs != '“' && pItem.wordIndex == 0
+                  ? 'textLeft'
+                  : 'textCenter',
+                pItem.chs == '“' ? 'textRight' : '',
+              ]"
             >
               <template v-if="!pItem.width">
                 <template v-if="pItem.isShow">
                   <template
                     v-if="
+                      item[pIndex + 1] &&
                       item[pIndex + 1].chs &&
                       chsFhList.indexOf(item[pIndex + 1].chs) > -1
                     "
@@ -168,6 +174,58 @@
                         >
                       </template>
                     </span>
+                    <span
+                      class="NNPE-words-box"
+                      v-if="
+                        item[pIndex + 2] &&
+                        item[pIndex + 2].chs &&
+                        chsFhList.indexOf(item[pIndex + 2].chs) > -1
+                      "
+                    >
+                      <template v-if="curQue.pyPosition == 'top'">
+                        <span
+                          v-if="config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(item[pIndex + 2].pinyin) > -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item[pIndex + 2].pinyin }}</span
+                        >
+                      </template>
+                      <span class="NNPE-chs" style="text-align: left">
+                        <span
+                          :class="[
+                            pItem.timeList[pItem.leg - 1] &&
+                            curQue.wordTime &&
+                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                            curTime <= curQue.wordTime[index].ed
+                              ? 'active'
+                              : '',
+                            sentIndex == index ? 'wordBlank' : '',
+                          ]"
+                        >
+                          {{ item[pIndex + 2].chs }}</span
+                        >
+                      </span>
+                      <template v-if="curQue.pyPosition == 'bottom'">
+                        <span
+                          v-if="config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(item[pIndex + 2].pinyin) > -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item[pIndex + 2].pinyin }}</span
+                        >
+                      </template>
+                    </span>
                   </template>
                   <template v-else>
                     <template v-if="curQue.pyPosition == 'top'">
@@ -175,7 +233,7 @@
                         v-if="config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
@@ -186,7 +244,9 @@
                     <span
                       class="NNPE-chs"
                       :class="[
-                        pItem.padding && config.isShowPY ? 'padding' : '',
+                        pItem.chs != '“' && pItem.padding && config.isShowPY
+                          ? 'padding'
+                          : '',
                         sentIndex == index ? 'wordBlank' : '',
                       ]"
                     >
@@ -213,7 +273,7 @@
                         v-if="config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
@@ -335,7 +395,7 @@ export default {
     return {
       resObj: null,
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       stopAudio: false,
       sentIndex: 0,
@@ -496,7 +556,7 @@ export default {
                 ? wItem.chs.length
                 : sentArr[wIndex - 1].endIndex + wItem.chs.length;
             // this.judgePad(sItem, wItem, wIndex);
-            this.mergeWordSymbol(sItem, wItem, wIndex);
+            this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
@@ -543,16 +603,11 @@ export default {
       });
     },
     //词和标点合一起
-    mergeWordSymbol(sItem, wItem, curIndex) {
-      let leg = sItem.length;
-      if (curIndex < leg - 1) {
-        let nextIndex = curIndex + 1;
-
-        if (this.chsFhList.indexOf(wItem.chs) > -1) {
-          wItem.isShow = false;
-        } else {
-          wItem.isShow = true;
-        }
+    mergeWordSymbol(wItem) {
+      if (this.chsFhList.indexOf(wItem.chs) > -1) {
+        wItem.isShow = false;
+      } else {
+        wItem.isShow = true;
       }
     },
 
@@ -756,6 +811,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -45,7 +45,12 @@
                 class="NNPE-words"
                 v-for="(pItem, pIndex) in item.wordsList"
                 :key="'wordsList' + pIndex"
-                :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                :class="[
+                  pItem.chs != '“' && pItem.wordIndex == 0
+                    ? 'textLeft'
+                    : 'textCenter',
+                  pItem.chs == '“' ? 'textRight' : '',
+                ]"
                 @click="showWordDetail($event, pItem)"
               >
                 <template v-if="!pItem.width">
@@ -118,13 +123,74 @@
                           >{{ 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
+                        "
+                      >
+                        <span
+                          v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                        <span
+                          class="NNPE-chs"
+                          style="text-align: left"
+                          :class="[
+                            isPlaying &&
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
+                            curTime >= item.timeList[pItem.sentIndex].bg &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'active'
+                              : '',
+                            pItem.paraIndex == paraIndex &&
+                            pItem.sentIndex == sentIndex
+                              ? 'overActive'
+                              : '',
+                            pItem.chstimeList &&
+                            pItem.chstimeList[pItem.leg - 1] &&
+                            curTime >=
+                              pItem.chstimeList[pItem.leg - 1].wordBg &&
+                            curQue.wordTime &&
+                            curTime <= item.timeList[pItem.sentIndex].ed
+                              ? 'wordActive'
+                              : '',
+                          ]"
+                          >{{ item.wordsList[pIndex + 2].chs }}</span
+                        >
+                        <span
+                          v-if="
+                            curQue.pyPosition == 'bottom' && config.isShowPY
+                          "
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                        >
+                      </span>
                     </template>
                     <template v-else>
                       <span
                         v-if="curQue.pyPosition == 'top' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                         ]"
                         >{{ pItem.pinyin }}</span
@@ -138,7 +204,7 @@
                           curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
                             : '',
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                         ]"
                         >{{ pItem.chs }}</span
                       >
@@ -146,7 +212,7 @@
                         v-if="curQue.pyPosition == 'bottom' && config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                         ]"
                         >{{ pItem.pinyin }}</span
@@ -212,7 +278,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
       isShow: false,
@@ -547,6 +613,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -52,7 +52,12 @@
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
-                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  :class="[
+                    pItem.chs != '“' && pItem.wordIndex == 0
+                      ? 'textLeft'
+                      : 'textCenter',
+                    pItem.chs == '“' ? 'textRight' : '',
+                  ]"
                 >
                   <template v-if="!pItem.width">
                     <template v-if="pItem.isShow">
@@ -159,6 +164,70 @@
                             }}</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
+                          "
+                        >
+                          <span
+                            v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                          <span
+                            class="NNPE-chs"
+                            style="text-align: left"
+                            :class="[
+                              isPlaying &&
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'active'
+                                : '',
+                              pItem.paraIndex == paraIndex &&
+                              pItem.sentIndex == sentIndex
+                                ? 'overActive'
+                                : '',
+                              pItem.chstimeList &&
+                              pItem.chstimeList[pItem.leg - 1] &&
+                              curTime >=
+                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curQue.wordTime &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ item.wordsList[pIndex + 2].chs }}</span
+                          >
+                          <span
+                            v-if="
+                              curQue.pyPosition == 'bottom' && config.isShowPY
+                            "
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                        </span>
                       </template>
 
                       <!--下一个元素不是标点-->
@@ -167,7 +236,7 @@
                           v-if="pyPosition == 'top'"
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -186,7 +255,9 @@
                               curTime <= item.timeList[pItem.sentIndex].ed
                                 ? 'wordActive'
                                 : '',
-                              pItem.padding ? 'padding' : '',
+                              pItem.chs != '“' && pItem.padding
+                                ? 'padding'
+                                : '',
                             ]"
                             >{{ pItem.chs }}</span
                           >
@@ -202,7 +273,7 @@
                           v-if="pyPosition == 'bottom'"
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -440,7 +511,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/", "_"],
@@ -785,6 +856,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -88,7 +88,12 @@
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
-                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  :class="[
+                    pItem.chs != '“' && pItem.wordIndex == 0
+                      ? 'textLeft'
+                      : 'textCenter',
+                    pItem.chs == '“' ? 'textRight' : '',
+                  ]"
                   @click="
                     handleChangeTime(
                       item.timeList &&
@@ -196,13 +201,77 @@
                             >{{ 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
+                          "
+                        >
+                          <span
+                            v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                          <span
+                            class="NNPE-chs"
+                            style="text-align: left"
+                            :class="[
+                              isPlaying &&
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'active'
+                                : '',
+                              pItem.paraIndex == paraIndex &&
+                              pItem.sentIndex == sentIndex
+                                ? 'overActive'
+                                : '',
+                              pItem.chstimeList &&
+                              pItem.chstimeList[pItem.leg - 1] &&
+                              curTime >=
+                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curQue.wordTime &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ item.wordsList[pIndex + 2].chs }}</span
+                          >
+                          <span
+                            v-if="
+                              curQue.pyPosition == 'bottom' && config.isShowPY
+                            "
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                        </span>
                       </template>
                       <template v-else>
                         <span
                           v-if="curQue.pyPosition == 'top' && config.isShowPY"
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -213,7 +282,9 @@
                         <span
                           v-if="pItem.chs != '#'"
                           class="NNPE-chs"
-                          :class="[pItem.padding ? 'padding' : '']"
+                          :class="[
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
+                          ]"
                         >
                           <template>
                             <span
@@ -238,7 +309,7 @@
                           "
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -357,7 +428,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       NumberList: [
         "①",
@@ -830,6 +901,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -74,7 +74,12 @@
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
-                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  :class="[
+                    pItem.chs != '“' && pItem.wordIndex == 0
+                      ? 'textLeft'
+                      : 'textCenter',
+                    pItem.chs == '“' ? 'textRight' : '',
+                  ]"
                   @click="showWordDetail($event, pItem.chs)"
                 >
                   <template v-if="!pItem.width">
@@ -150,13 +155,77 @@
                             >{{ 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
+                          "
+                        >
+                          <span
+                            v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                          <span
+                            class="NNPE-chs"
+                            style="text-align: left"
+                            :class="[
+                              isPlaying &&
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'active'
+                                : '',
+                              pItem.paraIndex == paraIndex &&
+                              pItem.sentIndex == sentIndex
+                                ? 'overActive'
+                                : '',
+                              pItem.chstimeList &&
+                              pItem.chstimeList[pItem.leg - 1] &&
+                              curTime >=
+                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curQue.wordTime &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ item.wordsList[pIndex + 2].chs }}</span
+                          >
+                          <span
+                            v-if="
+                              curQue.pyPosition == 'bottom' && config.isShowPY
+                            "
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                        </span>
                       </template>
                       <template v-else>
                         <span
                           v-if="curQue.pyPosition == 'top' && config.isShowPY"
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -170,7 +239,7 @@
                             newWordList.indexOf(pItem.chs) > -1
                               ? 'newActive'
                               : '',
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           ]"
                           >{{ pItem.chs }}</span
                         >
@@ -180,7 +249,7 @@
                           "
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -306,7 +375,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       NumberList: [
         "①",
@@ -836,6 +905,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -126,7 +126,12 @@
                     class="NNPE-words"
                     v-for="(pItem, pIndex) in item.sentArr"
                     :key="'wordsList' + pIndex"
-                    :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                    :class="[
+                      pItem.chs != '“' && pItem.wordIndex == 0
+                        ? 'textLeft'
+                        : 'textCenter',
+                      pItem.chs == '“' ? 'textRight' : '',
+                    ]"
                   >
                     <template v-if="!pItem.width">
                       <template v-if="pItem.isShow">
@@ -248,6 +253,66 @@
                               >
                             </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
+                            "
+                          >
+                            <template v-if="curQue.pyPosition == 'top'">
+                              <span
+                                v-if="config.isShowPY"
+                                :class="[
+                                  'NNPE-pinyin',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(
+                                    item.sentArr[pIndex + 2].pinyin
+                                  ) > -1
+                                    ? 'noFont'
+                                    : '',
+                                ]"
+                                style="text-align: left"
+                                >{{ item.sentArr[pIndex + 2].pinyin }}</span
+                              >
+                            </template>
+                            <span class="NNPE-chs" style="text-align: left">
+                              <span
+                                :class="[
+                                  isPlaying &&
+                                  pItem.timeList[pItem.leg - 1] &&
+                                  curTime >=
+                                    pItem.timeList[pItem.leg - 1].wordBg &&
+                                  curQue.wordTime &&
+                                  curQue.wordTime[index] &&
+                                  curTime <= curQue.wordTime[index].ed
+                                    ? 'active'
+                                    : '',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                ]"
+                              >
+                                {{ item.sentArr[pIndex + 2].chs }}</span
+                              >
+                            </span>
+                            <template v-if="curQue.pyPosition == 'bottom'">
+                              <span
+                                v-if="config.isShowPY"
+                                :class="[
+                                  'NNPE-pinyin',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(
+                                    item.sentArr[pIndex + 2].pinyin
+                                  ) > -1
+                                    ? 'noFont'
+                                    : '',
+                                ]"
+                                style="text-align: left"
+                                >{{ item.sentArr[pIndex + 2].pinyin }}</span
+                              >
+                            </template>
+                          </span>
                         </template>
                         <template v-else>
                           <template v-if="curQue.pyPosition == 'top'">
@@ -258,7 +323,9 @@
                                 v-if="config.isShowPY"
                                 class="NNPE-pinyin"
                                 :class="[
-                                  pItem.padding ? 'padding' : '',
+                                  pItem.chs != '“' && pItem.padding
+                                    ? 'padding'
+                                    : '',
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
                                   noFont.indexOf(item.pinyin) > -1
@@ -273,7 +340,11 @@
                             v-if="pItem.chs != '#'"
                             class="NNPE-chs"
                             :class="[
-                              pItem.padding && config.isShowPY ? 'padding' : '',
+                              pItem.chs != '“' &&
+                              pItem.padding &&
+                              config.isShowPY
+                                ? 'padding'
+                                : '',
                               sentIndex == index ? 'wordBlank' : '',
                             ]"
                           >
@@ -304,7 +375,9 @@
                                 v-if="config.isShowPY"
                                 class="NNPE-pinyin"
                                 :class="[
-                                  pItem.padding ? 'padding' : '',
+                                  pItem.chs != '“' && pItem.padding
+                                    ? 'padding'
+                                    : '',
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
                                 ]"
@@ -456,7 +529,7 @@ export default {
       wavblob: null,
       resObj: null,
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       NumberList: [
         "①",
@@ -964,6 +1037,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

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

@@ -69,7 +69,12 @@
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
-                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  :class="[
+                    pItem.chs != '“' && pItem.wordIndex == 0
+                      ? 'textLeft'
+                      : 'textCenter',
+                    pItem.chs == '“' ? 'textRight' : '',
+                  ]"
                   @click="showWordDetail($event, pItem)"
                 >
                   <template v-if="!pItem.width">
@@ -148,13 +153,77 @@
                             >{{ 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
+                          "
+                        >
+                          <span
+                            v-if="curQue.pyPosition == 'top' && config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                          <span
+                            class="NNPE-chs"
+                            style="text-align: left"
+                            :class="[
+                              isPlaying &&
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'active'
+                                : '',
+                              pItem.paraIndex == paraIndex &&
+                              pItem.sentIndex == sentIndex
+                                ? 'overActive'
+                                : '',
+                              pItem.chstimeList &&
+                              pItem.chstimeList[pItem.leg - 1] &&
+                              curTime >=
+                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curQue.wordTime &&
+                              curTime <= item.timeList[pItem.sentIndex].ed
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ item.wordsList[pIndex + 2].chs }}</span
+                          >
+                          <span
+                            v-if="
+                              curQue.pyPosition == 'bottom' && config.isShowPY
+                            "
+                            :class="[
+                              'NNPE-pinyin',
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 2].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            style="text-align: left"
+                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
+                          >
+                        </span>
                       </template>
                       <template v-else>
                         <span
                           v-if="curQue.pyPosition == 'top' && config.isShowPY"
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -165,7 +234,7 @@
                           v-if="pItem.chs != '#'"
                           class="NNPE-chs"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             paraIndex == pItem.paraIndex &&
                             sentIndex == pItem.sentIndex &&
                             wordIndex == pItem.wordIndex
@@ -180,7 +249,7 @@
                           "
                           class="NNPE-pinyin"
                           :class="[
-                            pItem.padding ? 'padding' : '',
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                           ]"
@@ -302,7 +371,7 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       NumberList: [
         "①",
@@ -849,6 +918,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

src/components/Adult/preview/Voicefullscreen.vue

@@ -188,7 +188,12 @@
             class="NNPE-words"
             v-for="(pItem, pIndex) in item"
             :key="'wordsList' + pIndex"
-            :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+            :class="[
+              pItem.chs != '“' && pItem.wordIndex == 0
+                ? 'textLeft'
+                : 'textCenter',
+              pItem.chs == '“' ? 'textRight' : '',
+            ]"
             @dblclick="showWordDetail($event, pItem)"
             @click="playWord(pItem)"
           >
@@ -321,6 +326,69 @@
                       >
                     </template>
                   </span>
+                  <span
+                    class="NNPE-words-box"
+                    v-if="
+                      item[pIndex + 2] &&
+                      item[pIndex + 2].chs &&
+                      chsFhList.indexOf(item[pIndex + 2].chs) > -1
+                    "
+                  >
+                    <template v-if="curQue.pyPosition == 'top'">
+                      <span
+                        v-if="config.isShowPY"
+                        :class="[
+                          'NNPE-pinyin',
+                          noFont.indexOf(item[pIndex + 2].pinyin) > -1
+                            ? 'noFont'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        :style="{ fontSize: pySize + 'px', textAlign: left }"
+                        >{{ item[pIndex + 2].pinyin }}</span
+                      >
+                    </template>
+                    <span
+                      :class="[
+                        'NNPE-chs',
+                        curQue.pyPosition == 'top' ? 'bottom' : '',
+                      ]"
+                      :style="{ fontSize: hzSize + 'px', textAlign: left }"
+                    >
+                      <span
+                        :class="[
+                          isPlaying &&
+                          pItem.timeList[pItem.leg - 1] &&
+                          curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                          curQue.wordTime &&
+                          curQue.wordTime[curSentIndex] &&
+                          curTime <= curQue.wordTime[curSentIndex].ed
+                            ? bgIndex == 0
+                              ? 'active'
+                              : 'active-yellow'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        :style="{ fontSize: pySize + 'px' }"
+                        >{{ item[pIndex + 2].chs }}</span
+                      >
+                    </span>
+                    <template v-if="curQue.pyPosition == 'bottom'">
+                      <span
+                        v-if="config.isShowPY"
+                        :class="[
+                          'NNPE-pinyin',
+                          noFont.indexOf(item[pIndex + 2].pinyin) > -1
+                            ? 'noFont'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                          'bottom',
+                        ]"
+                        :style="{ fontSize: pySize + 'px', textAlign: left }"
+                        >{{ item[pIndex + 2].pinyin }}</span
+                      >
+                    </template>
+                  </span>
                 </template>
                 <template v-else>
                   <template v-if="curQue.pyPosition == 'top'">
@@ -329,7 +397,7 @@
                         v-if="config.isShowPY"
                         class="NNPE-pinyin"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
@@ -343,7 +411,9 @@
                     v-if="pItem.chs != '#'"
                     class="NNPE-chs"
                     :class="[
-                      pItem.padding && config.isShowPY ? 'padding' : '',
+                      pItem.chs != '“' && pItem.padding && config.isShowPY
+                        ? 'padding'
+                        : '',
                       curQue.pyPosition == 'top' ? 'bottom' : '',
                     ]"
                   >
@@ -382,7 +452,7 @@
                         v-if="config.isShowPY"
                         class="NNPE-pinyin bottom"
                         :class="[
-                          pItem.padding ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
@@ -591,7 +661,7 @@ export default {
         "⑲",
         "⑳",
       ],
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       curTime: 0,
       wavblob: null,
@@ -1639,6 +1709,9 @@ export default {
       &.textCenter {
         text-align: center;
       }
+      &.textRight {
+        text-align: right;
+      }
       > span {
         display: block;
         &.NNPE-pinyin {

src/components/Adult/preview/components/Freewrite.vue

@@ -60,6 +60,7 @@
         </div>
       </div>
     </div>
+    <div class="record-notice" v-if="isNotice">最多保存5条记录</div>
   </div>
 </template>
 
@@ -91,6 +92,7 @@ export default {
       saveShow: false,
       tabIndex: 0,
       hasPlay: false,
+      isNotice: false,
     };
   },
   computed: {},
@@ -179,6 +181,15 @@ export default {
       this.imgIndex = null;
     },
     handleGenerate() {
+      let _this = this;
+
+      if (_this.imgarr.length >= 5) {
+        _this.isNotice = true;
+        setTimeout(() => {
+          _this.isNotice = false;
+        }, 2000);
+        return;
+      }
       this.saveShow = true;
       let hz =
         this.tabIndex == 0 ? this.cur.stem[0].con : this.cur.stem[0].TChinese;
@@ -243,7 +254,23 @@ export default {
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .freewrite {
+  position: relative;
   width: 100%;
+  .record-notice {
+    position: absolute;
+    top: 106px;
+    left: 56px;
+    z-index: 999999;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid rgba(0, 0, 0);
+    color: #fff;
+    padding: 0 20px;
+    height: 40px;
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 38px;
+    border-radius: 4px;
+  }
   .imgsave {
     margin-top: 8px;
     display: flex;