vue实现公司发展历程水平时间轴分上下轴展示，实现一个demo

好的，以下是一个基于 Vue 实现公司发展历程水平时间轴分上下轴展示的 demo。

首先，我们需要在 Vue 组件中定义一个数组，用于存储公司发展历程的时间和事件：

data() {
  return {
    events: [
      {
        date: "2010年",
        title: "公司成立",
        description: "公司在北京成立，专注于互联网领域。"
      },
      {
        date: "2012年",
        title: "推出产品A",
        description: "公司推出了第一款互联网产品A。"
      },
      {
        date: "2014年",
        title: "推出产品B",
        description: "公司推出了第二款互联网产品B。"
      },
      {
        date: "2016年",
        title: "公司扩张",
        description: "公司在上海设立分公司，进一步扩大业务。"
      },
      {
        date: "2018年",
        title: "推出产品C",
        description: "公司推出了第三款互联网产品C。"
      },
      {
        date: "2020年",
        title: "公司上市",
        description: "公司在A股上市，获得了更多的投资。"
      }
    ]
  }
}

然后，在模板中使用 v-for 循环渲染出时间轴上的每个事件，使用 CSS 样式实现上下轴的分别展示：

<template>
  <div class="timeline">
    <div v-for="(event, index) in events" :key="index" :class="`event ${index % 2 === 0 ? 'top' : 'bottom'}`">
      <div class="date">{{ event.date }}</div>
      <div class="marker"></div>
      <div class="content">
        <div class="title">{{ event.title }}</div>
        <div class="description">{{ event.description }}</div>
      </div>
    </div>
  </div>
</template>

最后，我们需要在样式中定义时间轴上的样式，使其看起来像一个真正的时间轴。这里只提供一个简单的样式，您可以根据自己的需求进行修改：

.timeline {
  position: relative;
  height: 100px;
  margin: 50px 0;
}

.timeline .event {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.timeline .event.top {
  left: 0;
  width: 50%;
  padding-right: 50px;
}

.timeline .event.bottom {
  right: 0;
  width: 50%;
  padding-left: 50px;
}

.timeline .event .date {
  font-size: 16px;
  font-weight: bold;
  margin-right: 20px;
}

.timeline .event .marker {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
}

.timeline .event .marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.timeline .event .content {
  flex: 1;
}

.timeline .event .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline .event .description {
  font-size: 14px;
}

这就是一个简单的 Vue 实现公司发展历程水平时间轴分上下轴展示的 demo，您可以根据自己的需求进行修改和优化。