.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{ .@{elNamespace}-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%; .@{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; } } } .@{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 组件所在样式 }