<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>产品详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/mui.min.css?v=2016111701" />
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/new/css/iconfont.css?v=2017081001" />
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/icons-extra.css?v=2016111701"/>
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/new/css/style.css?v=2017081001" />
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/new/css/chanpin_details.css?v=2017081001" />
	<style>
		.color-list>button{margin: 0 10px 10px 0;}
		.color-list .blue{border:1px solid #ccc;padding: 12px 12px 12px 45px; background: url(//s.iamberry.com/tooth/new/images/shop/rent_blue_1.png) 5px center no-repeat;background-size:auto 80%;color:#999;}
		.color-list .blue.active{border:1px solid #59c0d9;color:#37bcdc;background-color: #eafafe;}
		.color-list .red{border:1px solid #ccc;padding: 12px 12px 12px 45px; background: url(//s.iamberry.com/tooth/new/images/shop/rent_red_1.png) 5px center no-repeat;background-size:auto 80%;color:#999;}
		.color-list .red.active{border:1px solid #ff8da9;color:#f8527b;background-color: #ffeef2;}
		.color-list .black{border:1px solid #ccc;padding: 12px 12px 12px 45px; background: url(//s.iamberry.com/tooth/new/images/shop/rent_black_1.png) 5px center no-repeat;background-size:auto 80%;color:#999;}
		.color-list .black.active{border:1px solid #a1a1a1;color:#565555;background-color: #edecec;}
	</style>
	<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
</head>

<body>
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>
<div class="mui-content">
	<div class="mui-segmented-control tab-with-chanpin-nav">
		<a class="mui-control-item mui-active" href="#item1" id="item1_qrcode" style="display: none">
			<span class="mui-tab-label">产品详情</span>
		</a>
		<a class="mui-control-item" href="#item2" id="item2_qrcode" style="display: none">
			<span class="mui-tab-label">优惠二维码</span>
		</a>
		<a class="mui-control-item" href="#item3" id="item3_qrcode" style="display: none">
			<span class="mui-tab-label">购买二维码</span>
		</a>
	</div>
	<div id="item1" class="mui-control-content mui-active" style="margin-top: 0px;">
		<div id="detail-slider" class="mui-slider">
			<!-- 产品轮播图 -->
			<div class="mui-slider-group mui-slider-loop" id="group-images-div"></div>
			<!-- 轮播图数量 -->
			<div class="mui-slider-indicator" id="active-div"></div>
		</div>

		<div class="food-tt">
			<div><font id="product-name-font">加载中...</font><span class="iconfont icon-baoyou cl-baoyou"></span>
			</div>
			<div class="share_wechat">
				<span class="iconfont icon-fenxiang1 ft-18"></span>
			</div>
		</div>
		<div class="price-box">
			<div class="shop-price"><span class="price-sp" id="product-price-span">¥0.0</span><s id="product-price-s">¥0.0</s><span class="del-s" id="product-access-span">1W人已购买</span></div>
		</div>

		<div class="chanpin-ditails-dic">
			<ul>
				<li class="color-list" id="product_details" style="display: none;">
					<button type="button" class="blue chanpin_details" proid="59" colorid="41">蓝色款</button><button type="button" class="red chanpin_details" proid="56" colorid="37">红色款</button><button type="button" class="black chanpin_details" proid="57" colorid="39">黑色款</button>
				</li>
				<!-- 产品参数图 -->
				<li id="product-param-img">
                            <span id="youhui_img">
							    <img src="//s.iamberry.com/tooth/new/images/2017-08-10-01.jpg" style="margin-bottom: 15px;"/>
                            </span>
				</li>
			</ul>
		</div>
		<div class="buy-footer">
			<div class="go_index">
				<img id="add_cart_logo_div" src="//s.iamberry.com/tooth/images/shop/logo.png" />
			</div>
			<div id="add-cart-div" >加入购物车</div>
			<div id="shopp-div" >立即购买</div>
		</div>
		<div class="cart_fixed go_gwc">
			<div class="iconfont icon-gouwuche"><span class="mui-badge">1</span></div>
		</div>
		<div class="return">
			<span onClick="gotoTop();return false;" class="mui-icon-extra mui-icon-extra-top"></span>
		</div>
	</div>
	<!-- 优惠二维码 -->
	<div id="item2" class="mui-control-content">
		<div class="mui-text-center">二维码功能</div>
		<ul style="margin:20px 0 0 20px;">
			<li class="mui-h5">1、用户扫描后，将会与你绑定返利关系</li>
			<li class="mui-h5">2、用户购买水机即赠送滤芯（t1 t2 t3 t4）各一支</li>
		</ul>
		<div>
			<div style="width: 60%;margin: 40px auto 0 auto;padding: 10px;border: 1px solid #55c0dc;">
				<img id="item2_img" width="100%" src="//s.iamberry.com/tooth/new/images/daili-2wm.png"/>
			</div>
		</div>
		<div class="mui-h5 mui-text-center" style="padding: 10px 0;">长按二维码保存本地</div>
	</div>
	<!-- 购买二维码 -->
	<div id="item3" class="mui-control-content">
		<div class="mui-text-center">二维码功能</div>
		<ul style="margin:20px 0 0 20px;">
			<li class="mui-h5">1、用户扫描后，将会与你绑定返利关系</li>
		</ul>
		<div>
			<div style="width: 60%;margin: 40px auto 0 auto;padding: 10px;border: 1px solid #55c0dc;">
				<img id="item3_img" width="100%" src="//s.iamberry.com/tooth/new/images/daili-2wm.png"/>
			</div>
		</div>
		<div class="mui-h5 mui-text-center" style="padding: 10px 0;">长按二维码保存本地</div>
	</div>



</div>
<div id="dalog_guanzhu" style="background-color: rgba(0,0,0,.5);position: fixed;width: 100%;height: 100%;left: 0;top: 0;bottom: 0;right: 0;z-index: 99;display: none;">
	<div style="position: absolute;width: 300px;left: 50%;top: 45%;-webkit-transform: translateX(-50%) translateY(-50%);">
		<div style="position: relative">
			<img width="100%" src="//s.iamberry.com/tooth/new/images/dalog_guanzhu.png"/>
			<div style="position: absolute;top: 35%;width: 50%;left: 25%;">
				<img width="100%" style="display: block;" src="//s.iamberry.com/tooth/images/system_qrcode.jpg" />
				<div style="text-align: center;font-size: 12px;color: #999;">长按二维码识别关注</div>
				<div style="text-align: center;">
					<button type="button" style="width:90%;margin-top: 10px;color: #999;;" id="close_dalog">下次关注</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="//s.iamberry.com/tooth/js/mui.min.js?v=2016111701"></script>
<script src="//s.iamberry.com/tooth/js/shop/main.js?v=2016111701"></script>
<script src="//s.iamberry.com/tooth/js/jquery-2.1.1.min.js"></script>
<script src="//s.iamberry.com/tooth/js/shop/wechat-utils-1.0.js"></script>
<script src="//s.iamberry.com/tooth/new/js/page/chanpin_details.js?v=2016111701"></script>
<script type="text/javascript">
    var url = window.location.href;
    if (url.indexOf("isDisplay") != -1)
    {
        $("#product-price-span").hide();
        $("#product-price-s").hide();
        $("#add-cart-div").hide();
        $("#shopp-div").hide();
        $("#add_cart_logo_div").css("width", "30%");
    }
    mui('body').on('tap', '#close_dalog', function() {
        $("#dalog_guanzhu").hide();
        window.close();
    });
    $(document).on('tap', '.color-list>button', function() {
        $(this).addClass("active").siblings().removeClass("active");
    });
</script>
</body>
</html>