element的时间轴展示效果处理

效果图：

image.png

<template>
  <div class="material-tabs">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="操作日志" name="first">
        <div class="tabItem">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in logList" :icon="index==0?'el-icon-time':''"  :key="index" >
              <div style="margin-bottom:15px">
                <span>{{ item.fromStatusName }} ：<i style="margin-right:10px;display: inline-block;" class="el-icon-user"></i>{{item.operUserName}}</span>
              </div>
              <div style="line-height:30px">『{{ item.operTypeName }}』 {{ item.operOpinion }}</div>
              <div style="line-height:30px;color:#909399"><i class="el-icon-time" style="margin-right:10px;display: inline-block;"></i>{{ item.createTime }}</div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "LogList",
  props: {
    logList: {
      type: Array,
    },
  },
  data() {
    return {
      activeName: "first",

    };
  },

  methods: {
    handleClick() {},
  },
};
</script>

<style lang="less" scoped>
.material-tabs {
  height: 100%;
  /deep/ .el-tabs__header {
    margin: 0;
    border: none;
  }
  /deep/ .el-tabs__content {
    height: calc(~"80vh - 40px");
    border: 1px solid #dae0e6 !important;
    border-radius: 0 8px 8px 8px;
    background: #fff;
    .el-tab-pane {
      height: calc(~"80vh - 40px");
      overflow-y: auto;
    }
  }
  .tabItem {
    padding: 10px;
    /deep/ .el-timeline-item:nth-of-type(1){
      // font-size: 29px;
      .el-timeline-item__node{
       
      .el-timeline-item__icon{
        font-size:22px;
        background-color: #007fff!important;
        border-radius:50%;
      }
    }
   
 
    }
  }
}
</style>