143 lines
2.8 KiB
SCSS
143 lines
2.8 KiB
SCSS
.flow-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flow-item {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
padding-bottom: 28rpx;
|
|
}
|
|
|
|
.flow-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.flow-item:not(:last-child) .flow-rail::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 72rpx;
|
|
bottom: -28rpx;
|
|
width: 4rpx;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(180deg, rgba(22, 163, 74, 0.45), rgba(220, 235, 228, 0.9));
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.flow-rail {
|
|
position: relative;
|
|
width: 72rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flow-dot {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
box-shadow: 0 12rpx 28rpx rgba(21, 128, 61, 0.2);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.flow-item.done .flow-dot {
|
|
background: linear-gradient(145deg, #4ade80, #22c55e);
|
|
}
|
|
.flow-item.warn .flow-dot {
|
|
background: linear-gradient(145deg, #ecc06a, #d6a343);
|
|
box-shadow: 0 12rpx 28rpx rgba(214, 163, 67, 0.28);
|
|
}
|
|
.flow-item.danger .flow-dot {
|
|
background: linear-gradient(145deg, #ef7a7a, #ef4444);
|
|
box-shadow: 0 12rpx 28rpx rgba(209, 67, 67, 0.25);
|
|
}
|
|
|
|
.flow-card {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-radius: 28rpx;
|
|
padding: 22rpx 24rpx;
|
|
background: linear-gradient(160deg, #f7fbf9 0%, #ffffff 55%);
|
|
border: 1rpx solid #e4eee9;
|
|
box-shadow: 0 8rpx 24rpx rgba(20, 55, 40, 0.04);
|
|
}
|
|
|
|
.flow-item.warn .flow-card {
|
|
background: linear-gradient(160deg, #fff9ef 0%, #ffffff 60%);
|
|
border-color: #f0e0b8;
|
|
}
|
|
.flow-item.danger .flow-card {
|
|
background: linear-gradient(160deg, #fff4f4 0%, #ffffff 60%);
|
|
border-color: #f3d0d0;
|
|
}
|
|
|
|
.flow-card .flow-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.flow-card .flow-title {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #173128;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.flow-card .flow-badge {
|
|
flex-shrink: 0;
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
padding: 4rpx 14rpx;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.flow-item.done .flow-badge {
|
|
background: rgba(22, 163, 74, 0.12);
|
|
color: #22c55e;
|
|
}
|
|
.flow-item.warn .flow-badge {
|
|
background: rgba(214, 163, 67, 0.16);
|
|
color: #8f6718;
|
|
}
|
|
.flow-item.danger .flow-badge {
|
|
background: rgba(209, 67, 67, 0.12);
|
|
color: #b13535;
|
|
}
|
|
|
|
.flow-card .flow-desc {
|
|
font-size: 24rpx;
|
|
color: #5d746a;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.flow-card .flow-meta {
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.flow-card .flow-meta .chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 22rpx;
|
|
color: #5f7a6d;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1rpx solid #e8f0ec;
|
|
border-radius: 999rpx;
|
|
padding: 4rpx 16rpx;
|
|
}
|