product_detail.html
11.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" name="viewport" />
<title>订单流程-商品详情</title>
<link rel="stylesheet" href="../css/style/common.css">
<link rel="stylesheet" type="text/css" href="../css/style/idangerous.swiper.css">
<link rel="stylesheet" href="../css/style/product_detail.css">
<!-- base seajs -->
<script type="text/javascript" src="http://static.dili7.com/static/newStatic/common/js/base/sea.js"></script>
<!-- base jquery -->
<script type="text/javascript" src="http://static.dili7.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script>
</head>
<body class="productDetail">
<div class="m-page">
<header class="m-header header-light">
<div class="head">
<a href="#" class="lt-bar m-icon icon-back">返回</a>
<h1>商品详情</h1>
<a href="#" class="rt-bar m-icon icon-more">更多</a>
</div>
</header>
<section class="m-content">
<div id="slider" class="swiper-container slider">
<div class="swiper-wrapper clearfix">
<div class="swiper-slide" style="background:url(http://img3.dili7.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
<div class="swiper-slide" style="background:url(http://img3.dili7.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
<div class="swiper-slide" style="background:url(http://img3.dili7.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
<div class="swiper-slide" style="background:url(http://img3.dili7.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
<div class="swiper-slide" style="background:url(http://img3.dili7.com/images/cms/99/60/ZGlsaTIvTTAwLzAwLzVCL3dLZ2NLRlIwZFZlQUw5bXpBQVNYanBzMGRvNDc5OQ==.png) center center no-repeat; background-size:cover;"></div>
</div>
<div class="page-contrl">
<span class="page">1/5</span>
<span class="m-icon icon-fav">收藏</span>
<span class="m-icon icon-scan">扫描</span>
</div>
</div>
<div class="summary">
<h3>山东白萝卜，物美价廉，产地山东寿光产品批发市场</h3>
<em>0.8元/斤</em>
</div>
<div class="step-price">
<ul class="m-step">
<li>
<span class="text">2.4元/斤</span>
<span class="desc">100斤起</span>
</li>
<li>
<span class="text">1.2元/斤</span>
<span class="desc">500斤起</span>
</li>
<li>
<span class="text">0.8元/斤</span>
<span class="desc">1000斤起</span>
</li>
</ul>
</div>
<ul class="position">
<li><span class="title">产地：</span><span class="text">中国山东青州市</span>
</li>
<li><span class="title">所在地：</span><span class="text">山东寿光市</span>
</li>
</ul>
<div class="shop">
<a href="shop_detail.html">
<img src="../temp/pic_hlb.jpg" alt="" class="cover">
<h3>寿光小溪蔬菜批发</h3>
<p>主营：蔬菜</p>
<div class="medal">
<span class="real-name"><i></i>实名认证</span>
</div>
</a>
</div>
<div class="tabs">
<ul class="m-segment">
<li class="on"><a href="#" class="text">商品详情</a>
</li>
<li><a href="#" class="text">商品评论</a>
</li>
</ul>
</div>
<div class="targets">
<div class="detail">
<table class="m-table">
<tbody>
<tr>
<th>商品编号</th>
<td>1029201111</td>
</tr>
<tr>
<th>上架时间</th>
<td>2014-12-25 22:09:20</td>
</tr>
<tr>
<th>形状</th>
<td>段圆形状</td>
</tr>
<tr>
<th>颜色</th>
<td>红色</td>
</tr>
</tbody>
</table>
<p class="m-separate"><span>继续拖动，查看图文详情</span>
</p>
<div class="desc">
萝卜，十字花科、萝卜属二年或一年生草本，直根肉质，长圆形、球形或圆锥形，外皮绿色、白色或红色；
<img src="../temp/pic_hlb.jpg" alt="萝卜">
</div>
</div>
<div class="comment m-hide">
<div class="m-stat">
<span class="rate"><em>98%</em><br>好评度</span>
<ul>
<li><span class="text">满意</span> <span class="progress"><span style="width:98%;"></span></span> <span class="percent">98%</span>
</li>
<li><span class="text">一般</span> <span class="progress"><span style="width:2%;"></span></span> <span class="percent">2%</span>
</li>
<li><span class="text">不满意</span> <span class="progress"><span style="width:0%;"></span></span> <span class="percent">0%</span>
</li>
</ul>
</div>
<ul class="m-list-text">
<li>
<span class="m-star"><span style="width:80%;"></span></span>
<span class="author">张三 2014-10-3</span>
<p>不错，物美价廉，萝卜相当新鲜！</p>
</li>
<li>
<span class="m-star"><span style="width:60%;"></span></span>
<span class="author">张三 2014-10-3</span>
<p>山东白萝卜，物美价廉！</p>
</li>
<li>
<span class="m-star"><span style="width:100%;"></span></span>
<span class="author">张三 2014-10-3</span>
<p>不错，物美价廉，萝卜相当新鲜！不错，物美价廉，萝卜相当新鲜！不错，物美价廉，萝卜相当新鲜！不错，物美价廉，萝卜相当新鲜！不错，物美价廉，萝卜相当新鲜！不错，物美价廉，萝卜相当新鲜！</p>
</li>
<li>
<span class="m-star"><span style="width:40%;"></span></span>
<span class="author">张三 2014-10-3</span>
<p>山东白萝卜，物美价廉！</p>
</li>
</ul>
<a href="comment_list.html" class="m-more">查看更多评论</a>
</div>
</div>
</section>
<footer class="m-footer">
<a href="shopping_list.html" class="m-icon icon-board shop-num"><i class="m-badge">2</i></a>
<a href="#product-buy" data-popup class="m-btn btn-warning">立即购买</a>
<a href="#product-buy" data-popup class="m-btn btn-success">加入采购单</a>
</footer>
</div>
<div class="product-buy-popup" id="product-buy">
<div class="head clearfix">
<a href="#product-buy" class="close" data-dismiss></a>
<ul class="m-table-view-old">
<li>
<img src="../temp/pic_hlb.jpg" alt="" class="pic">
<h3>0.8元/斤-2.4元/斤</h3>
<p>库存量：1000斤</p>
<p>最低采购量：100斤</p>
</li>
</ul>
</div>
<div class="content">
<p class="field">品种：</p>
<div class="area">
<span class="m-btn on">白萝卜</span>
<span class="m-btn">胡萝卜</span>
<span class="m-btn">青萝卜</span>
<span class="m-btn">紫萝卜</span>
<span class="m-btn disable">紫萝卜</span>
</div>
<!-- <p class="field">提货点：</p>
<div class="area">
<span class="m-btn on">山东寿光农产品物流园</span>
<span class="m-btn">四川聚合农产品</span>
</div> -->
<p class="field">采购数量：</p>
<div class="area">
<span class="m-input-number">
<span class="reduce"></span>
<input type="number" step="1" min="1" value="1">
<span class="add"></span>
</span>
</div>
<!-- <p class="field">为您推荐地利官方服务（可多选）：</p>
<div class="area">
<span class="m-btn on">保险预冷</span>
<span class="m-btn">理货包装</span>
<span class="m-btn">物流配送</span>
</div> -->
</div>
<div class="bottom"><a href="order_confirm.html" class="m-btn">确定</a>
</div>
</div>
<script type="text/javascript" src="../js/javascript/common/config.js"></script>
<script src="../js/javascript/common/swipe.js"></script>
<script>
seajs.use(['../js/javascript/common/popup', '../js/javascript/product/detail']);
</script>
</body>
</html>