这些天，正在赶一个Ionic+phoneGap+Angular1.0的项目整改，具体涉及到的一个时间轴的开发。
首先贴出UI设计图，是图中的蓝色部分的开发：
备注：由于这部分开发其实跟普通的HTML和CSS开发并无两样，所以我的标题并没有具体写Ionic，应该说这是一种开发思路，供所有开发时间轴会出现断线，断点问题的程序员们参考。
一、第一种开发布局方法：
兼容性测试：
Android的不同机型（vivo，oppo，乐视，联想等出现不同程度的断线断点，且断线方向不一）
iOS的不同机型（iPhone 5s小屏手机出现断线断点，其余iOS机型完美适配）
分五部分写。五个div。
1. 左侧的圈，上右虚折线，购买，日期，这四个为一个div。
2. 左侧深色橘色直线，次日起息，这两个是一个div。
3. 中间的圈，中间的上右虚折线，起息，日期，这四个是一个div。
4. 右侧浅色橘色直线，50天锁定期，这两个是一个div。
5. 右侧的圈，上左虚折线，继续持有或债权转让，日期，这四个是一个div。
每个div内部的元素上下居中对齐都是使用绝对定位，没有兼容性问题。而div之间的衔接上，用的是left具体px直，长度用百分比等等，就会出现兼容性问题。
二、第二种开发布局方法：
兼容性测试：Android的所有机型完美适配；iOS的所有机型完美适配。☺
布局思路：
一根浅色橘色的直线从最左到最右，90%的长度比。
（1）一根深色橘色的直线从最左到中间，用120px。在这跟深色橘色直线上加两个左右的div，一个左圈、虚线、文字；一个右圈、虚线、文字；且圈，用3px的边框，和白色的背景即可。次日起息的文字也可以对齐。
（2）一根透明色的直线从最左到最右，100%，一个右圈、虚线、文字。50天锁定期，使用换算66%写30天锁定期。
代码精髓如下：
HTML:
<div class="new_timeLine_box">
<div class="new_middle_box">
<div class="new_left_box">
<div class="new_left_circle">
<div class="new_left_buy_text">{{product.buyDate | date:'yyyy-MM-dd'}}<br/>
<span style="color: #999; font-size: 0.8rem;">购买</span>
</div>
<div class="new_left_top_dotted"></div>
</div>
<div class="new_right_circle">
<div class="new_left_buy_text">{{product.interestDate | date:'yyyy-MM-dd'}}<br/>
<span style="color: #999; font-size: 0.8rem;">起息</span>
</div>
<div class="new_left_top_dotted"></div>
</div>
<div class="new_left_box_bottomText">次日起息</div>
</div>
<div class="new_right_box">
<div class="new_right_box_circle">
<div class="new_right_buy_text">{{product.outLockDate | date:'yyyy-MM-dd'}}<br/>
<span style="color: #999; font-size: 0.8rem;">继续持有或债权转让</span>
</div>
<div class="new_right_top_dotted"></div>
</div>
<div class="new_right_box_bottomText">{{product.period}}天锁定期</div>
</div>
</div>
</div>
CSS:
.new_middle_box{
width:90%;
height:4px;
background-color:#ffba99;
margin:0 auto;
}
.new_left_box{
float: left;
width: 120px;
height: 4px;
background-color: #fd6d28;
position: relative;
}
.new_left_circle{
width: 12px;
height: 12px;
border: 3px solid #fd6d28;
background-color: #fff;
border-radius: 6px;
position: absolute;
left:0;
z-index: 1;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.new_right_circle{
width: 12px;
height: 12px;
border: 3px solid #fd6d28;
background-color: #fff;
border-radius: 6px;
position: absolute;
right:0;
z-index: 1;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.new_left_top_dotted{
width: 30px;
height: 10px;
border: 1px dotted #ffba99;
margin-top: -14px;
margin-left: 3px;
border-right: none;
border-bottom: none;
}
.new_left_buy_text{
width: 100px;
font-size: 0.9rem;
position: absolute;
top: -55px;
color: #333;
}
.new_timeLine_box{
padding:30px 0;
}
.new_right_buy_text{
width: 140px;
font-size: 0.9rem;
position: absolute;
top: -55px;
right: 0;
text-align: right;
color: #333;
white-space: nowrap;
}
.new_right_top_dotted{
width: 30px;
height: 10px;
border: 1px dotted #ffba99;
border-left: none;
border-bottom: none;
position: absolute;
top: -14px;
right: 3px;
}
.new_right_box{
float: right;
width: 100%;
height: 4px;
background-color: transparent;
position: relative;
top:-4px;
}
.new_right_box_circle{
width: 12px;
height: 12px;
border: 3px solid #fd6d28;
background-color: #fff;
border-radius: 6px;
position: absolute;
right:0;
z-index: 2;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.new_left_box_bottomText{
position: absolute;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
color: #fd6d28;
font-size: 0.8rem;
top: 12px;
}
.new_right_box_bottomText{
position: absolute;
left: 66%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
color: #fd6d28;
font-size: 0.8rem;
top: 12px;
} 真的是完美哦！prefect哦！主要是思路很perfect！有没有很棒棒哦！~~~
