elementui实现横向时间轴_横向时间轴（进度条）

最新推荐文章于 2024-04-24 17:39:21 发布

MaxwellGeng

最新推荐文章于 2024-04-24 17:39:21 发布

阅读量1.1w

点赞数

文章标签： elementui实现横向时间轴

本文链接：https://blog.csdn.net/weixin_30341121/article/details/112044324

版权

这篇博客详细介绍了如何使用ElementUI组件库来实现一个横向的时间轴，并且包含了进度条的功能。通过CSS样式设置，如`.timeline_box`, `.timeline_container` 和 `.timeline_inner`等，以及JavaScript代码动态调整进度，实现了美观且实用的时间轴效果。读者可以学习到如何自定义样式和交互以创建类似的时间轴组件。" 103822660,7361412,Spring Boot日志配置详解：Logback,"['Spring框架', '日志管理', 'Spring Boot配置']

摘要由CSDN通过智能技术生成

10 .timeline_box {11 width: 100%;12 height: 8rem;13 /*position: relative;*/

14 }15

16 .timeline_container {17 height: 5.6rem;18 border: 1px solid transparent;19 }20

21 .btn-shadow {22 -moz-box-shadow: 0px 0px 6px #20A0FF;23 -webkit-box-shadow: 0px 0px 6px #20A0FF;24 box-shadow: 0px 0px 6px #20A0FF;25 }26 /*线条*/

28 .timeline_inner {29 display: block;30 width: 60%;31 height: 0rem;32 border: 1px solid transparent;33 margin: 3.5rem auto 0;34 position: relative;35 }36

37 .timeline {38 /*height: 1px;39 background-color: #20A0FF;40 margin: 1.5rem auto;41 overflow: visible;*/

42 position: relative;43 }44

45 .lines {46 height: 1px;47 background-color: #20A0FF;48 margin: 0rem auto;49 overflow: visible;50 position: absolute;51 width: calc(100% +5px);52 }53

54 .timeline .