<template>
  <view class="timeline-header">
    <view v-for="tick in config.ticks" :key="tick.label" class="timeline-tick" :style="{ left: tick.left + 'px' }">
      {{ tick.label }}
    </view>
  </view>
</template>
<script>
export default {
  name: 'TimelineHeader',
  props: {
    config: {
      type: Object,
      required: true
    }
  }
}
</script>
<style scoped>
.timeline-header {
  position: relative;
  height: 32px;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  white-space: nowrap;
}
.timeline-tick {
  position: absolute;
  top: 0;
  width: 80px;
  text-align: center;
  color: #888;
  font-size: 12px;
}
</style> 