<template>
<div class="info-container">
<div class="item" v-for="(item, index) in data" :key="index">
<div class="item-time">{{item.time}}</div>
<div class="point"></div>
<div class="line" v-if="index + 1 != data.length"></div>
<div class="info-right">
<div class="top">
<span>{{item.time}}</span>,
<span>{{item.name}}</span>-
<span>{{item.person}}</span>
</div>
<div class="bottom">{{item.content}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Timeline',
props: {
data: {
type: Array,
default: []
}
}
};
</script>
<style lang="scss" scoped>
.info-container {
.item {
font-size: 13px;
color: #666;
display: flex;
align-content: center;
position: relative;
height: 80px;
.item-time {
margin-top: 0px;
width: 78px;
text-align: center;
position: relative;
height: 80px;
.item-time {
margin-top: 0px;
width: 78px;
text-align: center;
line-height: 20px;
color: #000;
}
}
.point{
width:12px ;
height: 12px;
margin-top: 14px;
background: #c1c1c1;
border-radius: 50%;
}
.line{
position: absolute;
left: 83px;
top: 26px;
width: 2px;
height: 70px;
background: #e4e7ed;
}
.info-right{
margin-left: 30px;
.top {
color: #000000;
font-weight: bold;
span:nth-child(2) {
margin: 0 6px;
}
span:nth-child(3) {
margin-left: 6px;
}
}
.bottom {
margin-top: 10px;
color: #999;
}
}
}
</style>
页面引用组件:
<template>
<div>
<Timeline :data="orderData" />
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
orderData:[
{
time:'2020-03-26 12:30:12',
name: '吾悦广场',
person:'李小明',
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
},
{
time:'2020-03-26 12:30:12',
name: '吾悦广场',
person:'李小明',
content:'创建了订单, 并添加了跟踪方式, 电子设备或快递单号: 854654875',
},
{
time:'2020-03-26 12:30:12',
name: '吾悦广场',
person:'李小明',
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
}
]
};
}
};
</script>
效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/4a3b2c5a0c71cfe6ae36cf89882d7b89.png)