/** 流程容器 */
|
.process-flow-container {
|
width: 100%;
|
height: 82px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #ffffff;
|
|
/** 流程节点 */
|
.process-node {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
/** 节点图标基础样式 */
|
.node-icon {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 8px;
|
color: #fff;
|
}
|
|
/** 节点文本基础样式 */
|
.node-text {
|
font-size: 14px;
|
line-height: 22px;
|
font-family: PingFang SC, PingFang SC-400;
|
font-weight: 400;
|
}
|
}
|
|
/** 节点连接线基础样式 */
|
.node-connector {
|
width: 80px;
|
height: 2px;
|
margin: 0 4px;
|
position: relative;
|
top: -16px; // 使连接线与图标中心对齐：-(24px高度 + 8px底部margin) / 2
|
}
|
}
|
|
/**
|
* 节点状态样式
|
* 包含三种状态：已完成、进行中、未开始
|
*/
|
|
/** 1. 已完成状态样式 */
|
.node-icon-completed {
|
background-color: #e8f3ff;
|
&::after {
|
content: "";
|
width: 12px;
|
height: 12px;
|
background-image: url('../../../../assets/img/suceess.png');
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
display: inline-block;
|
}
|
}
|
|
.node-text-completed {
|
color: #171A1D;
|
opacity: 1;
|
}
|
|
.connector-completed {
|
background-color: #1a6fb8;
|
}
|
|
/** 2. 进行中状态样式 */
|
.node-icon-in-progress {
|
background-color: #1a6fb8;
|
color: white;
|
}
|
|
.node-text-in-progress {
|
color: #1A6FB8;
|
opacity: 1;
|
}
|
|
.connector-in-progress {
|
background-color: #e8f3ff;
|
}
|
|
/** 3. 未开始状态样式 */
|
.node-icon-not-started {
|
background-color: #86909c;
|
color: white;
|
}
|
|
.node-text-not-started {
|
color: #171A1D;
|
opacity: 0.4;
|
}
|
|
.connector-not-started {
|
background-color: #86909c;
|
}
|
|
/**
|
* 以下是旧版样式，保留以便向后兼容
|
* 建议后续迭代移除
|
*/
|
.node-icon-active {
|
background-color: #1890ff;
|
}
|
|
.node-icon-inactive {
|
background-color: #ccc;
|
}
|
|
.node-text-active {
|
color: #1890ff;
|
}
|
|
.node-text-inactive {
|
color: #999;
|
}
|
|
.connector-active {
|
background-color: #1890ff;
|
}
|
|
.connector-inactive {
|
background-color: #ccc;
|
}
|
