这是两个样式 上代码
<div class="steps-wrap">
<ul>
<li v-for="(item,index) in steps" :key="index">
<span class="time">{{item.time}}</span>
<div class="circle">
<div class="icon" v-if="item.state==1"></div>
<i v-else class="circle-icon"></i>
</div>
<div class="message">{{item.address}}</div>
</li>
</ul>
</div>
<div class="steps-wrap">
<ul>
<li v-for="(item,index) in steps" :key="index">
<div class="circle">
<div class="icon" v-if="item.state==1"></div>
<i v-else class="circle-icon"></i>
</div>
<div class="message" style="width:205px;flex: none;">{{item.time}}</div>
<div>
<div>待服务</div>
<div>用户+管理员</div>
</div>
</li>
</ul>
</div>
export default {
data() {
return {
steps: [
{
state: 1, // 状态: 1:已完成,0:未完成
time: '2019年11月2日 下午8:50:12',
address: '【杭州转运中心】已发出 下一站【杭州石桥城配中心】'
},
{
state: 1,
time: '2019年11月2日 下午8:45:11',
address: '【杭州转运中心】已收入'
},
{
state: 0,
time: '2019年11月2日 下午8:10:09',
address: '【浙江省杭州市秋涛路】已发出 下一站【杭州中心】'
},
{
state: 0,
time: '2019年11月2日 下午7:58:23',
address: '【浙江省杭州市秋涛路公司】已打包'
},
{
state: 0,
time: '2019年11月2日 下午7:55:30',
address: '【浙江省杭州市秋涛路公司】已收件'
}
],
}}
}
/* 时间轴样式 */
.steps-wrap {
ul {
padding: 0 16px;
li {
display: flex;
line-height: 1rem;
color: #999;
.time {
text-align: center;
width: 180px;
font-size: 12px;
}
.circle {
position: relative;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
top: 0;
.icon {
width: 100%;
height: 100%;
background-color: #1874ff;
box-shadow: #1874ff 0 0 10px;
border-radius: 100px;
}
.circle-icon {
position: relative;
z-index: 999;
display: inline-block;
border-radius: 50%;
width: 100%;
height: 100%;
background-color: #e8e8e8;
}
}
.message {
padding: 0 0 1.6rem 25px;
font-size: 12px;
flex: 1;
border-left: 1px solid #e8e8e8;
margin-left: -8px;
}
&:last-child {
.message {
border-left: 1px solid transparent;
}
}
}
}
}