自定义 el-timeline 节点样式
<div class="left-lineBox"><el-timeline><el-timeline-itemv-for="(activity, index) in activities":key="index"...
·
<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);
}
}
}
效果图
更多推荐
所有评论(0)