From f20b58df80e170c129825a59566c9b4b7233ea7b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Dec 2021 14:29:51 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/custom-component/DeVideo.vue   | 12 ++++++++++--
 frontend/src/views/panel/edit/ComponentWaitItem.vue  |  8 ++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

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: {