自定義 el-timeline 節點樣式

<div class="left-lineBox">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :class="{
                  eltimelinefocus: activity.type && activity.type == '01'
                }"
                size="normal"
              >
                <p class="timeline-name">{{ activity.name }}</p>
                <p class="timeline-content">{{ activity.content }}</p>
                <p class="timeline-content" v-if="activity.idea">
                  <span>意見: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                </p>
                <p class="timeline-content">{{ activity.timestamp }}</p>
              </el-timeline-item>
            </el-timeline>
          </div>

測試數據

      activities: [
        {
          content: "郭艾倫 (人事專員)",
          name: "提交",
          timestamp: "2018-04-12 20:46",
          idea: "一朵小紅花",
          color: "#4E97FF"
        },
        {
          content: "趙繼偉 (人事主管)",
          name: "複覈通過",
          timestamp: "2018-04-03 20:46",
          type: "01",
          color: "#4E97FF"
        },
        {
          content: "韓德君 (財務主管)",
          name: "複覈2",
          timestamp: "2018-04-03 20:46"
        },
        {
          content: "賀天舉 (董事長)",
          name: "審批",
          timestamp: "2018-04-03 20:46"
        }
      ],

半透明圓環 樣式

      .left-lineBox {
        margin-top: 12px;
        padding-left: 5px;
        .el-timeline {
          .el-timeline-item {
            padding-bottom: 1px !important;
          }
        }
        .el-timeline-item__node--normal {
          width: 7px;
          height: 7px;
          left: 2px;
        }
        .eltimelinefocus {
          .el-timeline-item__node {
            border: 2px solid hsla(0, 0%, 90%, 0.7);
            background-clip: content-box;
            background: rgba(78, 151, 255, 1);
          }
          .el-timeline-item__node--normal {
            left: 0px;
            width: 11px;
            height: 11px;
          }
        }
        .timeline-name {
          font-size: 13px;
          color: rgba(0, 0, 0, 0.7);
        }
        .timeline-content {
          color: rgba(0, 0, 0, 0.5);
          font-size: 12px;
          margin-top: 4px;
          .timeline-content__idea {
            color: rgba(0, 0, 0, 0.7);
          }
        }
      }

效果圖