138 lines
2.8 KiB
Plaintext
138 lines
2.8 KiB
Plaintext
|
|
.step-tab.data-v-1b000084 {
|
|
height: 98rpx;
|
|
position: relative;
|
|
padding: 31rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
.step-container.data-v-1b000084 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 5rpx 60rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.step-item.data-v-1b000084 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
transition: all 0.3s ease;
|
|
flex: 1;
|
|
}
|
|
.step-icon.data-v-1b000084 {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
.step-img.active-circle.data-v-1b000084 {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
.step-number.data-v-1b000084 {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
background-color: #F4F6FA;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.step-done.data-v-1b000084 {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
background-color: #FAD0D3;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #E8101E;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
box-shadow: inset 0 0 4rpx rgba(232, 16, 30, 0.2);
|
|
}
|
|
.step-text.data-v-1b000084 {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
font-weight: 400;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.step-text.active.data-v-1b000084 {
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
.step-item.completed .step-text.data-v-1b000084 {
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
.line-segment.data-v-1b000084 {
|
|
position: relative;
|
|
height: 8rpx;
|
|
background-color: #F4F6FA;
|
|
border-radius: 4rpx;
|
|
top: -25rpx;
|
|
overflow: hidden;
|
|
width: 126rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.line-1.data-v-1b000084 {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.line-2.data-v-1b000084 {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.line-progress.data-v-1b000084 {
|
|
height: 100%;
|
|
width: 0%;
|
|
background-color: #F4F6FA;
|
|
border-radius: 4rpx;
|
|
transition: width 0.3s ease;
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
/* 激活状态的线条 - 前进动画 */
|
|
.line-progress.active.data-v-1b000084 {
|
|
width: 100%;
|
|
background-color: #E8101E;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* 取消激活状态的线条 - 返回动画 */
|
|
.line-progress.deactivating.data-v-1b000084 {
|
|
width: 0%;
|
|
background-color: #E8101E;
|
|
transition: width 0.3s ease;
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 750rpx) {
|
|
.step-container.data-v-1b000084 {
|
|
/* padding: 5rpx 40rpx; */
|
|
}
|
|
.line-segment.data-v-1b000084 {
|
|
/* width: 100rpx; */
|
|
}
|
|
|
|
/* .line-1,
|
|
.line-2 {
|
|
margin-left: 15rpx;
|
|
margin-right: 15rpx;
|
|
} */
|
|
}
|
|
|