.container{background-color:var(--el-bg-color-overlay);height:calc(100vh - 90px);overflow:hidden;position:relative;width:100%}.container .left-board{height:calc(100vh - 90px);left:0;position:absolute;top:0;width:260px}.container .left-board .logo-wrapper{border-bottom:1px solid var(--el-border-color-extra-light);box-sizing:border-box;height:42px;position:relative}.container .left-board .logo-wrapper .logo{color:#00afff;font-size:17px;font-weight:600;left:12px;line-height:30px;position:absolute;top:6px;white-space:nowrap}.container .left-board .logo-wrapper .logo>img{height:30px;vertical-align:top;width:30px}.container .left-board .logo-wrapper .logo .github{display:inline-block;margin-left:15px;vertical-align:sub}.container .left-board .logo-wrapper .logo .github>img{height:22px}.container .left-board .left-scrollbar .el-scrollbar__wrap{box-sizing:border-box;margin-bottom:0!important;overflow-x:hidden!important}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list{box-sizing:border-box;height:100%;padding:8px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-title{font-size:14px;margin:6px 2px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-title .svg-icon{font-size:18px;margin-right:5px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable{padding-bottom:20px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable .components-item{display:inline-block;margin:1%;transition:transform 0s!important;width:48%}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable .components-item .components-body{background:var(--el-border-color-extra-light);border:1px dashed var(--el-border-color-extra-light);border-radius:3px;cursor:move;font-size:12px;padding:8px 10px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable .components-item .components-body .svg-icon{font-size:15px;margin-right:5px}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable .components-item .components-body:hover{border:1px dashed #787be8;color:#787be8}.container .left-board .left-scrollbar .el-scrollbar__wrap .components-list .components-draggable .components-item .components-body:hover .svg-icon{color:#787be8}.container .center-board{box-sizing:border-box;height:calc(100vh - 90px);margin:0 350px 0 260px;width:auto}.container .center-board .action-bar{align-items:center;border:1px solid var(--el-border-color-extra-light);border-left:none;border-top:none;box-sizing:border-box;display:flex;height:42px;justify-content:flex-end;padding:0 15px;position:relative}.container .center-board .action-bar u .delete-btn{color:#f56c6c}.container .center-board .center-scrollbar{border-left:1px solid var(--el-border-color-extra-light);border-right:1px solid var(--el-border-color-extra-light);box-sizing:border-box;height:calc(100vh - 132px);overflow:hidden}.container .center-board .center-scrollbar .el-scrollbar__view{overflow-x:hidden}.container .center-board .center-scrollbar .center-board-row{box-sizing:border-box;padding:12px 12px 15px}.container .center-board .center-scrollbar .center-board-row>.el-form{flex:1;height:calc(100vh - 159px)}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board{height:100%;position:relative}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .components-body{font-size:0;margin:0;padding:0}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .sortable-ghost{display:block;overflow:hidden;position:relative}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .sortable-ghost:before{background:#5959df;content:" ";height:3px;left:0;position:absolute;right:0;top:0;z-index:2}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .components-item.sortable-ghost{background:var(--el-border-color-extra-light);height:60px;width:100%}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .active-from-item>.el-form-item{background:var(--el-border-color-extra-light);border-radius:6px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .active-from-item>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .active-from-item>.drawing-item-delete{display:initial}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .active-from-item>.component-name{color:#409eff}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .active-from-item .el-input__wrapper{box-shadow:0 0 0 1px var(--el-input-hover-border-color) inset}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-board .el-form-item{margin-bottom:15px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item{cursor:move;position:relative}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item.unfocus-bordered:not(.activeFromItem)>div:first-child{border:1px dashed #ccc}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item .el-form-item{padding:12px 10px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item{border:1px dashed #ccc;border-radius:3px;box-sizing:border-box;cursor:move;margin-bottom:15px;padding:0 2px;position:relative}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item .drawing-row-item{margin-bottom:2px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item .el-col{margin-top:22px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item .el-form-item{margin-bottom:0}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item .drag-wrapper{display:flex;flex:1;flex-wrap:wrap;min-height:80px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item.active-from-item{border:1px dashed #409eff}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item .component-name{color:#bbb;display:inline-block;font-size:12px;left:0;padding:0 6px;position:absolute;top:0}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item:hover>.el-form-item,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item:hover>.el-form-item{background:var(--el-border-color-extra-light);border-radius:6px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item:hover>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item:hover>.drawing-item-delete,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item:hover>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item:hover>.drawing-item-delete{display:initial}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-delete,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-delete{border:1px solid;border-radius:50%;cursor:pointer;display:none;font-size:12px;height:22px;line-height:22px;position:absolute;text-align:center;top:-10px;width:22px;z-index:1}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-copy,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-copy{background:#fff;border-color:#409eff;color:#409eff;right:56px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-copy:hover,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-copy:hover{background:#409eff;color:#fff}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-delete,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-delete{background:#fff;border-color:#f56c6c;color:#f56c6c;right:24px}.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-item>.drawing-item-delete:hover,.container .center-board .center-scrollbar .center-board-row>.el-form .drawing-row-item>.drawing-item-delete:hover{background:#f56c6c;color:#fff}.container .center-board .center-scrollbar .center-board-row>.el-form .empty-info{color:#ccb1ea;font-size:18px;left:0;letter-spacing:4px;position:absolute;right:0;text-align:center;top:46%}