shopDetail.html
5.2 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_793738_ycnvxk1als.css">
<link href="../css/init.css" rel="stylesheet" type="text/css">
<link href="../css/shopDetail.css" rel="stylesheet" type="text/css">
<link href="../css/swiper.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/fontsize.js"></script>
</head>
<body>
<div class="warp">
<div class="item_list">
<!-- begin:数字轮播图 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../images/bpic01@2x.png"></div>
<div class="swiper-slide"><img src="../images/bpic01@2x.png"></div>
<div class="swiper-slide"><img src="../images/bpic01@2x.png"></div>
<div class="swiper-slide"><img src="../images/bpic01@2x.png"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- begin： 商品信息-->
<div class="detail_info">
<p class="detail_num">
<text class="original_price">
<text class="num">302</text>
<text class="symbol_icon">积分</text>
</text>
</p>
<p class="detail_txt1">百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪</p>
<p class="detail_txt2">奶油味夏威夷果200g/袋</p>
</div>
</div>
<div class="item_list">
<div class="detail_spec">
<p class="spec_txt1">
<text class="spec_title">规格</text>
<text class="spec_null">无规格</text>
<text class="spec_content">200g/袋</text>
</p>
<p class="spec_txt2 right">
<text class="iconfont icon-shenglve"></text>
</p>
</div>
</div>
<div class="item_list">
<div class="detail_message">
<div class="detail_minus">
<div class="line"></div>
<p>商品信息</p>
<div class="line"></div>
</div>
<img src="../images/ficon01@2x.png">
</div>
</div>
<!-- begin：底部按钮 -->
<div class="null_box"></div>
<div class="detail_fixd">
<div>20积分</div>
<div class="buy_btn">立即兑换</div>
</div>
</div>
<!-- begin:选择属性 -->
<div class="pro_bg">
<div class="property">
<div class="prop_close"><i class="iconfont icon-quxiao"></i></div>
<ul class="reco_public">
<li>
<div class="mmend_left"><img src="../images/apic01@2x.png"></div>
<div class="mmend_right">
<div class="mmend_num"><span>302</span>积分</div>
<div class="mmend_title shop_heig">百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯 白芝麻猪百草味 肉干肉脯
白芝麻猪</div>
<div class="mmend_name">奶油味夏威夷果200g/袋奶油味夏威夷果200g/袋奶油味夏威夷果200g/袋奶油味夏威夷果200g/袋奶油味夏威夷果200g/袋</div>
</div>
</li>
</ul>
<div class="pro_bom">
<h2>数量</h2>
<div class="pro_public right">
<p class="iconfont icon-jian"></p>
<input type="text" name="" value="1"/>
<p class="iconfont icon-jia"></p>
</div>
</div>
<div class="property_btn">确定</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-2.1.0.js "></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: '.swiper-pagination',
paginationType: 'fraction'
})
// 点击显示选择属性弹层
$('.detail_spec').click(function () {
$('.pro_bg').show();
})
$('.property .prop_close').on('click', function () {
$('.pro_bg').hide();
})
// 点击确定跳到支付订单页
$('.property_btn').on('click', function () {
window.location.href = 'affirm_order.html'
})
// 跳转购物车
$('.foot_cart').click(function () {
window.location.href = 'shopping.html'
});
// 跳转购物车
$('.join_btn').click(function () {
window.location.href = 'shopping.html'
});
// 跳转购物车
$('.buy_btn').click(function () {
window.location.href = 'affirm_order.html'
});
})
</script>
</body>
</html>