一、效果
二、实现代码
<template><view class="container"><view class="header"><text class="title">快递物流信息</text><text class="subtitle">快递单号：SF1234567890</text></view><view class="timeline"><view v-for="(item, index) in expressList" :key="index" class="timeline-item" :class="{'active': item.status === 'active','completed': item.status === 'completed'}"><view class="timeline-left"><view class="timeline-dot"><view class="dot-inner"><text v-if="item.status === 'completed'" class="icon">✓</text><text v-else-if="item.status === 'active'" class="icon">●</text></view></view><view class="timeline-connector" v-if="index !== expressList.length - 1"></view></view><view class="timeline-content"><view class="timeline-title">{{ item.title }}</view><view class="timeline-desc">{{ item.desc }}</view><view class="timeline-time">{{ item.time }}</view></view></view></view></view>
</template><script>export default {data() {return {expressList: [{title: "已签收",desc: "快件已签收，签收人：本人",time: "2023-06-15 14:30",status: "active"},{title: "派送中",desc: "快件已到达【深圳福田分部】，快递员：李师傅（138****5678）正在派件",time: "2023-06-15 09:15",status: "active"},{title: "运输中",desc: "快件已到达【深圳转运中心】",time: "2023-06-14 22:45",status: "completed"},{title: "运输中",desc: "快件已离开【广州转运中心】，下一站【深圳转运中心】",time: "2023-06-14 18:20",status: "completed"},{title: "已发货",desc: "商家已发货",time: "2023-06-13 16:10",status: "completed"},{title: "已下单",desc: "您的订单已提交成功",time: "2023-06-12 10:30",status: "completed"}]};}};
</script><style scoped>.container {padding: 30rpx;background-color: #f8f8f8;min-height: 100vh;}.header {background-color: #ffffff;border-radius: 16rpx;padding: 30rpx;margin-bottom: 30rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);}.title {display: block;font-size: 36rpx;font-weight: bold;color: #333333;margin-bottom: 10rpx;}.subtitle {display: block;font-size: 28rpx;color: #666666;}.timeline {background-color: #ffffff;border-radius: 16rpx;padding: 30rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);}.timeline-item {display: flex;position: relative;}.timeline-left {display: flex;flex-direction: column;align-items: center;width: 60rpx;min-height: 240rpx;margin-right: 20rpx;}.timeline-dot {width: 60rpx;height: 40rpx;display: flex;justify-content: center;align-items: center;z-index: 2;position: relative;}.dot-inner {width: 40rpx;height: 40rpx;border-radius: 50%;background-color: #e0e0e0;display: flex;justify-content: center;align-items: center;}.timeline-item.completed .dot-inner {background-color: #4CAF50;}.timeline-item.active .dot-inner {background-color: #2196F3;animation: pulse 1.5s infinite;}.icon {color: white;font-size: 24rpx;font-weight: bold;}.timeline-connector {width: 2rpx;flex: 1;background-color: #e0e0e0;margin-top: -10rpx;}.timeline-item.completed .timeline-connector {background-color: #4CAF50;}.timeline-item.active .timeline-connector {background-color: #2196F3;}.timeline-content {flex: 1;padding-bottom: 40rpx;padding-top: 5rpx;}.timeline-title {font-size: 32rpx;font-weight: bold;color: #333333;margin-bottom: 8rpx;}.timeline-item.completed .timeline-title {color: #4CAF50;}.timeline-item.active .timeline-title {color: #2196F3;}.timeline-desc {font-size: 28rpx;color: #666666;line-height: 1.5;margin-bottom: 8rpx;}.timeline-time {font-size: 24rpx;color: #999999;}.timeline-item:last-child .timeline-content {padding-bottom: 0;}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);}70% {box-shadow: 0 0 0 10rpx rgba(33, 150, 243, 0);}100% {box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);}}
</style>
