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;
  }

 

完整代碼及示例 

 

~~ 完美解決問題