fix(slider): 调整边距展示方式

app/web/page/editor/component/DynamicForm/index.ts

@@ -338,9 +338,9 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
     const ele = this.getCurElement();
     const prevCommonStyle = cloneDeep(ele.commonStyle || {});
     // this.point.w = this.point.w - (this.commonStyle.paddingLeft || 0) - (this.commonStyle.paddingRight || 0);
-    // this.point.h = this.point.h - (prevCommonStyle.paddingTop || 0) - (prevCommonStyle.paddingBottom || 0) + (this.commonStyle.paddingTop || 0) + (this.commonStyle.paddingBottom || 0);
+    this.point.h = this.point.h - (prevCommonStyle.paddingTop || 0) - (prevCommonStyle.paddingBottom || 0) + (this.commonStyle.paddingTop || 0) + (this.commonStyle.paddingBottom || 0);
     this.updateCommonStyle({ containerIndex: this.curEleIndex, childIndex: this.curChildIndex, data: this.commonStyle });
     this.updatePoint();
-    // this.adjustHeight();
+    this.adjustHeight();
   }
-}
\ No newline at end of file
+}

app/web/page/editor/component/DynamicForm/index.vue

@@ -49,7 +49,7 @@
               <InputNumber :max="667" :min="0" v-model="point.h" @on-change="updatePoint($event, 'h')"></InputNumber>
             </template>
             <template v-else-if="item.label.indexOf('边距') > -1">
-              <Slider v-model="commonStyle[item.key]" @on-change="changeMargin" />
+              <Slider v-model="commonStyle[item.key]" @on-input="changeMargin" />
             </template>
             <upload v-else-if="item.label === '背景图片'" v-model="commonStyle.backgroundImage" @change="updateStyle($event, 'backgroundImage')"></upload>
             <ColorSelector v-else-if="item.label === '背景颜色'" v-model="commonStyle.backgroundColor" @input="updateStyle($event, 'backgroundColor')"></ColorSelector>
@@ -66,80 +66,91 @@
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style lang="less" scoped>
-	.dynamic-form {
-	    padding: 0 0 16px;
-      background: #fff;
-      &-header {
-        padding: 10px 0 5px;
-        border-bottom: 8px solid #F5F6FA;
-        text-align: center;
-        div {
-          color: #A1A6B3;
-          padding: 5px;
-          font-size: 12px;
-        }
+  .dynamic-form {
+    padding: 0 0 16px;
+    background: #fff;
+
+    &-header {
+      padding: 10px 0 5px;
+      border-bottom: 8px solid #f5f6fa;
+      text-align: center;
+
+      div {
+        color: #a1a6b3;
+        padding: 5px;
+        font-size: 12px;
       }
+    }
+
+    // h2 {
+    //   padding: 17px 0;
+    //   border-bottom: 8px solid #F5F6FA;
+    //   text-align: center;
+    // }
+    h3 {
+      padding: 10px 0;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #ebeef5;
+    }
+
+    &-component {
+      padding: 0 20px;
+      border-bottom: 8px solid #f5f6fa;
+    }
 
-      // h2 {
-      //   padding: 17px 0;
-      //   border-bottom: 8px solid #F5F6FA;
-      //   text-align: center;
-      // }
-	    h3 {
-	      padding: 10px 0;
-	      margin-bottom: 10px;
-	      border-bottom: 1px solid #ebeef5;
-	    }
-      &-component {
-        padding: 0 20px;
-        border-bottom: 8px solid #F5F6FA;
+    &-basic {
+      padding: 0 20px;
+
+      .Df-basic-inputnumber {
+        margin-right: 10px;
       }
-      &-basic {
-        padding: 0 20px;
-        .Df-basic-inputnumber {
-          margin-right: 10px;
-        }
+    }
+
+    /deep/ .ivu-form-item {
+      display: flex;
+      align-items: center;
+
+      &::before,
+      &::after {
+        display: none;
       }
 
-      /deep/ .ivu-form-item {
-        display: flex;
-        align-items: center;
-        &:before, &:after {
-          display: none;
-        }
+      .ivu-form-item-label {
+        width: 97px;
+        line-height: 18px;
+        font-size: 12px;
+        text-align: left;
+      }
 
-        .ivu-form-item-label {
-          width: 97px;
-          line-height: 18px;
-          font-size: 12px;
-          text-align: left;
-        }
+      .ivu-input-number {
+        width: 60px;
+      }
 
-        .ivu-input-number {
-          width: 60px;
-        }
+      .ivu-form-item-content {
+        margin-left: 0 !important;
+        flex: 1;
 
-        .ivu-form-item-content {
-          margin-left: 0 !important;
-          flex: 1;
-          .ivu-tooltip {
-            margin-right: 6px;
-            .ivu-btn-ghost {
-              padding: 2px 6px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              .ivu-icon {
-                font-size: 20px;
-              }
+        .ivu-tooltip {
+          margin-right: 6px;
+
+          .ivu-btn-ghost {
+            padding: 2px 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .ivu-icon {
+              font-size: 20px;
             }
-            &:last-child {
-              .ivu-icon {
-                transform: rotate(90deg);
-              }
+          }
+
+          &:last-child {
+            .ivu-icon {
+              transform: rotate(90deg);
             }
           }
         }
       }
-	}
+    }
+  }
 </style>
\ No newline at end of file

app/web/page/editor/component/OperationPanel/index.vue

@@ -60,7 +60,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      z-index: 1;
+      z-index: 102;
     }
   }