cip-components/cip-table-design/form-drawing/index.less

.form-drawing-container{
  position: relative;
  box-sizing: border-box;
  height: calc(100% - 45px);
  padding: 10px;
  overflow: auto;
  overflow-x: hidden;
  .@{elNamespace}-form{
    height: 100%;
  }
  // form-item draggable 组件所在样式
  .form-item-wrap{
    flex: 1;
    box-sizing: border-box;
    min-height: 100%;
    border: 1px dashed #333;
    background: #fff;
    .ghost.form-drawing-item{
      margin: 0;
      width: auto;
      border: 2px solid @danger;
      height: 0;
      overflow: hidden;
    }

  }

  .table-design{
    display: flex;
    width: 100%;
    .@{elNamespace}-form-item__content{
      margin-left: 0 !important;
      flex-grow: 2;
      display: flex;
      width: 0;
    }
    &__drag-wrapper{
      height: 110px;
      flex-grow: 2;
      overflow-x:auto;
      overflow-y:hidden;
      box-sizing: border-box;
      .form-drawing-item{
        margin: 0 2px;
      }
    }
    &__column{
      display: flex;
      flex-direction: column;
      margin: 0;
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      &__label{
        box-sizing: border-box;
        line-height: 1em;
        font-weight: bold;
        color: #909399;
        height: 52px;
        display: block;
        width: 100% !important;
        padding: 12px 10px;
        text-align: left;
        background: @tableHeadColor;
        border-bottom: 1px solid #ddd;
      }
      &__content{
        background: #fff;
        padding: 12px 10px;
        flex-grow: 2;
        display: flex;
        align-items: center;
      }
    }
  }
  // table context draggable 组件所在样式
  .form-table-options{
    height: 100%;
    //width: 100%;
    border: 1px dashed #ddd;
    box-sizing:border-box;
    display: flex;
    flex-grow: 2;
    .form-drawing-item{
      .cip-form-item{
        height: 100%;
        .@{elNamespace}-form-item{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          margin: 0;
          &__label{
            box-sizing: border-box;
            line-height: 1em;
            font-weight: bold;
            color: #909399;
            height: 48px;
            display: block;
            width: 100% !important;
            padding: 12px 10px;
            text-align: left;
            background: @tableHeadColor;
            border-bottom: 1px solid #ddd;
          }
          &__content{
            box-sizing: border-box;
            width: 100%;
            flex-grow: 2;
            background: #fff;
            padding: 12px 10px;
          }
        }
      }
    }
    .table-ghost{
      margin: 0;
      box-sizing: content-box;
      height: 99% ;
      width: 0;
      border: 2px solid @danger;
      overflow: hidden;
    }
  }
}