拐弯时间线，弯曲时间线，弯曲任务

 话不多，直接上代码

<template>
	<div>
		<div
			style="width: 100%; display: flex; position: relative; margin-top: 20px"
		>
			<div style="width: 2%; margin-left: 30px">
				<div>
					<span
						data-v-jzl20210826=""
						style="margin-top: 35px; opacity: 0"
						class="headerRadio"
					></span>

					<div v-if="experienceData.length > Index">
						<span
							v-for="(num, index) in leftRows"
							:key="index"
							class="hingelisHeard"
							style="margin-top: 55px"
						></span>
					</div>
					<span
						data-v-jzl20210826=""
						v-if="leftShow"
						style="margin-top: 98.5px; opacity: 0"
						class="hingeorgerHeard"
					></span>
				</div>
			</div>
			<div style="width: 96%">
				<div
					style="display: flex"
					v-for="(item, index) in experienceData"
					:key="index"
				>
					<div style="display: flex; width: 100%" v-if="(index + 1) % 2 != 0">
						<div
							class="timeline"
							v-for="(v, i) in DisplayProcessing(experienceData, index + 1)"
							:key="i"
							:style="(i + 1) % Index != 0 ? '' : 'width: 12%;'"
						>
							<!-- v-if="index / 2 != 0 || i != 0" -->
							<div class="Nodes">
								<svg-icon icon-class="initagingTemplet1" />
							</div>
							<div class="timeNodes">
								<div class="nodeTimes">
									<span>{{ v.createTime }} </span>
								</div>
								<div class="timeContent">
									<!-- <div v-for="term in v.reports" :key="term.id"> -->
									<el-tooltip
										class="item"
										effect="dark"
										:content="v.content"
										placement="right"
									>
										<p
											class="nodeTimelis"
											@click="onClickDate(v.createTime, term)"
										>
											<!-- <img
												v-if="term.hasReportFile"
												class="btns-img"
												:src="pdfImg"
												alt
											/> -->

											<span>{{ v.content }}</span>
										</p>
									</el-tooltip>
									<!-- </div> -->
								</div>
							</div>
							<!-- {{ i + 1 }}{{ DisplayProcessing(experienceData, index + 1).length
						}}{{ i != DisplayProcessing(experienceData, index + 1).length - 1 }} -->
							<!-- (i + 1) % Index != 0 && -->
							<div
								class="border"
								v-if="
									(i + 1) % Index != 0 &&
									i != DisplayProcessing(experienceData, index + 1).length - 1
								"
							>
								<div class="borderTime"></div>
							</div>
						</div>
					</div>
					<div style="display: flex; width: 100%" v-else>
						<div
							class="timeline2"
							v-for="(v, i) in DisplayProcessing(experienceData, index + 1)"
							:key="i"
							:style="
								i + 1 == 1 &&
								DisplayProcessing(experienceData, index + 1).length != 1
									? 'width: 12%;'
									: ''
							"
						>
							<div class="border" v-if="i != 0">
								<div class="borderTime"></div>
							</div>
							<div class="Nodes">
								<svg-icon icon-class="initagingTemplet1" />
							</div>
							<div class="timeNodes">
								<div class="nodeTimes">
									<span>{{ v.createTime }} </span>
								</div>
								<div class="timeContent">
									<el-tooltip
										class="item"
										effect="dark"
										:content="v.content"
										placement="right"
									>
										<p
											class="nodeTimelis"
											@click="onClickDate(v.createTime, term)"
										>
											<span>{{ v.content }}</span>
										</p>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width: 2%; margin-right: 30px">
				<div>
					<!-- 第一行 -->
					<span class="hingelis" v-if="experienceData.length > Index"></span>
					<!-- <span
						data-v-jzl20210826=""
						v-if="experienceData.length <= Index"
						class="hingeorger"
					></span> -->
					<div v-if="experienceData.length > Index * 2">
						<span
							class="hingelis"
							v-for="(num, index) in rightRows"
							:key="index"
							style="margin-top: 60px"
						></span>
					</div>
					<!-- 第二行 -->
					<!-- <span
            class="hingelis"
            v-if="experienceData.length > Index * 3"
            style="margin-top: 100.3px"
          ></span> -->
					<!-- <span
						data-v-jzl20210826=""
						v-if="rightShow"
						style="margin-top: 100.3px"
						class="hingeorger"
					></span> -->
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		data: {
			type: Array,
			default: () => {
				return [];
			},
		},
		Index: {
			type: Number,
			default: 0,
		}, //第一行展示X条数据
	},
	data() {
		return {
			experienceData: this.data,
			leftRows: 0,
			rightRows: 0,
			leftShow: false,
			rightShow: false,
			// pdfImg: require("../../assets/images/pdfReported.png"), //在下方展示的图片
		};
	},
	watch: {
		data: {
			handler(newVal, oldVal) {
				//时间线数据
				this.experienceData = newVal;
				let rows = Math.ceil(newVal.length / this.Index);
				this.leftRows =
					rows == 2
						? 0
						: rows % 2 == 0
						? parseInt(rows / 2) - 1
						: parseInt(rows / 2);
				this.rightRows =
					rows == 4
						? 1
						: rows % 2 == 0
						? parseInt(rows / 2) % 2 == 0
							? parseInt(rows / 2) >= 4
								? parseInt(rows / 2) - 1
								: parseInt(rows / 2)
							: parseInt(rows / 2) - 1
						: parseInt(rows / 2) - 1;
				this.leftShow = rows % 2 == 0 ? true : false;
				this.rightShow = rows == 1 ? false : rows % 2 == 1 ? true : false;
			},
			immediate: true,
		},
	},
	created() {},
	methods: {
		DisplayProcessing(Arg, Num) {
			//数据循环处理
			let arr = Arg.slice(this.Index * (Num - 1), this.Index * Num);
			arr = Num % 2 == 0 ? arr.reverse() : arr;
			return arr;
		},
		onClickDate(date, term) {
			//选择报告
			this.$emit("onClickDate", term);
		},
	},
};
</script>
<style scoped lang="scss">
.timeline {
	width: 100%;
	height: 60px;
	/* position: relative; */
	display: flex;
	align-items: center;
}
.timeline2 {
	width: 100%;
	height: 60px;
	/* position: relative; */
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.border {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	/* position: absolute; */
	/* left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); */
	.borderTime {
		border-bottom: 2px solid #9cd3ff;
		width: 100%;
	}
}

.Nodes {
	// width: 6px;
	// height: 6px;
	// border-radius: 50%;
	// background: white;
	// border: 5px solid #1e9bff;
	svg {
		// background: ;
		color: #1e9bff;
		height: 1.5em;
		width: 1.5em;
	}
}

.timeNodes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 135px;
	/* position: absolute;
	text-align: center;
	right: -60px;
	width: 200px;
	top: 60%;
	transform: translate(0, -50%); */
}
.timeContent {
	// height: 40px;
	// width: 200px;
	// margin-top: 30px;
}

.nodeTimelis {
	max-width: 150px;
	overflow: hidden;
	word-break: keep-all;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	// display: flex;
	// justify-content: center;
}
.nodeTimelis:active {
	color: #1e9bff;
}
.nodeTimes {
	margin-bottom: 0;
}

.btns-img {
	height: 16px;
	width: 16px;
}

.hingelis {
	content: "";
	display: block;
	width: 100%;
	height: 60px;
	border: 2px solid #9cd3ff;
	border-radius: 0 20px 20px 0px;
	border-left: 0px;
	margin-top: 29.5px;
}

.hingelisHeard {
	content: "";
	display: block;
	width: 100%;
	height: 63.1px;
	border: 2px solid #9cd3ff;
	border-radius: 20px 0px 0px 20px;
	border-right: 0px;
	margin-top: 50px;
}

.hingeorger {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	margin: 49.5px 0;
	position: relative;
}
.hingeorgerHeard {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	position: relative;
}

.hingeorgerHeard[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	left: -2px;
	border-top: 5px solid transparent;
	border-right: 12px solid #cccccc;
	border-bottom: 5px solid transparent;
}

.hingeorger[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	right: -2px;
	border-top: 5px solid transparent;
	border-left: 12px solid #cccccc;
	border-bottom: 5px solid transparent;
}

.headerRadio {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	position: relative;
}

.headerRadio[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	left: -2px;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background: #cccccc;
	border: 5px solid #cccccc;
	position: absolute;
	right: 35px;
	top: 50%;
	transform: translate(0, -50%);
}
::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background-color: #99a9bf;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: #d3dce6;
}
</style>

引入方式

<template>
	<div class="content_box">
		<TimeOptical v-if="dayRecory.length > 0" :data="dayRecory" :Index="5" />
	</div>
</template>

<script>
import TimeOptical from "@/components/timeOpptical/TimeOptical.vue";
export default {
	components: {
		TimeOptical,
	},
	data() {
		return {
			dayRecory: [
				{
					id: 7204928,
					content: "Mia更新上传放行单任务",
					smallClass: "UpdateOutBoundAgingPlanning",
					bigClass: null,
					createTime: "2023-03-01",
					createUser: "Mia",
					outBoundAgingPlanningId: 1342,
				},
				{
					id: 7204929,
					content: "Mia更新上传放行单任务",
					smallClass: "UpdateOutBoundAgingPlanning",
					bigClass: "SCFXD",
					createTime: "2023-03-01",
					createUser: "Mia",
					outBoundAgingPlanningId: 1342,
				},
			],

		};
	},
	
};
</script>

<style scoped lang="scss">
.content_box {
	// background-color: black;
}
.main-container {
	margin-left: 0 !important;
}
::v-deep .right-toolbar {
	width: 800px !important;
}
::v-deep .main-title {
	display: none !important;
}
</style>