Element UI之 Timeline时间线样式

最新推荐文章于 2025-05-30 09:06:31 发布

熟悉有你的地方

最新推荐文章于 2025-05-30 09:06:31 发布

阅读量1w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Element-Ul

本文链接：https://blog.csdn.net/qq_43519782/article/details/114095119

Element-Ul 专栏收录该内容

6 篇文章

订阅专栏

博客提及需求，涉及Element UI提供的Timeline时间线，并给出其官网链接https://element.eleme.cn/#/zh-CN/component/timeline ，与前端开发相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
在这里插入图片描述

Element UI提供的：
Timeline时间线：https://element.eleme.cn/#/zh-CN/component/timeline
在这里插入图片描述

// 时间线
/deep/ .el-timeline {
  // 每一个item
  /deep/ .el-timeline-item {
    //   线
    /deep/ .el-timeline-item__tail {
      border-left: 2px solid #28567f;
    }
    // 圆点颜色
    /deep/ .el-timeline-item__node {
      background-color: rgb(72, 147, 255);
    }
    // 圆点大小与位置
    /deep/ .el-timeline-item__node--normal {
      left: -3px;
      width: 18px;
      height: 18px;
    }
    // 右边文字
    /deep/ .el-timeline-item__wrapper {
      // 标题
      /deep/ .el-timeline-item__content {
        color: #00e9ea;
      }
      //   内容
      /deep/ .el-timeline-item__timestamp {
        color: #8393b0;
      }
    }
  }
}