- The style is as follows:
the code is as follows:
<template>
<ul class="timeline" >
<li class="timeline-item" v-for="item in activities" :key="item.index">
<div class="item-tail"></div>
<div class="item-node"></div>
<div class="item-wrapper">
<div class="item-content">系统通知,流程</div>
<div class="item-time" ref="time">时间：{
{
item.timestamp }}</div>
<div class="item-process">节点：{
{
item.process }}</div>
<div class="item-result">结果：{
{
item.result }}</div>
</div>
</li>
</ul>
</template>
<script>
import {
reactive } from "vue";
export default {
setup() {
const activities = reactive([
{
content: "活动开始",
timestamp: "2018-04-15",
process: "已发送",
result: "无",
},
{
content: "通过审核",
timestamp: "2018-04-13",
process: "已审核",
result: "无",
},
{
content: "创建成功",
timestamp: "2018-04-11",
process: "结束",
result: "无",
},
]);
return {
activities };
},
};
</script>
<style scoped lang='less'>
.timeline {
margin: 0;
font-size: 14px;
list-style: none;
background-color: #fff;
margin: 20px;
.timeline-item {
position: relative;
padding-bottom: 20px;
.item-tail {
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.item-node {
left: -2px;
width: 10px;
height: 10px;
position: absolute;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.item-wrapper {
position: relative;
padding-left: 28px;
top: -3px;
.item-content {
color: #6395f8;
}
.item-time {
margin-top: 8px;
color: #909399;
line-height: 1;
font-size: 13px;
}
.item-process {
margin-top: 8px;
}
.item-result {
margin-top: 8px;
}
}
}
}
</style>