双列时间轴

1. 效果

 2. 代码

<template>
  <div class="Timeline">
    <div class="timeaxis">
      <div v-for="(item, i) in list" :key="i">
        <div class="timeaxis-box">
          <div class="timeaxis-box-line"></div>
          <div :class="['timeaxis-box-content', i % 2 === 0 ? 'up' : 'down']">
            <div>
              {{ item.firstContent }}
            </div>
            <div>
              <span>
                {{ item.title }}
              </span>
            </div>
            <div>
              {{ item.secondCeotent }}
            </div>
          </div>
          <div class="timeaxis-box-circle">
            {{ item.num }}
            <div :class="['arrow', i % 2 === 0 ? 'down' : 'up']"></div>
          </div>
          <div class="timeaxis-box-bootomText">
            <div class="text">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const list = [
  {
    title: "公司治理",
    firstContent:
      "三大航年报出炉2020年累计亏损逾370亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元",
    secondCeotent: "三大航年报出炉2020年累计亏损逾370",
    date: "2017-03-10",
    num: 1
  },
  {
    title: "公司治理2",
    firstContent: "三大航年报出炉2020年累计亏损逾370亿元",
    secondCeotent:
      "三大航年报出炉2020年累计亏损逾370亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元",
    date: "2017-03-11",
    num: 1
  },
  {
    title: "公司治理3",
    firstContent: "三大航年报出炉2020年累计亏损逾370",
    secondCeotent:
      "三大航年报出炉2020年累计亏损逾370亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元",
    date: "2017-03-12",
    num: 12
  },
  {
    title: "公司治理4",
    firstContent: "三大航年报出炉2020年累计亏损逾37亿元亿元亿元亿元亿元亿元亿元亿元亿元",
    secondCeotent: "三大航年报出炉2020年累计亏损逾370亿",
    date: "2017-03-13",
    num: 12
  },
  {
    title: "公司治理公司治理",
    firstContent: "三大航年报出炉2020年累计亏损逾",
    secondCeotent: "三大航年报出炉2020年累计亏损逾",
    date: "2017-03-14",
    num: 15
  },
  {
    title: "公司治理",
    firstContent:
      "三大航年报出炉2020年累计亏损逾370亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元亿元",
    secondCeotent: "三大航年报出炉2020年累计亏损逾370亿元",
    date: "2017-03-15",
    num: 7
  }
];
export default {
  name: "TimeAixs",
  data() {
    return {
      list
    };
  }
};
</script>

<style lang="less" scoped>
/* 面板的背景色 */
@boxBackGround: #756b67;
/* 圆点的半径 */
@circlRadius: 20px;
/* 箭头的半径 */
@arrowHeight: 10px;
/* 字体的颜色 */
@color: #fff;
/* 轴线的颜色 */
@axisColor: #c9cdd4;
/* 设置轴线居中（距离顶部的高度） */
@axisLineTop: @circlRadius / 2;
/* 两个点之间的间距 */
@pointSpace: 140px;
/* 面板的宽度 （*2代表一个面板的跨度为两个圆点间隔 -40则是连个面板之间的间隔）*/
@contentWidth: @pointSpace * 1.7;
/* 面板的高度 */
@contentHeight: 100px;
/* 轴向上方面板距离轴线的高度 */
@contentUpToBottom: 40px;
/* 轴向上方面板左偏移量 */
@contentUpToLeft: -20px;
/* 轴向下方面板距离轴线的高度 */
@contentDownToTop: 50px;
/* 轴向下方面板左偏移量 */
@contentDownToLeft: -(@pointSpace + 20);
/* 轴线下方的箭头距离point的距离 */
@arrowDownTop: @contentUpToBottom - 61;
/* 轴线上方的箭头距离point的距离 */
@arrowUpTop: @contentUpToBottom - 9;
.ellipsis {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.before {
  content: "●";
  font-size: 14px;
  display: inline-block;
  height: 100%;
  float: left;
  margin-right: 10px;
  background-color: transparent;
}
.Timeline {
  position: relative;
  color: @color;
  font-size: 12px;
  .timeaxis {
    margin-left: 4em;
    display: flex;
    &-box {
      position: relative;
      width: @pointSpace;
      &-circle {
        position: relative;
        width: @circlRadius;
        height: @circlRadius;
        line-height: @circlRadius;
        border-radius: 50%;
        text-align: center;
        background: @boxBackGround;
        .arrow {
          position: absolute;
          border-left: @arrowHeight solid transparent;
          border-right: @arrowHeight solid transparent;
          height: 0;
          width: 0;
          &.down {
            border-bottom: @arrowHeight solid transparent;
            border-top: @arrowHeight solid @boxBackGround;
            top: @arrowDownTop;
          }
          &.up {
            border-top: @arrowHeight solid transparent;
            border-bottom: @arrowHeight solid @boxBackGround;
            top: @arrowUpTop;
          }
        }
      }
      &-content {
        position: absolute;
        display: flex;
        flex-direction: column;

        width: @contentWidth;
        height: @contentHeight;
        background: @boxBackGround;
        padding: 8px 10px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        row-gap: 10px;
        &.up {
          bottom: @contentUpToBottom;
          left: @contentUpToLeft;
        }
        &.down {
          top: @contentDownToTop;
          left: @contentDownToLeft;
        }
        div:nth-of-type(1) {
          .ellipsis();
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          &::before {
            .before();
          }
        }
        div:nth-of-type(2) > span {
          display: inline;
          padding: 2px 5px;
          border-radius: 5px;
          background-color: #a19ea7;
          &::before {
            .before();
            content: " ";
            margin-right: 20px;
          }
        }
        div:last-child {
          .ellipsis();
          -webkit-line-clamp: 1;
          &::before {
            .before();
          }
        }
      }
      &-line {
        position: relative;
        border-bottom: 1px solid @axisColor;
        top: @axisLineTop;
      }
      &-bootomText {
        position: relative;
        .text {
          position: absolute;
          top: 2px;
          transform: translateX(-40%);
        }
      }
    }
    & > div:last-child {
      .timeaxis-box-line {
        border: none;
      }
    }
  }
}
</style>