注释扩展在课文中预览颜色 并支持自动完全匹配

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

@@ -88,6 +88,9 @@
           <el-option v-for="{ value, label } in speedRatioList" :key="value" :label="label" :value="value" />
         </el-select>
       </el-form-item>
+      <el-form-item label="气泡宽度">
+        <el-input v-model="property.remarkWidth"><template slot="append">%</template></el-input>
+      </el-form-item>
     </el-form>
   </div>
 </template>

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

@@ -55,7 +55,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column prop="note" label="注释">
+      <el-table-column prop="note" label="注释" width="200">
         <template slot-scope="scope">
           <RichText
             ref="richText"
@@ -78,6 +78,11 @@
           />
         </template>
       </el-table-column> -->
+      <el-table-column prop="notesColor" label="在课文中的颜色" width="130">
+        <template slot-scope="scope">
+          <el-color-picker v-model="scope.row.notesColor"></el-color-picker>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="150">
         <template slot-scope="scope">
           <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
@@ -177,6 +182,7 @@ export default {
         note: '', // 注释
         img_list: [],
         file_list: [''], // 图片
+        notesColor: '#8206BF', // 在课文中预览的注释颜色
       };
     },
     uploadPic(file_id, index) {

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

@@ -165,6 +165,9 @@
       <el-form-item label="语境颜色">
         <el-color-picker v-model="property.notice_color"></el-color-picker>
       </el-form-item>
+      <el-form-item label="气泡宽度">
+        <el-input v-model="property.remarkWidth"><template slot="append">%</template></el-input>
+      </el-form-item>
     </el-form>
   </div>
 </template>

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

@@ -85,6 +85,7 @@ export function getArticleProperty() {
     voice_type: '', // 音色
     emotion: '', // 风格，情感
     speed_ratio: '', // 语速
+    remarkWidth: '30', // 气泡预览宽度%
 
     ...commonComponentProperty,
   };

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

@@ -128,7 +128,8 @@ export function getArticleProperty() {
     ...commonComponentProperty,
     notice_size: '14',
     notice_color: '#000',
-    noitce_family:''
+    noitce_family: '',
+    remarkWidth: '30', // 气泡预览宽度%
   };
 }
 

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

@@ -32,6 +32,7 @@ export function getOption() {
     interpret: '', // 翻译
     note: '', // 注释
     file_list: [''], // 图片
+    notesColor: '#8206BF', // 在课文中预览的注释颜色
   };
 }
 export function getNotesProperty() {

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

@@ -56,7 +56,10 @@
         <template v-if="resArr.length > 0">
           <div class="NPC-sentences-list">
             <div class="NPC-article-empty">
-              <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+              <div
+                :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+                :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+              ></div>
               <div class="empty-right"></div>
             </div>
             <div
@@ -73,6 +76,7 @@
                   'article-content',
                   isHasRemark ? 'hasRemark' : '',
                 ]"
+                :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
               >
                 <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
                   <img
@@ -204,7 +208,11 @@
                                         ? attrib.topic_color
                                         : pItem.notesColor
                                           ? pItem.notesColor
-                                          : pItem.config.color,
+                                          : annotationList.indexOf(pItem.chs) > -1
+                                            ? NNPEAnnotationList.find(
+                                                (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                              ).notesColor
+                                            : pItem.config.color,
                                   }"
                                   @click.stop="
                                     viewNotes(
@@ -339,7 +347,12 @@
                                     ? attrib.topic_color
                                     : item.wordsList[pIndex + 1].notesColor
                                       ? item.wordsList[pIndex + 1].notesColor
-                                      : item.wordsList[pIndex + 1].config.color,
+                                      : annotationList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                                        ? NNPEAnnotationList.find(
+                                            (item) =>
+                                              item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 1].chs,
+                                          ).notesColor
+                                        : item.wordsList[pIndex + 1].config.color,
                               }"
                               @click.stop="
                                 viewNotes(
@@ -483,7 +496,12 @@
                                     ? attrib.topic_color
                                     : item.wordsList[pIndex + 2].notesColor
                                       ? item.wordsList[pIndex + 2].notesColor
-                                      : item.wordsList[pIndex + 2].config.color,
+                                      : annotationList.indexOf(item.wordsList[pIndex + 2].chs) > -1
+                                        ? NNPEAnnotationList.find(
+                                            (item) =>
+                                              item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 2].chs,
+                                          ).notesColor
+                                        : item.wordsList[pIndex + 2].config.color,
                               }"
                               @click.stop="
                                 viewNotes(
@@ -627,7 +645,11 @@
                                       ? attrib.topic_color
                                       : pItem.notesColor
                                         ? pItem.notesColor
-                                        : pItem.config.color,
+                                        : annotationList.indexOf(pItem.chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                            ).notesColor
+                                          : pItem.config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -1350,6 +1372,7 @@
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
 import Notecard from './components/Notecard.vue';
 import RemarkChs from '../dialogue_article/RemarkChs.vue';
+import { data } from 'vis-network';
 export default {
   name: 'NormalModelChs',
   components: {
@@ -1395,6 +1418,7 @@ export default {
       contentWidth: 732,
       windowWidth: window.innerWidth,
       isHasRemark: false,
+      annotationList: [],
     };
   },
   computed: {
@@ -1448,6 +1472,9 @@ export default {
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    if (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0) {
+      this.handleNewword();
+    }
     if (this.curQue) {
       this.handleData();
     }
@@ -1660,6 +1687,17 @@ export default {
       });
       this.resObj = { sentList: resArrs, timeList };
     },
+    handleNewword() {
+      let annotationList = [];
+      this.NNPEAnnotationList.forEach((wItem) => {
+        // item.forEach((wItem) => {
+        if (wItem.con) {
+          annotationList.push(wItem.con.replace(/<[^>]*>?/gm, ''));
+        }
+        // });
+      });
+      this.annotationList = JSON.parse(JSON.stringify(annotationList));
+    },
     mergeWordTime(resArr, wordTimeList) {
       resArr.forEach((item, index) => {
         let wordsResultList = wordTimeList[index].wordsResultList;
@@ -1730,11 +1768,22 @@ export default {
         if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
           _this.NNPEAnnotationList.forEach((item, indexs) => {
             let textContent = item.con.replace(/<[^>]*>?/gm, '');
-            if (textContent === words.matchNotes.trim()) {
+            if (textContent === words.matchNotes.trim() || item.number === words.matchNotes.trim()) {
               noteIndex = `${String(indexs)}`;
             }
           });
         }
+      } else if (
+        _this.NNPEAnnotationList &&
+        _this.NNPEAnnotationList.length > 0 &&
+        _this.annotationList.indexOf(words.chs) > -1
+      ) {
+        _this.NNPEAnnotationList.forEach((item, indexs) => {
+          let textContent = item.con.replace(/<[^>]*>?/gm, '');
+          if (textContent === words.chs.trim()) {
+            noteIndex = `${String(indexs)}`;
+          }
+        });
       } else {
         _this.handleChangeTime(time, ed, index);
       }

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

@@ -58,7 +58,10 @@
         <template v-if="resArr.length > 0">
           <div class="NPC-sentences-list">
             <div class="NPC-article-empty">
-              <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+              <div
+                :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+                :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+              ></div>
               <div class="empty-right"></div>
             </div>
             <div
@@ -75,6 +78,7 @@
                   'article-content',
                   isHasRemark ? 'hasRemark' : '',
                 ]"
+                :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
               >
                 <template v-if="item.sourceList.length > 0 && item.sourcePosition === 'before'">
                   <img
@@ -179,7 +183,11 @@
                                       ? attrib.topic_color
                                       : pItem.notesColor
                                         ? pItem.notesColor
-                                        : pItem.config.color,
+                                        : annotationList.indexOf(pItem.chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                            ).notesColor
+                                          : pItem.config.color,
                                 }"
                                 @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                                 >{{ convertText(pItem.chs[wIndex]) }}</span
@@ -242,7 +250,11 @@
                                 fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
                                 color: item.wordsList[pIndex + 1].notesColor
                                   ? item.wordsList[pIndex + 1].notesColor
-                                  : item.wordsList[pIndex + 1].config.color,
+                                  : annotationList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                                    ? NNPEAnnotationList.find(
+                                        (item) => item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 1].chs,
+                                      ).notesColor
+                                    : item.wordsList[pIndex + 1].config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -338,7 +350,11 @@
                                 fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
                                 color: item.wordsList[pIndex + 2].notesColor
                                   ? item.wordsList[pIndex + 2].notesColor
-                                  : item.wordsList[pIndex + 2].config.color,
+                                  : annotationList.indexOf(item.wordsList[pIndex + 2].chs) > -1
+                                    ? NNPEAnnotationList.find(
+                                        (item) => item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 2].chs,
+                                      ).notesColor
+                                    : item.wordsList[pIndex + 2].config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -458,7 +474,11 @@
                                     ? attrib.topic_color
                                     : pItem.notesColor
                                       ? pItem.notesColor
-                                      : pItem.config.color,
+                                      : annotationList.indexOf(pItem.chs) > -1
+                                        ? NNPEAnnotationList.find(
+                                            (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                          ).notesColor
+                                        : pItem.config.color,
                               }"
                               @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                               >{{ convertText(pItem.chs[wIndex]) }}</span
@@ -860,7 +880,13 @@
                                 textDecoration: pItem.config.textDecoration,
                                 borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                 fontWeight: pItem.config.fontWeight,
-                                color: pItem.notesColor ? pItem.notesColor : pItem.config.color,
+                                color: pItem.notesColor
+                                  ? pItem.notesColor
+                                  : annotationList.indexOf(pItem.chs) > -1
+                                    ? NNPEAnnotationList.find(
+                                        (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                      ).notesColor
+                                    : pItem.config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -1100,6 +1126,7 @@ export default {
       left: 0,
       articleImg: {}, // 文章图片
       newWordList: [],
+      annotationList: [],
       word: null,
       isShow: false,
       screenHeight: 0,
@@ -1180,7 +1207,10 @@ export default {
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
+    if (
+      (this.NNPENewWordList && this.NNPENewWordList.length > 0) ||
+      (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0)
+    ) {
       this.handleNewword();
     }
     if (this.curQue) {
@@ -1525,6 +1555,15 @@ export default {
         // });
       });
       this.newWordList = JSON.parse(JSON.stringify(NewWordList));
+      let annotationList = [];
+      this.NNPEAnnotationList.forEach((wItem) => {
+        // item.forEach((wItem) => {
+        if (wItem.con) {
+          annotationList.push(wItem.con.replace(/<[^>]*>?/gm, ''));
+        }
+        // });
+      });
+      this.annotationList = JSON.parse(JSON.stringify(annotationList));
     },
 
     showWordDetail(e, word, words) {
@@ -1635,6 +1674,18 @@ export default {
             }
           });
         }
+      } else if (
+        _this.NNPEAnnotationList &&
+        _this.NNPEAnnotationList.length > 0 &&
+        _this.annotationList.indexOf(words.chs) > -1
+      ) {
+        _this.NNPEAnnotationList.forEach((item, indexs) => {
+          let textContent = item.con.replace(/<[^>]*>?/gm, '');
+          if (textContent === words.chs.trim()) {
+            noteIndex = `${String(indexs)}`;
+            this.showNoteDetail(e, noteIndex);
+          }
+        });
       } else if (this.newWordList.indexOf(noteNum) > -1) {
         if (_this.oldHz !== noteNum) {
           this.isShow = false;

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

@@ -59,7 +59,10 @@
         }"
       >
         <div class="NPC-article-empty">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div
+            :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+            :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+          ></div>
           <div class="empty-right"></div>
         </div>
 
@@ -86,6 +89,7 @@
                 attrib
                   ? attrib.assist_color
                   : '',
+              width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '',
             }"
           >
             <template v-if="item.type === 'notice'">
@@ -119,6 +123,12 @@
                       borderBottom: pItem.border === 'dotted' ? '1px dotted' : '',
                       fontWeight: pItem.fontWeight,
                       color: pItem.color,
+                      display: 'inline-block',
+                      margin: /^[A-Za-z]+$/.test(pItem.chs)
+                        ? indexs === 0 && indexss === 0
+                          ? '0 2px 0 0'
+                          : '0 2px'
+                        : '',
                     }"
                   >
                     {{ convertText(pItem.chs) }}
@@ -249,7 +259,11 @@
                                           ? attrib.topic_color
                                           : pItem.notesColor
                                             ? pItem.notesColor
-                                            : pItem.config.color,
+                                            : annotationList.indexOf(pItem.chs) > -1
+                                              ? NNPEAnnotationList.find(
+                                                  (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                                ).notesColor
+                                              : pItem.config.color,
                                       fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                       lineHeight:
                                         attrib && attrib.font_size
@@ -360,7 +374,12 @@
                                       ? attrib.topic_color
                                       : item.wordsList[pIndex + 1].notesColor
                                         ? item.wordsList[pIndex + 1].notesColor
-                                        : item.wordsList[pIndex + 1].config.color,
+                                        : annotationList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) =>
+                                                item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 1].chs,
+                                            ).notesColor
+                                          : item.wordsList[pIndex + 1].config.color,
                                   fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                   lineHeight:
                                     attrib && attrib.font_size
@@ -485,7 +504,12 @@
                                       ? attrib.topic_color
                                       : item.wordsList[pIndex + 2].notesColor
                                         ? item.wordsList[pIndex + 2].notesColor
-                                        : item.wordsList[pIndex + 2].config.color,
+                                        : annotationList.indexOf(item.wordsList[pIndex + 2].chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) =>
+                                                item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 2].chs,
+                                            ).notesColor
+                                          : item.wordsList[pIndex + 2].config.color,
                                   fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                   lineHeight:
                                     attrib && attrib.font_size
@@ -613,7 +637,11 @@
                                         ? attrib.topic_color
                                         : pItem.notesColor
                                           ? pItem.notesColor
-                                          : pItem.config.color,
+                                          : annotationList.indexOf(pItem.chs) > -1
+                                            ? NNPEAnnotationList.find(
+                                                (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                              ).notesColor
+                                            : pItem.config.color,
                                     fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                     lineHeight:
                                       attrib && attrib.font_size
@@ -724,7 +752,10 @@
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div
+            :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+            :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+          ></div>
           <div class="empty-right"></div>
         </div>
         <template v-for="(items, indexs) in curQue.detail">
@@ -896,6 +927,7 @@ export default {
       contentWidth: 732,
       ed: undefined,
       windowWidth: window.innerWidth,
+      annotationList: [],
     };
   },
   computed: {
@@ -949,6 +981,9 @@ export default {
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    if (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0) {
+      this.handleNewword();
+    }
     if (this.curQue) {
       this.handleData();
       window.addEventListener('resize', this.getScreenHeight);
@@ -1096,6 +1131,17 @@ export default {
         });
       }
     },
+    handleNewword() {
+      let annotationList = [];
+      this.NNPEAnnotationList.forEach((wItem) => {
+        // item.forEach((wItem) => {
+        if (wItem.con) {
+          annotationList.push(wItem.con.replace(/<[^>]*>?/gm, ''));
+        }
+        // });
+      });
+      this.annotationList = JSON.parse(JSON.stringify(annotationList));
+    },
     mergeWordTime(resArr, wordTimeList) {
       resArr.forEach((item, index) => {
         let wordsResultList = wordTimeList[index].wordsResultList;
@@ -1186,6 +1232,17 @@ export default {
             }
           });
         }
+      } else if (
+        _this.NNPEAnnotationList &&
+        _this.NNPEAnnotationList.length > 0 &&
+        _this.annotationList.indexOf(words.chs) > -1
+      ) {
+        _this.NNPEAnnotationList.forEach((item, indexs) => {
+          let textContent = item.con.replace(/<[^>]*>?/gm, '');
+          if (textContent === words.chs.trim()) {
+            noteIndex = `${String(indexs)}`;
+          }
+        });
       } else {
         _this.handleChangeTime(time, item, ed);
       }

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

@@ -57,7 +57,10 @@
         }"
       >
         <div class="NPC-article-empty">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div
+            :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+            :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+          ></div>
           <div class="empty-right"></div>
         </div>
 
@@ -77,6 +80,7 @@
                 attrib
                   ? attrib.assist_color
                   : '',
+              width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '',
             }"
           >
             <template v-if="item.type === 'notice'">
@@ -110,6 +114,12 @@
                       borderBottom: pItem.border === 'dotted' ? '1px dotted' : '',
                       fontWeight: pItem.fontWeight,
                       color: pItem.color,
+                      display: 'inline-block',
+                      margin: /^[A-Za-z]+$/.test(pItem.chs)
+                        ? indexs === 0 && indexss === 0
+                          ? '0 2px 0 0'
+                          : '0 2px'
+                        : '',
                     }"
                   >
                     {{ convertText(pItem.chs) }}
@@ -215,7 +225,11 @@
                                         : pItem.config.color
                                       : pItem.notesColor
                                         ? pItem.notesColor
-                                        : pItem.config.color,
+                                        : annotationList.indexOf(pItem.chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                            ).notesColor
+                                          : pItem.config.color,
                                 }"
                                 @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                                 >{{ convertText(pItem.chs) }}</span
@@ -290,7 +304,12 @@
                                         : item.wordsList[pIndex + 1].config.color
                                       : item.wordsList[pIndex + 1].notesColor
                                         ? item.wordsList[pIndex + 1].notesColor
-                                        : item.wordsList[pIndex + 1].config.color,
+                                        : annotationList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) =>
+                                                item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 1].chs,
+                                            ).notesColor
+                                          : item.wordsList[pIndex + 1].config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -394,7 +413,12 @@
                                         : item.wordsList[pIndex + 2].config.color
                                       : item.wordsList[pIndex + 2].notesColor
                                         ? item.wordsList[pIndex + 2].notesColor
-                                        : item.wordsList[pIndex + 2].config.color,
+                                        : annotationList.indexOf(item.wordsList[pIndex + 2].chs) > -1
+                                          ? NNPEAnnotationList.find(
+                                              (item) =>
+                                                item.con.replace(/<[^>]*>?/gm, '') === item.wordsList[pIndex + 2].chs,
+                                            ).notesColor
+                                          : item.wordsList[pIndex + 2].config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -476,7 +500,11 @@
                                       : pItem.config.color
                                     : pItem.notesColor
                                       ? pItem.notesColor
-                                      : pItem.config.color,
+                                      : annotationList.indexOf(pItem.chs) > -1
+                                        ? NNPEAnnotationList.find(
+                                            (item) => item.con.replace(/<[^>]*>?/gm, '') === pItem.chs,
+                                          ).notesColor
+                                        : pItem.config.color,
                               }"
                               @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                               >{{ convertText(pItem.chs) }}</span
@@ -558,7 +586,10 @@
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div
+            :class="['empty-left', isHasRemark ? 'hasRemark' : '']"
+            :style="{ width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '' }"
+          ></div>
           <div class="empty-right"></div>
         </div>
         <template v-for="(items, indexs) in curQue.detail">
@@ -747,6 +778,7 @@ export default {
       left: 0,
       articleImg: {}, // 文章图片
       newWordList: [],
+      annotationList: [],
       word: null,
       isShow: false,
       screenHeight: 0,
@@ -828,7 +860,10 @@ export default {
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
+    if (
+      (this.NNPENewWordList && this.NNPENewWordList.length > 0) ||
+      (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0)
+    ) {
       this.handleNewword();
     }
     if (this.curQue) {
@@ -1075,6 +1110,15 @@ export default {
         // });
       });
       this.newWordList = JSON.parse(JSON.stringify(NewWordList));
+      let annotationList = [];
+      this.NNPEAnnotationList.forEach((wItem) => {
+        // item.forEach((wItem) => {
+        if (wItem.con) {
+          annotationList.push(wItem.con.replace(/<[^>]*>?/gm, ''));
+        }
+        // });
+      });
+      this.annotationList = JSON.parse(JSON.stringify(annotationList));
     },
 
     showWordDetail(e, word, words) {
@@ -1187,6 +1231,18 @@ export default {
             }
           });
         }
+      } else if (
+        _this.NNPEAnnotationList &&
+        _this.NNPEAnnotationList.length > 0 &&
+        _this.annotationList.indexOf(words.chs) > -1
+      ) {
+        _this.NNPEAnnotationList.forEach((item, indexs) => {
+          let textContent = item.con.replace(/<[^>]*>?/gm, '');
+          if (textContent === words.chs.trim()) {
+            noteIndex = `${String(indexs)}`;
+            this.showNoteDetail(e, noteIndex);
+          }
+        });
       } else if (this.newWordList.indexOf(noteNum) > -1) {
         if (_this.oldHz !== noteNum) {
           this.isShow = false;

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

@@ -109,6 +109,12 @@
                       borderBottom: pItem.border === 'dotted' ? '1px dotted' : '',
                       fontWeight: pItem.fontWeight,
                       color: pItem.color,
+                      display: 'inline-block',
+                      margin: /^[A-Za-z]+$/.test(pItem.chs)
+                        ? indexs === 0 && indexss === 0
+                          ? '0 2px 0 0'
+                          : '0 2px'
+                        : '',
                     }"
                   >
                     {{ convertText(pItem.chs) }}