css实现竖向步骤条

 

                

                  

                    2019-01-04 11:14:21

                    

                    标准单次合同生成，待我方签章

                  

                  

                    2019-01-05 13:22:32

                    

                    文件1我方签章 操作人：李莲

                  

                  

                    2019-01-08 16:02:02

                    

                    文件1对方签章 操作人：王二

                  

                  

                    2019-01-10 10:11:21

                    

                    文件1合同签署完成

                  

                

            

 

 

 

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;

}

}

}

}

 

 

转载于:https://www.cnblogs.com/binglove/p/10677970.html