【Timeline】

智商不够_熬夜来凑2026-05-29 8:18

已创建时间轴组件！

组件路径：

components/Timeline/Timeline.vue
components/Timeline/TimelineItem.vue

使用示例：

vue 复制代码

<template>
  <view>
    <Timeline>
      <TimelineItem 
        time="2024-01-15 10:30" 
        title="工单创建"
        content="客户提交了消杀服务申请"
      />
      <TimelineItem 
        time="2024-01-15 11:00" 
        title="工单分派"
        content="已分派给外勤人员张三"
        active
      />
      <TimelineItem 
        time="2024-01-15 14:00" 
        title="到达现场"
        content="外勤人员已到达客户现场"
        icon="map"
      />
      <TimelineItem 
        time="2024-01-15 14:30" 
        title="服务完成"
        content="消杀服务已完成，等待客户确认"
        color="#4CAF50"
      />
    </Timeline>
  </view>
</template>

<script>
import Timeline from '@/components/Timeline/Timeline.vue'
import TimelineItem from '@/components/Timeline/TimelineItem.vue'

export default {
  components: { Timeline, TimelineItem }
}
</script>

TimelineItem Props：

属性	类型	默认值	说明
time	String	''	时间
title	String	''	标题
content	String	''	内容描述
icon	String	''	图标名称（uni-icons）
color	String	'#1E88E5'	节点颜色
active	Boolean	false	是否为当前激活状态

设计特点：

使用项目统一的蓝色主题（#1E88E5）
时间轴节点支持自定义颜色和图标
active 状态的节点会有光晕效果
最后一个节点不显示连接线