iview的Timeline 时间轴居左显示

实现时间轴 Timellne 中时间戳居左显示

效果图

关键代码

<Timeline class="Timeline">
        <Timeline-item>
          <div class="year">
            2022-04-29 21:30
            <div class="state">进行中</div>
          </div>
          <p class="time">1976年</p>
          <p class="content">Apple I 问世</p>
        </Timeline-item>
        <Timeline-item>
          <div class="year">2022-04-29 21:30</div>
          <p class="time">1976年</p>
          <p class="content">Apple I 问世</p>
        </Timeline-item>
      </Timeline>

关键样式

.year {
  position: absolute;
  left: -110px;
  top: 1px;
}
.state {
  color: #409eff;
  text-align: right;
}
.Timeline {
  margin: 0 120px;
}

有时候解决方法就是这么简单

posted @ 2022-05-13 09:56  土小狗  阅读(526)  评论(0)    收藏  举报