cip-components/cip-form-design/widgets/form-drawing/index.less.bak

.form-drawing-container{
  position: relative;
  box-sizing: border-box;
  height: calc(100% - 45px);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  .form-drawing{
    width: 100%;
    height: 100%;
    &--mobile{ // 移动端
      width: 375px;
      height: 667px;
      margin: 0 auto;
      padding: 0;
      .form-item-wrap{
        border-radius: 8px;
      }
    }
  }
  .cip-form{
    height: 100%;
  }
  // form-item draggable 组件所在样式
  .form-item-wrap{
    width: 100%;
    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%;
    &.table-design--m{
      .el-form-item__content{
        margin-left: 0 !important;
        flex-grow: 2;
        display: block;
        width: 0;
      }
      .table-design{
        &__index{
          // mobile 特有
        }
        &__drag-wrapper{
          background: #fff;
          height: auto;
          width: 100%;
          overflow-x:hidden;
          overflow-y:auto;
          .form-drawing-item{
            margin: 4px 2px;
          }
          .form-table-options{
            min-height: 100px;
          }
        }
      }
      .form-table-options{
        box-sizing:border-box;
        width: calc(100% - 4px) !important;
        .table-ghost{
          margin: 0;
          box-sizing: content-box;
          height: 0 ;
          width: 99%;
          border: 2px solid @danger;
          overflow: hidden;
        }
      }

    }
    &.table-design--pc{
      .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%;
            .el-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;
        }
      }
    }
    .el-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 组件所在样式
}