.container{position:relative;width:100%;height:100%}.components-list{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding:0 16px}.components-list .components-item{display:inline-block;width:48%;margin:1%;-webkit-transition:-webkit-transform 0ms!important;transition:-webkit-transform 0ms!important;transition:transform 0ms!important;transition:transform 0ms,-webkit-transform 0ms!important}.components-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;font-weight:400;color:#303133;padding:16px 0}.components-title .svg-icon{color:#666;font-size:18px;margin-right:6px}.components-title .icon-box{width:120px;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.components-title .top-icon{background-image:url(/img/up.png)}.components-title .bottom-icon,.components-title .top-icon{width:10px;height:10px;margin-left:4px;margin-top:4px;background-size:100% 100%}.components-title .bottom-icon{background-image:url(/img/down.png)}.components-body{background:#f6f7ff;cursor:move;height:40px;background:#f3f9ff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:20px;border:1px solid #f3f9ff}.components-body .svg-icon{color:#043254;font-size:16px;margin-right:10px}.components-body .title{font-size:12px;font-weight:400;color:#043254}.components-body:hover{border:1px dashed #409eff;color:#409eff;-webkit-box-sizing:border-box;box-sizing:border-box}.components-body:hover .svg-icon,.components-body:hover .title{color:#409eff}.left-board{width:282px;position:absolute;left:0;top:0;height:100%}.left-scrollbar{height:calc(100% - 58px);overflow:hidden}.center-scrollbar{height:calc(100% - 42px);overflow:hidden;border-left:1px solid #f1e8e8;border-right:1px solid #f1e8e8}.center-board,.center-scrollbar{-webkit-box-sizing:border-box;box-sizing:border-box}.center-board{height:94%;width:auto;margin:0 350px 0 286px;border-right:4px solid #eee;border-left:4px solid #eee}.empty-info{position:absolute;top:46%;left:0;right:0;text-align:center;font-size:18px;color:#ccb1ea;letter-spacing:4px}.action-bar{position:relative;height:42px;text-align:right;padding:0 15px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #f1e8e8;border-top:none;border-left:none}.action-bar .delete-btn{color:#f56c6c}.logo-wrapper{position:relative;height:42px;background:#fff;border-bottom:1px solid #f1e8e8;-webkit-box-sizing:border-box;box-sizing:border-box}.logo{position:absolute;left:12px;top:6px;line-height:30px;color:#00afff;font-weight:600;font-size:17px;white-space:nowrap}.logo>a img{height:30px;vertical-align:top}.center-board-row{padding:12px 12px 15px 12px;-webkit-box-sizing:border-box;box-sizing:border-box}.center-board-row>.el-form{height:calc(100vh - 69px)}.drawing-board{height:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start}.drawing-board .components-body{padding:0;margin:0;font-size:0}.drawing-board .sortable-ghost{display:none}.drawing-board .ghost{background:#fff;border-top:5px solid #5959df;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0;content:"";overflow:hidden;padding:0!important;position:relative;outline:0 none;height:0!important;width:100%;margin:2px 0}.drawing-board .components-item.sortable-ghost{display:none}.drawing-board .components-item.ghost,.drawing-board .drawing-item.ghost{width:100%;height:60px;background-color:#5959df}.drawing-board .active-from-item>.el-form-item{background:#f6f7ff;border-radius:6px}.drawing-board .active-from-item>.drawing-item-copy,.drawing-board .active-from-item>.drawing-item-delete{display:initial}.drawing-board .active-from-item>.component-name{color:#409eff}.drawing-board .el-form-item{margin-bottom:15px}.table-row-box{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:scroll;-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.table-row-box .el-col{-ms-flex-preferred-size:20%;flex-basis:20%;min-width:200px}.table-row-box .el-col .el-form-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.table-row-box .el-col .el-form-item,.table-row-box .el-col .el-form-item__label{display:-webkit-box;display:-ms-flexbox;display:flex}.table-row-box .el-col .el-form-item__content{margin:0!important;width:100%;overflow:hidden}.drawing-item{position:relative;cursor:move}.drawing-item.unfocus-bordered:not(.active-from-item)>div:first-child{border:1px dashed #ccc}.drawing-item .el-form-item{padding:12px 10px}.drawing-row-item{position:relative;cursor:move;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px dashed #ccc;border-radius:3px;padding:0 2px;margin-bottom:15px}.drawing-row-item .drawing-row-item{margin-bottom:2px}.drawing-row-item .el-col{margin-top:22px}.drawing-row-item .el-form-item{margin-bottom:0}.drawing-row-item .drag-wrapper{min-height:80px;padding:20px 0 40px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.drawing-row-item.active-from-item{border:1px dashed #409eff}.drawing-row-item .component-name{position:absolute;top:0;left:0;font-size:12px;color:#bbb;display:inline-block;padding:0 6px}.drawing-item:hover>.el-form-item,.drawing-row-item:hover>.el-form-item{background:#f6f7ff;border-radius:6px}.drawing-item:hover>.drawing-item-copy,.drawing-item:hover>.drawing-item-delete,.drawing-row-item:hover>.drawing-item-copy,.drawing-row-item:hover>.drawing-item-delete{display:initial}.drawing-item>.drawing-item-copy,.drawing-item>.drawing-item-delete,.drawing-row-item>.drawing-item-copy,.drawing-row-item>.drawing-item-delete{display:none;position:absolute;top:-10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;border:1px solid;cursor:pointer;z-index:12}.drawing-item>.drawing-item-copy,.drawing-row-item>.drawing-item-copy{right:56px;border-color:#409eff;color:#409eff;background:#fff;z-index:2001}.drawing-item>.drawing-item-copy:hover,.drawing-row-item>.drawing-item-copy:hover{background:#409eff;color:#fff}.drawing-item>.drawing-item-delete,.drawing-row-item>.drawing-item-delete{right:24px;border-color:#f56c6c;color:#f56c6c;background:#fff;z-index:2001}.drawing-item>.drawing-item-delete:hover,.drawing-row-item>.drawing-item-delete:hover{background:#f56c6c;color:#fff}