ElementUl 时间线Timeline 的样式优化左右分布)

修改后样式：

 生效代码：

1.  
   // 右侧文本样式
2.  
   ::v-deep .el-timeline-item__content {
3.  
   margin-left: 40%;
4.  
   width: 60%;
5.  
   // height: 50px;
6.  
   padding-top: 5px;
7.  
   }
8.  
   // 时间样式
9.  
   ::v-deep .el-timeline-item__timestamp.is-bottom {
10.  
    position: absolute;
11.  
    top: 0;
12.  
    margin-left: 8%;
13.  
    }
14.  
    ::v-deep .el-timeline-item__timestamp {
15.  
    height: 25px;
16.  
    font-family: PingFangSC-Regular;
17.  
    font-size: 18px;
18.  
    font-weight: normal;
19.  
    font-stretch: normal;
20.  
    letter-spacing: 0px;
21.  
    color: #666666;
22.  
    }
23.  
    // 竖线样式
24.  
    ::v-deep .el-timeline-item__tail {
25.  
    position: absolute;
26.  
    top: 5px;
27.  
    left: 36%;
28.  
    height: 100%;
29.  
    width: 2px;
30.  
    opacity: 0.2;
31.  
    border-left: solid 3px #fd3c3c;
32.  
    }
33.  
    // 圆点样式
34.  
    ::v-deep .el-timeline-item__node--normal {
35.  
    left: 35%;
36.  
    width: 20px;
37.  
    height: 20px;
38.  
    background: url('../../img/radio-red.png') 0 0 /100% 100%;
39.  
    }

这篇好文章是转载于：学新通技术网