| 1 |
- .path-box{width:100%;height:100%;--color:#0094ff;--fs:16px;--pt:5px;--minW:80px;}.path-box .carousel{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}.path-box .carousel .carousel-inner{width:89%;height:auto;}.path-box .carousel .carousel-control{width:4.5%;}.path-box .carousel .carousel-control.carousel-control-prev{background-image:linear-gradient(rgba(0,0,0,.01),rgba(0,0,0,.2));}.path-box .carousel .carousel-control.carousel-control-next{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.01));}.path-box .round-box{position:relative;width:100%;height:auto;display:flex;justify-content:center;padding-bottom:20px;--nodeW:50px;}.path-box .round-box .line-v{height:calc(100% - 15px - var(--nodeW));width:10px;background-color:var(--color);position:absolute;top:var(--nodeW);left:calc(50% - 4px);z-index:0;}.path-box .round-box .line-v:before{content:"";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid var(--color);left:-5px;bottom:-15px;}.path-box .round-box .round-node{position:relative;width:var(--nodeW);height:var(--nodeW);border-radius:50%;color:#fff;border:1px solid var(--color);background:var(--color);display:flex;justify-content:center;align-items:center;z-index:1;}.path-box .round-box .round-node.start-node{width:auto;height:calc(var(--nodeW) - 10px);white-space:nowrap;padding:5px 20px;border-radius:4px;}.path-box .round-box .round-node.start-node:before{border:none;}.path-box .round-box .sfb-box{width:42%;min-height:100px;border:2px solid var(--color);border-radius:5px;padding:0;margin-top:10px;--w:calc(4%);--sw:170px;--margin:calc(var(--w));}.path-box .round-box .sfb-box:before{content:"";position:absolute;background:var(--color);width:var(--w);height:10px;top:calc(var(--nodeW)/2 - 5px);}.path-box .round-box .sfb-box .sfb-title{width:100%;text-align:center;font-size:calc(var(--fs)*1.2);padding:var(--pt) 0;font-weight:600;border-bottom:1px solid var(--color);color:#fff;background:var(--color);border-bottom:1px solid var(--color);}.path-box .round-box .sfb-box .sbf-body{padding:var(--pt) 5px;font-size:var(--fs);}.path-box .round-box .sfb-box .sbf-body .sf-box{width:100%;border:1px solid var(--color);border-radius:3px;margin:5px 0;display:flex;}.path-box .round-box .sfb-box .sbf-body .sf-box .sf-name{width:auto;max-width:var(--minW);padding:3px 5px;background:var(--color);color:#eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box{width:calc(100% - var(--minW));display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node{--line:12px;position:relative;width:var(--line);height:var(--line);border-radius:50%;border:2px solid var(--color);margin:0 1px;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node.end{background:var(--color);}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .arrow{display:flex;justify-content:center;align-items:center;position:relative;width:10px;height:4px;background:var(--color);margin-right:3px;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .arrow:before{content:"";position:absolute;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid var(--color);right:-3px;}.path-box .round-box .sfb-box.left{margin-right:calc(var(--margin) - 5px);}.path-box .round-box .sfb-box.left:before{right:calc(50% + var(--nodeW)/2 - 2px);}.path-box .round-box .sfb-box.right{margin-left:calc(var(--margin) - 5px);}.path-box .round-box .sfb-box.right:before{left:calc(50% + var(--nodeW)/2 - 2px);}.path-box .round-box:first-child{padding-bottom:40px;}.path-box .round-box:first-child .line-v{height:calc(100% - 15px - var(--nodeW) + 10px);top:calc(var(--nodeW) - 10px);}.path-box .round-box.start{--color:#049e9a;}.path-box .round-box.end{--color:#f36;}
|
