css实现竖向步骤条

2019/04/09 16:45
阅读数 1.7K
 <div class="contract-operate_recodeMain">
                <ul class="contract-operate_recode_date">
                  <li>
                    <span class="operate-date">2019-01-04 11:14:21</span>
                    <i></i>
                    <span class="operate-des">标准单次合同生成,待我方签章</span>
                  </li>
                  <li>
                    <span>2019-01-05 13:22:32</span>
                    <i></i>
                    <span>文件1我方签章 操作人:李莲</span>
                  </li>
                  <li>
                    <span>2019-01-08 16:02:02</span>
                    <i></i>
                    <span>文件1对方签章 操作人:王二</span>
                  </li>
                  <li>
                    <span>2019-01-10 10:11:21</span>
                    <i></i>
                    <span>文件1合同签署完成</span>
                  </li>
                </ul>
            </div>
 
 
 
css
 
.contract-operate_recode_date{
margin-left: 56px;
height:100%;
display:flex;
flex-direction: column;
justify-content: space-around;
li{
width:100%;
:nth-child(1){
width:119px;
height:16px;
font-size: 12px;
color: #333333;
}
:nth-child(2){
display: inline-block;
width: 8px;
height: 8px;
background-color: #D8D8D8;
border-radius: 50%;
margin: 0 50px;
&:after {
content: '';
display: block;
clear: both;
width: 1px;
height: 38px;
background-color: #D8D8D8;
margin: 8px auto;
}
}
:nth-child(3){
font-size: 12px;
color: #333333;
display: inline-block;
width: 170px;
height: 16px;
}
}
li:last-child {
:nth-child(1) {
font-size: 12px;
color: #09B9C1;
display: inline-block;
width: 119px;
height: 16px;
}
:nth-child(2) {
display: inline-block;
width: 8px;
height: 8px;
background-color: $c991;
border-radius: 50%;
&:after {
content: '';
display: none;
}
}
 
:nth-child(3) {
font-size: 12px;
color: $c991;
letter-spacing: 0;
display: inline-block;
width: 170px;
height: 16px;
}
}
}
}

 

 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部