恢复部分移动端代码

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

@@ -1181,7 +1181,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" :isMobile="isMobile" />
       </div>
     </template>
   </div>
@@ -1196,7 +1196,17 @@ export default {
     AudioLine,
     Notecard,
   },
-  props: ['curQue', 'noFont', 'config', 'NNPEAnnotationList', 'colLength', 'themeColor', 'multilingual', 'attrib'],
+  props: [
+    'curQue',
+    'noFont',
+    'config',
+    'NNPEAnnotationList',
+    'colLength',
+    'themeColor',
+    'multilingual',
+    'attrib',
+    'isMobile',
+  ],
   data() {
     return {
       resArr: [],

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

@@ -128,7 +128,6 @@
                               v-for="(wItem, wIndex) in pItem.leg"
                               :key="'ci' + wIndex + pIndex + index"
                               :class="[
-                                isPlaying &&
                                 pItem.chstimeList &&
                                 pItem.chstimeList[wIndex] &&
                                 curTime >= pItem.chstimeList[wIndex].wordBg &&
@@ -138,7 +137,6 @@
                               ]"
                               :style="{
                                 color:
-                                  isPlaying &&
                                   pItem.chstimeList &&
                                   pItem.chstimeList[wIndex] &&
                                   curTime >= pItem.chstimeList[wIndex].wordBg &&
@@ -147,7 +145,7 @@
                                     ? attrib.topic_color
                                     : '',
                               }"
-                              @click.stop="viewNotes($event, pItem.chs[wIndex])"
+                              @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs)"
                               >{{ pItem.chs[wIndex] }}</span
                             ></span
                           >
@@ -351,7 +349,6 @@
                             v-for="(wItem, wIndex) in pItem.leg"
                             :key="'ci' + wIndex + pIndex + index"
                             :class="[
-                              isPlaying &&
                               pItem.chstimeList &&
                               pItem.chstimeList[wIndex] &&
                               curTime >= pItem.chstimeList[wIndex].wordBg &&
@@ -361,7 +358,6 @@
                             ]"
                             :style="{
                               color:
-                                isPlaying &&
                                 pItem.chstimeList &&
                                 pItem.chstimeList[wIndex] &&
                                 curTime >= pItem.chstimeList[wIndex].wordBg &&
@@ -370,7 +366,7 @@
                                   ? attrib.topic_color
                                   : '',
                             }"
-                            @click.stop="viewNotes($event, pItem.chs[wIndex])"
+                            @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs)"
                             >{{ pItem.chs[wIndex] }}</span
                           ></span
                         >
@@ -499,7 +495,7 @@
                                 lineHeight:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                               }"
-                              @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex])"
+                              @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs)"
                               >{{ pItem.chs[wIndex] }}</span
                             >
                           </template>
@@ -713,7 +709,7 @@
                               lineHeight:
                                 attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                             }"
-                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex])"
+                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs)"
                             >{{ pItem.chs[wIndex] }}</span
                           >
                         </template>
@@ -1405,7 +1401,7 @@ export default {
         }
       }
     },
-    viewNotes(e, noteNum) {
+    viewNotes(e, noteNum, noteNums) {
       let _this = this;
       _this.clickType = 'note';
       _this.activeWord = null;
@@ -1449,6 +1445,37 @@ export default {
         } else {
           _this.left = left;
         }
+      } else if (this.newWordList.indexOf(noteNums) > -1) {
+        if (_this.oldHz != noteNums) {
+          this.isShow = false;
+          _this.NNPENewWordList.forEach((items) => {
+            // item.forEach((items) => {
+            if (items.new_word === noteNums) {
+              this.activeWord = items;
+            }
+            // });
+          });
+          setTimeout(() => {
+            _this.hz = noteNums;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let left = e.clientX;
+        let width = 0;
+
+        if (noteNums.length == 1 || noteNums.length == 2) {
+          width = 304;
+        } else if (noteNums.length == 3 || noteNums.length == 4) {
+          width = 432;
+        } else if (noteNums.length > 3) {
+          width = 560;
+        }
+
+        if (left - this.bodyLeft > this.contentWidth / 2) {
+          _this.left = left - width + 10;
+        } else {
+          _this.left = left;
+        }
       }
     },
     showNoteDetail(e, noteNum) {

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

@@ -1228,7 +1228,8 @@ export default {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      width: 304px;
+
+      // width: 304px;
       padding: 4px 12px;
       background: #fff;
       border: 1px solid rgba(0, 0, 0, 10%);
@@ -1236,7 +1237,8 @@ export default {
 
       .luyin-box {
         width: 280px;
-        max-width: 280px;
+
+        // max-width: 280px;
       }
 
       .compare-box {

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

@@ -187,7 +187,7 @@ export default {
         .generate()
         .then((res) => {
           let Book_img = res.replace('data:image/png;base64,', '');
-          let write_img = `data:image/png;base64,${  Book_img}`;
+          let write_img = `data:image/png;base64,${Book_img}`;
           let answer = {};
           answer = {
             hz,
@@ -315,7 +315,7 @@ export default {
     margin: 0 auto;
 
     .character-target-div {
-      z-index: 99999;
+      z-index: 1;
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -86,7 +86,7 @@ export default {
 }
 
 .character-target-div {
-  z-index: 99999;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -103,7 +103,7 @@ export default {
 }
 
 .character-target-div {
-  z-index: 99999;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -63,7 +63,7 @@ export default {
     initHanziwrite() {
       let _this = this;
       let options = {
-        charDataLoader (char, onComplete) {
+        charDataLoader(char, onComplete) {
           let MethodName = 'hz_resource_manager-GetHZStrokesContent';
           let data = {
             hz: char,
@@ -108,7 +108,7 @@ export default {
 
   //chinawrite220.png
   .character-target-div {
-    z-index: 99999;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -122,6 +122,7 @@
             :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @changeConfig="changeConfig"
           />
           <PhraseModel
@@ -141,6 +142,7 @@
             :NpcNewWordMp3="NpcNewWordMp3"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @changeConfig="changeConfig"
           />
           <Practice
@@ -160,6 +162,7 @@
             :is-full="isFull"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @changeConfig="changeConfig"
           />
           <WordModel
@@ -178,6 +181,7 @@
             :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @changeConfig="changeConfig"
           />
         </div>
@@ -198,6 +202,7 @@
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NpcNewWordMp3="NpcNewWordMp3"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
@@ -209,17 +214,17 @@
       <template
         v-if="data.new_word_list && data.new_word_list.new_word_list && data.new_word_list.new_word_list.length > 0"
       >
-        <NewWordPreview :new-data="data.new_word_list" />
+        <NewWordPreview :new-data="data.new_word_list" :isMobile="isMobile" />
       </template>
       <template
         v-if="
           data.other_word_list && data.other_word_list.new_word_list && data.other_word_list.new_word_list.length > 0
         "
       >
-        <NewWordPreview :new-data="data.other_word_list" />
+        <NewWordPreview :new-data="data.other_word_list" :isMobile="isMobile" />
       </template>
       <template v-if="data.notes_list && data.notes_list.option && data.notes_list.option.length > 0">
-        <NotesPreview :notes-data="data.notes_list" />
+        <NotesPreview :notes-data="data.notes_list" :isMobile="isMobile" />
       </template>
     </div>
   </div>
@@ -869,5 +874,10 @@ export default {
       border-bottom: none !important;
     }
   }
+
+  .el-slider {
+    flex: 1;
+    width: auto !important;
+  }
 }
 </style>

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

@@ -1486,7 +1486,8 @@ export default {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      width: 304px;
+
+      // width: 304px;
       padding: 4px 12px;
       background: #fff;
       border: 1px solid rgba(0, 0, 0, 10%);

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

@@ -863,5 +863,10 @@ export default {
       border-bottom: none;
     }
   }
+
+  .el-slider {
+    flex: 1;
+    width: auto !important;
+  }
 }
 </style>

src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

@@ -16,7 +16,12 @@
         @click="toggleFullScreen"
         >{{ full_type ? '退出全屏' : '进入全屏' }}</el-button
       >
-      <iframe :src="games_url" width="100%" :height="full_type ? '100%' : '580px'" style="border: none"></iframe>
+      <iframe
+        :src="games_url"
+        width="100%"
+        :height="full_type ? '100%' : isMobile ? '400px' : '580px'"
+        style="border: none"
+      ></iframe>
     </div>
   </div>
 </template>
@@ -27,6 +32,12 @@ import { getH5GamesData } from '@/views/book/courseware/data/h5Games';
 import { H5StartupFile } from '@/api/app';
 export default {
   name: 'H5GamesPreview',
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   components: {},
   mixins: [PreviewMixin],

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -178,7 +178,7 @@ export default {
 
 .character-target-div {
   position: absolute;
-  z-index: 999;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -444,7 +444,12 @@
                   @handleListenRead="handleListenRead"
                 />
               </div>
-              <div v-for="(item, index) in data.new_word_list" :key="index" class="NPC-word-tile-item">
+              <div
+                v-for="(item, index) in data.new_word_list"
+                :key="index"
+                class="NPC-word-tile-item"
+                :class="[isMobile ? 'NPC-word-tile-item-phone' : '']"
+              >
                 <div class="writeTop" :class="{ flipped: item.isFlipped }">
                   <div
                     v-if="item.show_left"
@@ -1727,6 +1732,15 @@ export default {
     }
   }
 
+  .NPC-word-tile-item-phone {
+    width: calc(50% - 10px);
+
+    .writeTop {
+      width: 100%;
+      min-height: 160px;
+    }
+  }
+
   .flipped {
     transform: rotateY(180deg);
   }
@@ -1737,6 +1751,7 @@ export default {
 
   .hz-box {
     display: flex;
+    flex-flow: wrap;
     width: max-content;
   }
 

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

@@ -794,6 +794,7 @@ export default {
 
   .hz-box {
     display: flex;
+    flex-flow: wrap;
     width: max-content;
   }
 

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -170,7 +170,7 @@ export default {
   name: 'NotesPreview',
   components: {},
   mixins: [PreviewMixin],
-  props: ['notesData'],
+  props: ['notesData', 'isMobile'],
   data() {
     return {
       data: this.notesData ? this.notesData : getNotesData(),

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -7,13 +7,15 @@
       <div
         class="table-box"
         :style="{
-          width: data.property.width + 'px',
+          width: isMobile ? '100%' : data.property.width + 'px',
+
           height: data.property.height + 'px',
         }"
       >
         <table
           :style="{
-            width: table_width + 'px',
+            width: isMobile ? '100%' : table_width + 'px',
+
             height: data.property.height + 'px',
           }"
         >
@@ -240,6 +242,13 @@ export default {
   name: 'TablePreview',
   components: { SoundRecordBox, WriteDialog },
   mixins: [PreviewMixin],
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       data: getTableData(),

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -88,7 +88,7 @@
       :modal-append-to-body="true"
       :append-to-body="true"
       :lock-scroll="true"
-      width="80%"
+      :width="isMobile ? '100%' : '80%'"
       top="0"
     >
       <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
@@ -107,6 +107,13 @@ import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview
 export default {
   name: 'UploadPreviewPreview',
   mixins: [PreviewMixin],
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       data: getUploadPreviewData(),

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -46,7 +46,7 @@
       :modal-append-to-body="true"
       :append-to-body="true"
       :lock-scroll="true"
-      width="80%"
+      :width="isMobile ? '100%' : '80%'"
       @close="handleClose"
     >
       <Report
@@ -68,6 +68,12 @@ import { getVideoInteractionData } from '@/views/book/courseware/data/videoInter
 import { getConfig } from '@/utils/auth';
 export default {
   name: 'VideoInteractionPreview',
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   components: { ExercisePreview, Report },
   mixins: [PreviewMixin],