linetime.css,时间线图绘制（time-line）

效果：

image.png

.vue 单文件组件

• {{(v.startTime||'').substring(10,16)}}
  {{(v.startTime||'').substring(5,10)}}

  {{v.name}}

  {{v.state}}

  {{v.startTime}}

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;

}

}