作者:萝莉控的小潴_515 | 来源:互联网 | 2023-09-25 14:33
这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。首先贴出UI设计图,是图中的蓝色部分的开发:备注:由于这部分
这些天,正在赶一个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:
{{product.buyDate | date:'yyyy-MM-dd'}}
购买
{{product.interestDate | date:'yyyy-MM-dd'}}
起息
次日起息
{{product.outLockDate | date:'yyyy-MM-dd'}}
继续持有或债权转让
{{product.period}}天锁定期
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!有没有很棒棒哦!~~~