自定义时间轴

<template>
    <div class="">
        <div class="timeClass" style="width: 100%;height:18px;">
            <div style="float:left;width: 56px;padding-left:14px;paddding-bottom: 4px;height:18px;">
                <div v-if="!firstItemFlag" style="height:14px;width:4px;background: rgba(25, 31, 36, 0.04);border-radius: 0 0 2px 2px;" />
            </div>
            <div style="float:left">{{ time }}</div>
        </div>
        <div style="width: 100%;height:32px;">
            <svg-icon :icon-class="iconClassName" style="height: 32px;width:32px;float:left;" /><div class="titleClass">{{ title }}</div>
        </div>
        <div id="all" style="width: 100%;min-height:175px;margin-top:4px;">
            <div id="leftDiv" style="float: left;width: 56px;padding-left:14px;paddding-top: 4px;min-height:175px;">
                <div v-if="!lastItemFlag" id="leftDiv2" style="min-height:175px;height:100%;width:4px;background: rgba(25, 31, 36, 0.04);border-radius: 2px 2px 0 0;" />
            </div>
            <div style="float:left;padding-top:7px;width:528px;">
                <div>
                    <span style="height: 18px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(25, 31, 36, 0.56);line-height: 18px;">
                        {{ userNameTitle }}：
                    </span>
                    <span style="margin-left:7px;height: 18px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #191F24;line-height: 18px;">
                        {{ userName }}
                    </span>
                </div>
                <div id="contentDiv" style="margin-top:16px;background: #FFFFFF;border-radius: 4px;border: 1px solid rgba(25, 31, 36, 0.16);width: 100%;padding: 8px 12px 8px 12px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #191F24;line-height: 18px;">
                    {{ contentTitle }}{{ contentTitle !== null && contentTitle !== '' ? '：': '' }}<br>{{ contentInfomation }}

                </div>
                <div style="height: 1px;margin-top:24px;margin-bottom:24px;background: rgba(25, 31, 36, 0.08);width:100%" />
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'TimeLine',
    props: {
        contentTitle: {
            type: String,
            default: null
        },
        contentInfomation: {
            type: String,
            default: null
        },
        userNameTitle: {
            type: String,
            default: null
        },
        userName: {
            type: String,
            default: null
        },
        lastItemFlag: {
            type: Boolean,
            default: true
        },
        firstItemFlag: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: null
        },
        iconClassName: {
            type: String,
            default: null
        },
        time: {
            type: String,
            default: null
        }
    },
    watch: {
        contentInfomation(val) {
            setTimeout(() => {
                document.getElementById('all').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
                document.getElementById('leftDiv').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
                document.getElementById('leftDiv2').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
            }, 20)
        }
    },
    created() {
        setTimeout(() => {
            document.getElementById('all').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
            document.getElementById('leftDiv').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
            document.getElementById('leftDiv2').style.height = document.getElementById('contentDiv').offsetHeight + 16 + 18 + 7 + 49 + 'px'
        }, 20)
    },
    methods: {
    }
}
</script>
<style>
.titleClass{
    float:left;
    margin-left:24px;
    height: 32px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #191F24;
    line-height: 32px;
}
.timeClass {
    height: 18px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(25, 31, 36, 0.56);
    line-height: 18px;
}
</style>