当前位置: 主页 > 网页制作 > CSS >

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

时间:2024-06-20 21:14来源:互联网 作者:秩名 点击:
修改后样式: 生效代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 // 右侧文本样式 ::v-deep .el-timeline-item__content { margin-left : 40% ; width : 60% ; //

修改后样式:

 生效代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 右侧文本样式
::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 的样式优化的文章就介绍到这了

(责任编辑:阿里技术)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片