cfc/cfc-frontend/components/HealthTimeline.vue

<template>
  <view class="timeline" v-if="events && events.length > 0">
    <view class="timeline-title">📖 我的健康故事</view>
    <view class="timeline-list">
      <view class="timeline-item" v-for="(evt, idx) in events" :key="evt.id">
        <view class="timeline-dot" :class="'dot-' + (idx % 5)"></view>
        <view class="timeline-line" v-if="idx < events.length - 1"></view>
        <view class="timeline-content">
          <text class="timeline-text">{{ evt.eventText }}</text>
          <text class="timeline-date">{{ formatDate(evt.eventDate) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    events: { type: Array, default: function() { return [] } }
  },
  methods: {
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      return dateStr.slice(0, 10)
    }
  }
}
</script>

<style scoped>
.timeline {
  padding: 0 20rpx;
  margin-bottom: 32rpx;
}
.timeline-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 16rpx;
}
.timeline-list { position: relative; padding-left: 20rpx; }
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  position: relative;
  padding-bottom: 24rpx;
}
.timeline-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6rpx;
  z-index: 1;
}
.dot-0 { background: #10B981; }
.dot-1 { background: #F59E0B; }
.dot-2 { background: #6366F1; }
.dot-3 { background: #F97316; }
.dot-4 { background: #FF6B9D; }
.timeline-line {
  position: absolute;
  left: 9rpx;
  top: 26rpx;
  bottom: 0;
  width: 2rpx;
  background: #E2E8F0;
}
.timeline-content { flex: 1; min-width: 0; }
.timeline-text {
  font-size: 26rpx;
  color: #334155;
  line-height: 1.5;
}
.timeline-date {
  font-size: 20rpx;
  color: #94A3B8;
  margin-top: 4rpx;
  display: block;
}
</style>