移动端下重新计算画画组件宽高

src/views/book/courseware/preview/components/drawing/DrawingPreview.vue

@@ -1,14 +1,14 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="imageText-preview" :style="getAreaStyle()">
+  <div class="drawimg-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div
       class="img-box"
       :style="{
         background: image_url ? '' : '#DCDFE6',
-        width: data.image_width + 'px',
-        height: data.image_height + 'px',
+        width: isMobile ? '100%' : data.image_width + 'px',
+        height: isMobile ? mobileHeight + 'px' : data.image_height + 'px',
         border: '1px dotted #DCDFE6',
       }"
     >
@@ -21,7 +21,10 @@
           :src="image_url"
           draggable="false"
           alt="背景图"
-          :style="{ width: `${data.imgData.width}px`, height: `${data.imgData.height}px` }"
+          :style="{
+            width: isMobile ? '100%' : `${data.imgData.width}px`,
+            height: isMobile ? mobileHeight + 'px' : `${data.imgData.height}px`,
+          }"
         />
       </div>
       <!-- 如果是查看答案模式 v-if 下面画画的vue-esign不显示 -->
@@ -37,8 +40,8 @@
       /> -->
       <VueSignaturePad
         class="esign-canvas"
-        :width="data.image_width + 'px'"
-        :height="data.image_height + 'px'"
+        :width="isMobile ? '100%' : data.image_width + 'px'"
+        :height="isMobile ? mobileHeight + 'px' : data.image_height + 'px'"
         ref="signaturePad"
         :options="options"
       />
@@ -67,7 +70,12 @@ import { GetFileURLMap } from '@/api/app';
 import vueEsign from 'vue-esign';
 export default {
   name: 'DrawingPreview',
-
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
   components: { vueEsign },
   mixins: [PreviewMixin],
   data() {
@@ -99,6 +107,7 @@ export default {
       isActive3: false,
       imgSrc: '',
       signData: null,
+      mobileHeight: 0,
     };
   },
   created() {
@@ -168,6 +177,12 @@ export default {
         //   this.image_url = url_map[item.file_id];
         // });
       });
+      if (this.isMobile) {
+        setTimeout(() => {
+          let totalWidth = document.querySelector('.drawimg-preview').offsetWidth;
+          this.mobileHeight = (totalWidth / this.data.image_width) * this.data.image_height;
+        }, 50);
+      }
     },
     // 保存图片
     handleGenerate() {

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -95,8 +95,9 @@
       :visible.sync="mageazineDetailShow"
       :show-close="false"
       :close-on-click-modal="false"
-      width="80%"
+      :width="isMobile ? '100%' : '80%'"
       class="login-dialog magazine-detail-dialog"
+      :class="[isMobile ? 'magazine-detail-dialog-phone' : '']"
       :modal="false"
     >
       <magazine-sentence
@@ -123,7 +124,12 @@ import { GetFileURLMap } from '@/api/app';
 import MagazineSentence from './components/MagazineSentence.vue';
 export default {
   name: 'ImageTextPreview',
-
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
   components: { AudioLine, MagazineSentence },
   mixins: [PreviewMixin],
   data() {
@@ -252,6 +258,11 @@ export default {
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
+.imageText-preview {
+  max-width: 100%;
+  overflow: auto;
+}
+
 .position-item {
   position: absolute;
   z-index: 1;
@@ -307,6 +318,11 @@ export default {
     margin: 24px 0;
   }
 }
+
+:deep .el-slider {
+  flex: 1;
+  width: auto !important;
+}
 </style>
 <style lang="scss">
 .magazine-detail-dialog {
@@ -327,5 +343,11 @@ export default {
       0 16px 24px 2px rgba(0, 0, 0, 4%),
       0 8px 10px -5px rgba(0, 0, 0, 8%);
   }
+
+  &-phone {
+    .el-dialog {
+      margin-left: -50%;
+    }
+  }
 }
 </style>