cip-components/cip-table-design/framework.vue

<template>
  <div class="dynamic-form-design">
    <div class="dynamic-form-design__components">
      <slot name="components"></slot>
    </div>
    <div class="dynamic-form-design__form">
      <div class="dynamic-form-design__toolbar">
        <slot name="toolbar"></slot>
      </div>
      <slot></slot>
    </div>
    <div class="dynamic-form-design__property">
      <slot name="property"></slot>
    </div>
  </div>
</template>
<style lang="less">
.side-style-mixin{
  flex-shrink: 0;
  width: 250px;
  border: 1px solid #ddd;
  background: #fff;
}
.dynamic-form-design{
  display: flex;
  height: 100%;
  &__components{
    .side-style-mixin;
    padding: 8px 0;
  }
  &__form{
    box-sizing: border-box;
    height: 100%;
    flex-grow: 1;
    min-width: 300px;
    border-style: solid;
    border-color: #ddd;
    border-width: 1px 0 1px 0;
  }
  &__toolbar{
    height: 45px;
    padding: 0 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    line-height: 45px;
    text-align: right;
  }
  &__property{
    .side-style-mixin;
    width: 300px;
  }
}
</style>