| 1 |
- .path-box{width:100%;height:100%;background:#e2f6f3;}.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(90deg,rgba(0,0,0,.1),rgba(0,0,0,.2));}.path-box .carousel .carousel-control.carousel-control-next{background-image:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.1));}.path-box .round-box{position:relative;width:100%;height:auto;display:flex;justify-content:center;padding-bottom:20px;--nodeW:50px;--color:#5ed0bd;--color:#70ad47;}.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:1rem;font-weight:600;padding:5px 0;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:5px 10px;}.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;border-radius:20px;}.path-box .round-box .sfb-box .sbf-body .sf-box .sf-name{padding:5px 10px;background:var(--color);width:40%;max-width:250px;text-align:center;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:20px;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box{width:60%;display:flex;justify-content:center;align-items:center;border-radius:0 20px 20px 0;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid var(--color);background:var(--color);--line:20px;margin:0 calc(var(--line)/2);}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:before{content:"";position:absolute;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid var(--color);left:-10px;top:4px;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:after{content:"";position:absolute;height:5px;width:calc(var(--line) - 5px);left:100%;background:var(--color);top:6px;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:first-child:before{border:none;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:last-child:after{background:transparent;}.path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:last-child:not(.end){background:transparent;}.path-box .round-box .sfb-box.left{margin-right:var(--margin);}.path-box .round-box .sfb-box.left:before{right:calc(50% + var(--nodeW)/2);}.path-box .round-box .sfb-box.right{margin-left:var(--margin);}.path-box .round-box .sfb-box.right:before{left:calc(50% + var(--nodeW)/2);}.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:#00817e;}.path-box .round-box.start .sfb-box .sbf-body .sf-box{background:#5ed0bd;}.path-box .round-box.end{--color:#4472c4;}.path-box .round-box.end .sfb-box .sbf-body .sf-box{background:#bdcde9;}
|
