CSS 流程处理的圆线拼接效果

先看效果图：

Paste_Image.png

当然这个效果是按横排列的，我们先看简单的html布局（图标是SVG图）：

<div class="content-line">
        <i class="icon-Processnode"></i><div class="follow-up-route"></div>
        <i class="icon-Processnode"></i><div class="follow-up-route"></div>
        <i class="icon-done"></i>
</div>
<div class="content-text">
        <span class="content-title">提交申请</span>
        <span class="content-title">银行处理中</span>
        <span class="content-title">已到账</span>
</div>
<div class="content-text-time">
        <span class="content-time">2016-03-24 08:00</span>
        <span class="content-time">2016-03-25 09:00</span>
        <span class="content-time">2016-03-26 10:00</span>
</div>

基本上简单的CSS样式是采用flex做布局，通过flex=1去做拉伸比例适配

.content-line{
        .flex-layout(center);
        .flex-vertical();
        color: #5FC423;
        margin-bottom: 10px;
        margin-left: 55px;
        margin-right: 55px;
}
.content-text, .content-text-time{
        .flex-layout(center);
        .flex-vertical();
        color: #5FC423;
        text-align: center;
}
.content-text-time{
        margin-bottom: 20px;
}
 .content-title{
        color: #333;
        font-size: 13px;
        flex: 1;
}
.content-time{
        color: #B1B1B1;
        font-size: 10px;
        flex: 1;
}

.follow-up-route{
        height: 1px;
        background: #5FC423;
        flex: 1;
}

因为用到了flex,所以把居中的flex抽了出来，工具css方法其实是这样的：

// 伸缩盒

.flex-layout(@align:center) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -moz-box-align:@align;
  -webkit-box-align:@align;
  -webkit-box-align: @align;
  -moz-box-align: @align;
  -ms-flex-align:@align;
  -webkit-justify-content: @align;
  -moz-justify-content: @align;
  justify-content: @align;

}

.flex-vertical() {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack:center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}