【15】MUI 仿拼多多待評價

阿新 • • 發佈：2018-11-09

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>待評價</title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/icons-extra.css" rel="stylesheet" />
		<style type="text/css">
			.Box {
				margin-bottom: 5px;
			}
			
			.BoxTop {
				height: 50px;
				width: 100%;
				background: white;
			}
			
			.BoxTopImg {
				width: 30px;
				height: 30px;
				float: left;
				margin: 10px 10px;
			}
			
			.BoxTopShopName {
				float: left;
				line-height: 50px;
				font-size: 13px;
			}
			
			.BoxTopRightIcon {
				line-height: 50px;
				font-size: 16px;
				color: black;
				padding-left: 5px;
			}
			
			.BoxTopRightStatus {
				line-height: 50px;
				font-size: 13px;
				color: black;
				padding-right: 10px;
				color: #E02D26;
			}
			
			.BoxTopRightStatus:hover {
				color: #E02D26;
 			}
			
			.BoxDetails {
				width: 100%;
				background: #F5F5F5;
			}
			
			.BoxDetailsImg {
				float: left;
			}
			
			.BoxDetailsCenter {
				float: left;
			}
			
			.BoxDetailsCenterName {
				color: black;
				font-size: 13px;
				margin-top: 10px;
				line-height: 20px;
				max-height: 60px;
				overflow: hidden;
			}
			
			.BoxDetailsCenterDesc {
				font-size: 13px;
				color: #A9A9A9;
				margin-top: 3px;
			}
			
			.BoxDetailsRight {
				float: left;
			}
			
			.BoxDetailsRightMoney {
				font-size: 14px;
				color: black;
				text-align: right;
				margin-right: 10px;
				margin-top: 10px;
			}
			
			.BoxDetailsRightCount {
				font-size: 13px;
				color: black;
				text-align: right;
				margin-right: 10px;
				color: #A9A9A9;
			}
			
			.BoxPay {
				width: 100%;
				background: white;
			}
			
			.BoxPayRight {
				height: 40px;
				padding-right: 10px;
			}
			
			.BoxPayLeft {
				padding-left: 10px;
				float: left;
				height: 40px;
				padding-right: 10px;
			}
			
			.BoxPayLeftImgRight {
				width: 32px;
				height: 32px;
				margin-top: 4px;
				border-radius: 50%;
			}
			
			.BoxPayLeftImgRightMargin {
				margin-right: -15px;
			}
			
			.BoxPayRightYF {
				font-size: 13px;
				color: black;
				line-height: 40px;
			}
			
			.BoxPayRightYF:hover {
				color: black;
			}
			
			.BoxPayRightMoney {
				font-size: 14px;
				color: black;
				line-height: 40px;
				padding-right: 5px;
			}
			
			.BoxPayRightMoney:hover {
				color: black;
			}
			
			.BoxPayRightSF {
				font-size: 13px;
				color: black;
				line-height: 40px;
				padding-right: 3px;
			}
			
			.BoxPayRightSF:hover {
				color: black;
			}
			
			.BoxPayRightIcon {
				color: #E02D26;
				font-size: 18px;
				line-height: 40px;
				padding-right: 5px;
			}
			
			.BoxPayRightIcon:hover {
				color: #E02D26;
			}
			
			.BoxFooter {
				width: 100%;
				background: white;
				height: 50px;
				border-top: 1px solid #EFEFF4;
			}
			
			.BoxFooterGoOrder {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				color: white;
				height: 40px;
				background: #E02D26;
				width: 90px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.BoxFooterCancelOrder {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				height: 40px;
				background: white;
				border: 1px solid #DDDDDD;
				width: 90px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.BoxFooterTimeOut {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				height: 40px;
				width: 50px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.footer {
				height: 60px;
				color: #A9A9A9;
				line-height: 60px;
				text-align: center;
				font-size: 13px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="Box">
				<div class="BoxTop">
					<img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
					<div class="BoxTopShopName">旋光家居專營店 </div>
					<a class="BoxTopRightIcon mui-icon mui-icon-arrowright" style=""></a>
					<a class="BoxTopRightStatus mui-pull-right" style="">待評價</a>
				</div>
				<div class="BoxDetails">
					<img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg">
					<div class="BoxDetailsCenter">
						<div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子 </div>
						<div class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥126</div>
						<div style="" class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥126</a>
						<a class="mui-pull-right BoxPayRightSF">實付:</a>
						<a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a>
					</div>
				</div>
				<div class="BoxFooter">
					<div class="BoxFooterGoOrder">立即評價</div>
					<div class="BoxFooterCancelOrder">再次購買</div>
					<div class="BoxFooterTimeOut">更多</div>
				</div>
			</div>

			<div class="Box">
				<div class="BoxTop">
					<img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
					<div class="BoxTopShopName">旋光家居專營店 </div>
					<a class="BoxTopRightIcon mui-icon mui-icon-arrowright" style=""></a>
					<a class="BoxTopRightStatus mui-pull-right" style="">待評價</a>
				</div>
				<div class="BoxDetails">
					<img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg">
					<div class="BoxDetailsCenter">
						<div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子 </div>
						<div class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥126</div>
						<div style="" class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥126</a>
						<a class="mui-pull-right BoxPayRightSF">實付:</a>
						<a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a>
					</div>
				</div>
				<div class="BoxFooter">
					<div class="BoxFooterGoOrder">立即評價</div>
					<div class="BoxFooterCancelOrder">再次購買</div>
					<div class="BoxFooterTimeOut">更多</div>
				</div>
			</div>

			<div class="Box">
				<div class="BoxTop">
					<img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
					<div class="BoxTopShopName">旋光家居專營店 </div>
					<a class="BoxTopRightIcon mui-icon mui-icon-arrowright" style=""></a>
					<a class="BoxTopRightStatus mui-pull-right" style="">待評價</a>
				</div>
				<div class="BoxDetails">
					<img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg">
					<div class="BoxDetailsCenter">
						<div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子 </div>
						<div class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥126</div>
						<div style="" class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥126</a>
						<a class="mui-pull-right BoxPayRightSF">實付:</a>
						<a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a>
					</div>
				</div>
				<div class="BoxFooter">
					<div class="BoxFooterGoOrder">立即評價</div>
					<div class="BoxFooterCancelOrder">再次購買</div>
					<div class="BoxFooterTimeOut">更多</div>
				</div>
			</div>

			<div class="Box">
				<div class="BoxTop">
					<img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
					<div class="BoxTopShopName">旋光家居專營店 </div>
					<a class="BoxTopRightIcon mui-icon mui-icon-arrowright" style=""></a>
					<a class="BoxTopRightStatus mui-pull-right" style="">待評價</a>
				</div>
				<div class="BoxDetails">
					<img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg">
					<div class="BoxDetailsCenter">
						<div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子 </div>
						<div class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥126</div>
						<div style="" class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥126</a>
						<a class="mui-pull-right BoxPayRightSF">實付:</a>
						<a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a>
					</div>
				</div>
				<div class="BoxFooter">
					<div class="BoxFooterGoOrder">立即評價</div>
					<div class="BoxFooterCancelOrder">再次購買</div>
					<div class="BoxFooterTimeOut">更多</div>
				</div>
			</div>
			<div class="footer">您已經沒有更多訂單了</div>
		</div>
		<script src="../../../js/mui.js"></script>
		<script type="text/javascript" src="../../../js/jquery-1.11.0.min.js"></script>
		<script>
			mui.init();
			var width = $(".BoxDetails").width();
			var height = width * 0.25 + 20;
			$(".BoxDetails").css("height", height);
			$(".BoxDetailsImg").css("width", width * 0.25).css("height", width * 0.25).css("margin", "10px");
			$(".BoxDetailsCenter").css("width", width * 0.55).css("height", height);
			$(".BoxDetailsRight").css("width", width * 0.20 - 20).css("height", height);

			//立即評價
			mui(".BoxFooter").on("tap", ".BoxFooterGoOrder", function() {
				mui.openWindow({
					url: "GoEvaluate.html",
					id: "GoEvaluate.html"
				})
			})
			//再次購買
			mui(".BoxFooter").on("tap", ".BoxFooterCancelOrder", function() {
				mui.alert("再次購買");
			})
			//更多 
			mui(".BoxFooter").on("tap", ".BoxFooterTimeOut", function() {
				mui.alert("更多");
			})
			//進入商品詳情
			mui(".Box").on("tap", ".BoxDetails", function() {
				mui.openWindow({
					url: "/tab-botton-subpage/File-tap-botton-subpage-1/DetailsItem.html",
					id: "DetailsItem.html"
				})
			})
			mui.plusReady(function() {
				// 獲取當前視窗物件
				var self = plus.webview.currentWebview();
				// 讀取傳遞過來的引數
				var index = 5;
				/**
				 * 獲取父視窗物件 
				 */
				var parent = self.parent();
				// 左滑事件
				document.addEventListener("swipeleft", function(event) {
					var angle = event.detail.angle;
					angle = Math.abs(angle);
					/**
					 * 控制滑動的角度，為避免誤操作，可自定義限制滑動角度；
					 */
					if(angle > 170 && angle < 185) {
						parentEvent(parent, index, "left");
					}
				});
				// 右滑事件
				document.addEventListener("swiperight", function(event) {
					var angle = event.detail.angle;
					angle = Math.abs(angle);
					/**
					 * 控制滑動的角度，為避免誤操作，可自定義限制滑動角度；
					 */
					if(angle < 10) {
						parentEvent(parent, index, "right");
					}
				});
			});

			/**
			 * 觸發父視窗自定義事件
			 * @param {Object} wvobj 目標視窗物件
			 * @param {Number} index 索引值
			 * @param {String} direction 方向
			 */
			function parentEvent(wvobj, index, direction) {
				/**
				 * 觸發自定義事件
				 * http://dev.dcloud.net.cn/mui/event/#customevent
				 */
				mui.fire(wvobj, "swipe_event", {
					direction: direction,
					index: index
				});
			}
		</script>
	</body>

</html>

【15】MUI 仿拼多多待評價

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【14】MUI 仿拼多多待收貨

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【13】MUI 仿拼多多待付款

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【17】MUI 仿拼多多退換/售後

點選此處：MUI仿拼多多總目錄退換/售後主頁 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

【16】MUI 仿拼多多評價詳情

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>立即評價</title> <meta name

【12】MUI 仿拼多多全部訂單（頂部選單欄，可左右滑動，webview模式）

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【11】MUI 仿拼多多賬號管理

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【10】MUI 仿拼多多個人中心

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

【04】MUI 仿拼多多商品詳情

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

【09】MUI 仿拼多多聊天

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,i

【開源】NodeJS仿WebApi路由

ole ati amt nbsp amd 使用 ise erp 一個用過WebApi或Asp.net MVC的都知道微軟的路由設計得非常好，十分方便，也十分靈活。雖然個人看來是有的太靈活了，team內的不同開發很容易使用不同的路由方式而顯得有點混亂。不過這不是重點，我在

【15】vuex2.0 之 modules

his 來看暴露方式 ets 我們 spa web space 　　vue 使用的是單一狀態樹對整個應用的狀態進行管理，也就是說，應用中的所有狀態都放到store中，如果是一個大型應用，狀態非常多， store 就會非常龐大，不太好管理。這時vuex 提供了另外一種方式

【15】group by子句與聚合函數

字段 min sum count() span bsp 學生空值查詢 1.group by簡介 -> 使用group by子句可以將數據分組-> 語法group by 字段-> 註意-> 查詢中只允許出現分組的字段或聚合函數-> 分組查詢中

Linux學習之路--http-2基礎設置及訪問限制【15】---20180108

first 配置特定 http modules rmi 目錄訪問控制可重復 als 一、HTTP軟件1、http服務器應用http服務器程序 httpd apache nginx lighttpd應用程序服務器 IIS .asp tomca

【15】ES6 for Humans: The Latest Standard of JavaScript: ES2015 and Beyond

amazon idt keywords order line padding star ise spa 【15】ES6 for Humans共148頁：目前看到：已經全部閱讀。亞馬遜地址：魔芋：總結：我先看的是阮一峰的在線書籍。這本書的內容很多都與之重復的。居然賣￥463

【15】雜記章節

jpg 設置 size cti orm pip init 如何區別 ont 一、如何區別相同模塊名的文件引入 # 對於相同的模塊的話，可以考慮放進兩個包裏面，但包是需要用init這個文件來做標識的 #__author:"吉勇佳" #date: 2018/10/

【ACM】刪數問題（待更）

【描述】鍵盤輸入一個正整數N，去掉其中任意S個數字後剩下的數字按原左右次序將組成一個新的正整數。程式設計對給定的N和S尋找一種方案使得剩下的數字組成的新數最小。（N不超過240位，N>S）【輸入】兩行，第一行：正整數N；第二行：正整數S。【輸出】n去掉的s個數字後組成的新的正整

【15】視覺化：初識資料視覺化

因為csdn不支援檔案直接顯示，寫ipynb檔案有些難受，所以先把檔案託管到我的github裡面，可從github瀏覽。首先將caffe的根目錄作為當前目錄，然後載入caffe程式自帶的小貓圖片，並顯示。圖片大小為360x480，三通道 import numpy as np impo

【ACM】家喻戶曉的中藥店（待更）

題目連結：http://acm.nuc.edu.cn/OJ/contest/show/43/1007 【問題描述】 long_xiao和const_hhh是一對恩愛的夫妻。他們在京城經營著一家中藥店，夫妻二人醫術精湛、古道熱腸，雖然年過花甲，身體依然硬朗。更重要的是，

Java23種設計模式【15】----》命令模式（command）

專案中用到的不多一、介紹通過抽象一個新的類，對發的請求和命令快取處理後（記錄日誌，記錄操作前狀態），再轉發給命令的執行者；例如：資料庫事物的底層就是命令模式二、結構三、開發中的場景四、類圖五、程式碼實現 1、真正的命令執行者（

【15】MUI 仿拼多多 待評價

相關推薦

【15】MUI 仿拼多多待評價