2019年12月26日
一.开发前准备
1.设计稿准备
2.各个页面的图片转变
ps：
1.图片目录可以放在根目录，通过拼音首字母进行模块区分也命名
2.页面类型建议用英文单词。
二.具体实现
1.底部menubar实现，
image.png
2.首页海报轮播图实现
image.png
3.首页火车票查询模块实现
3.1tab页签切换
image.png
3.2查询模块用from表单实现
image.png
实现参数传递和页面跳转
image.png
4.快捷导航设置
image.png
.icon {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item {
width: 25%;
text-align: center;
margin: 0 auto;
}
.menu {
font-size: 11px;
width: 100px;
}
四.火车票列表页面设计
1.动态计算高度
image.png
2.for循环加载
image.png
3.底部固定悬浮效果
image.png
image.png
五.个人中心页面设计
1.顶部蓝色背景区域设置
image.png
.amountBg {
height: 100px;
background-color: #5495e6;
display: flex;
flex-direction: row;
align-items: center;
}
.img {
margin-left: 20px;
}
.account {
width: 70%;
color: #fff;
margin-left: 10px;
}
.nav {
width: 15px;
color: #fff;
}
2.横向订单导航设计
image.png
image.png
.order {
width: 94%;
height: 70px;
display: flex;
flex-direction: row;
background-color: #fff;
border-radius: 5px;
text-align: center;
align-items: center;
position: absolute;
top: 90px;
margin-left: 3%;
}
.desc {
width: 25%;
font-size: 13px;
}
3.纵向列表导航设计，先设计一个，其他复用
image.png
.item {
background-color: #fff;
display: flex;
flex-direction: row;
height: 50px;
align-items: center;
}
.icon {
width: 50px;
text-align: center;
}
.itemName {
width: 40%;
font-size: 14px;
font-weight: bold;
}
.right {
width: 40%;
text-align: right;
}
六.抢票界面设计
1.写死导航
image.png
2.顶部提示
image.png
3.主要数据项
image.png
.opr {
width: 45px;
height: 45px;
border-radius: 45px;
background-color: #29ce73;
color: #fff;
line-height: 45px;
font-size: 13px;
text-align: center;
}
.start {
width: 45px;
height: 45px;
border-radius: 45px;
border: 1px solid red;
color: red;
line-height: 45px;
font-size: 13px;
text-align: center;
}
4.底部固定分享部分
image.png
image.png
