<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>产品详情</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no, minimal-ui" />
<link rel="shortcut icon" href="../favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content=”telephone=no,email=no” name=”format-detection” />
<link rel="stylesheet" href="../static/light7/css/light7.min.css">
<link rel="stylesheet" href="../static/swaper/css/swiper.min.css">
<link rel="stylesheet" href="../static/css/mobile.style.css">
</head>
<body>
	<div class="page" id="main">
		<header class="bar bar-nav">
			<a class="button button-link button-nav pull-left back"
				href="market.html" data-transition='slide-out'><span
				class="icon icon-left"></span>返回</a> <a href="cart.html"
				class="button button-link button-nav pull-right external"
				data-transition='slide-out'><span class="icon icon-cart"></span>&nbsp;&nbsp;
			</a>
			<h1 class="title">产品详情</h1>
		</header>
		<div class="content">
			<!-- 轮播图 -->
			<div class="card">
				<div class="card-content">
					<div class="swiper-container" id="_swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide"></div>
							<div class="swiper-slide"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 名称价格 -->
			<div class="card" id="_prodInfo"></div>

			<!-- 产品说明 -->
			<div class="card" id="prod-detail">
				<div class="card-header">
					商品说明 <a href="#prodmore" class="item-link item-content">
						<div class="item-inner">
							<div class="item-title">
								<span style="font-size: 15px; color: #444;">更多</span>
							</div>
						</div>
					</a>
				</div>
				<div class="card-content">
					<div class="card-content-inner" id="_info"></div>
				</div>
			</div>

			<div class="card">
				<div class="card-content">
					<div class="list-block">
						<ul>
							<li><a id="buySelBtn" href="#"
								class="item-link item-content">
									<div class="item-inner">
										<div class="item-title">商品选择</div>
									</div>
							</a></li>
						</ul>
					</div>
					<div class="content-block" style="padding-left:15px;">
						<b>
						<span id="_bstyle"></span>&nbsp;&nbsp;<span id="_bsize"></span>&nbsp;&nbsp;
						<span id="_bnum"></span></b>
					</div>
				</div>
				<div class="card-footer">
					<div class="content-block" style="width: 100%;">
						<a href="#" id="buyBtn"
							class="button button-big button-fill button-danger">立即购买</a>
					</div>
					<!-- <div class="content-block" style="width: 100%;">
						<div class="row">
							 <div class="col-50">
								<a href="#" id="add2cart"
									class="button button-big button-fill button-danger">加入购物车</a>
							</div>
							<div class="col-50">
								<a href="#" id="buyBtn"
									class="button button-big button-fill button-success">立即购买</a>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
	</div>
	<!-- About Product -->
	<div class="popup popup-about" id="item-list">
		<div class="content-block  grid-demo">
			<div class="row">
				<div class="col-40">
					<img id="_pic" src='' style="width: 75px; height: 75px;">
				</div>
				<div class="col-60">
					<span id="_pname"></span><br /> 单价：<span id="_price"
						style="font-size: 15px; color: red;"></span><span
						style="font-size: 15px; color: red;">&yen;</span>
				</div>
			</div>
		</div>

		<div class="card">
			<div class="card-header">样式选择</div>
			<div class="card-content">
				<div class="card-content-inner" id="styles"></div>
			</div>
		</div>
		<div class="card">
			<div class="card-header">选择尺寸</div>
			<div class="card-content">
				<div class="card-content-inner" id="sizes"></div>
			</div>
			<div class="card-footer">
				<span>数量：</span> <span> <input type="button" id="subBtn"
					class='btn-min' value="减-"> <input type="number"
					id="buyAmount" value="1"> <input type="button" id="addBtn"
					class='btn-min' value="加+">
				</span>
			</div>
		</div>
		<div class="card">
			<div class="card-content">
				<div class="card-content-inner">客户您好，暂时只支持<b>货到付款</b>及<b>到店付</b>方式</div>
			</div>
			<div class="card-footer">
				<div class="content-block" style="width: 100%;">
					<div class="row">
						<div class="col-50">
							<a href="#" id="selBtn"
								class="button button-big button-fill button-danger">确认</a>
						</div>
						<div class="col-50">
							<a href="#"
								class="button button-big button-fill button-success close-popup">返回</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 图文详情 -->
	<div class="page" id="prodmore">
		<header class="bar bar-nav">
			<a class="button button-link button-nav pull-left back" href="#main"
				data-transition='slide-out'><span class="icon icon-left"></span>返回</a>
			<h1 class="title">产品详情</h1>
		</header>
		<div class="content">
			<div class="buttons-row">
				<a href="#tab1" class="tab-link active button">详情</a> <a
					href="#tab2" class="tab-link button">评论</a>
			</div>
			<div class="content-padded">
				<div class="tabs">
					<!-- 图文详情 -->
					<div id="tab1" class="tab active"></div>
					<!-- 产品评论 -->
					<div id="tab2" class="tab"></div>
				</div>
			</div>
		</div>
	</div>
	<script src='../static/plugins/jquery/jquery-2.2.3.min.js'></script>
	<script src='../static/plugins/jquery/jquery.json.min.js'></script>
	<script src='../static/common/drain.mobile.js'></script>
	<script src='../static/light7/js/light7.min.js'></script>
	<script src='../static/light7/js/i18n/cn.js'></script>
	<script src="../static/swaper/js/swiper.min.js"></script>
	<script src="../static/plugins/artTemplate/js/template.js"></script>
	<!-- <script src="js/shoppingcart.js"></script> -->
	<script src="js/product.js"></script>

	<script type="text/html" id="swaperHtml">
		<div class="swiper-wrapper">
		{{each pics as pic}}
			{{if pic.type=='2'}}
			<div class="swiper-slide"><img src='{{pic.fpath}}'></div>	
			{{/if}}	
		{{/each}}
		</div>
	</script>
	<script type="text/html" id="prodHtml">
		<div class="card-header">{{name}}</div>
		<div class="card-content">
			<div class="card-content-inner">
				<span style='font-size:18px;color:red;'>{{price}}&yen;</span>
				<span style='color:#ccc;text-decoration:line-through'>{{orig}}&yen</span>
			</dic>
		</div>
		<div class="card-footer">
			<span>已售：{{amount}}件</span>
			<span>{{if freight==0}}免运费{{else}}运费：{{freight}}&yen;{{/if}}</span>
		</div>
	</script>
	<!-- 图文详情  -->
	<script type="text/html" id="picHtml">
	{{each pics as pic}}
		{{if pic.type=='3'}}
			<div class="card">
				{{if pic.name!=''}}
					<div class="card-header">{{pic.name}}</div>
				{{/if}}
				<div class="card-content">
					<div class="card-content-inner">
					<img src='{{pic.fpath}}' style="width:100%;">
					</div>
				</div>
			</div>
		{{/if}}	
	{{/each}}
	</script>
	<script type="text/html" id="styleHtml">
	    <a href="#" onclick="pointStyle(this)"  class="sel-span selected" alt="">默认分类</a>&nbsp;&nbsp;
	{{each styles as style}}
		<a href='#' onclick="pointStyle(this)" alt="{{style.pic}}" class="sel-span">{{style.name}}</a>&nbsp;&nbsp;
	{{/each}}
	</script>
	<script type="text/html" id="sizeHtml">
	{{each sizes as size}}
		<a href='#' onclick="pointSize(this)" class="sel-span">{{size.zname}}</a> &nbsp;&nbsp;
	{{/each}}
	</script>
</body>
</html>