ElementUl 中时间线Timeline 的样式优化方案

Ashindn   发布时间:2024-05-29 16:35:59   作者:佚名   我要评论
这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

修改后样式:

 生效代码:

// 右侧文本样式
::v-deep .el-timeline-item__content {
  margin-left: 40%;
  width: 60%;
  //   height: 50px;
  padding-top: 5px;
}
// 时间样式
::v-deep .el-timeline-item__timestamp.is-bottom {
  position: absolute;
  top: 0;
  margin-left: 8%;
}
::v-deep .el-timeline-item__timestamp {
  height: 25px;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #666666;
}
// 竖线样式
::v-deep .el-timeline-item__tail {
  position: absolute;
  top: 5px;
  left: 36%;
  height: 100%;
  width: 2px;
  opacity: 0.2;
  border-left: solid 3px #fd3c3c;
}
// 圆点样式
::v-deep .el-timeline-item__node--normal {
  left: 35%;
  width: 20px;
  height: 20px;
  background: url('../../img/radio-red.png') 0 0 /100% 100%;
}

到此这篇关于ElementUl 中时间线Timeline 的样式优化的文章就介绍到这了,更多相关ElementUl 时间线样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • ElementUl 中时间线Timeline 的样式优化方案

    这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-05-29
  • css3中的var()函数详解

    在CSS3中,var()函数是一个用于插入CSS自定义属性(也称为CSS变量)的值的函数,它允许你在样式表中定义可重用的值,并在多个地方引用它们,从而使你的CSS更加灵活和可维护
    2024-05-21
  • echarts图表鼠标悬停时图例错位的解决方案

    当页面body拥有zoom属性之后,鼠标划过echarts图表时,触发位置就不正常,这篇文章主要介绍了echarts图表鼠标悬停时图例错位的解决方案,需要的朋友可以参考下
    2024-05-15
  • CSS user-select 属性(是否允许用户选中文本)

    user-select属性是css3规范中新增的一个功能,用于设置或检索是否允许用户选中文本,使用语法是“user-select:none |text| all | element”,其默认值是text,并且适用于除
    2024-05-05
  • css3实现四周线条环绕流动效果

    本文主要介绍了css3实现四周线条环绕流动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-21
  • css3中nth-child()的用法示例代码

    nth-child(n)是css3中的一种选择器,它的作用是匹配属于其父元素的第n个元素,不论元素的类型,这篇文章主要介绍了css3中nth-child()的用法示例代码,需要的朋友可以参考
    2024-01-19
  • CSS3调整背景图片大小的操作代码

    在CSS3中,如果想要调整背景图片的大小可以通过设置background-size属性进行设置,本文给大家介绍CSS3调整背景图片大小的操作代码,感兴趣的朋友一起看看吧
    2024-01-19
  • css3实现动画无限循环示例讲解

    要在CSS3中实现动画的无限循环,你可以使用animation 属性和 infinite 关键字,下面通过示例代码讲解css3实现动画无限循环的方法,感兴趣的朋友一起看看吧
    2023-12-19
  • CSS3 属性之transition过渡 与 transform动画示例代码

    CSS3 提供了很多强大的功能,使开发人员可以创建更加吸引人的视觉效果,而不需要依赖于 JavaScript 或 Flash,下面我们将详细介绍这两个属性的使用方法并给出代码示例,感
    2023-12-08
  • CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例,需要的朋友可以参考下
    2023-11-27

最新评论