①創(chuàng)建時(shí)間軸組件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">任務(wù)下發(fā)</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營銷玩法合集 | 玩轉(zhuǎn)元旦營銷，寶典在此！ 選用xxxx，一鍵套用，0代碼0設(shè)計(jì)
                    </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產(chǎn)品</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Timeline',
        props: {
            timelineDesc: { // 時(shí)間軸內(nèi)容數(shù)組
                type: Array,
                default: () => {
                    return []
                }
            },
            width: { // 時(shí)間軸區(qū)域總寬度
                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; // 實(shí)線
                    // border-left: 2px dotted #e8e8e8; // 點(diǎn)線
                    // 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