效果：
image.png
.vue 单文件组件
{{(v.startTime||'').substring(10,16)}}
{{(v.startTime||'').substring(5,10)}}
export default {
name: 'timeLine',
/* 外部引入的值 */
props: ['title'],
data() {
return {
data: [{startTime:'2020-03-03 12:24:12',name:'中国加油',state:'进行中'},
{startTime:'2020-03-03 12:24:12',name:'中国加油',state:'进行中'},
{startTime:'2020-03-03 12:24:12',name:'中国加油',state:'进行中'},
]
}
},
mounted() {
},
methods: {
},
}
.process{
height: 100%;
overflow-y: auto;
.layui-timeline{
width: 285px;
border-left: 2px solid #00a0ff;
margin-left: 60px;
}
.layui-timeline-item{
width: 100%;
height: 35px;
margin-bottom:20px;
text-align: left;
position: relative;
}
.layui-timeline-content{
background: #fff;
border-radius: 5px;
margin-left: 20px;
padding-left: 5px;
color: #000;
font-size:14px;
overflow: hidden;
.left{
float:left;
height:35px;
line-height: 35px;
}
}
.relative{
position: absolute;
top: 0;
left: -55px;
.time-first{
font-size:14px;
}
}
.layui-timeline-title{
width:70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color:#ff6b6d;
}
.layui-timeline-axis {
position: absolute;
left: -11px;
top: 5px;
z-index: 10;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
color: #5FB878;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
.circle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 5px solid #569fff;
}
.triangle-left {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #fff;
border-bottom: 5px solid transparent;
position: absolute;
left: 10px;
top: 10px;
}
}
