左右实时间轴效果demo(整理)

<template>
	<div class="m-timeline-area" :style="`width: ${width}px`">
		<div class="m-timeline">
			<div :class="['m-timeline-item', {'last': index === timelineDesc.length - 1}]"
				v-for="(item, index) in timelineDesc" :key="index">
				<div class="u-tail"></div>
				<div class="u-dot1" v-if="index % 2 != 0"></div>
				<div class="u-dot" v-else></div>
				<!-- <div class="u-content">{{ item.desc || '--' }}</div> -->
				<div class="u-content" v-if="index % 2 != 0">
					<div class="div1">{{ item.time }} 年</div>
					<div class="div2">{{ item.desc }}</div>
				</div>
				<div class="u-content1" v-else>
					<div class="div1">{{ item.time }} 年</div>
					<div class="div2">{{ item.desc }}</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Timeline',
		props: {
			timelineDesc: { // 时间轴内容数组
				type: Array,
				default: () => {
					return []
				}
			},
			width: { // 时间轴区域总宽度
				type: Number,
				// default: 360
			}
		},
		data() {
			return {
				timelineDesc: [{
					desc: '测试测试测试测试',
					time: 2009,
				}, {
					desc: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
					time: 2010,
				}, {
					desc: '测试测试测试测试',
					time: 2012,
				}, {
					desc: '测试测试测试测试',
					time: 2013,
				}, {
					desc: '测试测试测试测试',
					time: 2014,
				}, {
					desc: '测试测试测试测试',
					time: 2015,
				}, {
					desc: '测试测试测试测试',
					time: 2016,
				}],
			}
		},
	}
</script>
<style lang="scss" scoped>
	// @blue: #1890ff;
	// @green: #52c41a;
	// @red: #f5222d;
	// @gray: rgba(0, 0, 0, .25);

	.m-timeline-area {
		width: 1230px;
		margin: 0 auto;
		// background-color: indianred;
		// margin-top: 800px;

		.m-timeline {
			// margin-left: 380px;

			.m-timeline-item {
				position: relative;
				padding-bottom: 30px;

				.u-tail {
					position: absolute;
					top: 10px;
					left: 620px;
					height: calc(100% - 10px);
					border-left: 2px solid #e8e8e8; // 实线
					// border-left: 2px dotted #e8e8e8; // 点线
					// border-left: 2px dashed #e8e8e8; // 虚线
				}

				.u-dot {
					position: absolute;
					left: 615px;
					width: 19px;
					height: 14px;
					background-image: url(../assets/img/img_zhixiang_you.png);
					background-size: 100% 100%;
				}

				.u-dot1 {
					position: absolute;
					left: 610px;
					// top: -4px;
					width: 19px;
					height: 14px;
					background-image: url(../assets/img/img_zhixiang_zuo.png);
					background-size: 100% 100%;
				}

				.u-content {
					width: 570px;
					position: relative;
					top: 0px;
					margin-left: 10px;
					word-break: break-all;
					word-wrap: break-word;
					line-height: 24px;
					// background-color: red;
					text-align: right;

					.div1 {
						font-size: 34px;
						font-family: PingFang-SC-Heavy;
						color: #415B76;
						margin-bottom: 51px;
						padding-top: 10px;
					}

					.div2 {
						font-size: 20px;
						font-family: PingFang-SC-Bold;
						line-height: 35px;
						color: #666666;
						background: #EFEFEF;
						padding: 55px 60px;
					}
				}

				.u-content1 {
					width: 570px;
					position: relative;
					top: 0px;
					left: 630px;
					margin-left: 25px;
					word-break: break-all;
					word-wrap: break-word;
					line-height: 24px;
					// background-color: blue;

					.div1 {
						font-size: 34px;
						font-family: PingFang-SC-Heavy;
						color: #415B76;
						margin-bottom: 51px;
						padding-top: 10px;
					}

					.div2 {
						font-size: 20px;
						font-family: PingFang-SC-Bold;
						line-height: 35px;
						color: #666666;
						background: #EFEFEF;
						padding: 55px 60px;
					}
				}
			}

			.last {
				.u-tail {
					display: none;
				}
			}
		}
	}
</style>