jd_logistics/jd_logistics-app/components/TimelineItem.vue

<template>
	<view class="timeline-item">
		<!-- 左侧时间线 -->
		<view class="timeline-left">
			<view class="timeline">
				<view class="dot" :class="{'dot-choose-bg': showDotBg}">
					<view class="timeline-dot" :class="{
              'dot-active': isActive,
              'dot-passed': !isActive
            }"></view>
				</view>
				<view 
					v-if="showLine" 
					class="timeline-line " 
					:class="{
					  'line-active': isActive,
					  'line-passed': !isActive
					}"
				></view>
			</view>
		</view>


		<!-- 右侧状态内容 -->
		<view class="status-section">
			<!-- 状态标签 -->
			<view 
				v-if="title" 
				class="status-badge" 
				:class="{
					'status-collected': title === '已代收',
					'status-title-active': isActive
				}"
			>
				{{ title }}
			</view>

			<!-- 状态详情 -->
			<view v-if="desc" class="status-detail">
				{{ desc }}
			</view>

			<!-- 状态时间 -->
			<view v-if="time" class="status-time">
				{{ time }}
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		// 是否激活状态（即当前状态）
		isActive: {
			type: Boolean,
			default: false
		},
		// 标题，例如：已代收、派送中
		title: {
			type: String,
			default: ''
		},
		// 状态描述
		desc: {
			type: String,
			default: ''
		},
		// 时间
		time: {
			type: String,
			default: ''
		},
		// 是否显示连接线（最后一个节点不显示）
		showLine: {
			type: Boolean,
			default: true
		},
		// 是否显示连接线（第一个节点显示  后边不显示）
		showDotBg: {
			type: Boolean,
			default: true
		}
	})
</script>

<style scoped lang="less">
	.timeline-item {
		display: flex;
		// background-color: #F5F7FA;
		// border-radius: 16rpx;
		min-height: 120rpx; /* 确保最小高度 */

		&:last-child {
			margin-bottom: 0;
		}

		.timeline-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 54rpx; /* 增加宽度确保有足够空间 */
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.timeline {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%; /* 确保时间线占满整个高度 */
			
			/* 修复 dot 样式 */
			.dot {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				position: relative;
				z-index: 2; /* 确保圆点在最上层 */
				
				&.dot-choose-bg {
					background-color: #C1D5FF;
				}
			}

			.timeline-dot {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				position: relative;
				z-index: 3;

				&.dot-active {
					background-color: #1B64F0;
				}

				&.dot-passed {
					background-color: #CCCCCC;
				}
			}

			.timeline-line {
				flex: 1; /* 关键：使用flex:1让连接线自适应高度 */
				width: 4rpx;
				min-height: 40rpx; /* 确保最小高度 */
				margin-top: 10rpx;
				
				&.line-active {
					border-left: 4rpx dashed #1B64F0;
				}

				&.line-passed {
					border-left: 4rpx dashed #CCCCCC;
				}
			}
		}

		.status-section {
			flex: 1;
			min-width: 0;
			display: flex;
			margin-bottom: 20rpx;
			flex-direction: column;
			justify-content: center; /* 垂直居中内容 */

			.status-badge {
				margin-bottom: 8rpx;
				height: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 48rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&.status-collected {
					color: #333333;
				}

				&.status-title-active {
					color: #1B64F0;
					font-weight: 600;
				}
				
				/* 默认颜色 */
				&:not(.status-title-active) {
					color: #333333;
				}
			}

			.status-detail {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 44rpx;
				margin-top: 8rpx;
				word-break: break-all;
				display: -webkit-box;
				// -webkit-line-clamp: 4; /* 限制最多显示2行 */
				// -webkit-box-orient: vertical;
				overflow: hidden;
			}

			.status-time {
				margin-top: 8rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>