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();
   }
 }

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>
@@ -69,12 +69,14 @@
   .dynamic-form {
     padding: 0 0 16px;
     background: #fff;
+
     &-header {
       padding: 10px 0 5px;
-        border-bottom: 8px solid #F5F6FA;
+      border-bottom: 8px solid #f5f6fa;
       text-align: center;
+
       div {
-          color: #A1A6B3;
+        color: #a1a6b3;
         padding: 5px;
         font-size: 12px;
       }
@@ -90,12 +92,15 @@
       margin-bottom: 10px;
       border-bottom: 1px solid #ebeef5;
     }
+
     &-component {
       padding: 0 20px;
-        border-bottom: 8px solid #F5F6FA;
+      border-bottom: 8px solid #f5f6fa;
     }
+
     &-basic {
       padding: 0 20px;
+
       .Df-basic-inputnumber {
         margin-right: 10px;
       }
@@ -104,7 +109,9 @@
     /deep/ .ivu-form-item {
       display: flex;
       align-items: center;
-        &:before, &:after {
+
+      &::before,
+      &::after {
         display: none;
       }
 
@@ -122,17 +129,21 @@
       .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;
             }
           }
+
           &:last-child {
             .ivu-icon {
               transform: rotate(90deg);

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

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