<template>
<div>
<!--物流跟踪-->
<div style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;">
<div style="font-size: 1.2rem;color: #111111;">物流
<!--物流跟踪-->
</div>
<div class="track-list">
<ul>
<div v-for="(item,idx) in logisticsList" :key="idx">
<li class="first" v-if="idx===0">
<i></i>
<span class="txt">{{item.message}}</span>
<span class="time">{{item.messageDate}}</span>
</li>
<li v-else>
<i class="node-icon"></i>
<span class="txt">{{item.message}}</span>
<span class="time">{{item.messageDate}}</span>
</li>
</div>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
logisticsList: [
{
message: '1包裹已签收,感谢您使用顺丰快递服务,期待下次继续为您服务!',
messageDate: '2020-07-11 18:07:15'
},
{
message: '2包裹已签收,感谢您使用顺丰快递服务,期待下次继续为您服务!',
messageDate: '2020-07-11 14:37:40'
},
{
message: '3包裹已签收,感谢您使用顺丰快递服务,期待下次继续为您服务!',
messageDate: '2020-07-11 12:07:15'
},
{
message: '4包裹已签收,感谢您使用顺丰快递服务,期待下次继续为您服务!',
messageDate: '2020-07-11 10:03:15'
}
]
}
},
methods: {
},
/**
* 加载时执行
*/
mounted: function () {
}
}
</script>
<style lang='less' scoped>
.track-list {
margin: 20px 0;
padding-left: 5px;
position: relative;
ul {
div:last-child {
li {
border-left: 0;
}
}
}
li {
list-style: none;
position: relative;
padding: 0 0 20px 25px;
line-height: 1.3;
border-left: 1px solid #e9e9e9;
color: #999;
i {
position: absolute;
left: -7px;
top: 1%;
width: 14px;
height: 14px;
background-color: #666666;
border-radius: 50%;
}
.node-icon {
background-color: #01bb7d;
border-radius: 50%;
}
.time {
font-size: 12px;
color: #999999;
margin-right: 20px;
position: relative;
top: 4px;
display: inline-block;
vertical-align: middle;
}
.txt {
font-size: 15px;
color: #333333;
max-width: 600px;
position: relative;
top: 4px;
display: inline-block;
vertical-align: middle;
}
}
li.first {
padding-top: 0;
border-left: 1px solid #e9e9e9;
.time {
margin-right: 20px;
}
.txt {
max-width: 600px;
}
}
}
</style>