左右实时间轴效果demo(整理)-Toy模板网

这篇具有很好参考价值的文章主要介绍了左右实时间轴效果demo(整理)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

左右实时间轴效果demo(整理),element,时间轴文章来源地址https://www.toymoban.com/news/detail-627540.html

<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>