文章

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

@@ -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%);

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"
@@ -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/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;
   }