Notecard

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

@@ -48,8 +48,10 @@
                   :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
                   @click="
                     handleChangeTime(
-                      item.timeList.length > 0 &&
-                        item.timeList[pItem.sentIndex].bg
+                      item.timeList &&
+                        item.timeList.length > 0 &&
+                        item.timeList[pItem.sentIndex].bg,
+                      item
                     )
                   "
                 >
@@ -128,7 +130,7 @@
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                           ]"
-                          @click="viewNotes($event, pItem.pinyin)"
+                          @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
 
@@ -189,6 +191,15 @@
         </div>
       </div>
     </template>
+    <template v-if="isNoteShow">
+      <div
+        ref="notecard"
+        class="NNPE-noteDetail"
+        :style="{ top: top + 'px', left: left + 'px' }"
+      >
+        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -198,6 +209,7 @@ import AudioLine from "../AudioLine.vue";
 import RoleChs from "./RoleChs.vue";
 import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
+import Notecard from "../components/Notecard.vue";
 export default {
   name: "DialogueNormalModelChs",
   props: ["curQue", "colorBox", "NNPEAnnotationList", "bodyLeft", "bodyWidth"],
@@ -206,6 +218,7 @@ export default {
     RoleChs,
     RemarkChs,
     Soundrecord,
+    Notecard,
   },
   data() {
     return {
@@ -236,8 +249,6 @@ export default {
         "⑳",
       ],
       newWords: ["鱼", "辩礼义"],
-      oldHz: "",
-      hz: "",
       top: 0,
       left: 0,
       articleImg: {}, // 文章图片
@@ -249,6 +260,8 @@ export default {
       top: 0,
       left: 0,
       curNoteCon: null,
+      screenHeight: 0,
+      
     };
   },
   computed: {},
@@ -267,8 +280,9 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
+          debugger;
           setTimeout(() => {
-            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            _this.cardHeight = _this.$refs.notecard.offsetHeight;
             if (_this.screenHeight - _this.clientY > _this.cardHeight) {
               _this.top = _this.clientY + 20;
             } else {
@@ -302,7 +316,7 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
-            this.mergeWordSymbol(wItem, wIndex);
+            this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
@@ -351,7 +365,7 @@ export default {
       }
     },
     //词和标点合一起
-    mergeWordSymbol(wItem, curIndex) {
+    mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
       } else {
@@ -403,19 +417,20 @@ export default {
       return listRes;
     },
     //点击播放某个句子
-    handleChangeTime(time) {
+    handleChangeTime(time, item) {
       if (item.timeList && item.timeList.length > 0) {
         this.curTime = time;
         this.$refs.audioLine.onTimeupdateTime(time / 1000);
       }
     },
     viewNotes(e, noteNum) {
+      debugger;
       let _this = this;
       let noteIndex = "";
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            _this.noteIndex = "" + i + "";
+            noteIndex = "" + i + "";
             break;
           }
         }
@@ -432,14 +447,8 @@ export default {
       }
       _this.clientY = e.clientY;
       let left = e.clientX;
-      let width = 0;
-      if (item.chs.length == 1 || item.chs.length == 2) {
-        width = 304;
-      } else if (item.chs.length == 3 || item.chs.length == 4) {
-        width = 432;
-      } else if (item.chs.length > 3) {
-        width = 560;
-      }
+      let width = 442;
+
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
       } else {
@@ -458,6 +467,15 @@ export default {
           : null;
       }
     },
+    getScreenHeight() {
+      this.screenHeight = window.innerHeight;
+    },
+    changeCard(isShow) {
+      let _this = this;
+      _this.isNoteShow = isShow;
+      _this.oldNoteNum = "";
+      _this.noteNum = "";
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -467,6 +485,10 @@ export default {
     console.log(this.NNPEAnnotationList);
     if (this.curQue) {
       this.handleData();
+      $(window).resize(() => {
+        this.getScreenHeight();
+      });
+      this.getScreenHeight();
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -672,5 +694,8 @@ export default {
       padding-top: 44px;
     }
   }
+  .NNPE-noteDetail {
+    position: fixed;
+  }
 }
 </style>

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

@@ -44,6 +44,7 @@
                     <template v-if="pItem.isShow">
                       <template
                         v-if="
+                          item.wordsList[pIndex + 1] &&
                           item.wordsList[pIndex + 1].chs &&
                           chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                         "
@@ -97,9 +98,11 @@
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
+                          v-if="pItem.chs != '#'"
                           class="NNPE-chs"
                           :class="[
                             newWordList.indexOf(pItem.chs) > -1
@@ -159,6 +162,15 @@
         <Wordcard :word="word" :changeWordCard="changeWordCard" />
       </div>
     </template>
+    <template v-if="isNoteShow">
+      <div
+        ref="notecard"
+        class="NNPE-wordDetail"
+        :style="{ top: top + 'px', left: left + 'px' }"
+      >
+        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -166,18 +178,26 @@
 import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
+import Notecard from "../components/Notecard.vue"; // 注释
 import RoleChs from "./RoleChs.vue";
 import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "PhraseModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox"],
+  props: [
+    "curQue",
+    "bodyLeft",
+    "NNPENewWordList",
+    "NNPEAnnotationList",
+    "colorBox",
+  ],
   components: {
     AudioLine,
     Wordcard,
     RoleChs,
     RemarkChs,
     Soundrecord,
+    Notecard,
   },
   data() {
     return {
@@ -185,6 +205,28 @@ export default {
       curTime: 0, //单位s
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
       newWords: ["鱼", "辩礼义"],
       oldHz: "",
       hz: "",
@@ -197,6 +239,11 @@ export default {
       screenHeight: 0,
       cardHeight: 0,
       isHasRemark: false,
+      clickType: "",
+      isNoteShow: false,
+      noteNum: "",
+      oldNoteNum: "",
+      curNoteCon: null,
     };
   },
   computed: {},
@@ -228,6 +275,34 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    noteNum: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          _this.handleNote(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isNoteShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          debugger;
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.notecard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -249,7 +324,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, //在段落中句子索引
@@ -287,26 +362,12 @@ export default {
       }
     },
     //词和标点合一起
-    mergeWordSymbol(sItem, wItem, curIndex) {
-      let leg = sItem.length;
-      if (curIndex < leg - 1) {
-        let nextIndex = curIndex + 1;
-        let chs = sItem[nextIndex].chs;
-        let pinyin = sItem[nextIndex].pinyin;
-        // if (this.chsFhList.indexOf(chs) > -1) {
-        //   wItem.chs = "<a>" + wItem.chs + "</a><a>" + chs + "</a>";
-        //   wItem.pinyin = "<a>" + wItem.pinyin + "</a><a>" + pinyin + "</a>";
-        // }
-        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;
       }
-
-      // if (this.enFhList.indexOf(wItem.pinyin) > -1) {
-      //   wItem.className = "textLeft";
-      // }
     },
     //获取角色
     getRole(dItem) {
@@ -357,10 +418,14 @@ export default {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time);
     },
+
     handleNewword() {
       let NewWordList = [];
       this.NNPENewWordList.forEach((item) => {
-        NewWordList.push(item.new_word);
+        item.forEach((wItem) => {
+          console.log(wItem.new_word);
+          NewWordList.push(wItem.new_word);
+        });
       });
       this.newWordList = JSON.parse(JSON.stringify(NewWordList));
     },
@@ -376,6 +441,7 @@ export default {
       _this.top = e.clientY + 20;
       let left = e.clientX;
       let width = 0;
+
       if (word.length == 1 || word.length == 2) {
         width = 304;
       } else if (word.length == 3 || word.length == 4) {
@@ -383,6 +449,7 @@ export default {
       } else if (word.length > 3) {
         width = 560;
       }
+
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
       } else {
@@ -402,15 +469,68 @@ export default {
       this.isShow = true;
       this.word = null;
       for (let i = 0; i < this.NNPENewWordList.length; i++) {
-        let item = this.NNPENewWordList[i];
-        if (item.new_word.trim() == val.trim()) {
-          let wordlist = val.split("");
-          this.word = { list: wordlist, detail: item, top: top, left: left };
-          break;
+        let pItem = this.NNPENewWordList[i];
+        for (let j = 0; j < pItem.length; j++) {
+          let item = pItem[j];
+          if (item.new_word.trim() == val.trim()) {
+            let wordlist = val.split("");
+            this.word = { list: wordlist, detail: item, top: top, left: left };
+            break;
+          }
         }
       }
       this.oldHz = val;
     },
+    viewNotes(e, noteNum) {
+      let _this = this;
+      _this.clickType = "note";
+      let noteIndex = "";
+      if (_this.NumberList.indexOf(noteNum) > -1) {
+        for (let i = 0; i < _this.NumberList.length; i++) {
+          if (_this.NumberList[i] == noteNum) {
+            noteIndex = "" + i + "";
+            break;
+          }
+        }
+      }
+      this.showNoteDetail(e, noteIndex);
+    },
+    showNoteDetail(e, noteNum) {
+      let _this = this;
+      if (_this.oldNoteNum != noteNum) {
+        this.isNoteShow = false;
+        setTimeout(() => {
+          _this.noteNum = noteNum;
+        }, 50);
+      }
+      _this.clientY = e.clientY;
+      let left = e.clientX;
+      let width = 442;
+
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else {
+        _this.left = left;
+      }
+    },
+    // 处理注释数据
+    handleNote(val) {
+      let _this = this;
+      _this.isNoteShow = true;
+      _this.oldNoteNum = val;
+      let noteIndex = Number(val);
+      if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+        _this.curNoteCon = _this.NNPEAnnotationList[noteIndex]
+          ? _this.NNPEAnnotationList[noteIndex]
+          : null;
+      }
+    },
+    changeCard(isShow) {
+      let _this = this;
+      _this.isNoteShow = isShow;
+      _this.oldNoteNum = "";
+      _this.noteNum = "";
+    },
     getScreenHeight() {
       this.screenHeight = window.innerHeight;
     },

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

@@ -70,6 +70,7 @@
                       <template v-if="pItem.isShow">
                         <template
                           v-if="
+                            item.sentArr[pIndex + 1] &&
                             item.sentArr[pIndex + 1].chs &&
                             chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
                           "
@@ -166,7 +167,12 @@
                           </span>
                         </template>
                         <template v-else>
-                          <template v-if="curQue.pyPosition == 'top'">
+                          <template
+                            v-if="
+                              curQue.pyPosition == 'top' ||
+                              NumberList.indexOf(pItem.pinyin) < 0
+                            "
+                          >
                             <span
                               v-if="isShowPY"
                               class="NNPE-pinyin"
@@ -179,6 +185,7 @@
                             >
                           </template>
                           <span
+                            v-if="pItem.chs != '#'"
                             class="NNPE-chs"
                             :class="[
                               pItem.padding && isShowPY ? 'padding' : '',
@@ -269,6 +276,28 @@ export default {
       curTime: 0, //单位s
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
       stopAudio: false,
       sentIndex: 0,
       isShowPY: true,
@@ -329,7 +358,7 @@ export default {
                 ? wItem.chs.length
                 : sentArr[wIndex - 1].endIndex + wItem.chs.length;
             // this.judgePad(sItem, wItem, wIndex);
-            this.mergeWordSymbol(sItem, wItem, wIndex);
+            this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
@@ -396,16 +425,11 @@ export default {
       });
     },
     //词和标点合一起
-    mergeWordSymbol(sItem, wItem, curIndex) {
-      let leg = sItem.length;
-      if (curIndex < leg - 1) {
-        let nextIndex = curIndex + 1;
-
-        if (this.chsFhList.indexOf(wItem.chs) > -1) {
-          wItem.isShow = false;
-        } else {
-          wItem.isShow = true;
-        }
+    mergeWordSymbol(wItem) {
+      if (this.chsFhList.indexOf(wItem.chs) > -1) {
+        wItem.isShow = false;
+      } else {
+        wItem.isShow = true;
       }
     },
     handleData2() {

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

@@ -44,6 +44,7 @@
                     <template v-if="pItem.isShow">
                       <template
                         v-if="
+                          item.wordsList[pIndex + 1] &&
                           item.wordsList[pIndex + 1].chs &&
                           chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                         "
@@ -100,9 +101,11 @@
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
+                          v-if="pItem.chs != '#'"
                           class="NNPE-chs"
                           :class="[
                             pItem.padding ? 'padding' : '',
@@ -161,6 +164,15 @@
         <Wordcard :word="word" :changeWordCard="changeWordCard" />
       </div>
     </template>
+    <template v-if="isNoteShow">
+      <div
+        ref="notecard"
+        class="NNPE-wordDetail"
+        :style="{ top: top + 'px', left: left + 'px' }"
+      >
+        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -168,6 +180,7 @@
 import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
+import Notecard from "../components/Notecard.vue"; // 注释
 import RoleChs from "./RoleChs.vue";
 import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
@@ -180,6 +193,7 @@ export default {
     RoleChs,
     RemarkChs,
     Soundrecord,
+    Notecard,
   },
   data() {
     return {
@@ -187,6 +201,28 @@ export default {
       curTime: 0, //单位s
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
       newWords: ["鱼", "辩礼义"],
       isShow: false,
       hz: "",
@@ -204,6 +240,10 @@ export default {
       screenHeight: 0,
       cardHeight: 0,
       isHasRemark: false,
+      isNoteShow: false,
+      noteNum: "",
+      oldNoteNum: "",
+      curNoteCon: null,
     };
   },
   computed: {},
@@ -235,6 +275,34 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    noteNum: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          _this.handleNote(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isNoteShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          debugger;
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.notecard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -257,7 +325,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, //在段落中句子索引
@@ -302,14 +370,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;
       }
     },
     //获取角色
@@ -426,6 +491,56 @@ export default {
     getScreenHeight() {
       this.screenHeight = window.innerHeight;
     },
+    viewNotes(e, noteNum) {
+      let _this = this;
+      _this.clickType = "note";
+      let noteIndex = "";
+      if (_this.NumberList.indexOf(noteNum) > -1) {
+        for (let i = 0; i < _this.NumberList.length; i++) {
+          if (_this.NumberList[i] == noteNum) {
+            noteIndex = "" + i + "";
+            break;
+          }
+        }
+      }
+      this.showNoteDetail(e, noteIndex);
+    },
+    showNoteDetail(e, noteNum) {
+      let _this = this;
+      if (_this.oldNoteNum != noteNum) {
+        this.isNoteShow = false;
+        setTimeout(() => {
+          _this.noteNum = noteNum;
+        }, 50);
+      }
+      _this.clientY = e.clientY;
+      let left = e.clientX;
+      let width = 442;
+
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else {
+        _this.left = left;
+      }
+    },
+    // 处理注释数据
+    handleNote(val) {
+      let _this = this;
+      _this.isNoteShow = true;
+      _this.oldNoteNum = val;
+      let noteIndex = Number(val);
+      if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+        _this.curNoteCon = _this.NNPEAnnotationList[noteIndex]
+          ? _this.NNPEAnnotationList[noteIndex]
+          : null;
+      }
+    },
+    changeCard(isShow) {
+      let _this = this;
+      _this.isNoteShow = isShow;
+      _this.oldNoteNum = "";
+      _this.noteNum = "";
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

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

@@ -58,6 +58,7 @@
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
         :NNPENewWordList="NNPENewWordList"
+        :NNPEAnnotationList="NNPEAnnotationList"
         :colorBox="colorBox"
         v-if="showPhrases"
       />

src/components/Adult/preview/components/Notecard.vue

@@ -0,0 +1,124 @@
+<!--  -->
+<template>
+  <div class="NoteCard" v-if="item">
+    <div class="closeBox">
+      <i class="el-icon-close" @click="changeCard(false)"></i>
+    </div>
+    <div class="NPC-notes">
+      <div class="NPC-notes-con">
+        <!-- <span class="NPC-notes-con-number">{{ item.number }}</span> -->
+        <span class="NPC-notes-con-text">{{ item.con }}</span>
+      </div>
+      <div class="NPC-notes-trans">
+        {{ item.interpret }}
+      </div>
+      <div class="NPC-notes-note" v-if="item.note">
+        {{ item.note }}
+      </div>
+      <div
+        class="NPC-notes-note"
+        v-if="item.img_list && item.img_list.length > 0"
+      >
+        <div
+          v-for="(imgItem, imgIndex) in item.img_list"
+          :key="'imgList' + imgIndex"
+        >
+          <img :src="imgItem.id" class="NPC-notes-img" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["item", "changeCard"],
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NoteCard {
+  width: 442px;
+  max-height: 261px;
+  overflow-y: auto;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 16px;
+  .NPC-notes {
+    width: 100%;
+    margin-bottom: 24px;
+    .NPC-notes-con {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 8px;
+      > span {
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 150%;
+        color: #e35454;
+        &.NPC-notes-con-number {
+          font-family: "robot";
+        }
+        &.NPC-notes-con-text {
+          flex: 1;
+          margin-left: 5px;
+          font-family: "GB-PINYINOK-B";
+        }
+      }
+    }
+    .NPC-notes-trans {
+      font-family: "robot";
+      font-style: normal;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 150%;
+      color: #000000;
+      margin-bottom: 8px;
+      padding-left: 27px;
+    }
+    .NPC-notes-note {
+      font-family: "robot";
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 150%;
+      color: #000000;
+      text-indent: 27px;
+    }
+  }
+  .closeBox {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    top: 16px;
+    right: 24px;
+    > i {
+      cursor: pointer;
+    }
+  }
+}
+</style>