approval-flow-preview1/dist/style.css

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

.node-wrap-box[data-v-7b24cb0e]{position:relative;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;flex-direction:column}.node-wrap-box.condition[data-v-7b24cb0e]{padding:30px 50px 0}.node-wrap-box.approver[data-v-7b24cb0e]:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:0;height:4px;border-style:solid;border-width:8px 6px 4px;border-color:#cacaca transparent transparent;background:#f5f5f7}.node-wrap-box.error.condition .error-tip[data-v-7b24cb0e]{right:0}.node-wrap-box.error .error-tip[data-v-7b24cb0e]{right:-40px}.node-wrap-box.error .flow-path-card[data-v-7b24cb0e]{border:1px solid #f00}.node-wrap-box.error .flow-path-card[data-v-7b24cb0e]:hover{border-width:0}.node-wrap-box .error-tip[data-v-7b24cb0e]{position:absolute;right:0;top:15%;width:30px;height:30px;color:red;cursor:pointer;border-radius:50%;border:1px solid;line-height:30px;transition:right .5s}.node-wrap-box.condition .error-tip[data-v-7b24cb0e]{right:60px}.end-node[data-v-7b24cb0e]{font-size:12px;text-align:center;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;flex-direction:column}.end-node[data-v-7b24cb0e]:before{content:"";width:10px;height:10px;margin:auto auto 12px;border:none;border-radius:50%;background:#dbdcdc}.flow-path-card[data-v-7b24cb0e]{width:220px;min-height:82px;font-size:12px;border-radius:4px;text-align:left;cursor:pointer;overflow:hidden;position:relative;box-sizing:border-box;box-shadow:0 0 6px #0000004d;background:#fff}.flow-path-card[data-v-7b24cb0e]:hover{box-shadow:0 0 0 2px #3296fa,0 0 5px 4px #0003}.flow-path-card.copy .header[data-v-7b24cb0e]{background-color:#3296fa}.flow-path-card.approver[data-v-7b24cb0e]:hover{box-shadow:0 0 0 2px #ff9431,0 0 5px 4px #0003}.flow-path-card.approver .header[data-v-7b24cb0e]{background-color:#ff9431}.flow-path-card.start-node[data-v-7b24cb0e]:hover{box-shadow:0 0 0 2px #576a95,0 0 5px 4px #0003}.flow-path-card.start-node .header[data-v-7b24cb0e]{background-color:#576a95}.flow-path-card .header[data-v-7b24cb0e]{padding-left:16px;padding-right:30px;width:100%;height:24px;line-height:24px;color:#fff;position:relative;box-sizing:border-box}.flow-path-card .header .title-box[data-v-7b24cb0e]{position:relative;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-path-card .header .title-input[data-v-7b24cb0e]{position:absolute;left:0;border:none;background:inherit;color:inherit;opacity:0}.flow-path-card .header .title-input[data-v-7b24cb0e]:focus{border-radius:6px;font-size:12px;padding:2px 2px 2px 4px;width:97%;margin-left:1px;height:18px;box-sizing:border-box;box-shadow:0 0 2px 2px #7ec3e1;background-color:#f5f5f7;color:#000;opacity:1}.flow-path-card .header .title-text[data-v-7b24cb0e]{vertical-align:middle}.flow-path-card .header>.actions[data-v-7b24cb0e]{position:absolute;right:0;top:0;visibility:hidden}.flow-path-card:not(.start-node):hover .actions[data-v-7b24cb0e]{visibility:visible}.flow-path-card:not(.start-node):hover .title-text[data-v-7b24cb0e]{border-bottom:1px dashed currentColor}.flow-path-card .body[data-v-7b24cb0e]{position:relative;padding:12px 30px 12px 12px;box-sizing:border-box}.flow-path-card .body .text[data-v-7b24cb0e]{margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.flow-path-card .icon-wrapper[data-v-7b24cb0e]{position:absolute;top:0;height:100%;width:14px;box-sizing:border-box}.flow-path-card .icon-wrapper.left[data-v-7b24cb0e]{left:0}.flow-path-card .icon-wrapper.right[data-v-7b24cb0e]{right:0}.flow-path-card .icon-wrapper>.right-arrow[data-v-7b24cb0e],.flow-path-card .icon-wrapper>.left-arrow[data-v-7b24cb0e]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.flow-path-card.condition[data-v-7b24cb0e]{padding:8px 14px}.flow-path-card.condition .header[data-v-7b24cb0e]{height:18px;line-height:18px;color:inherit;padding:0}.flow-path-card.condition .header .title-text[data-v-7b24cb0e]{color:#15bc83}.flow-path-card.condition .body[data-v-7b24cb0e]{padding:8px 14px}.flow-path-card.condition .icon-wrapper[data-v-7b24cb0e]:hover{background-color:#f1f1f1}.flow-path-card.condition .right-arrow[data-v-7b24cb0e],.flow-path-card.condition .left-arrow[data-v-7b24cb0e]{visibility:hidden}.flow-path-card.condition:hover .right-arrow[data-v-7b24cb0e],.flow-path-card.condition:hover .left-arrow[data-v-7b24cb0e]{visibility:visible}.flow-path-card.condition:hover .priority[data-v-7b24cb0e]{display:none}.col-box:first-of-type .condition .left[data-v-7b24cb0e]{display:none}.col-box:last-of-type .condition .right[data-v-7b24cb0e]{display:none}.add-node-btn-box[data-v-7b24cb0e]{width:220px;height:100px;position:relative;padding-top:30px;margin:auto}.add-node-btn-box[data-v-7b24cb0e]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;margin:auto;width:2px;height:100%;background-color:#cacaca}.add-node-btn-box .add-node-btn[data-v-7b24cb0e]{display:flex;justify-content:center;position:relative;z-index:2}.add-node-btn-box .add-node-btn .btn[data-v-7b24cb0e]{width:32px;height:32px;border-radius:50%;cursor:pointer;outline:none;background-color:#3296fa;color:#fff;border-color:transparent;transition:transform .5s;padding:0}.add-node-btn-box .add-node-btn .btn[data-v-7b24cb0e]:hover{transform:scale(1.2);box-shadow:0 8px 16px #0000001a}.add-node-btn-box .add-node-btn .btn .icon[data-v-7b24cb0e]{color:#fff}.branch-wrap .branch-box-wrap[data-v-7b24cb0e]{display:inline-flex;flex-direction:column;align-items:center}.branch-wrap .branch-box[data-v-7b24cb0e]{align-items:stretch;border-bottom:2px solid #cacaca;border-top:2px solid #cacaca;box-sizing:border-box;background:#f5f5f7}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]{display:flex;flex-direction:column;align-items:center;position:relative}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:first-of-type:before,.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:first-of-type:after{content:"";position:absolute;left:0;height:3px;width:calc(50% - 1px);background:#f5f5f7}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:first-of-type:before{top:-2px}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:first-of-type:after{bottom:-2px}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:last-of-type:before,.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:last-of-type:after{content:"";position:absolute;right:0;height:3px;width:calc(50% - 1px);background:#f5f5f7}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:last-of-type:before{top:-2px}.branch-wrap .branch-box>.col-box[data-v-7b24cb0e]:last-of-type:after{bottom:-2px}.branch-wrap .branch-box>.col-box .center-line[data-v-7b24cb0e]{height:100%;width:2px;background:#cacaca;position:absolute}.branch-wrap .branch-box>.btn[data-v-7b24cb0e]{z-index:99;cursor:pointer;position:absolute;top:0;outline:none;transform:translateY(-50%);padding:6px 10px;border:none;border-radius:15px;background:#fff;box-shadow:0 0 10px #0003;transition:transform .3s}.branch-wrap .branch-box>.btn[data-v-7b24cb0e]:hover{transform:scale(1.1) translateY(-50%)}.condition-box[data-v-7b24cb0e]{display:flex;justify-content:space-around;align-items:center;text-align:center;padding:10px 20px}.condition-box>div:nth-child(1) .iconfont[data-v-7b24cb0e]{color:#ff943e}.condition-box>div:nth-child(2) .iconfont[data-v-7b24cb0e]{color:#3296fa}.condition-box .condition-icon[data-v-7b24cb0e]{width:60px;height:60px;line-height:60px;border:1px solid #e5e5e5;border-radius:30px;box-sizing:border-box;font-size:12px;cursor:pointer;margin-bottom:4px}.condition-box .condition-icon .iconfont[data-v-7b24cb0e]{font-size:32px}.condition-box .condition-icon[data-v-7b24cb0e]:hover{background:#3296fa;box-shadow:0 0 8px 4px #0000001a}.condition-box .condition-icon:hover>.iconfont[data-v-7b24cb0e]{color:#fff}.relative[data-v-7b24cb0e]{position:relative}.flex[data-v-7b24cb0e]{display:flex}.justify-center[data-v-7b24cb0e]{justify-content:center}.icon[data-v-7b24cb0e]{vertical-align:middle;width:14px;height:14px;font-size:14px}.priority[data-v-7b24cb0e]{position:absolute;right:0;font-size:12px}.cmp-container[data-v-70192252]{line-height:30px;padding:10px}.label[data-v-70192252]{font-size:12px;padding-right:16px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.icon-wrapper[data-v-70192252]{text-align:center}.icon-wrapper[data-v-70192252] i{cursor:pointer;color:#c5c5c5}.icon-wrapper[data-v-70192252] i:hover{color:#333}.cmp-container[data-v-a1dc0fc0]{line-height:30px;padding:10px}.cmp-container[data-v-a1dc0fc0] .el-input--small .el-input__inner{padding-left:10px;padding-right:15px}.cmp-container[data-v-a1dc0fc0] .el-input-number.is-controls-right .el-input__inner{padding-left:15px;padding-right:0;text-align:left}.cmp-container[data-v-a1dc0fc0] .el-input:hover .el-input__inner{border-color:#529eff}.label[data-v-a1dc0fc0]{font-size:12px;padding-right:16px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.range-title[data-v-a1dc0fc0]{font-size:12px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-wrapper i[data-v-a1dc0fc0]{cursor:pointer;color:#c5c5c5}.icon-wrapper i[data-v-a1dc0fc0]:hover{color:#333}.condition-dialog .el-dialog__header{border-bottom:1px solid #eee}.drawer[data-v-702743b4] .el-drawer__header{margin-bottom:0;border-bottom:1px solid #c5c5c5;padding-bottom:8px}.drawer[data-v-702743b4] .el-drawer__body{padding-bottom:44px;overflow:hidden}.drawer .pane-tab[data-v-702743b4]{height:100%}.drawer .pane-tab[data-v-702743b4] .el-tabs__item.is-top:nth-child(2){padding-left:20px}.drawer[data-v-702743b4] .el-tabs__item:focus{box-shadow:none!important}.drawer[data-v-702743b4] .el-tabs__header{margin-bottom:0}.header[data-v-702743b4]{line-height:28px}.actions[data-v-702743b4]{position:absolute;bottom:0;left:0;padding:6px 12px;width:100%;box-sizing:border-box;text-align:right}.radio-item[data-v-702743b4]{width:110px;padding:6px}.priority-select[data-v-702743b4]{width:118px;position:absolute;right:26px}.form-auth-table[data-v-702743b4]{font-size:14px}.form-auth-table .auth-table-header[data-v-702743b4]{background:#fafafa;line-height:40px}.form-auth-table .row[data-v-702743b4]{display:flex;align-items:center;line-height:32px;padding:8px 12px;border-bottom:1px solid #efefef}.form-auth-table .row[data-v-702743b4]:hover{background:#f5f7fa}.form-auth-table .row .label[data-v-702743b4]{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.form-auth-table .row .label .required[data-v-702743b4]{color:#f2725e}.form-auth-table .row .radio-group[data-v-702743b4]{flex:2;display:flex;justify-content:space-between}.approver-pane[data-v-702743b4]{overflow-y:scroll;overflow-x:hidden}.approver-pane .option-box[data-v-702743b4]{font-size:14px;padding-left:1rem}.condition-pane[data-v-702743b4]{height:100%;overflow:scroll}.flow-container[data-v-8ab28138]{display:inline-block;background:#f5f5f7;padding:20px;width:100%;height:100%;text-align:center;overflow:auto;position:relative}.scale-slider[data-v-8ab28138]{position:fixed;right:0;z-index:99}.scale-slider .btn[data-v-8ab28138]{display:inline-block;padding:4px;border:1px solid #cacaca;border-radius:3px;background:#fff;margin-left:10px;margin-right:10px;cursor:pointer;-webkit-user-select:none;user-select:none;width:20px}.preview-process[data-v-8ab28138]{transform-origin:top center;transition:transform .3s}.preview-container[data-v-f2d7e672]{height:600px;background:#f5f5f7;border:1px solid #ebeef5;padding:20px;overflow:hidden}.scale-slider[data-v-f2d7e672]{position:relative;z-index:2}.preview-process[data-v-f2d7e672]{height:100%}