ionic2中的订单详情页面

这个订单详情页面大概长这样子：

html如下：

<ion-header no-shadow><ion-navbar class="page-navbar"><ion-title>订单详情</ion-title></ion-navbar></ion-header><ion-content><section class="order-detail-header"><ion-row><ion-col width-33><ion-icon name="paper"></ion-icon></ion-col><ion-col width-67><h4>订单金额：<span>￥395</span></h4><p>订单号：201610260007xxxxxx</p></ion-col></ion-row></section><section class="block-item"><section class="block-item-content"><section class="block-item-header"><ion-icon name="cart"></ion-icon>订单信息</section><ion-list><ion-item><ion-row><ion-col width-33>订单号</ion-col><ion-col width-67>201610260007xxxxxx</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>业务类型</ion-col><ion-col width-67>xxx业务</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>提交时间</ion-col><ion-col width-67>2016-10-26 16:06:13</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>付款时间</ion-col><ion-col width-67>未支付</ion-col></ion-row></ion-item></ion-list></section></section><section class="block-item"><section class="block-item-content"><section class="block-item-header"><ion-icon name="card"></ion-icon>支付信息</section><ion-list><ion-item><ion-row><ion-col width-33>服务费</ion-col><ion-col width-67>￥120.00</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>代金券</ion-col><ion-col width-67>￥0.00</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>订单金额</ion-col><ion-col width-67>￥120.00</ion-col></ion-row></ion-item><ion-item><ion-row><ion-col width-33>支付金额</ion-col><ion-col width-67>￥120.00</ion-col></ion-row></ion-item></ion-list></section></section><div class="order-detail-btn"><button ion-button block round color="main-color">支付订单</button></div><div class="order-detail-btn"><button ion-button block round color="favorite">取消订单</button></div><div class="page-end-separator"></div>
</ion-content>

scss文件：

// 定义顶部标题栏样式
.page-navbar {padding-left: 1rem;padding-right: 0.3rem;color: white;@extend .one-line-ellipsis;// 后退按钮的样式.back-button.show-back-button {min-width: 0;margin-left: 0; padding-left: 0;ion-icon {margin-left: 0; padding-left: 0;}}.bar-button-icon-right ion-icon {padding-left: .2rem;}.toolbar-background {background-color: color('main-color');}.toolbar-title {color: white;font-weight: normal;}&.toolbar {//min-height: 4.9rem;min-height: 4.6rem;}span, ion-icon {color: white;}ion-icon {font-size: 1.8em;}
}
.header-ios { //设置ios标题栏高度.page-navbar.toolbar {min-height: 4rem;}
}.order-detail-header {background-color: #53515c;height: 7.5rem;ion-row {height: 100%;@extend .vertical-middle;ion-col:first-child {text-align: center;}ion-icon {font-size: 3.5rem;color: #A8A6B1;}h4, p {margin: 0.4rem 0;}h4 {color: white;font-size: 1.7rem;span {color: #4ecba9;}}p {color: #A8A6B1;}}
}.block-item {margin: 10px 0;.block-item-content {font-size: 1.4rem;background: #fff;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);display: block;overflow: hidden;.block-item-header {padding: 16px;font-size: 1.6rem;color: #222;border-left: 5px solid #2eb3fe;//border-bottom: 1px solid #dedede;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;ion-icon {margin-right: 16px;}}.item:last-child {border-bottom: none;}ion-list ion-col {margin: 0; padding: 0;}ion-col:last-child {text-align: right;color: #999;}}
}// 支付订单或取消订单的按钮
.order-detail-btn {padding: 0.4rem 1.8rem;
}

ionic2中的订单详情页面相关推荐

Flutter-防京东商城项目-订单列表、订单详情页面布局-45
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
界外篇：返回前端订单列表中的订单详情为null，如何去除，如何为空
在写项目中,有时候我们返回给前端的数据为null,比如: 按照需求,有的需要这样写,但是有的就不需要, 一.那么如果为null,如何不显示这项呢? 办法如下: 第一种方法: 需要在实体类是哪个加一个注 ...
从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转
一.目标上一次我们用Angular1.x完成了简单的口袋妖怪展示列表页面,现在我们想要了解口袋妖怪更多的信息,但是发现原有单行表格可能容纳不下口袋妖怪的所有信息,所以现在我们需要一个口袋妖怪详情界面 ...
mysql结算订单表到用户_Luffy之结算订单页面(订单模型表的创建,订单的生成,以及订单详情展示等)...
订单页面在前面我们已经构建了,购物车的页面,接下来到了结算页面 1.首先,在购物车页面点击去结算按钮时,我们需要做如下动作 .前端发送生成订单的请求,点击标签内触发事件 create_order t ...
淘淘商城第106讲——改造商品详情页面中的加入购物车板块
在上一讲中,我就说过,关于购物车模块,之前的京东和淘宝并不一样,之前的京东允许用户在没有登录的情况下就添加商品进购物车,而且加到购物车里面的商品可以一直保存着.其实这是将购物车信息写入到了Cookie ...
mysql订单详情的设计_订单功能模块设计与实现
在商城项目中,之前我们介绍了购物车功能模块的实现,商品加入到购物车之后,就是到购物车结算,然后显示购物车的商品列表,点击去结算,然后到了未提交前的订单列表, 点击提交订单后,生成此订单,返回订单的订单 ...
黑马淘淘商城第十二天购物车实现、订单确认页面展示
1. 课程计划第十二天: 1.购物车实现 2.订单确认页面展示 2. 购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展 ...
小红书商品详情API接口（商品详情页面数据接口）
小红书商品详情API接口(商品详情页面数据接口)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中,点击获取请求key和secr ...
Java Web 网络商城案例演示十五订单详情功能（提交订单支付界面）
订单详情功能(提交订单支付界面) 原理分析步骤实现: 1.准备工作:order_list.jsp当中修改链接提交当前订单编号 <a href="${pageContext.requ ...
Shop项目后台--4.所有订单的订单详情/admin/order/list.jsp
contrl+H 可以快速查找全部工程下,你所提高关键字的位置分析: 1.在list.jsp订单详情需要弹出层插件,插件代码有表示,触发按钮,弹出的内容,关闭按钮. AdminServlet 2.根 ...

ionic2中的订单详情页面

ionic2中的订单详情页面相关推荐

最新文章

热门文章