①创建时间轴组件TimeLine.vue：
<template>
<div class="m-timeline-area" style="width: 100%;">
<div class="m-timeline">
<div :class="['m-timeline-item', {'last': index === timelineDesc.length - 1}]"
v-for="(desc, index) in timelineDesc" :key="index">
<div class="u-tail"></div>
<div class="u-dot"></div>
<div class="u-content">
<div class="content1-item">
<div class="content-item1-left">
<div class="content-item1-left-title">任务下发</div>
<div class="content-item1-left-time">1天三分钟后推送</div>
</div>
<div class="content-item1-right">
<div class="content-item1-right-edit">编辑</div>
<div class="content-item1-right-del">删除</div>
</div>
</div>
<div class="content2-item">
元旦H5营销玩法合集 | 玩转元旦营销，宝典在此！ 选用xxxx，一键套用，0代码0设计
</div>
<div class="conttent3-item">
<div class="content3-item-img">
<el-image style="width: 100%; height: 100%" :src="url" fit="cover"></el-image>
</div>
<div class="content3-item-title">xxxx产品</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Timeline',
props: {
timelineDesc: { // 时间轴内容数组
type: Array,
default: () => {
return []
}
},
width: { // 时间轴区域总宽度
type: Number,
default: 360
}
},
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
},
}
</script>
<style lang="less" scoped>
@blue: #1890ff;
@green: #52c41a;
@red: #f5222d;
@gray: rgba(0, 0, 0, .25);
.m-timeline-area {
//margin: 0 auto;
.m-timeline {
.m-timeline-item {
position: relative;
padding-bottom: 30px;
.u-tail {
position: absolute;
top: 10px;
left: 3px;
height: calc(100% - 10px);
border-left: 2px solid #e8e8e8; // 实线
// border-left: 2px dotted #e8e8e8; // 点线
// border-left: 2px dashed #e8e8e8; // 虚线
}
.u-dot {
position: absolute;
width: 4px;
height: 4px;
border: 2px solid @blue;
border-radius: 50%;
}
.u-content {
position: relative;
top: -6px;
margin-left: 25px;
width: 552px;
//height: 121px;
background-color: #F8FBFF;
word-break: break-all;
word-wrap: break-word;
line-height: 24px;
overflow: hidden;
.content1-item {
width: calc(100% - 30px);
margin-top: 10px;
height: 20px;
margin-left: 15px;
display: flex;
justify-content: space-between;
.content-item1-left {
width: 50%;
height: 100%;
display: flex;
.content-item1-left-title {
font-size: 14px;
color: #333;
line-height: 20px;
}
.content-item1-left-time {
font-size: 12px;
color: #666;
margin-left: 11px;
line-height: 20px;
}
}
.content-item1-right {
width: 66px;
height: 100%;
display: flex;
justify-content: space-between;
.content-item1-right-edit {
font-size: 14px;
color: #0064ff;
cursor: pointer;
}
.content-item1-right-del {
font-size: 14px;
color: #0064ff;
cursor: pointer;
}
}
}
.content2-item {
width: calc(100% - 30px);
font-size: 13px;
color: #666;
margin: 10px 15px 11px;
padding-bottom: 11px;
border-bottom: 1px dashed #d0d0d0;
}
.conttent3-item {
width: calc(100% - 30px);
margin-left: 15px;
height: 30px;
display: flex;
.content3-item-img {
width: 54px;
height: 100%;
background-color: red;
}
.content3-item-title {
margin-left: 10px;
font-size: 13px;
color: #333;
}
}
}
}
.last {
.u-tail {
display: none;
}
}
}
}
</style>
②在要使用的页面引入：
<Timeline :timelineDesc="timelineDesc" :width="480" />
import Timeline from '@/components/TimeLine'
components: {
Timeline
}
timelineDesc: ['Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', 'Create a services site', 'Create a services site', 'Create a services site', 'Create a services site']
效果图如下：
image.png
