shuhi-app/pages/index/express/components/LogisticsTimeline.vue

<template>
    <view scroll-y class="timeline-container">
        <view v-for="(item, index) in list" :key="index" class="timeline-item">
            <view class="timeline-icon">
                <u-icon name="map-fill" color="#19be6b" size="16" />
            </view>
            <view class="timeline-content">
                <text class="title">{{ item.title }}</text>
                <text class="desc">{{ item.description }}</text>
                <text class="time">{{ item.time }}</text>
            </view>
            <view v-if="index < list.length - 1" class="timeline-line"></view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: []
    }
});
</script>

<style lang="scss" scoped>
.timeline-container {
    flex: 1;
    padding: 12px;
    background-color: #fff;
}

.timeline-item {
    display: flex;
    position: relative;
    padding: 20rpx 0;
}

.timeline-icon {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;

    .title {
        font-weight: bold;
        font-size: 14px;
    }

    .desc {
        font-size: 14px;
        color: #333;
        display: block;
        margin-bottom: 4px;
    }

    .time {
        font-size: 12px;
        color: #999;
    }
}

.timeline-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #19be6b;
    top: 32px;
    bottom: 0;
    left: 11px;
}
</style>