From 2dfe2e3cc003e67e8c0c40c635cbf1f2102d98c6 Mon Sep 17 00:00:00 2001
From: fit2cloudrd <reaperww@gmail.com>
Date: Thu, 30 Dec 2021 14:30:37 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=20(#1563)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: 样式修改

* style: 样式修改

Co-authored-by: wangjiahao <1522128093@qq.com>
---
 .../canvas/components/Editor/Preview.vue          | 15 ++++++++++++++-
 .../canvas/custom-component/DeVideo.vue           | 12 ++++++++++--
 .../src/views/panel/edit/ComponentWaitItem.vue    |  8 ++++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index ea0b1fa68a..534a6fa3dc 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/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%'
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 3a31a25e44..e9af0c4029 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/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)
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 24014a5324..013c5168d7 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/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: {