vue 自定义时间线

最新推荐文章于 2023-08-03 11:15:38 发布

柚子、、

最新推荐文章于 2023-08-03 11:15:38 发布

阅读量477

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ZZHK666/article/details/118941572

版权

本文详细介绍了如何在Vue.js应用中创建一个自定义的时间线组件，包括组件的结构、样式设置以及时间点的动态渲染。通过实例代码，展示了如何根据数据动态生成时间线节点，并实现响应式布局，适配不同屏幕尺寸。

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


.layui-timeline {
  padding-left: 50%;
  padding-top:20px
}

.layui-timeline-item {
  position: relative;
  padding-bottom: 20px;
  margin-top:-12px;
}

li {
  list-style: none;
}

.layui-timeline-item:first-child::before {
  display: block;
}

.layui-timeline-item:last-child::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  z-index: 0;
  width: 0;

}

.layui-timeline-item::before {
  content: '';
  position: absolute;
  /* left: 5px; */
  top: 0;
  z-index: 0;
  width: 1px;
  height: 100%;
}

.layui-timeline-item::before,
hr {
  background-color: #569fff;
}

.layui-timeline-axis {
  position: absolute;
  left: -5px;
  top: 0;
  z-index: 10;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: #fff;
  color: #5FB878;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.layui-icon {
  font-family: layui-icon !important;
  font-size: 16px;
  font-style: normal;
}

.layui-timeline-content {
  padding-left: