近期做H5开发,需要实现一个自定义步骤条,记录一下竖线的实现
其实很简单 步骤条dome结构如下:
<div class="toCard">
<div class="toCard-content">
<div class="toCard-content-l">1</div>
<div class="toCard-content-r">
<div class="tocardtop">{
{ question.title }}</div>
<div class="tocardbottom">
<van-radio-group v-model="radio">
<van-radio v-for="item in answerList" :key="item.id" :name="item.score" checked-color="rgb(0,170,198)">{
{ item.answer }}</van-radio>
</van-radio-group>
</div>
</div>
</div>
</div>
css样式如下
.toCard {
min-height: 5rem;
background: #fff;
// border-radius: 1rem 1rem 0 0;
border-radius: 1rem;
position: relative;
top: -1rem;
padding: 0.9rem 0.5rem;
&-content {
display: flex;
&-l {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: #00aac6;
border-radius: 48px;
font-size: 0.5rem;
color: #ffff;
}
&-r {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 85%;
text-align: left;
.tocardtop{
/*这里做了文字超出省略*/
min-height: 1rem;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*行数*/
overflow: hidden;
padding: 0 0.45rem;
font-size: .4rem;
font-weight: 600;
}
.tocardbottom {
background: rgba(87, 207, 227, 0.08);
display: flex;
font-size: .4rem;
padding: .4rem .25rem 0;
.van-radio{
padding-bottom: .4rem;
}
/deep/ .van-radio__label{
color: #05A0A8;
font-weight: 500;
}
}
}
&::before {
content: "";
border-left: 2px solid rgb(229,246,249);
position: absolute;
left: 1rem;
height: 100%;
height: 70%;
top: 1.9rem;
}
}
}
css也比较简单主要是flex布局和伪类的样式实现
完美~