全屏模式点击显示注释

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

@@ -536,6 +536,18 @@
         @changePlayStatus="changePlayStatus"
       />
     </div>
+    <template v-if="isNoteShow">
+      <div
+        ref="notecard"
+        class="NNPE-wordDetail"
+        :style="{
+          marginLeft: windowWidth > 642 ? '-321px' : '0px',
+          left: windowWidth > 642 ? '' : '0px',
+        }"
+      >
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -544,6 +556,7 @@ import AudioLineSentence from './components/AudioLineSentence.vue';
 import Soundrecorddiff from './components/Soundrecorddiff.vue';
 import AudioCompare from './components/AudioCompare.vue';
 import Wordcard from './components/Wordcard.vue';
+import Notecard from './components/Notecard.vue'; // 注释
 import { LearnWebSI } from '@/api/app';
 
 export default {
@@ -553,6 +566,7 @@ export default {
     Soundrecorddiff,
     AudioCompare,
     Wordcard,
+    Notecard,
   },
   props: [
     'sentList',
@@ -621,6 +635,10 @@ export default {
       enwords: '',
       screenHeight: 0,
       wordPlayMp3: '',
+      curNoteCon: null,
+      isNoteShow: false,
+      oldNoteNum: '',
+      windowWidth: window.innerWidth,
     };
   },
   computed: {
@@ -684,6 +702,23 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    isNoteShow: {
+      handler(val, oldVal) {
+        let _this = this;
+        if (val) {
+          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,
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -1022,7 +1057,6 @@ export default {
       _this.pauseAudio();
       _this.isPlaying = false;
       let item = JSON.parse(JSON.stringify(_this.sentList[_this.curSentIndex]));
-      console.log(item);
       if (item.sentArr) {
         _this.item = item.sentArr;
         _this.enwords = item.enwords;
@@ -1124,48 +1158,80 @@ export default {
     },
     showWordDetail(e, item) {
       let _this = this;
+
+      let noteIndex = '';
       if (_this.TaskModel == 'ANSWER') {
         return;
       }
       if (_this.chsFhList.indexOf(item.chs) > -1 || /^[a-zA-Z0-9]/.test(item.chs)) {
         return;
       }
+      if (_this.NumberList.indexOf(item.chs) > -1) {
+        for (let i = 0; i < _this.NumberList.length; i++) {
+          if (_this.NumberList[i] == item.chs) {
+            noteIndex = `${String(i)}`;
+            break;
+          }
+        }
 
-      if (_this.oldHz != item.chs) {
-        this.isShow = false;
+        this.showNoteDetail(e, noteIndex);
+      } else if (this.newWordList.indexOf(item.chs) > -1) {
+        if (_this.oldHz != item.chs) {
+          this.isShow = false;
 
+          setTimeout(() => {
+            _this.hz = item.words ? item.words : item.chs;
+            _this.pinyin = item.pinyin;
+            _this.wordIndex = item.wordIndex;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let new_word = item.words ? item.words : item.chs;
+        _this.wordPlayMp3 = '';
+        _this.NNPENewWordList.forEach((itemn) => {
+          // items.forEach((itemn) => {
+          if (itemn.new_word === new_word) {
+            _this.wordbgs = itemn.bg;
+            _this.wordeds = itemn.ed;
+            _this.wordPlayMp3 = itemn.newWordMp3;
+          }
+          // });
+        });
+        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;
+        }
+        // if (left - this.bodyLeft > this.contentWidth / 2) {
+        //   _this.left = left - width + 10;
+        // } else {
+        _this.left = left - width / 2;
+        // }
+      }
+    },
+    showNoteDetail(e, noteNum) {
+      let _this = this;
+      if (_this.oldNoteNum !== noteNum) {
+        this.isNoteShow = false;
         setTimeout(() => {
-          _this.hz = item.words ? item.words : item.chs;
-          _this.pinyin = item.pinyin;
-          _this.wordIndex = item.wordIndex;
+          _this.noteNum = noteNum;
+          _this.handleNote(noteNum);
         }, 50);
       }
       _this.clientY = e.clientY;
-      let new_word = item.words ? item.words : item.chs;
-      _this.wordPlayMp3 = '';
-      _this.NNPENewWordList.forEach((itemn) => {
-        // items.forEach((itemn) => {
-        if (itemn.new_word === new_word) {
-          _this.wordbgs = itemn.bg;
-          _this.wordeds = itemn.ed;
-          _this.wordPlayMp3 = itemn.newWordMp3;
-        }
-        // });
-      });
       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 = 642;
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else if (left - 200 > 500) {
+        _this.left = 500;
+      } else {
+        _this.left = left - 200;
       }
-      // if (left - this.bodyLeft > this.contentWidth / 2) {
-      //   _this.left = left - width + 10;
-      // } else {
-      _this.left = left - width / 2;
-      // }
     },
     changeWordCard(isShow) {
       let _this = this;
@@ -1212,6 +1278,22 @@ export default {
     getScreenHeight() {
       this.screenHeight = window.innerHeight;
     },
+    // 处理注释数据
+    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 = '';
+    },
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -1900,6 +1982,22 @@ export default {
   position: absolute;
   left: -1000px;
 }
+
+.NNPE-wordDetail {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 116;
+  max-width: 100%;
+  margin-top: -196px;
+  overflow: auto;
+
+  // box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
+
+  //   width: 260px;
+  //   height: 200px;
+  //   background: #cc0;
+}
 </style>
 <style lang="scss">
 .NPC-Big-Book-preview-green {

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -971,7 +971,6 @@ export default {
         this.$set(item, 'isFlipped', false);
         this.$set(item, 'pyhz', flag);
       });
-      console.log(this.data.new_word_list);
       option_list.forEach((item, index) => {
         optionRes = optionRes.concat(item);
         Bookanswer.push([]);