一、概述
可视化地呈现时间流信息。
官方链接:https://element.eleme.cn/#/zh-CN/component/timeline
二、优化
官方列举的样式,不符合实际需求,因此需要自己写一个。
test.vue
<template> <div style=" 50%"> <div class="handle-list"> <div class="data-title"> <div style="border-bottom: 1px solid #eee;margin-bottom: 20px;"></div> <div class="press text">处理进度</div> <div class="des text">描述</div> <div class="users text">处理人员</div> <div class="times text">处理时间</div> </div> <div> <div class="data-title handle-items" v-for='(item,index) in processData' :key="item.id"> <div class="press"> <div class="handle-items-icons"> <div class="icon" :class="{'icon-circle' :index==0}"></div> <div class="icon-line" v-if="item.status>1"></div> <div class="icon-line-last" v-if="index==processData.length"></div> </div> <div class="handle-message handle-message1" style="margin-left: 20px;"> <div class="item-name">{{ item.process }}</div> </div> </div> <div class="des"> <div class="handle-message handle-message1"> <div class="item-name">{{ item.desc }}</div> </div> </div> <div class="users"> <div class="handle-message handle-message1"> <div class="item-name">{{ item.operate }}</div> </div> </div> <div class="times"> <div class="handle-message handle-message1"> <div class="item-name">{{ item.createTime }}</div> </div> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { texts: ['差', '一般', '好', '非常好', '非常棒'], value: null, processData: [ { id:4, process:'完成工单', status:4, desc:'快件已经签收,签收人:本人', operate:'小张', createTime:'2021/09/17 09:58:52' }, { id:3, process:'快件到达', status:3, desc:'快件已经到达北京市丰台区', operate:'小张', createTime:'2021/09/17 08:58:52' }, { id: 2, process: '分派工单', status: 2, desc: '已分派工单给小王【12345678910】', operate: '小张', createTime: '2021/09/16 21:58:52' }, { id: 1, process: '创建工单', status: 1, desc: '已创建工单【202109162058】', operate: '小张', createTime: '2021/09/16 20:58:52' }, ] } }, methods: {}, } </script> <style rel="stylesheet/scss" lang="scss" scoped> .data-title { border-bottom: 1px solid #eee; margin-bottom: 20px; display: flex; } .press { width: 100px; } .des { flex: 1; } .users { width: 120px; } .times { width: 160px; } .text { height: 13px; font-size: 13px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; line-height: 13px; } .handle-list { margin-bottom: 20px; .handle-items { display: flex; position: relative; border-bottom: none; margin-bottom: 0; padding-bottom: 37px; .handle-items-icons { position: absolute; height: 100%; width: 10px; display: flex; flex-direction: column; align-items: center; .icon { /*position:absolute;*/ width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #CCCCCC; box-sizing: border-box; } .icon-circle { border: none; background: linear-gradient(134deg, #3D98FF 0%, #8086E4 100%); } .icon-line { width: 1px; flex: 1; background: linear-gradient(180deg, #CCCCCC 0%, rgba(204, 204, 204, 0.2) 100%); } .icon-line-last { width: 1px; height: 100%; background: linear-gradient(207deg, #2C81EC 0%, rgba(44, 129, 236, 0.2) 100%); } } .handle-message { /*display: flex;*/ // justify-content: center; align-items: center; font-size: 13px; font-weight: 400; color: #333333; line-height: 18px; .item-name { /* 56px;*/ height: 14px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 14px; } } .handle-message1 { padding-bottom: 0; } } .handle-items1 { padding-bottom: 15px; } } </style>
效果如下: