noFont

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

@@ -203,7 +203,7 @@ export default {
         const obj = {
           name: file.name,
           url: file.response.file_info_list[0].file_url,
-          id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
+          id: "[FID##" + file.response.file_info_list[0].file_id + "##FID]",
           imgNumber: 0,
         };
         this.curQue.img_list.push(obj);

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

@@ -306,7 +306,7 @@ export default {
         const obj = {
           name: file.name,
           url: file.response.file_info_list[0].file_url,
-          id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
+          id: "[FID##" + file.response.file_info_list[0].file_id + "##FID]",
           imgNumber: 0,
         };
         this.curQue.img_list.push(obj);

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

@@ -1,9 +1,14 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <div class="aduioLine-box">
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
+      "
+    >
       <AudioLine
-        :mp3="curQue.mp3_list[0].url"
+        :mp3="curQue.mp3_list[0].id"
         :getCurTime="getCurTime"
         ref="audioLine"
       />
@@ -17,13 +22,19 @@
         >
           <div class="wordsList-box">
             <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
-            <div>
+            <div :class="[item.isTitle ? 'NNPE-title' : '']">
               <div
                 class="NNPE-words"
                 v-for="(pItem, pIndex) in item.wordsList"
                 :key="'wordsList' + pIndex"
                 :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-                @click="handleChangeTime(item.timeList[pItem.sentIndex].bg)"
+                @click="
+                  handleChangeTime(
+                    item.timeList &&
+                      item.timeList[pItem.sentIndex] &&
+                      item.timeList[pItem.sentIndex].bg
+                  )
+                "
                 @mouseover="handleMouseover(pItem)"
                 @mouseleave="handleMouseleave"
               >
@@ -38,13 +49,19 @@
                     >
                       <span class="NNPE-words-box">
                         <span
-                          class="NNPE-pinyin"
-                          :class="[pItem.className ? pItem.className : '']"
+                          v-if="curQue.pyPosition == 'top'"
+                          :class="[
+                            'NNPE-pinyin',
+                            pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
                           class="NNPE-chs"
                           :class="[
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
                             curTime >= item.timeList[pItem.sentIndex].bg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'active'
@@ -53,6 +70,8 @@
                             pItem.sentIndex == sentIndex
                               ? 'overActive'
                               : '',
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
                             curTime >=
                               item.timeList[pItem.sentIndex].wordsResultList[
                                 pItem.wordIndex
@@ -63,15 +82,35 @@
                           ]"
                           >{{ pItem.chs }}</span
                         >
+                        <span
+                          v-if="curQue.pyPosition == 'bottom'"
+                          :class="[
+                            'NNPE-pinyin',
+                            pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
+                          >{{ pItem.pinyin }}</span
+                        >
                       </span>
                       <span class="NNPE-words-box">
-                        <span class="NNPE-pinyin" style="text-align: left">{{
-                          item.wordsList[pIndex + 1].pinyin
-                        }}</span>
+                        <span
+                          v-if="curQue.pyPosition == 'top'"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 1].pinyin }}</span
+                        >
                         <span
                           class="NNPE-chs"
                           style="text-align: left"
                           :class="[
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
                             curTime >= item.timeList[pItem.sentIndex].bg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'active'
@@ -80,30 +119,47 @@
                             pItem.sentIndex == sentIndex
                               ? 'overActive'
                               : '',
-                            curTime >=
-                              item.timeList[pItem.sentIndex].wordsResultList[
-                                pItem.wordIndex
-                              ].wordBg &&
+                            curTime >= item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
+                            item.timeList[pItem.sentIndex].wordsResultList[
+                              pItem.wordIndex
+                            ].wordBg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'wordActive'
                               : '',
                           ]"
                           >{{ item.wordsList[pIndex + 1].chs }}</span
                         >
+                        <span
+                          v-if="curQue.pyPosition == 'bottom'"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 1].pinyin }}</span
+                        >
                       </span>
                     </template>
                     <template v-else>
                       <span
+                        v-if="curQue.pyPosition == 'top'"
                         class="NNPE-pinyin"
                         :class="[
                           pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
                         >{{ pItem.pinyin }}</span
                       >
                       <span
                         class="NNPE-chs"
                         :class="[
+                          item.timeList &&
+                          item.timeList[pItem.sentIndex] &&
                           curTime >= item.timeList[pItem.sentIndex].bg &&
                           curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
@@ -113,16 +169,27 @@
                           pItem.sentIndex == sentIndex
                             ? 'overActive'
                             : '',
-                          curTime >=
-                            item.timeList[pItem.sentIndex].wordsResultList[
-                              pItem.wordIndex
-                            ].wordBg &&
+                          curTime >= item.timeList &&
+                          item.timeList[pItem.sentIndex] &&
+                          item.timeList[pItem.sentIndex].wordsResultList[
+                            pItem.wordIndex
+                          ].wordBg &&
                           curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'wordActive'
                             : '',
                         ]"
                         >{{ pItem.chs }}</span
                       >
+                      <span
+                        v-if="curQue.pyPosition == 'bottom'"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
                     </template>
                   </template>
                 </template>
@@ -149,7 +216,7 @@ import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 export default {
   name: "NormalModelChs",
-  props: ["curQue"],
+  props: ["curQue","noFont"],
   components: {
     AudioLine,
   },
@@ -160,6 +227,7 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
+      
       oldHz: "",
       hz: "",
       top: 0,
@@ -198,7 +266,7 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
-            this.mergeWordSymbol(sItem, wItem, wIndex);
+            this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
@@ -222,6 +290,7 @@ export default {
         let paraObj = {
           wordsList: paraArr,
           timeList: timeList,
+          isTitle: dItem.isTitle,
         };
         resArr.push(paraObj);
       });
@@ -237,14 +306,11 @@ export default {
       }
     },
     //词和标点合一起
-    mergeWordSymbol(sItem, wItem, curIndex) {
-      let leg = sItem.length;
-      if (curIndex < leg - 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;
       }
     },
     //判断是否有padding
@@ -277,8 +343,10 @@ export default {
     },
     //点击播放某个句子
     handleChangeTime(time) {
-      this.curTime = time;
-      this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      if (time) {
+        this.curTime = time;
+        this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      }
     },
     //经过每个词，高亮句子
     handleMouseover(pItem) {
@@ -334,6 +402,9 @@ export default {
             line-height: 22px;
             color: #000000;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -398,6 +469,9 @@ export default {
       }
     }
     &.NNPE-detail-title {
+      .NNPE-title {
+        margin: 0 auto;
+      }
       .wordsList-box {
         > div {
           display: flex;
@@ -426,8 +500,9 @@ export default {
         overflow: hidden;
       }
       > img {
-        width: 100%;
+        max-width: 100%;
         display: block;
+        margin: 8px auto;
       }
     }
   }

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

@@ -1,11 +1,18 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-    />
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
+      "
+    >
+      <AudioLine
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        ref="audioLine"
+      />
+    </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div
@@ -33,8 +40,12 @@
                     >
                       <span class="NNPE-words-box">
                         <span
-                          class="NNPE-pinyin"
-                          :class="[pItem.className ? pItem.className : '']"
+                          v-if="curQue.pyPosition == 'top'"
+                          :class="[
+                            'NNPE-pinyin',
+                            pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -44,22 +55,54 @@
                           ]"
                           >{{ pItem.chs }}</span
                         >
+                        <span
+                          v-if="curQue.pyPosition == 'bottom'"
+                          :class="[
+                            'NNPE-pinyin',
+                            pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
+                          >{{ pItem.pinyin }}</span
+                        >
                       </span>
                       <span class="NNPE-words-box">
-                        <span class="NNPE-pinyin" style="text-align: left">{{
-                          item.wordsList[pIndex + 1].pinyin
-                        }}</span>
+                        <span
+                          v-if="curQue.pyPosition == 'top'"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 1].pinyin }}</span
+                        >
                         <span class="NNPE-chs" style="text-align: left">{{
                           item.wordsList[pIndex + 1].chs
                         }}</span>
+                        <span
+                          v-if="curQue.pyPosition == 'bottom'"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item.wordsList[pIndex + 1].pinyin }}</span
+                        >
                       </span>
                     </template>
                     <template v-else>
                       <span
+                        v-if="curQue.pyPosition == 'top'"
                         class="NNPE-pinyin"
                         :class="[
                           pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
                         >{{ pItem.pinyin }}</span
                       >
@@ -71,6 +114,16 @@
                         ]"
                         >{{ pItem.chs }}</span
                       >
+                      <span
+                        v-if="curQue.pyPosition == 'bottom'"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
                     </template>
                   </template>
                 </template>
@@ -95,7 +148,11 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
+        <Wordcard
+          :word="word"
+          :changeWordCard="changeWordCard"
+          :themeColor="themeColor"
+        />
       </div>
     </template>
   </div>
@@ -107,7 +164,7 @@ import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
 export default {
   name: "PhraseModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList", "themeColor"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "themeColor", "noFont"],
   components: {
     AudioLine,
     Wordcard,
@@ -382,7 +439,9 @@ export default {
             font-weight: normal;
             font-size: 14px;
             line-height: 22px;
-
+            &.noFont {
+              font-family: initial;
+            }
             height: 21px;
             &.textLeft {
               text-align: left;
@@ -417,6 +476,9 @@ export default {
           line-height: 22px;
 
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -1,13 +1,15 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <div
-      class="aduioLine-box aduioLine-practice"
-      v-if="
-        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
-      "
-    >
-      <div class="aduioLine-content">
+    <div class="aduioLine-box aduioLine-practice">
+      <div
+        class="aduioLine-content"
+        v-if="
+          curQue.mp3_list &&
+          curQue.mp3_list.length > 0 &&
+          curQue.mp3_list[0].url
+        "
+      >
         <AudioLine
           :mp3="curQue.mp3_list[0].url"
           :getCurTime="getCurTime"
@@ -38,7 +40,14 @@
         >
           <div
             :class="['NNPE-detail']"
-            @click="handleChangeTime(curQue.wordTime[index].bg, index)"
+            @click="
+              handleChangeTime(
+                curQue.wordTime &&
+                  curQue.wordTime[index] &&
+                  curQue.wordTime[index].bg,
+                index
+              )
+            "
           >
             <div
               class="NNPE-words"
@@ -55,15 +64,18 @@
                     "
                   >
                     <span class="NNPE-words-box">
-                      <span
-                        v-if="isShowPY"
-                        class="NNPE-pinyin"
-                        :class="[
-                          pItem.className ? pItem.className : '',
-                          sentIndex == index ? 'wordBlank' : '',
-                        ]"
-                        >{{ pItem.pinyin }}</span
-                      >
+                      <template v-if="curQue.pyPosition == 'top'">
+                        <span
+                          v-if="isShowPY"
+                          class="NNPE-pinyin"
+                          :class="[
+                            pItem.className ? pItem.className : '',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
+                          >{{ pItem.pinyin }}</span
+                        >
+                      </template>
                       <span
                         class="NNPE-chs"
                         :class="[
@@ -71,9 +83,7 @@
                           sentIndex == index ? 'wordBlank' : '',
                         ]"
                       >
-                        <template
-                          v-if="pItem.timeList && pItem.timeList.length > 0"
-                        >
+                        <template>
                           <span
                             v-for="(wItem, wIndex) in pItem.leg"
                             :key="'ci' + wIndex + pIndex + index"
@@ -89,21 +99,39 @@
                           >
                         </template>
                       </span>
+                      <template v-if="curQue.pyPosition == 'bottom'">
+                        <span
+                          v-if="isShowPY"
+                          class="NNPE-pinyin"
+                          :class="[
+                            pItem.className ? pItem.className : '',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          ]"
+                          >{{ pItem.pinyin }}</span
+                        >
+                      </template>
                     </span>
                     <span class="NNPE-words-box">
-                      <span
-                        v-if="isShowPY"
-                        :class="[
-                          'NNPE-pinyin',
-                          sentIndex == index ? 'wordBlank' : '',
-                        ]"
-                        style="text-align: left"
-                        >{{ item[pIndex + 1].pinyin }}</span
-                      >
+                      <template v-if="curQue.pyPosition == 'top'">
+                        <span
+                          v-if="isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(item[pIndex + 1].pinyin) > -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item[pIndex + 1].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'
@@ -114,19 +142,36 @@
                           {{ item[pIndex + 1].chs }}</span
                         >
                       </span>
+                      <template v-if="curQue.pyPosition == 'bottom'">
+                        <span
+                          v-if="isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            sentIndex == index ? 'wordBlank' : '',
+                            noFont.indexOf(item[pIndex + 1].pinyin) > -1
+                              ? 'noFont'
+                              : '',
+                          ]"
+                          style="text-align: left"
+                          >{{ item[pIndex + 1].pinyin }}</span
+                        >
+                      </template>
                     </span>
                   </template>
                   <template v-else>
-                    <span
-                      v-if="isShowPY"
-                      class="NNPE-pinyin"
-                      :class="[
-                        pItem.padding ? 'padding' : '',
-                        pItem.className ? pItem.className : '',
-                        sentIndex == index ? 'wordBlank' : '',
-                      ]"
-                      >{{ pItem.pinyin }}</span
-                    >
+                    <template v-if="curQue.pyPosition == 'top'">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          sentIndex == index ? 'wordBlank' : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
                     <span
                       class="NNPE-chs"
                       :class="[
@@ -134,14 +179,14 @@
                         sentIndex == index ? 'wordBlank' : '',
                       ]"
                     >
-                      <template
-                        v-if="pItem.timeList && pItem.timeList.length > 0"
-                      >
+                      <template>
                         <span
                           v-for="(wItem, wIndex) in pItem.leg"
                           :key="'ci' + wIndex + pIndex + index"
                           :class="[
                             pItem.timeList[wIndex] &&
+                            curQue.wordTime &&
+                            curQue.wordTime[index] &&
                             curTime >= pItem.timeList[wIndex].wordBg &&
                             curTime <= curQue.wordTime[index].ed
                               ? 'active'
@@ -152,6 +197,19 @@
                         >
                       </template>
                     </span>
+                    <template v-if="curQue.pyPosition == 'bottom'">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          sentIndex == index ? 'wordBlank' : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
                   </template>
                 </template>
               </template>
@@ -167,7 +225,9 @@
           </div>
           <div
             v-show="
-              (curTime >= curQue.wordTime[index].bg &&
+              (curQue.wordTime &&
+                curQue.wordTime[index] &&
+                curTime >= curQue.wordTime[index].bg &&
                 curTime <= curQue.wordTime[index].ed) ||
               sentIndex == index
             "
@@ -192,7 +252,7 @@ import AudioLine from "../AudioLine.vue";
 import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
 export default {
   name: "ArticleView",
-  props: ["curQue"],
+  props: ["curQue", "noFont"],
   components: {
     AudioLine,
     Soundrecord,
@@ -282,7 +342,9 @@ export default {
 
         timeArr.push(dItem.timeList);
       });
-      this.mergeWordTime(resArr, wordTimeList);
+      if (wordTimeList && wordTimeList.length > 0) {
+        this.mergeWordTime(resArr, wordTimeList);
+      }
       let timeList = [];
       timeArr.forEach((item) => {
         item.forEach((aItem) => {
@@ -422,8 +484,10 @@ export default {
         _this.currSent = _this.curQue.wordTime[index];
       }
       _this.sentIndex = index;
-      _this.curTime = time;
-      _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      if (time) {
+        _this.curTime = time;
+        _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      }
     },
     handleWav(data) {},
     // 录音时暂停音频播放
@@ -520,6 +584,9 @@ export default {
             line-height: 20px;
             color: rgba(0, 0, 0, 0.45);
             height: 20px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -559,6 +626,9 @@ export default {
           line-height: 20px;
           color: rgba(0, 0, 0, 0.45);
           height: 20px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -1,11 +1,18 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-    />
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
+      "
+    >
+      <AudioLine
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        ref="audioLine"
+      />
+    </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div
@@ -40,6 +47,8 @@
                         <span
                           class="NNPE-chs"
                           :class="[
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
                             curTime >= item.timeList[pItem.sentIndex].bg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'active'
@@ -61,6 +70,8 @@
                           class="NNPE-chs"
                           style="text-align: left"
                           :class="[
+                            item.timeList &&
+                            item.timeList[pItem.sentIndex] &&
                             curTime >= item.timeList[pItem.sentIndex].bg &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'active'
@@ -82,6 +93,8 @@
                       <span
                         class="NNPE-chs"
                         :class="[
+                          item.timeList &&
+                          item.timeList[pItem.sentIndex] &&
                           curTime >= item.timeList[pItem.sentIndex].bg &&
                           curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
@@ -114,7 +127,11 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
+        <Wordcard
+          :word="word"
+          :changeWordCard="changeWordCard"
+          :themeColor="themeColor"
+        />
       </div>
     </template>
   </div>
@@ -397,6 +414,9 @@ export default {
             font-size: 14px;
             line-height: 22px;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -431,6 +451,9 @@ export default {
           font-size: 14px;
           line-height: 22px;
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -5,7 +5,7 @@
       <el-switch
         style="display: block"
         v-model="showPhrases"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="本课生词"
@@ -15,7 +15,7 @@
       <el-switch
         style="display: block"
         v-model="showPractice"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="语音练习"
@@ -25,7 +25,7 @@
       <el-switch
         style="display: block"
         v-model="showWord"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="取词"
@@ -50,6 +50,7 @@
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -58,6 +59,7 @@
         :wordFontsize="wordFontsize"
         :NNPENewWordList="NNPENewWordList"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showPhrases"
       />
       <Practice
@@ -65,6 +67,7 @@
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showPractice"
       />
       <WordModel
@@ -75,6 +78,7 @@
         :bodyWidth="bodyWidth"
         :NNPENewWordList="NNPENewWordList"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showWord"
       />
     </div>
@@ -102,9 +106,23 @@ export default {
       wordFontsize: 16, // 文章内容字号初始值
       bodyLeft: 0,
       bodyWidth: 0,
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
     };
   },
-  computed: {},
+  computed: {
+    activeColor: function () {
+      let color = "";
+      if (this.themeColor == "red") {
+        color = "#DE4444";
+      } else if (this.themeColor == "green") {
+        color = "#24B99E";
+      } else if (this.themeColor == "brown") {
+        color = "#BD8865";
+      }
+
+      return color;
+    },
+  },
   watch: {},
   //方法集合
   methods: {

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

@@ -66,27 +66,42 @@
                           <span
                             v-if="pyPosition == 'top'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
-                            >{{ pItem.pinyin }}</span
-                          >
-                          <span
-                            class="NNPE-chs"
                             :class="[
-                              item.timeList.length > 0 &&
-                              curTime >=
-                                item.timeList[pItem.sentIndex].wordsResultList[
-                                  pItem.wordIndex
-                                ].wordBg &&
-                              curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'wordActive'
+                              pItem.className ? pItem.className : '',
+                              pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
+                                ? 'noFont'
                                 : '',
                             ]"
-                            >{{ pItem.chs }}</span
+                            >{{ pItem.pinyin }}</span
                           >
+                          <template v-if="!pItem.isHeng">
+                            <span
+                              class="NNPE-chs"
+                              :class="[
+                                item.timeList.length > 0 &&
+                                curTime >=
+                                  item.timeList[pItem.sentIndex]
+                                    .wordsResultList[pItem.wordIndex].wordBg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed
+                                  ? 'wordActive'
+                                  : '',
+                              ]"
+                              >{{ pItem.chs }}</span
+                            >
+                          </template>
+                          <template v-else>
+                            <input
+                              v-model="pItem.answer"
+                              class="answer-input"
+                            />
+                          </template>
                           <span
                             v-if="pyPosition == 'bottom'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -94,9 +109,17 @@
                           <span
                             v-if="pyPosition == 'top'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
+
                           <span
                             class="NNPE-chs"
                             style="text-align: left"
@@ -112,14 +135,24 @@
                             ]"
                             >{{ item.wordsList[pIndex + 1].chs }}</span
                           >
+
                           <span
                             v-if="pyPosition == 'bottom'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
                       </template>
+
+                      <!--下一个元素不是标点-->
                       <template v-else>
                         <span
                           v-if="pyPosition == 'top'"
@@ -127,6 +160,10 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
                           ]"
                           >{{ pItem.pinyin }}</span
                         >
@@ -157,6 +194,10 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
+                            -1
+                              ? 'noFont'
+                              : '',
                           ]"
                           >{{ pItem.pinyin }}</span
                         >
@@ -209,7 +250,13 @@
               </div>
             </div>
           </div>
-          <div class="remarkBox remark-top" v-if="item.remarkDetail">
+          <div
+            class="remarkBox remark-top"
+            v-if="
+              item.remarkDetail &&
+              (item.remarkDetail.chs || item.remarkDetail.en)
+            "
+          >
             <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
@@ -295,7 +342,13 @@
               </div>
             </div>
           </div>
-          <div class="remarkBox remark-top" v-if="item.remarkDetail">
+          <div
+            class="remarkBox remark-top"
+            v-if="
+              item.remarkDetail &&
+              (item.remarkDetail.chs || item.remarkDetail.en)
+            "
+          >
             <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
@@ -353,6 +406,7 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
       oldHz: "",
       hz: "",
       top: 0,
@@ -405,6 +459,7 @@ export default {
           dItem.wordsList.forEach((sItem, sIndex) => {
             sItem.forEach((wItem, wIndex) => {
               this.mergeWordSymbol(wItem);
+
               let obj = {
                 paraIndex: dIndex, //段落索引
                 sentIndex: sIndex, //在段落中句子索引
@@ -421,6 +476,7 @@ export default {
                 isRecord = isRecord + 1;
                 obj.answer = "";
               }
+              console.log(obj);
               paraArr.push(obj);
             });
           });
@@ -543,6 +599,7 @@ export default {
       para = para.trim();
       para = para.replace(/\s+/g, " ");
       para = para.replace(/_{2,}/g, "^ ");
+      console.log(para);
       let paraArr = para.split(/\s/g);
       let resArr = [];
       paraArr.forEach((item, index) => {
@@ -666,6 +723,9 @@ export default {
             line-height: 22px;
             color: #000000;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -702,6 +762,9 @@ export default {
           line-height: 22px;
           color: #000000;
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -88,9 +88,16 @@
           :key="'list' + index"
         >
           <span class="number" v-if="item.number">{{ item.number }}</span>
-          <template>
-            <img src="" alt="" srcset="" />
-          </template>
+          <div
+            class="dialogue-img"
+            v-if="item.img_list && item.img_list.length > 0"
+          >
+            <el-image
+              style="width: 196px; height: 164px"
+              :src="item.img_list[0].id"
+              fit="scale-down"
+            ></el-image>
+          </div>
 
           <div class="dialogue-answer-model">
             <AnswerModel
@@ -138,6 +145,7 @@ export default {
   data() {
     return {
       wordShow: ["1"],
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
     };
   },
   computed: {},

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

@@ -4,11 +4,11 @@
     <div
       class="aduioLine-box"
       v-if="
-        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
       "
     >
       <AudioLine
-        :mp3="curQue.mp3_list[0].url"
+        :mp3="curQue.mp3_list[0].id"
         :getCurTime="getCurTime"
         ref="audioLine"
       />
@@ -87,7 +87,10 @@
                           <span
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -107,7 +110,10 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -115,6 +121,9 @@
                           <span
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -136,6 +145,13 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -148,6 +164,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
@@ -175,6 +192,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           >{{ pItem.pinyin }}</span
                         >
@@ -231,7 +249,14 @@ import Soundrecord from "../Soundrecord.vue";
 import Notecard from "../components/Notecard.vue";
 export default {
   name: "DialogueNormalModelChs",
-  props: ["curQue", "colorBox", "NNPEAnnotationList", "bodyLeft", "bodyWidth"],
+  props: [
+    "curQue",
+    "colorBox",
+    "NNPEAnnotationList",
+    "bodyLeft",
+    "bodyWidth",
+    "noFont",
+  ],
   components: {
     AudioLine,
     RoleChs,
@@ -624,6 +649,9 @@ export default {
             line-height: 22px;
             color: #000000;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -660,6 +688,9 @@ export default {
           line-height: 22px;
           color: #000000;
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -72,7 +72,10 @@
                           <span
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -87,7 +90,10 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -96,6 +102,13 @@
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
                             style="text-align: left"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span class="NNPE-chs" style="text-align: left">{{
@@ -104,6 +117,13 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -116,6 +136,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
@@ -137,6 +158,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           >{{ pItem.pinyin }}</span
                         >
@@ -214,6 +236,7 @@ export default {
     "NNPEAnnotationList",
     "colorBox",
     "themeColor",
+    "noFont",
   ],
   components: {
     AudioLine,
@@ -697,6 +720,9 @@ export default {
             line-height: 22px;
             color: #000000;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -736,6 +762,9 @@ export default {
           line-height: 22px;
           color: #000000;
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -129,6 +129,9 @@
                                 :class="[
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(item.pinyin) > -1
+                                    ? 'noFont'
+                                    : '',
                                 ]"
                                 >{{ pItem.pinyin }}</span
                               >
@@ -166,6 +169,9 @@
                                 :class="[
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(item.pinyin) > -1
+                                    ? 'noFont'
+                                    : '',
                                 ]"
                                 >{{ pItem.pinyin }}</span
                               >
@@ -178,6 +184,9 @@
                                 :class="[
                                   'NNPE-pinyin',
                                   sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(item.pinyin) > -1
+                                    ? 'noFont'
+                                    : '',
                                 ]"
                                 style="text-align: left"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
@@ -206,6 +215,9 @@
                                 :class="[
                                   'NNPE-pinyin',
                                   sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(item.pinyin) > -1
+                                    ? 'noFont'
+                                    : '',
                                 ]"
                                 style="text-align: left"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
@@ -225,6 +237,9 @@
                                   pItem.padding ? 'padding' : '',
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
+                                  noFont.indexOf(item.pinyin) > -1
+                                    ? 'noFont'
+                                    : '',
                                 ]"
                                 >{{ pItem.pinyin }}</span
                               >
@@ -315,7 +330,7 @@ import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
 import RoleChs from "./RoleChs.vue";
 export default {
   name: "ArticleView",
-  props: ["curQue", "colorBox"],
+  props: ["curQue", "colorBox", "noFont"],
   components: {
     AudioLine,
     Soundrecord,
@@ -736,6 +751,9 @@ export default {
           line-height: 22px;
           color: rgba(0, 0, 0, 0.85);
           margin-right: 4px;
+          &.noFont {
+            font-family: initial;
+          }
         }
         .chs {
           font-family: "FZJCGFKTK";
@@ -764,6 +782,9 @@ export default {
             line-height: 20px;
 
             height: 20px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -802,6 +823,9 @@ export default {
           font-size: 14px;
           line-height: 20px;
           height: 20px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -67,7 +67,10 @@
                           <span
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -85,7 +88,10 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
-                            :class="[pItem.className ? pItem.className : '']"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                            ]"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -93,6 +99,13 @@
                           <span
                             v-if="curQue.pyPosition == 'top'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -102,6 +115,13 @@
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -114,6 +134,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
@@ -137,6 +158,7 @@
                           :class="[
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
+                            noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                           ]"
                           >{{ pItem.pinyin }}</span
                         >
@@ -204,7 +226,14 @@ import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "WordModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox", "themeColor"],
+  props: [
+    "curQue",
+    "bodyLeft",
+    "NNPENewWordList",
+    "colorBox",
+    "themeColor",
+    "noFont",
+  ],
   components: {
     AudioLine,
     Wordcard,
@@ -693,6 +722,9 @@ export default {
             line-height: 22px;
             color: #000000;
             height: 21px;
+            &.noFont {
+              font-family: initial;
+            }
             &.textLeft {
               text-align: left;
             }
@@ -729,6 +761,9 @@ export default {
           line-height: 22px;
           color: #000000;
           height: 21px;
+          &.noFont {
+            font-family: initial;
+          }
           &.textLeft {
             text-align: left;
           }

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

@@ -52,6 +52,7 @@
         :colorBox="colorBox"
         :NNPEAnnotationList="NNPEAnnotationList"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -62,6 +63,7 @@
         :NNPEAnnotationList="NNPEAnnotationList"
         :colorBox="colorBox"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showPhrases"
       />
       <Practice
@@ -70,6 +72,7 @@
         :wordFontsize="wordFontsize"
         :colorBox="colorBox"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showPractice"
       />
       <WordModel
@@ -81,6 +84,7 @@
         :NNPENewWordList="NNPENewWordList"
         :colorBox="colorBox"
         :themeColor="themeColor"
+        :noFont="noFont"
         v-if="showWord"
       />
     </div>
@@ -115,6 +119,7 @@ export default {
       bodyLeft: 0,
       bodyWidth: 0,
       resColorArr: [],
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
     };
   },
   computed: {