|
|
@@ -1,162 +1,162 @@
|
|
|
<!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="//s.iamberry.com/wateroPF/css/mui.min.css?v=2016111701" />
|
|
|
- <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/iconfont.css?v=2017081001" />
|
|
|
- <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/icons-extra.css?v=2016111701"/>
|
|
|
- <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/style.css?v=2017081001" />
|
|
|
- <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
|
|
|
- </head>
|
|
|
+<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="//s.iamberry.com/wateroPF/css/mui.min.css?v=2016111701" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/iconfont.css?v=2017081001" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/icons-extra.css?v=2016111701"/>
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/style.css?v=2017081001" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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(http://s.iamberry.com/wateroPF/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="http://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>
|
|
|
- 加载中...
|
|
|
- </div>
|
|
|
+<body>
|
|
|
+<div class="loading-bg">
|
|
|
+ <div class="mui-loading">
|
|
|
+ <div class="mui-spinner">
|
|
|
+ </div>
|
|
|
+ 加载中...
|
|
|
+ </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="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 class="food-tt">
|
|
|
+ <div><font id="product-name-font">加载中...</font><span class="iconfont icon-baoyou cl-baoyou"></span>
|
|
|
</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 class="share_wechat">
|
|
|
+ <span class="iconfont icon-fenxiang1 ft-18"></span>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="chanpin-ditails-dic">
|
|
|
- <ul>
|
|
|
- <li class="color-list">
|
|
|
- <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">
|
|
|
+ </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">
|
|
|
+ <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/wateroPF/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="http://s.iamberry.com/wateroPF/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>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="buy-footer">
|
|
|
+ <div class="go_index">
|
|
|
+ <img id="add_cart_logo_div" src="http://s.iamberry.com/wateroPF/images/shop/logo.png" />
|
|
|
</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/wateroPF/new/images/daili-2wm.png"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mui-h5 mui-text-center" style="padding: 10px 0;">长按二维码保存本地</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/wateroPF/new/images/daili-2wm.png"/>
|
|
|
</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/wateroPF/new/images/daili-2wm.png"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mui-h5 mui-text-center" style="padding: 10px 0;">长按二维码保存本地</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/wateroPF/new/images/daili-2wm.png"/>
|
|
|
</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="/wateroPF/common/shop/images/dalog_guanzhu.png"/>
|
|
|
- <div style="position: absolute;top: 35%;width: 50%;left: 25%;">
|
|
|
- <img width="100%" style="display: block;" src="http://s.iamberry.com/wateroPF/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 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/wateroPF/new/images/dalog_guanzhu.png"/>
|
|
|
+ <div style="position: absolute;top: 35%;width: 50%;left: 25%;">
|
|
|
+ <img width="100%" style="display: block;" src="http://s.iamberry.com/wateroPF/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>
|
|
|
- <script src="//s.iamberry.com/wateroPF/js/mui.min.js?v=2016111701"></script>
|
|
|
- <script src="//s.iamberry.com/wateroPF/js/shop/main.js?v=2016111701"></script>
|
|
|
- <script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
|
|
|
- <script src="//s.iamberry.com/wateroPF/js/shop/wechat-utils-1.0.js"></script>
|
|
|
- <script src="/wateroPF/common/shop/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>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src="//s.iamberry.com/wateroPF/js/mui.min.js?v=2016111701"></script>
|
|
|
+<script src="//s.iamberry.com/wateroPF/js/shop/main.js?v=2016111701"></script>
|
|
|
+<script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
|
|
|
+<script src="//s.iamberry.com/wateroPF/js/shop/wechat-utils-1.0.js"></script>
|
|
|
+<script src="//s.iamberry.com/wateroPF/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>
|
