.root{
|
&:before{
|
display: none !important;
|
}
|
}
|
.node-error-state{
|
&.node-body{
|
box-shadow: 0px 0px 5px 0px #F56C6C !important;
|
}
|
}
|
.node{
|
display: flex;
|
align-items:center;
|
width: auto;
|
position: relative;
|
&:before{
|
content: '';
|
top: 50%;
|
left: 100%;
|
display: block;
|
width: 0;
|
height: 0;
|
|
border-style: solid;
|
border-color: #CACACA transparent transparent;
|
background: #F5F5F7;
|
border-top: 5px solid transparent;
|
border-bottom: 5px solid transparent;
|
border-left: 10px solid #CACACA; /* 左边界 */
|
|
}
|
.node-body{
|
width: 220px;
|
cursor: pointer;
|
max-height: 120px;
|
position: relative;
|
border-radius: 5px;
|
background-color: white;
|
box-shadow: 0px 0px 5px 0px #d8d8d8;
|
&:hover{
|
box-shadow: 0px 0px 3px 0px #1890FF;
|
.node-body-header {
|
.el-icon-close {
|
display: inline;
|
font-size: medium;
|
}
|
}
|
}
|
.node-body-header{
|
border-top-left-radius: 5px;
|
border-top-right-radius: 5px;
|
padding: 5px 15px;
|
color: white;
|
font-size: xx-small;
|
.el-icon-close{
|
display: none;
|
}
|
.name{
|
height: 14px;
|
width: 150px;
|
display: inline-block
|
}
|
}
|
.node-body-content{
|
padding: 18px;
|
color: #656363;
|
font-size: 14px;
|
i{
|
position: absolute;
|
top: 55%;
|
right: 5px;
|
font-size: medium;
|
}
|
.placeholder{
|
color: #8c8c8c;
|
}
|
}
|
.node-error{
|
position: absolute;
|
right: -40px;
|
top: 20px;
|
font-size: 25px;
|
color: #F56C6C;
|
}
|
}
|
|
.node-footer{
|
position: relative;
|
.btn{
|
width: 150px;
|
display: flex;
|
// padding: 20px 0 32px;
|
justify-content: center;
|
}
|
/deep/ .el-button{
|
height: 32px;
|
}
|
&::before{
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: -1;
|
margin: auto;
|
width: 100%;
|
height: 2px;
|
background-color: #CACACA;
|
}
|
}
|
}
|
._root{
|
display: flex;
|
align-items:center;
|
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;
|
}
|
.branch-node{
|
display: flex;
|
justify-content: center;
|
}
|
.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;
|
}
|
