elementUI 时间线居左显示

elementUI 时间线居左显示

 

一、vue + elementUI

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

 

二、效果图

 

 

三、实现方法

　　关键代码：

    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in activities"
        :key="index"
        type="primary"
        color='#409EFF'
        :timestamp="item.timestamp"
        placement="top"
      >
      <div class="year">{{item.year}}</div>
      <div class="item">
        <div style="margin-bottom: 5px;">
          <span>{{item.address}}</span>
          <span>{{item.depart}}</span>
        </div>
        <div>
          <span>{{item.post}}</span>
          <span>{{item.level}}</span>
        </div>
      </div>
      </el-timeline-item>
    </el-timeline>

　　关键样式：

.year {
  color: #409EFF;
  position: absolute;
  left: -60px;
  top: 1px;
}
.item {
  color: #ffffff;
  border-left: 2px solid #fff;
  margin-left: 25px;
  font-size: 15px;
  span {
    padding-left: 10px;
  }

 

完整代码及示例 

 

~~ 完美解决问题