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

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

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

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

然后，在模板中使用 v-for 循环渲染出时间轴上的每个事件，根据事件的 isTop 属性决定该事件是否在上轴或下轴上：

<template>
  <div class="timeline">
    <div class="top-axis">
      <div class="line"></div>
      <div v-for="(event, index) in events" :key="index" v-if="event.isTop" class="event top">
        <div class="marker"></div>
        <div class="content">
          <div class="date">{{ event.date }}</div>
          <div class="title">{{ event.title }}</div>
          <div class="description">{{ event.description }}</div>
        </div>
      </div>
    </div>
    <div class="bottom-axis">
      <div class="line"></div>
      <div v-for="(event, index) in events" :key="index" v-if="!event.isTop" class="event bottom">
        <div class="marker"></div>
        <div class="content">
          <div class="date">{{ event.date }}</div>
          <div class="title">{{ event.title }}</div>
          <div class="description">{{ event.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

.timeline .top-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.timeline .top-axis .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ccc;
}

.timeline .top-axis .event {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  padding: 20px;
  display: flex;
  align-items: center;
}

.timeline .top-axis .event .marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 20px;
}

.timeline .top-axis .event .content {
  flex: 1;
}

.timeline .bottom-axis {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.timeline .bottom-axis .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ccc;
}

.timeline .bottom-axis .event {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  padding: 20px;
  display: flex;
  align-items: center;
}

.timeline .bottom-axis .event .marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 20px;
}

.timeline .bottom-axis .event .content {
  flex: 1;
}

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