vue2/3 - 最新详细实现横向时间轴 “上下交错排列“ 展示效果，vue时间线组件，周围的卡片介绍文字，均匀分布交叉排列在时间轴上，vue实现横向时间轴并在周围上下位置放容器和文字（详细示例代码）

在Vue 2或Vue 3中创建一个横向时间轴组件，并实现“上下交错排列”的效果，可以通过使用Vue的列表渲染和条件渲染功能来实现。以下是一个简化的示例：

<template>
  <div class="timeline">
    <div v-for="event in events" :key="event.id" class="timeline-item">
      <div class="timeline-content">
        <div class="timeline-time">{{ event.time }}</div>
        <div class="timeline-title">{{ event.title }}</div>
        <div class="timeline-description">{{ event.description }}</div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HorizontalTimeline',
  data() {
    return {
      events: [
        { id: 1, time: '08:00', title: 'Event 1', description: 'Description 1' },
        { id: 2, time: '09:30', title: 'Event 2', description: 'Description 2' },
        // ... 更多事件
      ]
    };
  }
};
</script>
 
<style scoped>
.timeline {
  display: flex;
  justify-content: space-between;
}
 
.timeline-item {
  flex-basis: 48%; /* 保证两个时间轴项交错排列 */
  margin: 10px 0;
}
 
.timeline-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}
 
.timeline-time {
  font-weight: bold;
  color: #333;
}
 
.timeline-title {
  margin-top: 5px;
  color: #333;
}
 
.timeline-description {
  margin-top: 5px;
  color: #666;
}
</style>

在这个组件中，.timeline 类定义了一个横向时间轴的容器，.timeline-item 类定义了每个事件的容器，并且通过设置flex-basis属性为48%来保证交错排列。.timeline-content 类定义了事件内容的样式，包括时间、标题和描述。

要使用这个组件，只需将其添加到你的Vue应用中，并在需要的地方进行调用。这个简单的时间轴组件可以根据实际需求进行扩展，例如添加自定义事件、动画效果等。