style: 样式修改 (#1563)

* style: 样式修改

* style: 样式修改

Co-authored-by: wangjiahao <1522128093@qq.com>

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -4,7 +4,7 @@
       <div
         id="canvasInfoTemp"
         ref="canvasInfoTemp"
-        :style="[{height:mainHeight},screenShotStyle]"
+        :style="[canvasInfoTempStyle,screenShotStyle]"
         class="main-class"
         @mouseup="deselectCurComponent"
         @mousedown="handleMouseDown"
@@ -144,6 +144,19 @@ export default {
         }
       }
     },
+    canvasInfoTempStyle() {
+      if (this.screenShot) {
+        return {
+          width: '100%',
+          height: this.mainHeight
+        }
+      } else {
+        return {
+          width: '100%',
+          height: '100%'
+        }
+      }
+    },
     customStyle() {
       let style = {
         width: '100%'

frontend/src/components/canvas/custom-component/DeVideo.vue

@@ -84,12 +84,20 @@ export default {
     ])
   },
   created() {
-    this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
-    this.pOption.height = this.h - (this.curGap * 2)
+    this.initOption()
+  },
+  watch: {
+    h(newVal, oldVla) {
+      this.initOption()
+    }
   },
   mounted() {
   },
   methods: {
+    initOption() {
+      this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
+      this.pOption.height = this.h - (this.curGap * 2)
+    },
     // listen event
     onPlayerPlay(player) {
       // console.log('player play!', player)

frontend/src/views/panel/edit/ComponentWaitItem.vue

@@ -22,7 +22,7 @@
       :style="getComponentStyleDefault(config.style)"
       :is-edit="false"
       :element="config"
-      :h="itemHeight"
+      :h="outItemHeight"
     />
   </div>
 </template>
@@ -53,6 +53,9 @@ export default {
     }
   },
   computed: {
+    outItemHeight() {
+      return this.itemHeight - (4 * this.componentGap)
+    },
     // 移动端编辑组件选择按钮显示
     mobileCheckBarShow() {
       // 显示条件：1.当前是移动端画布编辑状态
@@ -74,7 +77,8 @@ export default {
     },
     ...mapState([
       'mobileLayoutStatus',
-      'componentData'
+      'componentData',
+      'componentGap'
     ])
   },
   methods: {