兼容汉字移动端

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -278,7 +278,10 @@ export default {
             });
           }
           if (this.isJudgingRightWrong) {
-            item.imgArr = this.answer.answer_list[index].strokes_content_list;
+            item.imgArr =
+              this.answer.answer_list[index] && this.answer.answer_list[index].strokes_content_list
+                ? this.answer.answer_list[index].strokes_content_list
+                : arr;
           } else {
             item.imgArr = arr;
           }
@@ -540,9 +543,9 @@ export default {
 
     .miao-box {
       position: relative;
-      width: 320px;
-      height: 316px;
-      padding: 30px 20px;
+      width: 332px;
+      height: 360px;
+      padding: 30px 16px;
       margin: 0 auto;
       background: #f3f3f3;
       border-radius: 8px;
@@ -561,15 +564,15 @@ export default {
 
       .strockredBox,
       .strockplay-redInner {
-        width: 256px;
-        height: 256px;
+        width: 300px;
+        height: 300px;
         margin: 0 auto;
       }
 
       .strock-red {
         position: absolute;
         top: 30px;
-        left: 32px;
+        left: 16px;
 
         &-zindex {
           z-index: -1;

src/views/exercise_questions/preview/components/common/FreewriteLettle.vue

@@ -7,6 +7,7 @@
         <template v-if="!hasPlay && data && data.strokes_image">
           <img class="img" :src="data.strokes_image" alt="" />
         </template>
+        <div class="zhezhao" v-if="disabled"></div>
         <FreeWriteQP
           id="esign"
           ref="esign"
@@ -67,8 +68,8 @@ export default {
   },
   data() {
     return {
-      width: 256,
-      height: 256,
+      width: 300,
+      height: 300,
       bgColor: '',
       isCrop: false,
       //   learn_mode: "",
@@ -83,6 +84,7 @@ export default {
       imgOrCans: false,
       hasPlay: false,
       data: null,
+      imgShow: false,
     };
   },
   computed: {},
@@ -118,6 +120,7 @@ export default {
         }
         if (this.$refs.esign) this.$refs.esign.reset();
         this.hasPlay = true;
+        this.imgShow = true;
         let c = document.getElementById('esign');
         let cxt = document.getElementById('esign').getContext('2d');
         cxt.clearRect(0, 0, c.width, c.height);
@@ -237,7 +240,7 @@ export default {
 <style lang="scss" scoped>
 .practice {
   position: relative;
-  width: 320px;
+  width: 332px;
   max-height: 400px;
   margin: 0 auto;
   background: #f3f3f3;
@@ -297,8 +300,9 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 288px;
-    height: 360px;
+    width: 332px;
+
+    // height: 360px;
     padding: 30px 16px;
     margin: 0 auto;
     background: #f3f3f3;
@@ -315,7 +319,7 @@ export default {
       list-style: none;
 
       > li {
-        width: 124px;
+        width: 140px;
         height: 34px;
         font-size: 14px;
         font-style: normal;
@@ -349,20 +353,23 @@ export default {
       position: absolute;
       top: 30px;
       left: 16px;
-      width: 256px;
-      height: 250px;
+      width: 300px;
+      height: 300px;
       color: #dedede;
     }
 
     .right-strockred {
       position: relative;
-      width: 256px;
-      height: 256px;
+      width: 300px;
+      height: 300px;
       overflow: hidden;
       border-radius: 8px;
 
-      .img {
+      .img,
+      .zhezhao {
         position: absolute;
+        width: 100%;
+        height: 100%;
       }
     }