自定义 el-timeline 节点样式

<div class="left-lineBox"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :class="{ eltimelinefocus: activity.type && activity.type == '01' }" size="normal" > <p class="timeline-name">{{ activity.name }}</p> <p class="timeline-content">{{ activity.content }}</p> <p class="timeline-content" v-if="activity.idea"> <span>意见: </span><span class="timeline-content__idea">{{ activity.idea }}</span> </p> <p class="timeline-content">{{ activity.timestamp }}</p> </el-timeline-item> </el-timeline> </div>

测试数据

activities: [ { content: "郭艾伦 (人事专员)", name: "提交", timestamp: "2018-04-12 20:46", idea: "一朵小红花", color: "#4E97FF" }, { content: "赵继伟 (人事主管)", name: "复核通过", timestamp: "2018-04-03 20:46", type: "01", color: "#4E97FF" }, { content: "韩德君 (财务主管)", name: "复核2", timestamp: "2018-04-03 20:46" }, { content: "贺天举 (董事长)", name: "审批", timestamp: "2018-04-03 20:46" } ],

半透明圆环 样式

.left-lineBox { margin-top: 12px; padding-left: 5px; .el-timeline { .el-timeline-item { padding-bottom: 1px !important; } } .el-timeline-item__node--normal { width: 7px; height: 7px; left: 2px; } .eltimelinefocus { .el-timeline-item__node { border: 2px solid hsla(0, 0%, 90%, 0.7); background-clip: content-box; background: rgba(78, 151, 255, 1); } .el-timeline-item__node--normal { left: 0px; width: 11px; height: 11px; } } .timeline-name { font-size: 13px; color: rgba(0, 0, 0, 0.7); } .timeline-content { color: rgba(0, 0, 0, 0.5); font-size: 12px; margin-top: 4px; .timeline-content__idea { color: rgba(0, 0, 0, 0.7); } } }

效果图