图片文本融合组件移动端

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

@@ -22,7 +22,7 @@
       class="img-box"
       :style="{
         background: 'url(' + image_url + ') center / contain no-repeat',
-        width: data.image_width + 'px',
+        width: isMobile ? '100%' : data.image_width + 'px',
         height: data.image_height + 'px',
       }"
     >
@@ -195,6 +195,25 @@ export default {
         //   this.mp3_url = url_map[item.file_id];
         // });
       });
+      if (this.isMobile) {
+        setTimeout(() => {
+          let totalWidth = document.querySelector('.imageText-preview').offsetWidth;
+          let rate = totalWidth / this.data.image_width;
+          this.data.image_height = this.data.image_height * rate;
+          this.data.input_list.forEach((item) => {
+            item.width = item.width.replace('px', '') * rate + 'px';
+            item.height = item.height.replace('px', '') * rate + 'px';
+            item.x = item.x.replace('px', '') * rate + 'px';
+            item.y = item.y.replace('px', '') * rate + 'px';
+          });
+          this.data.text_list.forEach((item) => {
+            item.width = item.width.replace('px', '') * rate + 'px';
+            item.height = item.height.replace('px', '') * rate + 'px';
+            item.x = item.x.replace('px', '') * rate + 'px';
+            item.y = item.y.replace('px', '') * rate + 'px';
+          });
+        }, 50);
+      }
     },
     /**
      * 计算答题对错选项字体颜色

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

@@ -481,7 +481,7 @@
                     <div v-if="item.file_list[0]" class="item-image">
                       <el-image
                         :style="{
-                          width: '209px',
+                          width: '100%',
                           height:
                             item.new_word && (item.header_con || item.label)
                               ? '138px'

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

@@ -24,7 +24,7 @@
         <div v-if="data.file_list[0]" class="item-image">
           <el-image
             :style="{
-              width: '568px',
+              width: '100%',
               height:
                 data.new_word && (data.header_con || data.label)
                   ? '340px'