| | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" :src="$cssSrc" > |
| | | |
| | | <style lang="less" scoped> |
| | | ._root{ |
| | | margin: 0 auto; |
| | | } |
| | | .process-end{ |
| | | width: 60px; |
| | | margin: 0 auto; |
| | | margin-bottom: 20px; |
| | | border-radius: 15px; |
| | | padding: 5px 10px; |
| | | font-size: small; |
| | | color: #747474; |
| | | background-color: #f2f2f2; |
| | | box-shadow: 0 0 10px 0 #bcbcbc; |
| | | } |
| | | .primary-node{ |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | } |
| | | .branch-node{ |
| | | display: flex; |
| | | justify-content: center; |
| | | /*border-top: 2px solid #cccccc; |
| | | border-bottom: 2px solid #cccccc;*/ |
| | | } |
| | | .branch-node-item{ |
| | | position: relative; |
| | | display: flex; |
| | | background: #f5f6f6; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | border-top: 2px solid #cccccc; |
| | | border-bottom: 2px solid #cccccc; |
| | | &:before{ |
| | | content: ""; |
| | | position: absolute; |
| | | top: 0; |
| | | left: calc(50% - 1px); |
| | | margin: auto; |
| | | width: 2px; |
| | | height: 100%; |
| | | background-color: #CACACA; |
| | | } |
| | | .line-top-left, .line-top-right, .line-bot-left, .line-bot-right{ |
| | | position: absolute; |
| | | width: 50%; |
| | | height: 4px; |
| | | background-color: #f5f6f6; |
| | | } |
| | | .line-top-left{ |
| | | top: -2px; |
| | | left: -1px; |
| | | } |
| | | .line-top-right{ |
| | | top: -2px; |
| | | right: -1px; |
| | | } |
| | | .line-bot-left{ |
| | | bottom: -2px; |
| | | left: -1px; |
| | | } |
| | | .line-bot-right{ |
| | | bottom: -2px; |
| | | right: -1px; |
| | | } |
| | | } |
| | | .add-branch-btn{ |
| | | position: absolute; |
| | | width: 80px; |
| | | .add-branch-btn-el{ |
| | | z-index: 999; |
| | | position: absolute; |
| | | top: -15px; |
| | | } |
| | | } |
| | | |
| | | .empty-node{ |
| | | display: flex; |
| | | justify-content: center; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | } |
| | | </style> |
| | | |