自定义element-ui时间线

1.实现的效果图

 2.代码

<template>
  <!-- 审批组件 -->
  <div class="sku_sp">
    <span class="h4">审批信息</span>
    <el-timeline>
      <el-timeline-item
        class="timeline_item"
        v-for="(activity, index) in activities1"
        :color="colors(activity.publics)"
        :icon="action(activity.publics)"
        :key="index"
        :type="activity.type"
        :size="activity.size"
        :borderColor="activity.borderColor"
      >
        <el-card class="card_item" :style="{ background: activity.bgcolor }">
          <div class="card_item_box">
            <div class="left">
              <p class="p1">{{ activity.content }}</p>
              <p v-if="activity.type === 'success'">提交成功|自动跳转</p>
              <p v-else>请完成流程审批</p>
            </div>
            <div class="right">
              <span>{{ activity.timestamp }}</span>
              <br />&emsp;
              <span> {{ '审批人: ' + activity.name }}</span>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'sku-apv',
  data() {
    return {
      activities1: [
        {
          content: '流程1',
          bgcolor: '#D9F9F5',
          timestamp: '2018-04-12 20:46',
          // size: 'large',
          type: 'success',
          borderColor: '#D9F9F5',
          // icon: 'el-icon-success',
          name: '张三',
          publics: 'Y',
        },
        {
          content: '流程2',
          bgcolor: '#fff7f7',
          type: 'error',
          // icon: 'el-icon-error',
          timestamp: '2018-04-03 20:46',
          name: '李四',
          publics: 'R',
        },
        {
          content: '流程3',
          bgcolor: 'white',
          // icon: 'el-icon-document-sign',
          timestamp: '2018-04-03 20:46',
          name: '王五',
          publics: 'N',
        },
      ],
    }
  },
  computed: {},
  mounted() {},
  methods: {
    action(index) {
      if (index == 'Y') {
        return 'el-icon-check'
      } else if (index == 'R') {
        return 'el-icon-close'
      } else {
        return 'el-icon-document-sign'
      }
    },
    colors(index) {
      if (index === 'Y') {
        return '#0ed57d'
      } else if (index === 'R') {
        return '#f52f3e'
      } else {
        return '#2c68ff'
      }
    },
  },
  watch: {},
}
</script>
<style scoped lang="scss">
.sku_sp {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  box-shadow: 0 1px 4px 0 rgba(13, 46, 166, 0.02), 0 2px 12px 0 rgba(13, 46, 166, 0.04),
    0 2px 6px 0 rgba(13, 46, 166, 0.02);
  border: 0;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 10px 0;
  // margin-bottom: 10px;
  // el-alert
  .h4 {
    margin: 20px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(38, 38, 38);
    display: block;
  }

  // 下 。。。。。。。。。。。。。。。。。。。。。。
  // .el-timeline {
  .timeline_item {
    position: relative;
    ::v-deep .el-timeline-item__tail {
      position: absolute;
      top: 20px;
      left: 30px;
      height: 138px;
      border-left: 1px dashed #d9d9d9;
    }
    ::v-deep .el-timeline-item__icon {
      font-size: 20px;
      color: white;
      position: absolute;
      top: 6px;
      left: 5px;
    }
    ::v-deep .el-timeline-item__node--normal {
      position: absolute;
      top: 19px;
      left: 15px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 0;
    }

    .card_item {
      // background: rgba(217, 249, 245, 1);
      border-radius: 2px;
      opacity: 30;
      width: 94%;
      margin: 20px auto;
      height: 80px;
      box-sizing: border-box;
      .card_item_box {
        display: flex;
        justify-content: space-between;
        .left {
          .p1 {
            width: 112px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 7px;
            border: 0;
          }
        }
      }
    }
  }
  // }
}
</style>