左右实时间轴效果demo(整理)

<template>
  <div class="m-timeline-area" :style="`width: ${width}px`">
    <div class="m-timeline">
      <div :class="['m-timeline-item', {'last': index === timelineDesc.length - 1}]"
        v-for="(item, index) in timelineDesc" :key="index">
        <div class="u-tail"></div>
        <div class="u-dot1" v-if="index % 2 != 0"></div>
        <div class="u-dot" v-else></div>
        <!-- <div class="u-content">{{ item.desc || '--' }}</div> -->
        <div class="u-content" v-if="index % 2 != 0">
          <div class="div1">{{ item.time }} 年</div>
          <div class="div2">{{ item.desc }}</div>
        </div>
        <div class="u-content1" v-else>
          <div class="div1">{{ item.time }} 年</div>
          <div class="div2">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Timeline',
    props: {
      timelineDesc: { // 时间轴内容数组
        type: Array,
        default: () => {
          return []
        }
      },
      width: { // 时间轴区域总宽度
        type: Number,
        // default: 360
      }
    },
    data() {
      return {
        timelineDesc: [{
          desc: '测试测试测试测试',
          time: 2009,
        }, {
          desc: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
          time: 2010,
        }, {
          desc: '测试测试测试测试',
          time: 2012,
        }, {
          desc: '测试测试测试测试',
          time: 2013,
        }, {
          desc: '测试测试测试测试',
          time: 2014,
        }, {
          desc: '测试测试测试测试',
          time: 2015,
        }, {
          desc: '测试测试测试测试',
          time: 2016,
        }],
      }
    },
  }
</script>
<style lang="scss" scoped>
  // @blue: #1890ff;
  // @green: #52c41a;
  // @red: #f5222d;
  // @gray: rgba(0, 0, 0, .25);
  .m-timeline-area {
    width: 1230px;
    margin: 0 auto;
    // background-color: indianred;
    // margin-top: 800px;
    .m-timeline {
      // margin-left: 380px;
      .m-timeline-item {
        position: relative;
        padding-bottom: 30px;
        .u-tail {
          position: absolute;
          top: 10px;
          left: 620px;
          height: calc(100% - 10px);
          border-left: 2px solid #e8e8e8; // 实线
          // border-left: 2px dotted #e8e8e8; // 点线
          // border-left: 2px dashed #e8e8e8; // 虚线
        }
        .u-dot {
          position: absolute;
          left: 615px;
          width: 19px;
          height: 14px;
          background-image: url(../assets/img/img_zhixiang_you.png);
          background-size: 100% 100%;
        }
        .u-dot1 {
          position: absolute;
          left: 610px;
          // top: -4px;
          width: 19px;
          height: 14px;
          background-image: url(../assets/img/img_zhixiang_zuo.png);
          background-size: 100% 100%;
        }
        .u-content {
          width: 570px;
          position: relative;
          top: 0px;
          margin-left: 10px;
          word-break: break-all;
          word-wrap: break-word;
          line-height: 24px;
          // background-color: red;
          text-align: right;
          .div1 {
            font-size: 34px;
            font-family: PingFang-SC-Heavy;
            color: #415B76;
            margin-bottom: 51px;
            padding-top: 10px;
          }
          .div2 {
            font-size: 20px;
            font-family: PingFang-SC-Bold;
            line-height: 35px;
            color: #666666;
            background: #EFEFEF;
            padding: 55px 60px;
          }
        }
        .u-content1 {
          width: 570px;
          position: relative;
          top: 0px;
          left: 630px;
          margin-left: 25px;
          word-break: break-all;
          word-wrap: break-word;
          line-height: 24px;
          // background-color: blue;
          .div1 {
            font-size: 34px;
            font-family: PingFang-SC-Heavy;
            color: #415B76;
            margin-bottom: 51px;
            padding-top: 10px;
          }
          .div2 {
            font-size: 20px;
            font-family: PingFang-SC-Bold;
            line-height: 35px;
            color: #666666;
            background: #EFEFEF;
            padding: 55px 60px;
          }
        }
      }
      .last {
        .u-tail {
          display: none;
        }
      }
    }
  }
</style>