albinZhang-mui-ele
/
shop.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/takeaway.css"/>
		<link rel="stylesheet" type="text/css" href="css/shop.css"/>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-action-back mui-icon mui-icon-search mui-pull-right"></a>
			<h1 class="mui-title">老镇泰苏州灌汤包</h1>
		</header>

		<div class="mui-content">
			<div class="shop-div">
				<div class="shop-div-o" style="margin-top: -10px;">
					<div class="wm-list">
						<div class="wm-list-div">
							<div class="wm-list-div-l">
								<img src="images/logo.png" >
							</div>
							<div class="wm-list-div-r">
								<div class="wm-list-div-r-o">
									<div class="wm-list-div-r-o-l">
										<h4>韩国炸鸡专营店</h4>
									</div>
									<div class="wm-list-div-r-o-r">
										<h5> <span>¥</span><span class="big-txt">35</span>元起送</h5>
									</div>
								</div>
								<div class="wm-list-div-r-t">
									<div class="wm-list-div-r-t-l">
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys"></span>
										<span class="small-txt o-txt">4.5</span>
										<span class="small-txt">月售3522件</span>
									</div>
									<div class="wm-list-div-r-t-r">
										<span class="small-txt">免配送费</span>
									</div>
								</div>
								<div class="wm-list-div-r-tt">
									<span  class="small-txt">34分钟</span> <span  class="small-txt">1.5千米</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="shop-div-t">
					<div class="shop-div-t-nav punlic-clear-both">
						<a class="active-a">商品</a>
						<a>评价</a>
						<a>商家</a>
					</div>
					<!-- 商品 -->
					<div class="shop-div-t-div" style="display: block;">
						<div class="shop-div-list" >
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>

										</div>
									</div>
								</div>
							</div>
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>
										</div>
									</div>
								</div>
							</div>
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>
										</div>
									</div>
								</div>
							</div>
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>
										</div>
									</div>
								</div>
							</div>
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>
										</div>
									</div>
								</div>
							</div>
							<div class="wm-list-div border-buttom">
								<div class="wm-list-div-l">
									<img src="images/logo.png" >
								</div>
								<div class="wm-list-div-r">
									<div class="wm-list-div-r-o">
										<div class="wm-list-div-r-o-l">
											<h4>韩国炸鸡</h4>
										</div>
									</div>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
											<span class="small-txt o-txt">4.5</span>
											<span class="small-txt">月售3522件</span>
										</div>
									</div>
									<div class="wm-list-div-r-tt">
										<div class="shop-list-div-jg">
											<h5> <span>¥</span><span class="big-txt">35</span>元起送<span class="mui-icon mui-icon-plusempty mui-pull-right plus-icon"></span></h5>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="shop-car">
							<div class="shop-car-l">
								<span class="mui-icon mui-icon-paperplane fj-icon"></span>
								<span>¥<span>0</span></span>
							</div>
							<div class="shop-car-r">
								<span>¥<span>38</span>起送</span>
								<button>去付款</button>
							</div>
						</div>
					</div>

					<!-- 评价 -->
					<div class="shop-div-t-div">
						<div class="pj-t punlic-clear-both">
							<div class="pj-t-l">
								<h2 class="o-txt">4.2</h2>
								<p class>综合评分</p>
							</div>
							<div class="pj-t-r">
								<div class="wm-list-div-r-t">
									<div class="wm-list-div-r-t-l pj-xx">
										<span class="small-txt">服务态度</span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys"></span>
										<span class="small-txt o-txt">4.5</span>
									</div>
								</div>
								<div class="wm-list-div-r-t">
									<div class="wm-list-div-r-t-l pj-xx">
										<span class="small-txt">商品评分</span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
										<span class="mui-icon mui-icon-star-filled start-ys"></span>
										<span class="small-txt o-txt">4.5</span>
									</div>
								</div>

							</div>
						</div>


						<div class="pj-list">
							<h5 class="mui-content-padded">客户评价</h5>
							<div class="pj-list-div punlic-clear-both">
								<div class="pj-list-div-l">
									<img src="images/head.jpg" >
								</div>
								<div class="pj-list-div-r">
									<p><span>不会飞的鱼</span><span class="mui-pull-right">2016-03-25</span></p>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
										</div>
										<span class="small-txt" style="margin-left: 5px;color: #999;">30分钟送达</span>
									</div>
									<p>饭送的很快，很给力，下拆来饭送的很快，很给力，下拆来</p>
								</div>
							</div>
							<div class="pj-list-div punlic-clear-both">
								<div class="pj-list-div-l">
									<img src="images/head.jpg" >
								</div>
								<div class="pj-list-div-r">
									<p><span>不会飞的鱼</span><span class="mui-pull-right">2016-03-25</span></p>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
										</div>
										<span class="small-txt" style="margin-left: 5px;color: #999;">30分钟送达</span>
									</div>
									<p>饭送的很快，很给力，下拆来饭送的很快，很给力，下拆来</p>
								</div>
							</div>
							<div class="pj-list-div punlic-clear-both">
								<div class="pj-list-div-l">
									<img src="images/head.jpg" >
								</div>
								<div class="pj-list-div-r">
									<p><span>不会飞的鱼</span><span class="mui-pull-right">2016-03-25</span></p>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
										</div>
										<span class="small-txt" style="margin-left: 5px;color: #999;">30分钟送达</span>
									</div>
									<p>饭送的很快，很给力，下拆来饭送的很快，很给力，下拆来</p>
								</div>
							</div>
							<div class="pj-list-div punlic-clear-both">
								<div class="pj-list-div-l">
									<img src="images/head.jpg" >
								</div>
								<div class="pj-list-div-r">
									<p><span>不会飞的鱼</span><span class="mui-pull-right">2016-03-25</span></p>
									<div class="wm-list-div-r-t">
										<div class="wm-list-div-r-t-l">
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
											<span class="mui-icon mui-icon-star-filled start-ys"></span>
										</div>
										<span class="small-txt" style="margin-left: 5px;color: #999;">30分钟送达</span>
									</div>
									<p>饭送的很快，很给力，下拆来饭送的很快，很给力，下拆来</p>
								</div>
							</div>
						</div>

					</div>

					<!-- 商家 -->
					<div class="shop-div-t-div" >
						<div class="wm-list-div-r sj-tt" >
							<div class="wm-list-div-r-o">
								<div class="wm-list-div-r-o-l">
									<h4>韩国炸鸡</h4>
								</div>
							</div>
							<div>
								<div class="wm-list-div-r-t-l">
									<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
									<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
									<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
									<span class="mui-icon mui-icon-star-filled start-ys start-active"></span>
									<span class="mui-icon mui-icon-star-filled start-ys"></span>
								</div>
								<div >
									<span class="small-txt">月售<span>3200</span>单</span>
								</div>
							</div>
							<div class="right-icon">
								<span class="mui-icon mui-icon-star-filled"></span>
								<p>收藏</p>
							</div>
						</div>

						<div class="shop-sj-t">
							<div class="shop-sj-div">
								<span class="small-txt">起送价</span>
								<h4>39 <span  class="small-txt">元</span></h4>
							</div>
							<div class="shop-sj-div">
								<span class="small-txt">商家配送</span>
								<h4>0 <span  class="small-txt">元</span></h4>
							</div>
							<div class="shop-sj-div">
								<span class="small-txt">平均配送时间</span>
								<h4>39 <span  class="small-txt">分钟</span></h4>
							</div>
						</div>

						<div class="shop-sj-tt">
							<div class=" public-list-txt ">
								<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<a class="">
												商家信息
											</a>
										</li>
										<li class="mui-table-view-cell">
											<a class="">
												 韩国炸鸡专营店
											</a>
										</li>
										<li class="mui-table-view-cell">
											<a class="">
												 品类: 包子 馄饨 地方小吃
											</a>
										</li>
										<li class="mui-table-view-cell">
											<a class="">
												 地址： 上海浦东
											</a>
										</li>
										<li class="mui-table-view-cell">
											<a class="">
												 营业时间: 09:00~22:00
											</a>
										</li>
									</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()

			var oN = document.getElementsByClassName("shop-div-t-nav")[0];
			var oA = oN.getElementsByTagName('a')

			var oD = document.getElementsByClassName("shop-div-t-div");

			for (var a = 0; a < oA.length; a++) {
				oA[a].index = a;
				oA[a].onclick = function(){
					for (var b = 0; b < oD.length; b++) {
						oA[b].className=''
						oD[b].style.display = "none"
					}
					this.className='active-a'
					oD[this.index].style.display = "block"
				}
			}


		</script>
	</body>

</html>