sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/html.css" />
		<style type="text/css">
			.text-white {
				color: #ffffff !important;
			}
			.aui-grid [class*=aui-col-] {
				padding: 0.75rem 0;
			}
			.aui-order-number {
				padding: 0.75rem;
			}
			.aui-card-list-user-name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			.aui-card-list-user-info {
				text-align: right;
				color: #f00;
				margin-top: 10px;
			}
			.aui-top {
				padding: 7px 2px;
				border-bottom: 1px solid #ddd;
				width: 96%;
				margin-left: 2%;
			}
			.aui-state {
				float: right;
			}
			.aui-top .aui-state {
				color: #1da02b;
			}
			.aui-top .aui-state, .aui-top .aui-time {
				font-size: 0.6rem;
			}
			#user-info {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
			}
			.aui-app-flex-text {
				display: flex;
				display: -webkit-flex;
			}
			.aui-app-flex-text div p {
				color: #fff !important;
				font-size: .6rem;
				padding: 3px;
			}
			.aui-app-flex-text div {
				flex: 1;
				border-right: 1px dotted #ddd;
				text-align: center;
				color: #fff !important;
				padding: 4px 0;
			}
			.aui-app-flex-text div:last-of-type {
				border-right: 0px dotted #ddd;
			}
			.aui-list .aui-list-item {
				border: 0px !important;
			}
			.aui-list .aui-list-item-inner {
				padding-right: 0px;
			}
			.zmq-img-store {
				width: 2rem !important;
				height: 2rem !important;
			}
			.aui-list-item-label-icon {
				width: 2.2rem !important;
				height: 2.2rem !important;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list.aui-list-noborder, .aui-list.aui-list-noborder .aui-list-item:last-child {
				    background-image : url(../../image/drawable-xhdpi/kehuinfo.png);
                    background-size: 100% 100%;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 顶部 -->
			<section class="aui-content" id="user-info">
				<div class="aui-list aui-media-list aui-list-noborder zmq-bg-info zmq-margin-vertical-5 zmq-width-90 zmq-padding-vertical-10">
					<div class="aui-list-item aui-list-item-middle">
						<div class="aui-media-list-item-inner ">
							<div class="aui-list-item-media" style="width:3rem;">
								<img src="../../image/drawable-xhdpi/store.png" class="aui-img-round" >
							</div>
							<div class="aui-list-item-inner">
								<div class="aui-list-item-text text-white aui-font-size-14 ">
									<em>张三</em>
									<div class="zmq-carInfo-right">
										鲁E211233
									</div>
								</div>
								<div class="aui-list-item-text text-white">
									<div>
										<i class="aui-iconfont aui-icon-mobile aui-font-size-12"></i>18777277722
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="aui-app-flex-text">
						<div>
							<p class="zmq-text-font-07">
								36.4万英里
							</p>
							<p>
								行驶里程
							</p>
						</div>
						<div>
							<p class="zmq-text-font-07">
								12条
							</p>
							<p>
								最近更换轮胎
							</p>
						</div>
						<div>
							<p class="zmq-text-font-07">
								2018-08-08
							</p>
							<p>
								最近消费时间
							</p>
						</div>
					</div>
				</div>
			</section>
			<!-- 这是车辆详情 -->
			<section class="aui-content top aui-margin-50 zmq-width-90" style="margin-top: 8rem">
				<div class="aui-card-list aui-border-t aui-border-b">
					<div class="aui-card-list-header aui-card-list-user">
						<div class="aui-card-list-user-avatar ">
							<img class="zmq-img-store" src="../../image/drawable-xhdpi/l2.png">
						</div>
						<div class="zmq-margin-level-10">
							<div class="zmq-text-msg zmq-text-font-07 zmq-margin-bottom-5">
								重汽豪沃牵引车
							</div>
							<div class="zmq-text-font-06 zmq-margin-top-5 zmq-text-explain">
								登记时间：2019-09-09 10：20
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- 各种记录 -->
			<div class="aui-content aui-margin-b-15 zmq-width-90 zmq-radius-10">
				<ul class="aui-list aui-list-in">
					<li class="aui-list-item" onclick="lookList()">
						<div class="aui-list-item-label-icon">
							<img src="../../image/drawable-xhdpi/112.png" />
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							车辆轮胎更换记录
						</div>
					</li>
					<li class="aui-list-item" onclick="lookList()">
						<div class="aui-list-item-label-icon" >
							<img src="../../image/drawable-xhdpi/115.png" />
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							车辆轮胎检查记录
						</div>
					</li>
					<li class="aui-list-item" onclick="lookList()">
						<div class="aui-list-item-label-icon">
							<img src="../../image/drawable-xhdpi/116.png" />
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							轮胎三包认证查询
						</div>
					</li>
				</ul>
			</div>
			<!-- 消费记录 -->
			<!--<section class="aui-content top">
			<div class="aui-card-list aui-border-t aui-border-b" v-for="i in list">
			<div class="aui-top">
			<span class="aui-time">最新时间：2019-09-09 10：20</span>
			<span class="aui-state">订单已完成</span>
			</div>
			<div class="aui-card-list-header aui-card-list-user">
			<div class="aui-card-list-user-avatar">
			<img src="../../images/store.png">
			</div>
			<div class="aui-card-list-user-name">
			<div class="aui-font-size-14">
			佳通轮胎Giti汽车轮胎 175/70R14C 95/93S Van600 适配新捷达/现代瑞纳/福瑞达
			</div>
			</div>
			<div class="aui-card-list-user-info">
			共2件商品，总149元
			</div>
			</div>
			</div>
			</section>-->
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/httpRequest.js"></script>
	<script type="text/javascript" src="../../script/vue_plugins.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var type = api.pageParam.type;
			new Vue({
				el : '#app',
				data : {
					type : type,
					list : [{}, {}, {}, {}, {}, {}, {}]
				},
				methods : {
					lookList : function() {
						api.openWin({
							name : 'record_win',
							url : 'record_win.html'
						});
					}
				},
				mounted : function() {
				}
			})
		}
		var lookList = function() {
			api.openWin({
				name : 'record_win',
				url : 'record_win.html'
			});
		}
	</script>
</html>