123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- .cip-timeline-item{
- &:last-child{
- .cip-timeline-item__tail{
- height: 0px;
- }
- }
- position: relative;
- padding-bottom: 20px;
- & .el-icon{
- position: absolute;
- }
- &__tail{
- position: absolute;
- left: 5px;
- height: calc(100% - 12px);
- top:12px;
- border-left: 2px solid #e6e6e6;
- }
- &__node{
- position: absolute;
- background-color: #e6e6e6;
- border-color: #e6e6e6;
- border-radius: 50%;
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- &__node--normal{
- width: 12px;
- height: 12px;
- }
- &__wrapper{
- position: relative;
- padding-left: 28px;
- top: -4px;
- }
- &__title{
- font-weight: 500;
- color:#333333;
- }
- &__desc{
- margin-top:8px;
- font-size:12px;
- font-weight:400;
- color:#666666;
- }
- &__timestamp{
- margin-top:8px;
- font-size:12px;
- font-weight: 400;
- color:var(--el-text-color-disabled)
- }
- }
- .right{
- & .el-icon{
- left: calc(100% - 11px);
- }
- .cip-timeline-item{
- &__tail{
- left: calc(100% - 6px);
- }
- &__wrapper{
- padding-right: 28px;
- text-align: right;
- }
- &__node{
- left: calc(100% - 11px);
- }
- }
- }
- .node{
- border-radius: 50%;
- background-color:var(--bgColor);
- }
- .node-dot{
- border-radius: 50%;
- background-color:white;
- border:1px solid var(--bgColor);
- &::after{
- content:'';
- display: block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: var(--bgColor);
- position: relative;
- }
- }
|