@jdcfe/yep-react
Version:
一套移动端的React组件库
109 lines • 1.87 kB
CSS
.Yep-steps {
background: #ffffff;
position: relative;
}
.Yep-steps-icon {
width: 28px;
color: #d1371d;
}
.Yep-steps-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}
.Yep-steps-item-item-text {
font-size: 28px;
color: #6b707d;
}
.Yep-steps-item-item-text > span {
font-size: 24px;
}
.Yep-steps-num {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #ffffff;
background: #999baa;
border-radius: 50%;
font-size: 28px;
margin-bottom: 0.2rem;
}
.Yep-steps-list {
padding: 40px 30px;
display: flex;
}
.Yep-steps-item.current .Yep-steps-item-text {
color: #333333;
font-size: 28px;
word-wrap: break-word;
}
.Yep-steps-item.current .Yep-steps-num {
background: #d1371d;
}
.Yep-steps-line {
width: 90%;
height: 1Px;
background: #e0e0e0;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
.Yep-steps-line-red {
width: 15%;
display: block;
height: 1px;
background: #d1371d;
position: absolute;
top: 0;
left: 0;
}
.Yep-steps-line-half {
width: 90%;
height: 1px;
background: #e0e0e0;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
.Yep-steps-line-half::before {
content: "";
width: 50%;
display: block;
height: 1px;
background: #2a83e1;
position: absolute;
top: 0;
left: 0;
}
.Yep-steps-line-end {
width: 90%;
height: 1px;
background: #e0e0e0;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
.Yep-steps-line-end::before {
content: "";
width: 100%;
display: block;
height: 1px;
background: #2a83e1;
position: absolute;
top: 0;
left: 0;
}
.Yep-steps .fs24 {
font-size: 24px ;
margin-top: 8px;
}