-
Notifications
You must be signed in to change notification settings - Fork 0
/
pro_info.html
executable file
·402 lines (400 loc) · 19.7 KB
/
pro_info.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html>
<head>
<title>产品详情</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body ontouchstart>
<!--主体-->
<div class="weui-content">
<!--产品详情-->
<div class="weui-tab">
<div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
<a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
<a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
<a class="weui-navbar__item proinfo-tab-tit" href="#tab3">评价</a>
</div>
<div class="weui-tab__bd proinfo-tab-con">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!--主图轮播-->
<div class="swiper-container swiper-zhutu">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="upload/zhutu01.jpg" /></div>
<div class="swiper-slide"><img src="upload/zhutu02.jpg" /></div>
<div class="swiper-slide"><img src="upload/zhutu03.jpg" /></div>
<div class="swiper-slide"><img src="upload/zhutu04.jpg" /></div>
<div class="swiper-slide"><img src="upload/zhutu05.jpg" /></div>
</div>
<div class="swiper-pagination swiper-zhutu-pagination"></div>
</div>
<div class="wy-media-box-nomg weui-media-box_text">
<h4 class="wy-media-box__title">俞兆林卫衣 男2017春新款运动休闲印花大码潮人卫衣卫裤加厚外套套装男</h4>
<div class="wy-pro-pri mg-tb-5">¥<em class="num font-20">296.00</em></div>
<p class="weui-media-box__desc">【2017春季全场2件8】春款薄绒休闲套头纯色印花连帽大码卫衣套装新款上新!!</p>
</div>
<div class="wy-media-box2 weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">优惠</span></div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<i class="yhq"><span class="label-text">优惠券</span></i>
<span class="promotion-item-text">满197.00减40.00</span>
</div>
<div class="promotion-message clear">
<i class="yhq"><span class="label-text">优惠券</span></i>
<span class="promotion-item-text">满197.00减40.00</span>
</div>
<div class="yhq-btn clear"><a href="yhq_list.html">去领券</a></div>
</div>
</div>
</div>
<div class="wy-media-box2 weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">尺码</span></div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">25</a></li>
<li><a href="javascript:;">30</a></li>
<li><a href="javascript:;">34</a></li>
<li><a href="javascript:;">40</a></li>
<li><a href="javascript:;">45</a></li>
<li><a href="javascript:;">50</a></li>
</ul>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">颜色</span></div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">黑色</a></li>
<li><a href="javascript:;">红色</a></li>
<li><a href="javascript:;">白色</a></li>
<li><a href="javascript:;">蓝色</a></li>
<li><a href="javascript:;">橘黄色</a></li>
<li><a href="javascript:;">绿色</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="wy-media-box2 txtpd weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">送至</span></div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text">北京</span>
<span class="promotion-item-text">大兴</span>
<span class="promotion-item-text">回龙观区</span>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">运费</span></div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text">免运费<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">商家</span></div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text">互利股份有限公司</span>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">提示</span></div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text"><p class="txt-color-ml">支持7天无理由退换货</p></span>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="weui-tab__bd-item ">
<div class="pro-detail">
<img src="upload/xq1.jpg" /><img src="upload/xq2.jpg" /><img src="upload/xq3.jpg" /><img src="upload/xq4.jpg" /><img src="upload/xq5.jpg" /><img src="upload/xq6.jpg" /><img src="upload/xq7.jpg" /><img src="upload/xq8.jpg" /><img src="upload/xq9.jpg" />
</div>
</div>
<div id="tab3" class="weui-tab__bd-item">
<!--评价-->
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary"><p>大叔的世界</p></div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star"><span class="real-star comment-stars-width5"></span></div>
<p class="weui-media-box__desc">面料不错,码数也正常 男朋友穿的很合适。</p>
<ul class="weui-uploader__files clear mg-com-img">
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary"><p>爱情海的事故</p></div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star"><span class="real-star comment-stars-width3"></span></div>
<p class="weui-media-box__desc">面料不错,码数也正常 男朋友面料不错,码数也正常 男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。</p>
<ul class="weui-uploader__files clear mg-com-img">
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary"><p>爱情海的事故</p></div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star"><span class="real-star comment-stars-width3"></span></div>
<p class="weui-media-box__desc">面料不错,码数也正常 男朋友面料不错,码数也正常 男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。</p>
<ul class="weui-uploader__files clear mg-com-img">
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary"><p>爱情海的事故</p></div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star"><span class="real-star comment-stars-width3"></span></div>
<p class="weui-media-box__desc">面料不错,码数也正常 男朋友面料不错,码数也正常 男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。</p>
<ul class="weui-uploader__files clear mg-com-img">
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)" onclick="window.location.reload('gallery.html')"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/ban2.jpg)" onclick="window.location.reload('gallery.html')"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)" onclick="window.location.reload('gallery.html')"></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary"><p>爱情海的事故</p></div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star"><span class="real-star comment-stars-width3"></span></div>
<p class="weui-media-box__desc">面料不错,码数也正常 男朋友面料不错,码数也正常 男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。</p>
<ul class="weui-uploader__files clear mg-com-img">
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./upload/pro3.jpg)"></li>
</ul>
</div>
</div>
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link list-more">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
<a href="javascript:;" class="promotion-foot-menu-items">
<div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
<p class="weui-tabbar__label">客服</p>
</a>
<a href="javascript:;" id='show-toast' class="promotion-foot-menu-items">
<div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
<p class="weui-tabbar__label">收藏</p>
</a>
<a href="shopcart.html" class="promotion-foot-menu-items">
<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
<div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
<p class="weui-tabbar__label">购物车</p>
</a>
<a href="javascript:;" class="weui-tabbar__item yellow-color open-popup" data-target="#join_cart">
<p class="promotion-foot-menu-label">加入购物车</p>
</a>
<a href="javascript:;" class="weui-tabbar__item red-color open-popup" data-target="#selcet_sku">
<p class="promotion-foot-menu-label">立即购买</p>
</a>
</div>
<div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
<div class="weui-popup__overlay" style="opacity:1;"></div>
<div class="weui-popup__modal">
<div class="modal-content">
<div class="weui-msg" style="padding-top:0;">
<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">成功加入购物车</h2>
<p class="weui-msg__desc">亲爱的用户,您的商品已成功加入购物车,为了保证您的商品快速送达,请您尽快到购物车结算。</p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="shopcart.html" class="weui-btn weui-btn_primary">去购物车结算</a>
<a href="javascript:;" class="weui-btn weui-btn_default close-popup">不,我再看看</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="selcet_sku" class='weui-popup__container popup-bottom' style="z-index:600;">
<div class="weui-popup__overlay" style="opacity:1;"></div>
<div class="weui-popup__modal">
<div class="toolbar">
<div class="toolbar-inner">
<a href="javascript:;" class="picker-button close-popup">关闭</a>
<h1 class="title">商品属性</h1>
</div>
</div>
<div class="modal-content">
<div class="weui-msg" style="padding-top:0;">
<div class="wy-media-box2 weui-media-box_text" style="margin:0;">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">尺码</span></div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">25</a></li>
<li><a href="javascript:;">30</a></li>
<li><a href="javascript:;">34</a></li>
<li><a href="javascript:;">40</a></li>
<li><a href="javascript:;">45</a></li>
<li><a href="javascript:;">50</a></li>
</ul>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">颜色</span></div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">黑色</a></li>
<li><a href="javascript:;">红色</a></li>
<li><a href="javascript:;">白色</a></li>
<li><a href="javascript:;">蓝色</a></li>
<li><a href="javascript:;">橘黄色</a></li>
<li><a href="javascript:;">绿色</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="order_info.html" class="weui-btn weui-btn_primary">立即购买</a>
<a href="javascript:;" class="weui-btn weui-btn_default close-popup">不,我再看看</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script src="lib/jquery-2.1.4.js"></script>
<script src="lib/fastclick.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
<script src="js/jquery-weui.js"></script>
<script src="js/swiper.js"></script>
<script>
$(".swiper-zhutu").swiper({
loop: true,
paginationType:'fraction',
autoplay:5000
});
</script>
<script>
$(function(){
$(".promotion-sku li").click(function(){
$(this).addClass("active").siblings("li").removeClass("active");
})
})
</script>
<script>
$(document).on("click", "#show-toast", function() {
$.toast("收藏成功", function() {
console.log('close');
});
})
</script>
<script>
$(document).on("open", ".weui-popup-modal", function() {
console.log("open popup");
}).on("close", ".weui-popup-modal", function() {
console.log("close popup");
});
</script>
<script>
$(function (){initTopHoverTree("tophov"+"ertree",30,10,10); })
</script>
<script>
function initTopHoverTree(hvtid, times, right, bottom) {
$("#" + hvtid).css("right", right).css("bottmo", bottom);
$("#" + hvtid).on("click", function () { goTopHovetree(times); })
$(window).scroll(function () {
if ($(window).scrollTop() > 268) {
$("#" + hvtid).fadeIn(100);
}
else {
$("#" + hvtid).fadeOut(100);
}
});
}
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
if (!!!times) {
$(window).scrollTop(0);
return;
}
var sh = $('body').scrollTop();//移动总距离
var inter = 13.333;//ms,每次移动间隔时间
var forCount = Math.ceil(times / inter);//移动次数
var stepL = Math.ceil(sh / forCount);//移动步长
var timeId = null;
function aniHovertree() {
!!timeId && clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function () { aniHovertree(); }, inter);
}
aniHovertree();
}
</script>
</body>
</html>