写一写卡片移动端

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

@@ -517,6 +517,7 @@
           :attrib="attrib"
           :isMobile="isMobile"
           :isFull="true"
+          pageFrom="fullscreen"
         />
       </div>
     </template>

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

@@ -853,6 +853,7 @@ export default {
     'noFont',
     'multilingual',
     'attrib',
+    'isMobile',
   ],
   data() {
     return {

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

@@ -29,14 +29,11 @@
         </div>
       </div>
 
-      <div v-if="TaskModel != 'ANSWER'" style="display: flex">
+      <!-- <div v-if="TaskModel != 'ANSWER'" style="display: flex">
         <div v-if="imgarr.length > 0" class="xj" style="margin-right: 8px" @click="removeImage">
           <img src="@/assets/word-remove.png" alt="" />
         </div>
-        <!--
-                  @mouseover="saveShow = true"
-          @mouseout="saveShow = false"
-         -->
+  
         <div :class="['xj', saveShow ? 'click' : '']">
           <img
             :src="saveShow ? require('@/assets/xj-xz.png') : require('@/assets/xj.png')"
@@ -44,7 +41,7 @@
             @click="handleGenerate"
           />
         </div>
-      </div>
+      </div> -->
     </div>
     <div v-if="isNotice" class="record-notice">最多保存5条记录</div>
   </div>
@@ -107,13 +104,13 @@ export default {
         search_scope: 1,
         count_limit: 5,
       };
-      LearnWebSI(MethodName, data).then((res) => {
-        let imgarr = res.hz_handwritten_record_list;
-        this.imgarr = imgarr.map((item) => {
-          item.history = JSON.parse(item.strokes_content);
-          return item;
-        });
-      });
+      // LearnWebSI(MethodName, data).then((res) => {
+      //   let imgarr = res.hz_handwritten_record_list;
+      //   this.imgarr = imgarr.map((item) => {
+      //     item.history = JSON.parse(item.strokes_content);
+      //     return item;
+      //   });
+      // });
     },
     getStuImgList(tabIndex) {
       this.tabIndex = tabIndex;

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

@@ -14,13 +14,17 @@
             : require('@/assets/icon/Cross-16-normal-red.png')
         "
         @click="changePraShow()"
+        :style="{ right: pageFrom === 'fullscreen' ? '100px' : '' }"
       />
       <el-tabs type="border-card" @tab-click="handleClick">
         <el-tab-pane label="简体" />
         <el-tab-pane label="繁体" />
       </el-tabs>
-      <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
-        <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
+      <div
+        class="tab-box"
+        :class="[isMobile ? 'tab-box-phone' : '', pageFrom && pageFrom === 'fullscreen' ? 'tab-box-full' : '']"
+      >
+        <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : 'z-none']" v-show="isShow == '0'">
           <div class="left-content">
             <div
               class="strockplay"
@@ -85,7 +89,13 @@
           </div>
           <template>
             <div class="right-content">
-              <div class="right-strockred">
+              <div
+                class="right-strockred"
+                :style="{
+                  width: pageFrom && pageFrom === 'fullscreen' ? fullWidth + 'px' : '',
+                  height: pageFrom && pageFrom === 'fullscreen' ? fullWidth + 'px' : '',
+                }"
+              >
                 <template v-if="navIndex == 0">
                   <Strockred
                     :Book_text="cur.stem[0].con"
@@ -139,7 +149,7 @@
             </div>
           </template>
         </div>
-        <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : '']">
+        <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : 'z-none']">
           <div class="left-content">
             <div
               class="strockplay"
@@ -192,7 +202,13 @@
           </div>
           <template>
             <div class="right-content">
-              <div class="right-strockred">
+              <div
+                class="right-strockred"
+                :style="{
+                  width: pageFrom && pageFrom === 'fullscreen' ? fullWidth + 'px' : '',
+                  height: pageFrom && pageFrom === 'fullscreen' ? fullWidth + 'px' : '',
+                }"
+              >
                 <template v-if="navIndex == 0">
                   <Strockred
                     :Book_text="cur.stem[0].TChinese"
@@ -277,6 +293,8 @@ export default {
     'bg',
     'ed',
     'attrib',
+    'isMobile',
+    'pageFrom',
   ],
   data() {
     return {
@@ -291,21 +309,29 @@ export default {
       hanziweight: '',
       isShow: 0,
       collFlag: false,
-      isPhone: false,
+      fullWidth: 0, // 手机全屏模式下临摹宽度
+      isRealFull: false,
     };
   },
   computed: {},
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    // console.log(this.cur);
     let _this = this;
     let color = _this.colorsList[_this.colorIndex];
     _this.hanzicolor = color;
     _this.hanziweight = 6;
     // _this.checkCollStatus();
-    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
-    this.isPhone = regExp.test(navigator.userAgent);
+    if (this.pageFrom && this.pageFrom === 'fullscreen') {
+      this.fullWidth = window.innerWidth - 160;
+      this.isRealFull = true;
+      this.$forceUpdate();
+    } else if (window.innerWidth > window.innerHeight) {
+      this.pageFrom = 'fullscreen';
+      this.fullWidth = window.innerHeight - 160;
+      this.isRealFull = false;
+      this.$forceUpdate();
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -773,7 +799,8 @@ export default {
   }
 
   &-phone {
-    height: 460px;
+    height: 480px;
+    background: none;
 
     > div {
       display: block;
@@ -797,25 +824,61 @@ export default {
 
       .right-content {
         width: 290px;
-        height: 290px;
+        height: 360px;
         padding: 4px 16px;
         margin: 10px auto 0;
 
         .right-strockred {
-          width: 200px;
-          height: 200px;
+          width: 256px;
+          height: 256px;
 
           :deep .character-target-div {
-            height: 180px;
+            height: 100%;
           }
 
           :deep .strockred {
-            height: 180px;
+            height: 100%;
           }
         }
       }
     }
   }
+
+  &-full {
+    .left-content {
+      display: block;
+      width: 100px !important;
+
+      .left-content-pra {
+        width: 84px;
+      }
+
+      .footer {
+        width: 84px;
+      }
+    }
+
+    .z-top {
+      display: flex;
+    }
+
+    .z-none {
+      z-index: -1;
+    }
+  }
+}
+
+::deep .tab-box-full.tab-box-phone .freewrite .strockred .character-target-div {
+  height: 100% !important;
+}
+
+::deep .tab-box-full.tab-box-phone .freewrite .strockred {
+  height: 100% !important;
+}
+
+::deep .tab-box-full.tab-box-phone .freewrite .strockred .character-target-div .vueEsign {
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .NPC-Big-Book-preview-green {
@@ -853,10 +916,11 @@ export default {
 <style lang="scss">
 .tab-box-phone {
   .freewrite .strockred {
-    height: 200px;
+    width: 256px;
+    height: 256px;
 
     .character-target-div {
-      height: 200px;
+      height: 256px !important;
     }
   }
 }

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

@@ -316,6 +316,7 @@ export default {
     'bg',
     'ed',
     'attrib',
+    'isMobile',
   ],
   data() {
     // 这里存放数据

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

@@ -110,6 +110,7 @@
         </div>
       </template>
       <div class="bwc-more-intp" @click="viewIntp">more</div>
+
       <div class="bwc-footer">
         <!-- <button class="bwc-btn" @click="handleColl">
           <template v-if="!collFlag">
@@ -170,18 +171,20 @@
           写一写
         </button>
       </div>
-      <!-- <el-dialog
+      <el-dialog
         :visible.sync="isPraShow"
         :show-close="false"
         :close-on-click-modal="true"
-        :modal-append-to-body="true"
-        append-to-body
+        :modal-append-to-body="isFull ? false : true"
+        :append-to-body="isFull ? false : true"
         :lock-scroll="true"
-        :width="isPhone ? '100%' : '504px'"
+        :width="isMobile ? '100%' : '504px'"
         class="practiceBox practiceBoxStrock"
         v-if="isPraShow"
-      > -->
-      <div v-if="isPraShow" class="practiceBox practiceBoxStrock" :style="{ width: isPhone ? '100%' : '520px' }">
+        :modal="false"
+        :top="isMobile ? '0' : '15vh'"
+      >
+        <!-- <div v-if="isPraShow" class="practiceBox practiceBoxStrock" :style="{ width: isPhone ? '100%' : '520px' }"> -->
         <Practice
           :change-pra-show="changePraShow"
           :cur="curData"
@@ -193,10 +196,12 @@
           :bg="bg"
           :ed="ed"
           :attrib="attrib"
+          :isMobile="isMobile"
           @changeCurQue="changeCurQue"
+          :pageFrom="pageFrom"
         />
-      </div>
-      <!-- </el-dialog> -->
+        <!-- </div> -->
+      </el-dialog>
       <div v-if="isIntpShow" class="practiceBox">
         <WordPhraseDetail
           :current-tree-i-d="currentTreeID"
@@ -206,6 +211,7 @@
           :bg="bg"
           :ed="ed"
           :attrib="attrib"
+          :isMobile="isMobile"
         />
       </div>
     </template>
@@ -240,6 +246,8 @@ export default {
     'ed',
     'attrib',
     'isMobile',
+    'isFull',
+    'pageFrom',
   ],
   data() {
     return {
@@ -743,4 +751,16 @@ export default {
     }
   }
 }
+
+.practiceBoxStrock {
+  :deep .el-dialog {
+    background: none;
+    box-shadow: none;
+  }
+
+  :deep .el-dialog__header,
+  :deep .el-dialog__body {
+    padding: 0;
+  }
+}
 </style>

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

@@ -112,6 +112,7 @@
             :body-left="bodyLeft"
             :body-width="bodyWidth"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             :no-font="noFont"
             :config="config"
             :NNPEAnnotationList="NNPEAnnotationList"
@@ -126,6 +127,7 @@
             :word-fontsize="wordFontsize"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             :no-font="noFont"
             :body-left="bodyLeft"
             :config="config"
@@ -142,6 +144,7 @@
             :title-fontsize="titleFontsize"
             :word-fontsize="wordFontsize"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             :no-font="noFont"
             :NNPENewWordList="NNPENewWordList"
             :NNPEAnnotationList="NNPEAnnotationList"
@@ -162,6 +165,7 @@
             :body-width="bodyWidth"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             :no-font="noFont"
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
@@ -186,6 +190,7 @@
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NpcNewWordMp3="NpcNewWordMp3"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
@@ -197,17 +202,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>
@@ -242,6 +247,7 @@ export default {
   },
   mixins: [PreviewMixin],
   inject: ['bookInfo'],
+  props: ['isMobile'],
   data() {
     return {
       data: getArticleData(),

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

@@ -697,6 +697,7 @@
             :ed="dataWord && dataWord.ed ? dataWord.ed : null"
             type="newWordDetail"
             :attrib="data.unified_attrib"
+            :isMobile="isMobile"
           />
         </div>
         <audio ref="newwordAudio"></audio>

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

@@ -244,6 +244,7 @@ export default {
     'bg',
     'ed',
     'attrib',
+    'isMobile',
   ],
   data() {
     // 这里存放数据