移动端打开生词卡片

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

@@ -1546,7 +1546,7 @@ export default {
   }
   .NNPE-wordDetail {
     position: fixed;
-    z-index: 101;
+    z-index: 116;
     top: 50%;
     margin-top: -196px;
     left: 50%;

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

@@ -1255,7 +1255,7 @@ export default {
 }
 .NNPE-wordDetail {
   position: fixed;
-  z-index: 101;
+  z-index: 116;
   top: 50%;
   margin-top: -196px;
   left: 50%;

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

@@ -1329,7 +1329,7 @@ export default {
   }
   .NNPE-wordDetail {
     position: fixed;
-    z-index: 101;
+    z-index: 116;
     top: 50%;
     margin-top: -196px;
     left: 50%;

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

@@ -1187,7 +1187,7 @@ export default {
 }
 .NNPE-wordDetail {
   position: fixed;
-  z-index: 101;
+  z-index: 116;
   top: 50%;
   margin-top: -196px;
   left: 50%;

src/components/Adult/preview/NewWordShow.vue

@@ -119,7 +119,7 @@
       :modal-append-to-body="true"
       :append-to-body="true"
       :lock-scroll="true"
-      width="504px"
+      :width="isPhone ? '100%' : '504px'"
       class="practiceBox practiceBoxStrock"
       v-if="isPraShow"
     >
@@ -212,7 +212,8 @@ export default {
         writeModel: {} // 生词/取词模式
       },
       pinyinWidth: 91,
-      enMargin: 13
+      enMargin: 13,
+      isPhone: false // 是否是移动端打开
     };
   },
   computed: {},
@@ -228,6 +229,8 @@ export default {
     // } else {
     _this.handleAnswerData();
     // }
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

src/components/Adult/preview/components/Practice.vue

@@ -23,7 +23,7 @@
         <el-tab-pane label="简体"> </el-tab-pane>
         <el-tab-pane label="繁体"> </el-tab-pane>
       </el-tabs>
-      <div class="tab-box">
+      <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
         <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
           <div class="left-content">
             <div class="strockplay">
@@ -105,10 +105,9 @@
                     @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
-                    <div class="pen-colors">
-                      <a @click="resetHuahua(index)" class="clean-btn"></a>
-                    </div>
+                    <div class="pen-colors"></div>
                   </div>
+                  <a @click="resetHuahua(index)" class="clean-btn"></a>
                 </template>
               </div>
 
@@ -198,10 +197,9 @@
                     @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
-                    <div class="pen-colors">
-                      <a @click="resetHuahua(index)" class="clean-btn"></a>
-                    </div>
+                    <div class="pen-colors"></div>
                   </div>
+                  <a @click="resetHuahua(index)" class="clean-btn"></a>
                 </template>
               </div>
 
@@ -269,7 +267,8 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       isShow: 0,
-      collFlag: false
+      collFlag: false,
+      isPhone: false
     };
   },
   computed: {},
@@ -372,8 +371,6 @@ export default {
     handleClick(tab, event) {
       let _this = this;
       _this.isShow = tab.index;
-      console.log(_this.isShow);
-      console.log(_this.$refs.freewrite[_this.isShow]);
       if (_this.TaskModel == "ANSWER") {
         _this.$refs.freewrite[_this.isShow].getStuImgList(_this.isShow);
       } else {
@@ -387,7 +384,6 @@ export default {
     handleClick2(index) {
       let _this = this;
       _this.isShow = index;
-      console.log(_this.$refs.freewrite);
       if (_this.TaskModel == "ANSWER") {
         _this.$refs.freewrite[_this.isShow].getStuImgList(_this.isShow);
       } else {
@@ -411,6 +407,8 @@ export default {
     _this.hanzicolor = color;
     _this.hanziweight = 6;
     _this.checkCollStatus();
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -435,9 +433,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .practice {
-  width: 504px;
+  width: 100%;
   //   max-height: 434px;
-  overflow: auto;
+  overflow: hidden;
   margin: 0 auto;
   background: #f3f3f3;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
@@ -446,6 +444,9 @@ export default {
     width: 16px;
     height: 16px;
     margin: 0 4px;
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
     cursor: pointer;
     background: url("../../../../assets/icon/Undo-16-disable-Black.png") center
       no-repeat;
@@ -539,6 +540,7 @@ export default {
     .right-strockred {
       width: 256px;
       height: 256px;
+      position: relative;
     }
     .footer {
       position: absolute;
@@ -635,6 +637,7 @@ export default {
   border-radius: 8px;
   box-sizing: border-box;
   overflow: hidden;
+  flex-shrink: 0;
   .strockplayRedInner {
     width: 100%;
     height: 100%;
@@ -694,6 +697,7 @@ export default {
   padding: 24px;
   position: relative;
   height: 428px;
+
   > div {
     display: flex;
     box-sizing: border-box;
@@ -707,6 +711,42 @@ export default {
       z-index: 2;
     }
   }
+  &-phone {
+    height: 460px;
+    > div {
+      display: block;
+      width: calc(100% - 48px);
+      .left-content {
+        width: 100%;
+        align-items: flex-start;
+        flex-direction: row;
+      }
+      .left-content-pra {
+        height: 40px !important;
+        width: 220px;
+      }
+      .strockplay {
+        width: 88px;
+        height: 88px;
+      }
+      .right-content {
+        width: 290px;
+        height: 290px;
+        margin: 10px auto 0 auto;
+        padding: 4px 16px;
+        .right-strockred {
+          width: 200px;
+          height: 200px;
+          :deep .character-target-div {
+            height: 180px;
+          }
+          :deep .strockred {
+            height: 180px;
+          }
+        }
+      }
+    }
+  }
 }
 .NPC-Big-Book-preview-green {
   .practice {
@@ -737,3 +777,13 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.tab-box-phone {
+  .freewrite .strockred {
+    height: 200px;
+    .character-target-div {
+      height: 200px;
+    }
+  }
+}
+</style>

src/components/Adult/preview/components/Wordcard.vue

@@ -181,7 +181,7 @@
         :modal-append-to-body="true"
         append-to-body
         :lock-scroll="true"
-        width="504px"
+        :width="isPhone ? '100%' : '504px'"
         class="practiceBox practiceBoxStrock"
         v-if="isPraShow"
       >
@@ -257,7 +257,8 @@ export default {
       defChsArr: [],
       defEnArr: [],
       collFlag: false,
-      praMp3: ""
+      praMp3: "",
+      isPhone: false // 是否是移动端打开
     };
   },
   computed: {},
@@ -474,6 +475,8 @@ export default {
     if (_this.word && _this.word.detail) {
       _this.handleData();
     }
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
     // this.getChineseInfo();
   },
   beforeCreate() {}, //生命周期 - 创建之前