改写elemen时间线组件，让其左右分布显示

前提条件：
由于element ui的时间线组件，没有提供让其左右显示的属性，所以根据具体的项目需求改写样式

代码如下：

<template>
    <div 
    v-loading="loading" 
    element-loading-text="数据加载中" 
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)" 
    class="h-100 p-r">
        <div class="timelineBox">
            <el-timeline>
                <el-timeline-item v-for="(item, index) in versionAnnouncementList" :key="index" :color="item.color">
                    <div v-if="index%2==0" class="evenDiv">
                        <div class="timelinItemBox0">
                            <div class="timelinItemBox-top f-r a-c" style="background-color:#21A0AD">
                                <div>发布时间：{{item.releaseTime}}</div>
                                <div class="m-l20">版本号：{{item.version}}</div>
                            </div>
                            <div class="timelinItemBox-bottom">
                                <span>{{item.content}}</span>
                            </div>
                        </div>
                        <div class="timelinItemBox1">
                            <div class="timelinItemBox-top f-r a-c">
                                <div>发布时间：{{item.releaseTime}}</div>
                                <div class="m-l20">版本号：{{item.version}}</div>
                            </div>
                            <div class="timelinItemBox-bottom">
                                {{item.content}}
                            </div>
                        </div>
                    </div>

                    <div v-else class="unevenDiv">
                        <div class="timelinItemBox0">
                            <div class="timelinItemBox-top f-r a-c">
                                <div>发布时间：{{item.releaseTime}}</div>
                                <div class="m-l20">版本号：{{item.version}}</div>
                            </div>
                            <div class="timelinItemBox-bottom">
                                {{item.content}}
                            </div>
                        </div>
                        <div class="timelinItemBox1">
                            <div class="timelinItemBox-top f-r a-c" style="background-color:#507CBE">
                                <div>发布时间：{{item.releaseTime}}</div>
                                <div class="m-l20">版本号：{{item.version}}</div>
                            </div>
                            <div class="timelinItemBox-bottom">
                                {{item.content}}
                            </div>
                        </div>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            versionAnnouncementList: [
                {
                    uuid: "20230314_1053_5398371131177979",
                    content: "（1）测试1234查Referer\n（2）字段rer字段地是CSRF攻击传，这时候服务器就能\n（3）查Referer字段rer字段地是CSRF攻击传，这时候服务器就能\n（4）查Referer字段rer字段地是CSRF攻击传，这时候服务器就能",
                    version: "V3.1",
                    releaseTime: "2023-10-28 03:30:17",
                    createTime: "2023-03-14 10:53:49",
                    updateTime: "2023-03-14 15:01:13",
                    color: '#21A0AD'
                }, 
                {
                    uuid: "20230314_1053_5398371131177979",
                    content: "检查Referer字段rer字段地是CSRF攻击传绝该请求。添加校验token。如果使用了cookie来进行身份验证",
                    version: "V3.1",
                    releaseTime: "2023-10-28 03:30:17",
                    createTime: "2023-03-14 10:53:49",
                    updateTime: "2023-03-14 15:01:13",
                    color: '#507CBE'
                }, 
                {
                    uuid: "20230314_1053_5398371131177979",
                    content: "测试1234",
                    version: "V3.1",
                    releaseTime: "2023-10-28 03:30:17",
                    createTime: "2023-03-14 10:53:49",
                    updateTime: "2023-03-14 15:01:13",
                    color: '#21A0AD'
                }, 
                {
                    uuid: "20230314_1053_5398371131177979",
                    content: "测试1234",
                    version: "V3.1",
                    releaseTime: "2023-10-28 03:30:17",
                    createTime: "2023-03-14 10:53:49",
                    updateTime: "2023-03-14 15:01:13",
                    color: '#507CBE'
                }, 
                {
                    uuid: "20230314_1053_5398371131177979",
                    content: "测试1234",
                    version: "V3.1",
                    releaseTime: "2023-10-28 03:30:17",
                    createTime: "2023-03-14 10:53:49",
                    updateTime: "2023-03-14 15:01:13",
                    color: '#21A0AD'
                },
                
            ],
            loading:false,            
        }
    },
    mounted() {},
    methods: {}
}
</script>

<style lang='less'>
// 通用样式 start
.h-100{
    height: 100%;
}
.p-r{
    position: relative;
}
.f-r {
    display: flex;
    flex-direction: row;
}
.a-c {
    align-content: center;
    align-items: center;
}
.m-l20 {
    margin-left: 20px;
}
// 通用样式 end

.timelineBox {
    position: absolute;
    left: 50%;
    top:2%;
    width: 40%;
    .el-timeline-item{
        padding-bottom: 5px;
    }
}
.timelinItemBox0 {
    width: calc(100% - 28px - 2px);
    height: calc(100% - 2px);
    position: absolute;
    right: calc(100% + 18px);
    border: 1px solid #dedede;
    border-radius: 5px;
}
.timelinItemBox1{
    height: calc(100% - 2px);
    border: 1px solid #dedede;
    border-radius: 5px;
}
.timelinItemBox-top{
    height: 35px;
    padding: 0 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
}
.timelinItemBox-bottom{
    padding: 10px;
    color: #606266;
    line-height: 20px;
    white-space: pre-wrap;
}
.evenDiv{
    .timelinItemBox1{
        border: 1px solid #ffffff;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        .timelinItemBox-bottom{
            color: #ffffff;
        }
    }
}
.unevenDiv{
    .timelinItemBox0{
        border: 1px solid #ffffff;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        .timelinItemBox-bottom{
            color: #ffffff;
        }
    }
}
</style>

效果图如下：

如果有其他的样式需求，自己再进行添加即可。

如有漏洞，欢迎互动指教！！！！！！！！！！！！！