时间线图绘制（time-line）

效果：

.vue 单文件组件

<template>
    <div class="process">
        <ul class="layui-timeline">
            <li class="layui-timeline-item" v-for="(v,i) in data">
                <div class="relative">
                    <span class="time-first">{{(v.startTime||'').substring(10,16)}}<br/>{{(v.startTime||'').substring(5,10)}}</span>
                </div>
                <i class="layui-icon layui-timeline-axis circle"></i>
                <div class="layui-timeline-content">
                    <div class="triangle-left"></div>
                    <div class="layui-timeline-title left" :title="v.name">{{v.name}}</div>
                    <div class="left" style="margin-right:10px;color:#ff9320">{{v.state}}</div>
                    <div class="left" style="color:#999">{{v.startTime}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
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: {

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.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;
    }
}
</style>