| 1 |
- .wf-container{width:100%;height:100%;--th:50px;--bh:50px;--margin:10px;display:flex;flex-direction:column;flex:1 auto;flex-wrap:wrap;}.wf-container .step-tab{width:100%;height:var(--th);margin-bottom:var(--margin);background:#fff;display:flex;font-size:14px;--w:120px;position:relative;}.wf-container .step-tab .step-tab-item{display:flex;align-items:center;justify-content:center;font-weight:600;color:#999;width:var(--w);transition:.5s background-color;}.wf-container .step-tab .step-tab-item:not(:first-child){--ml:calc((100% - var(--w)*3)/2);margin-left:var(--ml);}.wf-container .step-tab .step-tab-item:not(:first-child):before{content:"";position:absolute;width:calc(var(--ml) - 10px);height:3px;background-color:#e8eaec;}.wf-container .step-tab .step-tab-item:nth-of-type(2):before{left:calc(5px + var(--w));}.wf-container .step-tab .step-tab-item:nth-child(3):before{left:calc(5px + var(--w)*2 + var(--ml));}.wf-container .step-tab .step-tab-item i{font-size:16px;padding-right:8px;}.wf-container .step-tab .step-tab-item.finished i,.wf-container .step-tab .step-tab-item.active i{font-weight:600;color:#2d8cf0;}.wf-container .step-tab .step-tab-item.finished:before,.wf-container .step-tab .step-tab-item.active:before{background-color:#2d8cf0;}.wf-container .step-tab .step-tab-item.active{color:#3c3c3c;}.wf-container .step-content{width:100%;height:calc(100% - var(--th) - var(--bh) - var(--margin)*2);background:#fff;}.wf-container .step-content .step-content-item{display:none;width:100%;height:100%;}.wf-container .step-content .step-content-item.step-content-item_0{justify-content:center;overflow-y:auto;}.wf-container .step-content .step-content-item.step-content-item_0 form{padding:20px;width:500px;}.wf-container .step-content .step-content-item.step-content-item_0 form>div{margin-bottom:15px;}.wf-container .step-content .step-content-item .design-left,.wf-container .step-content .step-content-item .design-mid,.wf-container .step-content .step-content-item .design-right{overflow-y:auto;}.wf-container .step-content .step-content-item.step-content-item_1 .form-component{width:100%;display:flex;flex-wrap:wrap;}.wf-container .step-content .step-content-item.step-content-item_1 .form-component .title{width:100%;height:35px;display:flex;align-items:center;background:#2d8cf0;color:#eee;margin-bottom:10px;padding-left:20px;border-bottom:1px solid #dcdee2;font-weight:600;}.wf-container .step-content .step-content-item.step-content-item_1 .form-component .form-component-item{color:#3c3c3c;margin:5px 8px;background:transparent;border-radius:.25rem;border:1px dashed #dcdee2;padding:5px 10px 4px;transition:color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear;}.wf-container .step-content .step-content-item.step-content-item_1 .form-component .form-component-item:hover{border-color:#2d8cf0;color:#2d8cf0;background:#fafafa;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design{width:100%;display:flex;flex-direction:column;padding:15px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box{padding:5px;margin:3px 0;position:relative;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .delete{display:none;position:absolute;bottom:0;left:0;color:#fff;background-color:#ff6a00;width:auto;padding:5px 8px;cursor:pointer;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box.hover{border:1px dashed #ff6a00;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box.hover>.delete{display:block;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item{border:1px dotted #ddd;color:#ccc;margin-top:0;padding:10px 8px 8px;display:flex;align-items:center;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item span{width:100%;text-align:center;line-height:1;font-size:16px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box{width:100%;padding:10px;position:relative;color:#333;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box.active{border:2px solid #2d8cf0;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box.active .delete{display:block;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .dy-form-container .dy-form-drag-box .item .dy-form-input-box .delete{left:auto;right:0;color:#fff;background-color:#2d8cf0;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add{width:100%;margin:10px auto;border:none;background:transparent;margin:5px 8px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add i{padding-right:10px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add:hover{color:#2d8cf0;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design button.add:hover i{color:#2d8cf0;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add{width:auto;padding:7px;border:1px solid #ccc;margin:0 auto;border-radius:.4rem;position:relative;display:none;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add .arrow{display:block;width:0;height:0;position:absolute;border:7px solid transparent;top:-7px;border-width:0 7px 7px;border-bottom-color:#ccc;left:50%;margin-left:7px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add .arrow:after{position:absolute;content:"";display:block;width:0;height:0;border:7px solid transparent;top:1px;left:50%;margin-left:-7px;border-top-width:0;border-bottom-width:7px;border-bottom-color:#fff;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add button{color:#3c3c3c;margin:5px;border-radius:.25rem;background:transparent;border:1px solid #dcdee2;padding:3px 10px;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add button:hover{border-color:#2d8cf0;color:#2d8cf0;background:#fafafa;}.wf-container .step-content .step-content-item.step-content-item_1 .form-design .form-design-btn-group-add.show{display:block;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params{width:100%;display:flex;flex-direction:column;padding:15px;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params>div{margin-bottom:15px;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params>div.params .label{display:flex;justify-content:space-between;align-items:flex-end;padding-right:15px;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params>div.params .label span{padding:6px;border:1px dashed #dcdee2;border-radius:3px;cursor:pointer;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params>div.params .input-group{margin-top:10px;}.wf-container .step-content .step-content-item.step-content-item_1 .dy-form-input-params>div .input-group-text{border:none;font-weight:800;}.wf-container .step-content .step-content-item.step-content-item_2 .title{width:100%;display:flex;align-items:center;background:#2d8cf0;color:#eee;margin-bottom:10px;padding:7px 20px;border-bottom:1px solid #dcdee2;font-weight:600;}.wf-container .step-content .step-content-item.step-content-item_2 .node-source{width:100%;display:flex;flex-wrap:wrap;justify-content:center;}.wf-container .step-content .step-content-item.step-content-item_2 .node-source .item{width:80%;margin:8px 0;padding:15px !important;}.wf-container .step-content .step-content-item.step-content-item_2 .design-mid{overflow:hidden;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design{min-width:100%;min-height:100%;position:relative;padding:20px;transform:scale(1);background-repeat:repeat;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAADpJREFUOE9jZGBgkGIgDjwjRhnjqIH4gmk0DLGHztBINsRkAJAaonIUyMvEglEDcSeb0TDEGQIDk2wAXwsLGTSQqIAAAAAASUVORK5CYII=");}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node{position:absolute;display:flex;justify-content:center;align-items:center;padding:10px 15px !important;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node span{display:flex;justify-content:center;align-items:center;min-width:80px;max-width:120px;min-height:40px;white-space:normal;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .flow-design-node.active{font-weight:600;border:3px solid #ff6a00 !important;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector{cursor:pointer;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector path{stroke:#ffe177;stroke-width:3;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-connector.active path{stroke:#ffda59;stroke-width:4;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay{color:#009ef7;border:1px solid #2d8cf0;padding:4px 8px;border-radius:3px;border-radius:4px;cursor:pointer;background-color:rgba(0,158,247,.1);}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay.active{font-size:16px;font-weight:600;border-width:2px;background-color:rgba(0,158,247,.2);}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design .jtk-overlay.hide{display:none;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail{width:100%;height:100%;display:flex;flex-direction:column;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box{width:100%;padding:15px;display:flex;flex-direction:column;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box>div{margin-bottom:15px;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box>div.params .label{display:flex;justify-content:space-between;align-items:flex-end;padding-right:15px;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box>div.params .label span{padding:6px;border:1px dashed #dcdee2;border-radius:3px;cursor:pointer;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box>div.params .input-group{margin-top:10px;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select{position:relative;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result{display:none;width:100%;position:absolute;border-radius:5px;background:#f5f8fa;margin-top:2px;padding:5px 0;max-height:200px;overflow-y:auto;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result span{width:100%;display:inline-block;text-align:left;padding:5px 20px;cursor:pointer;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result span:not(:first-child){border-top:1px solid #ddd;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .flow-design-detail-box .stepBody .dy-select .dy-select-result strong{width:100%;display:inline-block;text-align:center;padding:5px 20px;}.wf-container .step-content .step-content-item.step-content-item_2 .flow-design-detail .item{width:80%;margin:8px 0;padding:15px !important;}.wf-container .step-content .step-content-item .design-container{width:100%;height:100%;display:flex;}.wf-container .step-content .step-content-item .design-container>div{height:100%;border:1px solid #ddd;}.wf-container .step-content .step-content-item .design-container .design-left{width:20%;}.wf-container .step-content .step-content-item .design-container .design-mid{width:60%;}.wf-container .step-content .step-content-item .design-container .design-right{width:20%;}.wf-container .step-content .step-content-item .design-container .design-move-col{width:5px;border-left:none;border-right:none;display:flex;flex-direction:column;justify-content:center;background:#eee;cursor:col-resize;}.wf-container .step-content .step-content-item .design-container .design-move-col .bar{width:100%;height:6px;border:1px solid #aaa;border-left:none;border-right:none;margin:2px 0;}.wf-container .step-content .step-content-item.show{display:flex;}.wf-container .step-tool{width:100%;height:var(--bh);margin-top:var(--margin);display:flex;justify-content:center;align-items:center;}.wf-container .step-tool button{display:none;width:85px;margin:0 10px;}.wf-container .step-tool button.show{display:block;}
|
