ionic2中的訂單詳情頁面
這個訂單詳情頁面大概長這樣子:
html如下:
scss檔案:<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>
// 定義頂部標題欄樣式 .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中的訂單詳情頁面
這個訂單詳情頁面大概長這樣子: html如下: <ion-header no-shadow> <ion-navbar class="page-navbar"> <ion-title>訂單詳
Swift基礎之實現時間線列表效果(例如訂單詳情頁面的效果)
之前看到美團的訂單詳情頁面很有特色,於是決定模仿一下這個效果。其實就是簡單的 TableView 技巧,下面我們就來一步一步實現它。設計 TableViewCell 原型子類化一個新的 UITableViewCell + Xib,簡單拖拽幾個控制元件。我這裡那兩條線就沒用 A
使用DRF框架進行Web開發中詳情頁面的資訊展示
當我們登入後需要或者檢視自己的詳細資訊或者檢視某商品的詳細資訊時,我們要去寫一個關於詳細內容的檢視,配置好路由,編寫序列化器來顯示資訊。具體步驟如下 1:編寫檢視(如需檢視個人中心頁面) 注意檢視的所繼承的類 from rest_framework.permissions import
ionic2中 NavController導航元件用法方法關於頁面的導航
來自自己的理解和官網翻譯 1.NavController概述 NavController是導航控制器元件的基類,如Nav和Tab。 您可以使用導航控制器導航到應用程式中的頁面。 在基本
【EasyUI】EasyUI 列表頁面中選中一行row,將整行傳到詳情頁面
EasyUI 列表頁面中選中一行,將整行傳到詳情頁面 一、問題 EasyUI的列表頁面中可以選中一行,然後將通過row.屬性名,通過請求url後加&方法,來將行中的某一個屬性傳到詳情頁面;但是,如果我們想要傳遞整行資料到第二個頁面,這裡該怎麼做呢
Ionic2中使用iframe製作一個頁面“瀏覽器”
目錄 前言 我們會遇到這樣的一個需求:像是在 Ionic2 中載入一個網頁,如:在Ionic2中載入一個H5頁面,頁面的內容可以為資訊的詳情或者活動詳情等等。那麼在Ionic2中就需要有這樣一個東西,用來載入H5頁面。在Android原生中有W
MVC新增訂單cshtml頁面
sin oval colspan group 聯系人 nova ice java mar 1 @model Lixise.HealthCloud.ServiceOrder.Models.ServiceOrderEdit 2 @using Lixise.Healt
轉::iOS 仿淘寶,上拉進入詳情頁面
skin memory 增加 方法 fin goto elf jsb gis 今天做的主要是一個模仿淘寶,上拉進入商品詳情的功能,主要是通過 tableView 與 webView 一起來實現的,當然也可根據自己的需要把 webView 替換成你想要的 1 //
PHP中獲取當前頁面的完整URL
str 獲取 頂級 參數 location pre referer top ati javascript實現: top.location.href 頂級窗口的地址 this.location.href 當前窗口的地址 PHP實現: #測試網址: h
ionic2中如何使用自動生成器
sqli 功能 速度 pes 方式 tool new app add ionic generator是命令行的功能,ionic2自動幫我們創建應用程序,從而節省了大量的時間,並增加我們的速度來開發一個項目的關鍵部分。 ionic generator使我們可以自動創建以下
(三十二)訂單管理-查詢訂單詳情
pos 查詢 oid item res ima 不用 close pro 查詢訂單詳情 點擊每一個訂單後面的訂單詳情,將該訂單的oid通過ajax傳遞到後臺查詢 步驟分析: 給按鈕添加事件 /store/WebCon
ios開發之--仿購物類詳情頁面數量添加小功能
具體實現 uibutton tag src img 分享圖片 with ext 中間 話不多說先上圖: 1,首先創建UI,給中間顯示數量的label添加一個tag值 2,具體實現代碼,綁定同一個事件 [cell.jianBtn addTarget:self act
最後一個頁面:構建電影詳情頁面
ons 基本上 webkit style 所有 idt for 換行 lur 筆記內容:最後一個頁面:構建電影詳情頁面 筆記日期:2018-02-02 電影搜索頁面構建 我們想要有一個搜索電影的功能,需要在電影資訊頁面頂部編寫一個搜索框,當我們的鼠標焦點位於該搜索框時,就
maven-eclipse 中index.html頁面亂碼
odin cli blog pos ips encoding glin mark nco maven-eclipse 中index.html頁面亂碼: pox.xml修改: <project> …… <properties>
在遊戲頁中添加頁面無法正常顯示
span layer post 出現問題 interval AR tran 層級 set 前段時間有這麽個需求,在遊戲頁添加個活動頁;最開始呢,把頁面寫好了,並在頁面中添加了遊戲的 iframe; 然後準備測試功能了;出現問題了,先是活動頁蓋在遊戲頁上,玩不了遊戲;再就
js獲取大表詳情頁面多個模塊相同的project_id
click border cti delete ear table region RM edi js頁面 $(function(){ 1. $(‘#project_id‘).val(project_id); --》此行代碼是前端傳過來獲取多個模塊的相同id,必不可少
在JavaScript中獲取當前頁面的滾動位置
scrollTop要獲取當前頁面的滾動條縱坐標位置,用: document.documentElement.scrollTop; 而不是: document.body.scrollTop; documentElement 對應的是 html 標簽,而 body 對應的是 body 標簽。 documentEl
ASP.NET MVC中如何實現頁面跳轉
pub ring 項目 再見 name ati 方法 技術 mod 1,最簡單的方式:超鏈接 以下分別是連接到HomeController控制器下的SharpL動作方法,以及百度首頁。代碼如下: 1 <a href="Home\SharpL">打開S
scrapy案例:爬取翼蜂網絡新聞列表和詳情頁面
model rap name lB htm nod meta http AR # -*- coding: utf-8 -*- import scrapy from Demo.items import DemoItem class AbcSpider(scrapy.Sp
運用反射從bean物件中取出屬性 頁面顯示list優化
最近有一個需求,優化頁面list下拉列表顯示和資料庫的查詢,在頁面顯示的物件list下拉框的值改為根據指定的欄位查詢,並且封裝到一個統一的LabelVO類中。 如何把查詢到的物件中需要的屬性名和值取出來放到LabelVO中是個問題,然後想到了用反射能不能解決,於是在網上查了一下,發現可以實現