记录个问题，当作笔记吧：因为vue项目的移动端vant ui 的step组件跟ui设计图有差别，研究了半天还是没法使用step组件，只能手动设置一个
先上效果图和代码：
（1）HTML部分
<div class="rxlc-step">
<div class="rxlc-content">
<div class="content-list" v-for="(item, index) in rxlc_content" :key="index">
<div class="content-list-lt">
<div class="list-icon-title">
<div class="lt-icon">
<div class="lt-icon-box"></div>
</div>
<div class="lt-text">{{item.title}}</div>
</div>
<div class="white-line"></div>
</div>
<div class="content-list-rt">
<div class="list-rt-content">{{item.text}}</div>
<div class="cat-line"></div>
</div>
</div>
</div>
</div>
（2）CSS部分
.rxlc-step {
width: 100%;
padding: 16px 18px 20px 17px;
box-sizing: border-box;
.rxlc-content {
width: 100%;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
position: relative;
.content-list {
width: 100%;
display: table;
.content-list-lt {
display: table-cell;
background: #3db8ba;
padding-left: 10px;
position: relative;
color: #ffffff;
font-family: Noto Sans S Chinese Medium;
font-size: 16px;
.list-icon-title {
display: table;
.lt-icon {
display: table-cell;
.lt-icon-box {
width: 5px;
height: 5px;
border-radius: 3px;
background: #ffffff;
margin-right: 7px;
z-index:;
}
}
.lt-text {
display: table-cell;
padding-right: 10px;
font-weight:;
font-size: 16px;
line-height: 18px;
}
}
.white-line {
width: 1px;
height: 100%;
position: absolute;
top: 34px;
left: 12px;
background: #ffffff;
opacity: 0.2;
z-index:;
}
}
.content-list-rt {
width: 70%;
display: table-cell;
.list-rt-content {
padding: 22px 14px 0px 14px;
color: #333333;
font-size: 14.5px;
line-height: 18px;
}
.cat-line {
margin-left: 24px;
margin-top: 20px;
border-bottom: 1px solid #efefef;
}
}
&:first-child {
.content-list-lt {
border-radius: 10px 0 0 0;
}
}
&:last-child {
.content-list-lt {
border-radius: 0 0 0 10px;
.white-line {
width: 0px;
}
}
.content-list-rt {
.cat-line {
margin-left: 10px;
margin-top: 20px;
border-bottom: none;
}
}
}
}
}
}（3）JS部分
rxlc_content: [
{
title: '注册',
text: '家长手机号注册账号'
},
{
title: '新生信息采集',
text: '报名信息采集，包括新生基础信息、监护人信息和个人相关图片资料上传；提交资料进入审核阶段'
},
{
title: '网上审核',
text: '网上报名资料提交至区教育局或下属单位进行审核确认'
},
{
title: '现场审核',
text: '网上报名资料审核通过，根据现场审核要求携带资料到指定地点审核确认'
},
{
title: '录取',
text: '新生现场审核通过，报读 学校发布录取通知。'
}
]
说一下原理吧，其实我刚开始的时候想的是先给每一行的div(类名content-list)设置用display:table布局，先将标题和内容放在两个display:table-cell的子div(类名content-list-lt和content-list-rt)中，然后用绝对定位将白线定位到白色圆形的中心位置，后面发现白线位置好控制，但是会出现一个问题，就是因为每一行的高度是由内容的长度撑开的，白线的总长度就很难控制了，没办法，只能请教鹏哥了，他叫我参照下vant 的steps的样式，打开F12查看了下，发现了些好玩的东西，如下：
通过上面的两张图可以看到，vant的steps组件的线条也是利用绝对定位来实现的，只是它的定位是相对于每个类名为vant-step的div（每一行内容所在的div），且它的高度为每一行内容的高度，即height:100%设置，这样各行的白色线条就连成一条竖直的线，那么步骤条的长度问题也得到解决。
需要注意的是我们最后一行的内容的白色线条是不需要展示出来的，因为实际我们要的线条段数为内容行数减1，所以最后一个div的线条的高度必须隐藏掉，所以给最后一个div的线条设置了width：0，其实设置height：0也是可以的。
这样我们将之前的代码改动一下，把白色线条放在每一行的div(类名content-list)下的左边子div(即类名content-list-lt)中，让线条相对这个类名为content-list-lt的div进行绝对定位，就能实现steps组件效果了