Ci2Order.vue/App/components/z-timeline/z-timeline.vue

<template>
	<view class="z-timeline flex-n">
		<view class="day_info" v-if="showDay" :style="{'margin-top':daytop+'px',color:datecolor}">
			<view class="day" v-if="date">{{date.dd||''}}</view>
			<view class="xingqi" v-if="date">周{{date.xx||''}}</view>
		</view>
		<view class="z-timeline-line" :style="{height:height+'px',top:top+'px',left:left+'px'}"></view>
		<view id='timeline' class="flex-1">
			<slot></slot>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'z-timeline',
		props: {
			align: {
				type: String,
				default: 'center'
			},
			showDay:Boolean,
			date:Object,
			datecolor:{
				type: String,
				default: '#0075FF'
			}
		},
		data() {
			return {
				height: 0,
				top: 0,
				left: 0,
				daytop: 0,
			}
		},
		mounted() {
			uni.$emit('timeline_align', this.align);
			var dayheight = 0;
			const query = uni.createSelectorQuery().in(this);
			if(this.showDay)
			query.select('.day_info .day').boundingClientRect(data => {
				this.left = data.width;
				dayheight = data.height;
			})
			query.select('.z-time-item .dot').boundingClientRect(data => {
				this.left += data.width;
			})
			query.selectAll('.z-time-item .content').boundingClientRect(data => {
				var height = 0;
				if (data.length > 0)
					if (this.align == 'center') {
						this.top = data[0].height / 2;
						this.daytop = this.top - dayheight;
					} else {
						this.top = 0;
					}
				if (data.length > 1) {
					for (var i = 0, len = data.length; i < len; i++) {
						height += data[i].height;
					}

					if (this.align == 'center') {
						this.height = height - (data[0].height + data[data.length - 1].height) / 2;
					} else {
						this.height = height - data[data.length - 1].height;
					}
				}

			}).exec();
			console.log(dayheight,this.height)
		},
	}
</script>

<style scoped lang="scss">
	.day_info {
		text-align: center;
		font-size: 18rpx;
		height: fit-content;
	}

	.z-timeline {
		position: relative;

		.z-timeline-line {
			position: absolute;
			border-left: 1px solid #777777;
			z-index: 1;
		}
	}
</style>