Commit d02cd3bac2d9dffd687e96997fa7be7da9d4339a
1 parent
1072ea92
秒杀,拼单页面优化
Showing
4 changed files
with
396 additions
and
417 deletions
components/diy_pingd_buy/diy_pingd_buy.wxml
1 | 1 | <!--pages/wp/wp.wxml--> |
2 | 2 | <block wx:if="goods_array.length>0"> |
3 | - <!--拼单--> | |
4 | - <view class='top_p'> | |
5 | - <view class='t_left_p'></view> | |
6 | - <view class='t_ms_p'>拼单</view> | |
7 | - <view class='right_p' bindtap="go_to_pindlist"> | |
8 | - <image src="{{iurl}}/miniapp/images/icon-arrowdown.png"></image> | |
9 | - </view> | |
3 | + <!--拼单--> | |
4 | + <view class='top_p'> | |
5 | + <view class="top"> | |
6 | + <view class='t_left_p'></view> | |
7 | + <view class='t_ms_p'>拼单</view> | |
10 | 8 | </view> |
11 | - <!--商品展示--> | |
12 | - <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}"> | |
13 | - <view class='sp_p' wx:if="{{object.style==1}}"> | |
14 | - <swiper-item class="s_it" wx:for="{{goods_array}}" > | |
15 | - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" > | |
16 | - <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
17 | - <view class='one_p'> | |
18 | - <view class='sp_top_p'> | |
19 | - | |
20 | - <block wx:if="{{aitem.start_time>newTime}}"> | |
21 | - <span class='s_top_p' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span> | |
22 | - </block> | |
23 | - <block wx:if="{{aitem.start_time<newTime}}"> | |
24 | - <span class='s_top_p'>火热进行</span> | |
25 | - </block> | |
26 | - | |
27 | - <!-- <span class='s_top_p'>火热进行</span> --> | |
28 | - | |
29 | - <view class='s_img_p'> | |
30 | - <image src="{{iurl+aitem.original_img}}" | |
31 | - data-errorimg="goods_array[{{index}}][{{aind}}].original_img" | |
32 | - binderror="bind_bnerr3"></image> | |
33 | - </view> | |
9 | + <view class='right_p' bindtap="go_to_pindlist"> | |
10 | + <image src="{{iurl}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image> | |
11 | + </view> | |
12 | + </view> | |
13 | + <!--商品展示--> | |
14 | + <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}"> | |
15 | + <view class='sp_p' wx:if="{{object.style==1}}"> | |
16 | + <swiper-item class="s_it" wx:for="{{goods_array}}"> | |
17 | + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"> | |
18 | + <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
19 | + <view class='one_p'> | |
20 | + <view class='sp_top_p'> | |
34 | 21 | |
35 | - <!--<view class='s_foot_p'>--> | |
36 | - <!--<text>{{aitem.djs.hou}}天</text>--> | |
37 | - <!--<text>{{aitem.djs.hou}}时</text>--> | |
38 | - <!--<text>{{aitem.djs.min}}分</text>--> | |
39 | - <!--<text>{{aitem.djs.sec}}秒</text>--> | |
40 | - <!--</view>--> | |
22 | + <block wx:if="{{aitem.start_time>newTime}}"> | |
23 | + <span class='s_top_p' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span> | |
24 | + </block> | |
25 | + <block wx:if="{{aitem.start_time<newTime}}"> | |
26 | + <span class='s_top_p'>火热进行</span> | |
27 | + </block> | |
41 | 28 | |
42 | - <view class='sp_sj_p' wx:if="{{aitem.kttype==1}}">商家</view> | |
43 | - <view class='sp_sj_p' wx:if="{{aitem.kttype==2}}">会员</view> | |
44 | - <view class='sp_sj_p' wx:if="{{aitem.kttype==3}}">阶梯</view> | |
45 | - </view> | |
29 | + <!-- <span class='s_top_p'>火热进行</span> --> | |
46 | 30 | |
47 | - <view class='sp_wz_p'> | |
48 | - <view class='sp_wzi_p'>{{aitem.goods_name}}</view> | |
49 | - <view class='sp_jg_p'>¥{{aitem.price}}</view> | |
50 | - <!--<view class='sp_jgx_p'>¥{{aitem.market_price}}</view>--> | |
31 | + <view class='s_img_p'> | |
32 | + <image src="{{iurl+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> | |
33 | + </view> | |
51 | 34 | |
52 | - <view class="tuan_set_num"> | |
53 | - <view class="co-red2">{{aitem.ct_num}}人团</view> | |
35 | + <!--<view class='s_foot_p'>--> | |
36 | + <!--<text>{{aitem.djs.hou}}天</text>--> | |
37 | + <!--<text>{{aitem.djs.hou}}时</text>--> | |
38 | + <!--<text>{{aitem.djs.min}}分</text>--> | |
39 | + <!--<text>{{aitem.djs.sec}}秒</text>--> | |
40 | + <!--</view>--> | |
54 | 41 | |
55 | - <view wx:if="{{aitem.kttype==1 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去参团</view> | |
56 | - <view wx:if="{{aitem.kttype==2 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去开团</view> | |
57 | - <view wx:if="{{aitem.kttype==3 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去开团</view> | |
58 | - <view wx:if="{{aitem.goods_num<=aitem.buy_num }}" class="cantuan huise">已抢光</view> | |
59 | - </view> | |
60 | - </view> | |
61 | - </view> | |
62 | - </navigator> | |
63 | - </block> | |
64 | - </swiper-item> | |
42 | + <view class='sp_sj_p' wx:if="{{aitem.kttype==1}}">商家</view> | |
43 | + <view class='sp_sj_p' wx:if="{{aitem.kttype==2}}">会员</view> | |
44 | + <view class='sp_sj_p' wx:if="{{aitem.kttype==3}}">阶梯</view> | |
45 | + </view> | |
65 | 46 | |
66 | - </view> | |
67 | - </swiper> | |
68 | - <view class="sp2_p" wx:if="{{object.style==2}}"> | |
69 | - <block wx:for="{{goods_array}}" > | |
70 | - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" > | |
71 | - <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
72 | - <view class='one1_p'> | |
73 | - <block> | |
74 | - <view class="o1_img_p"> | |
75 | - <image src="{{iurl+aitem.original_img}}" | |
76 | - data-errorimg="goods_array[{{index}}][{{aind}}].original_img" | |
77 | - binderror="bind_bnerr3"></image> | |
78 | - <view class='sp_sj1_p' wx:if="{{aitem.kttype==1}}">商家</view> | |
79 | - <view class='sp_sj1_p' wx:if="{{aitem.kttype==2}}">会员</view> | |
80 | - <view class='sp_sj1_p' wx:if="{{aitem.kttype==3}}">阶梯</view> | |
81 | - </view> | |
82 | - </block> | |
47 | + <view class='sp_wz_p'> | |
48 | + <view class='sp_wzi_p'>{{aitem.goods_name}}</view> | |
49 | + <view class='sp_jg_p'>¥{{aitem.price}}</view> | |
50 | + <!--<view class='sp_jgx_p'>¥{{aitem.market_price}}</view>--> | |
83 | 51 | |
84 | - <view class="o1_right_p"> | |
52 | + <view class="tuan_set_num"> | |
53 | + <view class="co-red2">{{aitem.ct_num}}人团</view> | |
85 | 54 | |
86 | - <view class="sp_wzi_p">{{aitem.title}}</view> | |
87 | - <view class="co-red2"> | |
88 | - <text class="yituan_num">已团{{aitem.buy_num}}件</text> | |
89 | - {{aitem.ct_num}}人团 | |
90 | - </view> | |
91 | - <view class='sp_jg_p'>¥{{aitem.price}}</view> | |
92 | - <view class='sp_jgx_p'>¥{{aitem.market_price}}</view> | |
93 | - | |
94 | - <view class="o1_sj_p"> | |
95 | - <image class="time_img" src="/public/static/images/model/time.png"></image><block wx:if="aitem.djs.day>0">{{aitem.djs.day}}天</block>{{aitem.djs.hou}}时{{aitem.djs.min}}分{{aitem.djs.sec}}秒 | |
96 | - </view> | |
97 | - | |
98 | - <view wx:if="{{aitem.kttype==1 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去参团</view> | |
99 | - <view wx:if="{{aitem.kttype==2 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去开团</view> | |
100 | - <view wx:if="{{aitem.kttype==3 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去参团</view> | |
101 | - <view wx:if="{{aitem.goods_num<=aitem.buy_num }}" class="wo_p huise">已抢光</view> | |
102 | - | |
103 | - </view> | |
104 | - </view> | |
105 | - </navigator> | |
106 | - </block> | |
55 | + <view wx:if="{{aitem.kttype==1 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去参团</view> | |
56 | + <view wx:if="{{aitem.kttype==2 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去开团</view> | |
57 | + <view wx:if="{{aitem.kttype==3 && aitem.goods_num>aitem.buy_num }}" class="cantuan">去开团</view> | |
58 | + <view wx:if="{{aitem.goods_num<=aitem.buy_num }}" class="cantuan huise">已抢光</view> | |
59 | + </view> | |
60 | + </view> | |
61 | + </view> | |
62 | + </navigator> | |
107 | 63 | </block> |
64 | + </swiper-item> | |
65 | + | |
108 | 66 | </view> |
67 | + </swiper> | |
68 | + <view class="sp2_p" wx:if="{{object.style==2}}"> | |
69 | + <block wx:for="{{goods_array}}"> | |
70 | + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"> | |
71 | + <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
72 | + <view class='one1_p'> | |
73 | + <block> | |
74 | + <view class="o1_img_p"> | |
75 | + <image src="{{iurl+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> | |
76 | + <view class='sp_sj1_p' wx:if="{{aitem.kttype==1}}">商家</view> | |
77 | + <view class='sp_sj1_p' wx:if="{{aitem.kttype==2}}">会员</view> | |
78 | + <view class='sp_sj1_p' wx:if="{{aitem.kttype==3}}">阶梯</view> | |
79 | + </view> | |
80 | + </block> | |
81 | + | |
82 | + <view class="o1_right_p"> | |
83 | + | |
84 | + <view class="sp_wzi_p">{{aitem.title}}</view> | |
85 | + <view class="co-red2"> | |
86 | + <text class="yituan_num">已团{{aitem.buy_num}}件</text> {{aitem.ct_num}}人团 | |
87 | + </view> | |
88 | + <view class="money"> | |
89 | + <view class='sp_jg_p'>¥{{aitem.price}}</view> | |
90 | + <view class='sp_jgx_p'>¥{{aitem.market_price}}</view> | |
91 | + </view> | |
92 | + <view class="o1_sj_p"> | |
93 | + <image class="time_img" src="/public/static/images/model/time.png"></image> | |
94 | + <block wx:if="aitem.djs.day>0">{{aitem.djs.day}}天</block>{{aitem.djs.hou}}时{{aitem.djs.min}}分{{aitem.djs.sec}}秒 | |
95 | + </view> | |
96 | + | |
97 | + <view wx:if="{{aitem.kttype==1 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去参团</view> | |
98 | + <view wx:if="{{aitem.kttype==2 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去开团</view> | |
99 | + <view wx:if="{{aitem.kttype==3 && aitem.goods_num>aitem.buy_num }}" class="wo_p">去参团</view> | |
100 | + <view wx:if="{{aitem.goods_num<=aitem.buy_num }}" class="wo_p huise">已抢光</view> | |
101 | + | |
102 | + </view> | |
103 | + </view> | |
104 | + </navigator> | |
105 | + </block> | |
106 | + </block> | |
107 | + </view> | |
109 | 108 | |
110 | 109 | </block> |
111 | 110 | \ No newline at end of file | ... | ... |
components/diy_pingd_buy/diy_pingd_buy.wxss
1 | 1 | /* pages/wp/wp.wxss */ |
2 | - | |
2 | +.top{ | |
3 | + display: flex; | |
4 | + align-items: center; | |
5 | +} | |
3 | 6 | .top_p { |
4 | - width: 100%; | |
7 | + padding:0rpx 20rpx; | |
5 | 8 | background-color: white; |
6 | 9 | height: 70rpx; |
7 | 10 | line-height: 70rpx; |
... | ... | @@ -9,12 +12,12 @@ |
9 | 12 | text-align: left; |
10 | 13 | border-bottom: 2rpx solid #eee; |
11 | 14 | display: flex; |
15 | + justify-content: space-between; | |
16 | + align-items: center; | |
12 | 17 | } |
13 | 18 | |
14 | 19 | .right_p { |
15 | 20 | width: 30rpx; |
16 | - height: 100%; | |
17 | - margin-left: 580rpx; | |
18 | 21 | } |
19 | 22 | |
20 | 23 | .right_p image { |
... | ... | @@ -26,9 +29,7 @@ |
26 | 29 | width: 10rpx; |
27 | 30 | height: 38rpx; |
28 | 31 | background: #c4182e; |
29 | - margin-top: 18rpx; | |
30 | 32 | margin-right: 12rpx; |
31 | - margin-left: 20rpx; | |
32 | 33 | } |
33 | 34 | |
34 | 35 | .sp_p { |
... | ... | @@ -42,7 +43,7 @@ |
42 | 43 | .sp_p .sp_top_p { |
43 | 44 | height: 220rpx; |
44 | 45 | min-width: 30%; |
45 | - position: relative; | |
46 | + position: relative; | |
46 | 47 | } |
47 | 48 | |
48 | 49 | .sp_p .sp_top_p .s_img_p { |
... | ... | @@ -206,21 +207,24 @@ swiper { |
206 | 207 | } |
207 | 208 | |
208 | 209 | .sp2_p .one1_p { |
209 | - width: 100%; | |
210 | 210 | background-color: white; |
211 | 211 | height: 252rpx; |
212 | 212 | display: flex; |
213 | 213 | padding: 20rpx; |
214 | 214 | border-bottom: 6rpx#eee solid; |
215 | + align-items: center; | |
215 | 216 | } |
216 | 217 | |
217 | 218 | .sp2_p .one1_p .o1_img_p { |
218 | - width: 200rpx; | |
219 | - height: 240rpx; | |
220 | - margin-right: 24rpx; | |
219 | + width: 220rpx; | |
220 | + height: 220rpx; | |
221 | + margin-right: 25rpx; | |
221 | 222 | } |
222 | 223 | |
223 | -.o1_right_p{position: relative; width: 485rpx;} | |
224 | +.o1_right_p { | |
225 | + position: relative; | |
226 | + width: 465rpx; | |
227 | +} | |
224 | 228 | |
225 | 229 | .o1_right_p .sp_wzi_p { |
226 | 230 | font-size: 36rpx; |
... | ... | @@ -228,16 +232,16 @@ swiper { |
228 | 232 | width: 100%; |
229 | 233 | text-align: left; |
230 | 234 | padding: 4rpx 0; |
231 | - overflow: hidden; | |
232 | 235 | height: 48rpx; |
236 | + overflow: hidden; | |
237 | + white-space: nowrap; | |
233 | 238 | text-overflow: ellipsis; |
234 | 239 | } |
235 | 240 | |
236 | 241 | .o1_right_p .o1_sj_p { |
237 | 242 | height: 60rpx; |
238 | - margin-bottom: 10rpx; | |
239 | - font-size: 28rpx; | |
240 | - line-height: 40rpx; | |
243 | + font-size: 28rpx; | |
244 | + line-height: 40rpx; | |
241 | 245 | } |
242 | 246 | |
243 | 247 | .o1_right_p .o1_sj_p text { |
... | ... | @@ -269,8 +273,6 @@ swiper { |
269 | 273 | height: 100%; |
270 | 274 | background-color: blueviolet; |
271 | 275 | position: relative; |
272 | - top: -8rpx; | |
273 | - left: 0rpx; | |
274 | 276 | } |
275 | 277 | |
276 | 278 | .o1_right_p .wo_p { |
... | ... | @@ -280,11 +282,11 @@ swiper { |
280 | 282 | line-height: 60rpx; |
281 | 283 | color: white; |
282 | 284 | text-align: center; |
283 | - font-size: 26rpx; | |
285 | + font-size: 32rpx; | |
284 | 286 | border-radius: 14rpx; |
285 | - position: absolute; | |
286 | - right: 0; | |
287 | - bottom:46rpx; | |
287 | + position: absolute; | |
288 | + right: 0; | |
289 | + bottom: 46rpx; | |
288 | 290 | } |
289 | 291 | |
290 | 292 | .sp_sj_p { |
... | ... | @@ -295,12 +297,11 @@ swiper { |
295 | 297 | position: absolute; |
296 | 298 | bottom: 300rpx; |
297 | 299 | right: 0rpx; |
298 | - top: 0; | |
300 | + top: 0; | |
299 | 301 | width: 60rpx; |
300 | 302 | height: 60rpx; |
301 | 303 | text-align: center; |
302 | 304 | line-height: 60rpx; |
303 | - | |
304 | 305 | } |
305 | 306 | |
306 | 307 | .sp_sj1_p { |
... | ... | @@ -315,20 +316,48 @@ swiper { |
315 | 316 | text-align: center; |
316 | 317 | line-height: 60rpx; |
317 | 318 | } |
318 | -.tuan_set_num{ | |
319 | - display: flex;justify-content: space-between; font-size: 28rpx; | |
319 | + | |
320 | +.tuan_set_num { | |
321 | + display: flex; | |
322 | + justify-content: space-between; | |
323 | + font-size: 28rpx; | |
324 | +} | |
325 | + | |
326 | +.tuan_set_num .co-red2 { | |
327 | + color: #b2aea8; | |
328 | + font-size: 26rpx; | |
329 | +} | |
330 | + | |
331 | +.tuan_set_num .cantuan { | |
332 | + background: #c4182e; | |
333 | + color: #fff; | |
334 | + padding: 4rpx 10rpx; | |
335 | + border-radius: 5rpx; | |
320 | 336 | } |
321 | 337 | |
322 | -.tuan_set_num .co-red2{ | |
323 | - color: #B2AEA8;font-size: 26rpx; | |
338 | +.tuan_set_num .cantuan.huise { | |
339 | + background: gainsboro; | |
340 | + color: #666; | |
324 | 341 | } |
325 | -.tuan_set_num .cantuan{ | |
326 | - background:#c4182e; color: #fff; padding: 4rpx 10rpx; border-radius:5rpx ; | |
342 | + | |
343 | +.o1_sj_p .time_img { | |
344 | + width: 40rpx; | |
345 | + height: 40rpx; | |
346 | + vertical-align: top; | |
347 | + margin-right: 10rpx; | |
327 | 348 | } |
328 | -.tuan_set_num .cantuan.huise{ | |
329 | - background:gainsboro; color: #666; | |
349 | + | |
350 | +.o1_right_p .co-red2 { | |
351 | + font-size: 30rpx; | |
352 | + color: #999; | |
330 | 353 | } |
331 | 354 | |
332 | -.o1_sj_p .time_img{width: 40rpx; height: 40rpx; vertical-align: top; margin-right: 10rpx;} | |
333 | -.o1_right_p .co-red2{font-size:30rpx; color: #999;} | |
334 | -.o1_right_p .co-red2 .yituan_num{font-size:30rpx; margin-right: 10rpx; color: #333;} | |
355 | +.o1_right_p .co-red2 .yituan_num { | |
356 | + font-size: 30rpx; | |
357 | + margin-right: 10rpx; | |
358 | + color: #333; | |
359 | +} | |
360 | +.money{ | |
361 | + display: flex; | |
362 | + align-items: center; | |
363 | +} | |
335 | 364 | \ No newline at end of file | ... | ... |
components/diy_seckill/diy_seckill.wxml
1 | 1 | <block wx:if="goods_array.length>0"> |
2 | - <!--秒杀--> | |
3 | - <view class='top'> | |
4 | - <view class='t_left'></view> | |
5 | - <view class='t_ms'>秒杀</view> | |
2 | + <!--秒杀--> | |
3 | + <view class='top'> | |
4 | + <view class="flex"> | |
5 | + <view class='t_left'></view> | |
6 | + <view class='t_ms'>秒杀</view> | |
7 | + </view> | |
6 | 8 | <view class='right_k' bindtap="go_to_skill"> |
7 | - <image src="{{imghost}}/miniapp/images/icon-arrowdown.png"></image> | |
9 | + <image src="{{imghost}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image> | |
8 | 10 | </view> |
9 | - </view> | |
11 | + </view> | |
10 | 12 | |
11 | - <!--商品展示--> | |
12 | - <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}"> | |
13 | + <!--商品展示--> | |
14 | + <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}"> | |
13 | 15 | <view class='sp' wx:if="{{object.style==1}}"> |
14 | - <swiper-item class="s_it" wx:for="{{goods_array}}" > | |
15 | - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"> | |
16 | - <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
17 | - <view class='one'> | |
18 | - <view class='sp_top'> | |
19 | - <view class='po'></view> | |
20 | - <block wx:if="{{aitem.start_time>newTime}}"> | |
21 | - <span class='s_top_kill' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span> | |
22 | - </block> | |
23 | - <block wx:if="{{aitem.start_time<newTime}}"> | |
24 | - <span class='s_top_kill'>火热进行</span> | |
25 | - </block> | |
26 | - <view class='clear'></view> | |
16 | + <swiper-item class="s_it" wx:for="{{goods_array}}"> | |
17 | + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"> | |
18 | + <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
19 | + <view class='one'> | |
20 | + <view class='sp_top'> | |
21 | + <view class='po'></view> | |
22 | + <block wx:if="{{aitem.start_time>newTime}}"> | |
23 | + <span class='s_top_kill' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span> | |
24 | + </block> | |
25 | + <block wx:if="{{aitem.start_time<newTime}}"> | |
26 | + <span class='s_top_kill'>火热进行</span> | |
27 | + </block> | |
28 | + <view class='clear'></view> | |
27 | 29 | |
28 | - <view class='s_img'> | |
29 | - <image src="{{imghost+aitem.original_img}}" | |
30 | - data-errorimg="goods_array[{{index}}][{{aind}}].original_img" | |
31 | - binderror="bind_bnerr3"></image> | |
32 | - </view> | |
30 | + <view class='s_img'> | |
31 | + <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> | |
32 | + </view> | |
33 | 33 | |
34 | - <view class='s_foot_kill'> | |
35 | - <text>{{aitem.djs.day}}天</text> | |
36 | - <text>{{aitem.djs.hou}}时</text> | |
37 | - <text>{{aitem.djs.min}}分</text> | |
38 | - <text>{{aitem.djs.sec}}秒</text> | |
39 | - </view> | |
40 | - <view class='clear'></view> | |
34 | + <view class='s_foot_kill'> | |
35 | + <text>{{aitem.djs.day}}天</text> | |
36 | + <text>{{aitem.djs.hou}}时</text> | |
37 | + <text>{{aitem.djs.min}}分</text> | |
38 | + <text>{{aitem.djs.sec}}秒</text> | |
39 | + </view> | |
40 | + <view class='clear'></view> | |
41 | 41 | |
42 | - </view> | |
42 | + </view> | |
43 | 43 | |
44 | - <view class='sp_wz'> | |
45 | - <view class='sp_wzi'>{{aitem.goods_name}}</view> | |
46 | - <view class='sp_jg'>¥{{aitem.price}}</view> | |
47 | - <view class='sp_jgx'>¥{{aitem.market_price}}</view> | |
48 | - </view> | |
44 | + <view class='sp_wz'> | |
45 | + <view class='sp_wzi'>{{aitem.goods_name}}</view> | |
46 | + <view class='sp_jg'>¥{{aitem.price}}</view> | |
47 | + <view class='sp_jgx'>¥{{aitem.market_price}}</view> | |
48 | + </view> | |
49 | 49 | |
50 | - </view> | |
51 | - </navigator> | |
52 | - </block> | |
53 | - </swiper-item> | |
50 | + </view> | |
51 | + </navigator> | |
52 | + </block> | |
53 | + </swiper-item> | |
54 | 54 | </view> |
55 | - </swiper> | |
55 | + </swiper> | |
56 | 56 | |
57 | - <view class="sp2" wx:if="{{object.style==2}}"> | |
58 | - <block wx:for="{{goods_array}}" > | |
59 | - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" > | |
60 | - <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
61 | - <view class='one1'> | |
62 | - | |
63 | - <view class="o1_img"> | |
64 | - <image src="{{imghost+aitem.original_img}}" | |
65 | - data-errorimg="goods_array[{{index}}][{{aind}}].original_img" | |
66 | - binderror="bind_bnerr3"></image> | |
67 | - </view> | |
68 | - | |
69 | - <view class="o1_right"> | |
70 | - <view class="sp_wzi">{{aitem.goods_name}}</view> | |
71 | - <view class="o1_sj_kill"> | |
72 | - <text>{{aitem.djs.day}}</text> | |
73 | - 天 | |
74 | - <text>{{aitem.djs.hou}}</text> | |
75 | - : | |
76 | - <text>{{aitem.djs.min}}</text> | |
77 | - : | |
78 | - <text>{{aitem.djs.sec}}</text> | |
57 | + <view class="sp2" wx:if="{{object.style==2}}"> | |
58 | + <block wx:for="{{goods_array}}"> | |
59 | + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind"> | |
60 | + <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}" class="s1_gk_a1"> | |
61 | + <view class='one1'> | |
79 | 62 | |
80 | - </view> | |
81 | - <view class='sp_jg'>¥{{aitem.price}}</view> | |
82 | - <view class='sp_jgx'>¥{{aitem.market_price}}</view> | |
83 | - <block wx:if="{{aitem.start_time>newTime}}"> | |
84 | - <view class="wo" style="background-color: #adadad">正在预热</view> | |
85 | - </block> | |
86 | - <block wx:if="{{aitem.start_time<newTime}}"> | |
87 | - <view class="wo">我要抢</view> | |
88 | - </block> | |
63 | + <view class="o1_img"> | |
64 | + <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> | |
65 | + </view> | |
89 | 66 | |
67 | + <view class="o1_right"> | |
68 | + <view class="sp_wzi">{{aitem.goods_name}}</view> | |
69 | + <view class="o1_sj_kill"> | |
70 | + <text>{{aitem.djs.day}}</text> 天 | |
71 | + <text>{{aitem.djs.hou}}</text> : | |
72 | + <text>{{aitem.djs.min}}</text> : | |
73 | + <text>{{aitem.djs.sec}}</text> | |
90 | 74 | |
91 | - </view> | |
75 | + </view> | |
76 | + <view class="money"> | |
77 | + <view class='sp_jg'>¥{{aitem.price}}</view> | |
78 | + <view class='sp_jgx'>¥{{aitem.market_price}}</view> | |
79 | + </view> | |
80 | + <block wx:if="{{aitem.start_time>newTime}}"> | |
81 | + <view class="wo" style="background-color: #adadad">正在预热</view> | |
82 | + </block> | |
83 | + <block wx:if="{{aitem.start_time<newTime}}"> | |
84 | + <view class="rob"> | |
85 | + <view class="wo">我要抢</view> | |
92 | 86 | </view> |
93 | - </navigator> | |
94 | - </block> | |
87 | + </block> | |
88 | + | |
89 | + | |
90 | + </view> | |
91 | + </view> | |
92 | + </navigator> | |
93 | + </block> | |
95 | 94 | </block> |
96 | 95 | |
97 | - </view> | |
98 | - <view class='clear'></view> | |
96 | + </view> | |
97 | + <view class='clear'></view> | |
99 | 98 | |
100 | 99 | </block> |
101 | 100 | \ No newline at end of file | ... | ... |
components/diy_seckill/diy_seckill.wxss
1 | - | |
2 | -.top{ | |
3 | - width: 100%; | |
1 | +.flex{ | |
2 | + display: flex; | |
3 | + align-items: center; | |
4 | +} | |
5 | +.top { | |
4 | 6 | background-color: white; |
5 | 7 | height: 70rpx; |
6 | 8 | line-height: 70rpx; |
7 | - color: #000; | |
8 | - text-align: left; | |
9 | - border-bottom: 2rpx solid #eee; | |
10 | - display: flex; | |
9 | + color: #000; | |
10 | + border-bottom: 2rpx solid #eee; | |
11 | + padding:0rpx 20rpx; | |
12 | + display: flex; | |
13 | + justify-content: space-between; | |
11 | 14 | } |
12 | 15 | |
13 | - | |
14 | -.s_it{ | |
16 | +.s_it { | |
15 | 17 | width: 100%; |
16 | 18 | display: flex; |
17 | 19 | background-color: white; |
18 | 20 | } |
19 | 21 | |
20 | -.s_prom{ | |
22 | +.s_prom { | |
21 | 23 | width: 100%; |
22 | 24 | background-color: white; |
23 | 25 | min-height: 200rpx; |
24 | 26 | } |
25 | 27 | |
26 | 28 | swiper { |
27 | - display:block; | |
28 | - height:400rpx; | |
29 | - | |
29 | + display: block; | |
30 | + height: 400rpx; | |
30 | 31 | } |
31 | 32 | |
32 | -.right_k{ | |
33 | +.right_k { | |
33 | 34 | width: 30rpx; |
34 | - height: 100%; | |
35 | - margin-left: 580rpx; | |
36 | 35 | } |
37 | -.right_k image{ width: 30rpx; height: 30rpx} | |
38 | - | |
39 | - | |
40 | -.top .t_left{ | |
41 | - width: 10rpx; | |
42 | - height: 38rpx; | |
43 | - background: #C4182E; | |
44 | - margin-top:18rpx; | |
45 | -margin-right:12rpx; | |
46 | -margin-left:20rpx; | |
36 | +.right_k image{ | |
37 | + width: 30rpx; | |
38 | + height: 30rpx; | |
39 | +} | |
40 | + .t_left { | |
41 | + width: 10rpx; | |
42 | + height: 38rpx; | |
43 | + background: #c4182e; | |
44 | + margin-right: 10rpx; | |
47 | 45 | } |
48 | 46 | |
49 | 47 | |
50 | -.sp{ | |
48 | +.sp { | |
51 | 49 | min-height: 300rpx; |
52 | 50 | width: 100%; |
53 | 51 | background-color: white; |
54 | - padding:18rpx; | |
55 | -display: flex; | |
52 | + padding: 18rpx; | |
53 | + display: flex; | |
56 | 54 | } |
57 | 55 | |
58 | -.sp .sp_top{ | |
56 | +.sp .sp_top { | |
59 | 57 | height: 220rpx; |
60 | 58 | min-width: 30%; |
61 | - | |
62 | - | |
63 | 59 | } |
64 | 60 | |
65 | -.sp .sp_top .s_img{ | |
61 | +.sp .sp_top .s_img { | |
66 | 62 | width: 210rpx; |
67 | 63 | height: 100%; |
68 | 64 | } |
69 | 65 | |
70 | -.sp .sp_top .s_img image{ | |
66 | +.sp .sp_top .s_img image { | |
71 | 67 | width: 210rpx; |
72 | 68 | height: 100%; |
73 | - | |
74 | 69 | position: relative; |
75 | 70 | top: -74rpx; |
76 | - left:0rpx; | |
77 | - | |
71 | + left: 0rpx; | |
78 | 72 | } |
79 | 73 | |
80 | -.sp .sp_top .s_top_kill | |
81 | - | |
82 | -{ | |
83 | - | |
84 | -background-color:#C4182E; | |
85 | -font-size:24rpx; | |
86 | -height:38rpx; | |
87 | -line-height:38rpx; | |
88 | -left:6rpx; | |
89 | - | |
90 | -padding:4rpx 10rpx; | |
91 | - | |
92 | -border-radius:10rpx; | |
93 | - | |
94 | - | |
95 | -z-index: 999; | |
74 | +.sp .sp_top .s_top_kill { | |
75 | + background-color: #c4182e; | |
76 | + font-size: 24rpx; | |
77 | + height: 38rpx; | |
78 | + line-height: 38rpx; | |
79 | + left: 6rpx; | |
80 | + padding: 4rpx 10rpx; | |
81 | + border-radius: 10rpx; | |
82 | + z-index: 999; | |
96 | 83 | position: relative; |
97 | - top:-6rpx; | |
98 | - width: 210rpx; | |
99 | - | |
100 | - | |
101 | - color: #fff; | |
102 | - text-align: center; | |
103 | - | |
104 | - | |
84 | + top: -6rpx; | |
85 | + width: 210rpx; | |
86 | + color: #fff; | |
87 | + text-align: center; | |
105 | 88 | } |
106 | 89 | |
107 | -.po{ | |
90 | +.po { | |
108 | 91 | position: absolute; |
109 | 92 | } |
110 | 93 | |
111 | -.sp .sp_top .s_foot_kill{ | |
94 | +.sp .sp_top .s_foot_kill { | |
112 | 95 | font-size: 20rpx; |
113 | 96 | position: relative; |
114 | - top:-90rpx; | |
115 | - width: 210rpx; | |
116 | - height: 38rpx; | |
117 | - line-height: 38rpx; | |
118 | - color: #fff; | |
119 | - text-align: center; | |
120 | - background-color: rgba(0, 0, 0, 0.5); | |
97 | + top: -90rpx; | |
98 | + width: 210rpx; | |
99 | + height: 38rpx; | |
100 | + line-height: 38rpx; | |
101 | + color: #fff; | |
102 | + text-align: center; | |
103 | + background-color: rgba(0, 0, 0, 0.5); | |
121 | 104 | } |
122 | 105 | |
123 | - | |
124 | - | |
125 | -.sp_wz{ | |
126 | -width: 210rpx; | |
127 | - min-height:100rpx; | |
128 | - | |
106 | +.sp_wz { | |
107 | + width: 210rpx; | |
108 | + min-height: 100rpx; | |
129 | 109 | } |
130 | 110 | |
131 | -.sp_wz .sp_wzi{ | |
132 | - font-size: 30rpx; | |
133 | - border-bottom: 2rpx solid #dcdcdc; | |
134 | - width: 100%; | |
135 | - text-align: left; | |
136 | - padding: 4rpx 0; | |
137 | - overflow: hidden; | |
138 | - height: 48rpx; | |
139 | - text-overflow: ellipsis; | |
140 | - white-space: nowrap; | |
141 | - line-height: 48rpx; | |
111 | +.sp_wz .sp_wzi { | |
112 | + font-size: 30rpx; | |
113 | + border-bottom: 2rpx solid #dcdcdc; | |
114 | + width: 100%; | |
115 | + text-align: left; | |
116 | + padding: 4rpx 0; | |
117 | + overflow: hidden; | |
118 | + height: 48rpx; | |
119 | + text-overflow: ellipsis; | |
120 | + white-space: nowrap; | |
121 | + line-height: 48rpx; | |
142 | 122 | } |
143 | 123 | |
144 | -.sp_wz .sp_jg{ | |
145 | - color: #C4182E; | |
146 | - font-size: 30rpx; | |
147 | - overflow: hidden; | |
148 | - display: inline-block; | |
149 | - text-overflow: ellipsis; | |
150 | - white-space: nowrap; | |
151 | - margin-right: 10rpx; | |
124 | +.sp_wz .sp_jg { | |
125 | + color: #c4182e; | |
126 | + font-size: 30rpx; | |
127 | + overflow: hidden; | |
128 | + display: inline-block; | |
129 | + text-overflow: ellipsis; | |
130 | + white-space: nowrap; | |
131 | + margin-right: 10rpx; | |
152 | 132 | } |
153 | 133 | |
154 | -.sp_wz .sp_jgx{ | |
134 | +.sp_wz .sp_jgx { | |
155 | 135 | color: #adadad; |
156 | - text-decoration: line-through; | |
157 | - font-size: 24rpx; | |
158 | - | |
159 | - overflow: hidden; | |
160 | - display: inline-block; | |
161 | - text-overflow: ellipsis; | |
162 | - white-space: nowrap; | |
163 | - | |
136 | + text-decoration: line-through; | |
137 | + font-size: 24rpx; | |
138 | + overflow: hidden; | |
139 | + display: inline-block; | |
140 | + text-overflow: ellipsis; | |
141 | + white-space: nowrap; | |
164 | 142 | } |
165 | 143 | |
166 | -.one{ | |
144 | +.one { | |
167 | 145 | margin-left: 14rpx; |
168 | - | |
169 | 146 | } |
170 | 147 | |
171 | - | |
172 | -.sp .sp_top .s_top1_kill{ | |
148 | +.sp .sp_top .s_top1_kill { | |
173 | 149 | position: absolute; |
174 | -background-color:#C4182E; | |
175 | -font-size:24rpx; | |
176 | -height:38rpx; | |
177 | -line-height:38rpx; | |
178 | -left:265rpx; | |
179 | -top:100rpx; | |
180 | -padding:0 10rpx; | |
181 | -color:white; | |
182 | -border-radius:10rpx; | |
183 | - | |
150 | + background-color: #c4182e; | |
151 | + font-size: 24rpx; | |
152 | + height: 38rpx; | |
153 | + line-height: 38rpx; | |
154 | + left: 265rpx; | |
155 | + top: 100rpx; | |
156 | + padding: 0 10rpx; | |
157 | + color: white; | |
158 | + border-radius: 10rpx; | |
184 | 159 | } |
185 | 160 | |
186 | -.sp .sp_top .s_top2_kill{ | |
161 | +.sp .sp_top .s_top2_kill { | |
187 | 162 | position: absolute; |
188 | -background-color:#C4182E; | |
189 | -font-size:24rpx; | |
190 | -height:38rpx; | |
191 | -line-height:38rpx; | |
192 | -right:146rpx; | |
193 | -top:100rpx; | |
194 | -padding:0 10rpx; | |
195 | -color:white; | |
196 | -border-radius:10rpx; | |
197 | - | |
163 | + background-color: #c4182e; | |
164 | + font-size: 24rpx; | |
165 | + height: 38rpx; | |
166 | + line-height: 38rpx; | |
167 | + right: 146rpx; | |
168 | + top: 100rpx; | |
169 | + padding: 0 10rpx; | |
170 | + color: white; | |
171 | + border-radius: 10rpx; | |
198 | 172 | } |
199 | 173 | |
200 | - | |
201 | - | |
202 | -.sp .sp_top .s_foot1_kill{ | |
174 | +.sp .sp_top .s_foot1_kill { | |
203 | 175 | font-size: 20rpx; |
204 | 176 | position: absolute; |
205 | - top:270rpx; | |
206 | - width: 210rpx; | |
207 | - height: 38rpx; | |
208 | - line-height: 38rpx; | |
209 | - color: #fff; | |
210 | - text-align: center; | |
211 | - background-color: rgba(0, 0, 0, 0.5); | |
177 | + top: 270rpx; | |
178 | + width: 210rpx; | |
179 | + height: 38rpx; | |
180 | + line-height: 38rpx; | |
181 | + color: #fff; | |
182 | + text-align: center; | |
183 | + background-color: rgba(0, 0, 0, 0.5); | |
212 | 184 | } |
213 | 185 | |
214 | -.po1{ | |
186 | +.po1 { | |
215 | 187 | position: absolute; |
216 | 188 | } |
217 | 189 | |
218 | - | |
219 | -.sp .sp_top .s_foot2_kill{ | |
190 | +.sp .sp_top .s_foot2_kill { | |
220 | 191 | font-size: 20rpx; |
221 | 192 | position: absolute; |
222 | - top:270rpx; | |
223 | - width: 210rpx; | |
224 | - height: 38rpx; | |
225 | - line-height: 38rpx; | |
226 | - color: #fff; | |
227 | - text-align: center; | |
228 | - background-color: rgba(0, 0, 0, 0.5); | |
193 | + top: 270rpx; | |
194 | + width: 210rpx; | |
195 | + height: 38rpx; | |
196 | + line-height: 38rpx; | |
197 | + color: #fff; | |
198 | + text-align: center; | |
199 | + background-color: rgba(0, 0, 0, 0.5); | |
229 | 200 | } |
230 | 201 | |
231 | - | |
232 | - | |
233 | - | |
234 | - | |
235 | - | |
236 | - | |
237 | -.sp2{ | |
202 | +.sp2 { | |
238 | 203 | width: 100%; |
239 | 204 | min-height: 240rpx; |
240 | - | |
241 | 205 | } |
242 | 206 | |
243 | -.sp2 .one1{ | |
244 | - width: 100%; | |
207 | +.sp2 .one1 { | |
245 | 208 | background-color: white; |
246 | - height: 252rpx; | |
209 | + height: 285rpx; | |
247 | 210 | display: flex; |
248 | - padding: 20rpx; | |
249 | - border-bottom:6rpx#eee solid; | |
250 | - | |
211 | + padding:0rpx 20rpx; | |
212 | + border-bottom: 6rpx#eee solid; | |
213 | + align-items: center; | |
251 | 214 | } |
252 | 215 | |
253 | -.sp2 .one1 .o1_img{ | |
254 | - width: 200rpx; | |
255 | - height: 240rpx; | |
256 | - | |
257 | - margin-right: 24rpx; | |
216 | +.sp2 .one1 .o1_img { | |
217 | + width: 220rpx; | |
218 | + height: 220rpx; | |
219 | + margin-right: 25rpx; | |
258 | 220 | } |
259 | 221 | |
260 | -.o1_right .sp_wzi{ | |
222 | +.o1_right .sp_wzi { | |
261 | 223 | font-size: 36rpx; |
262 | - margin-bottom:6rpx; | |
263 | - | |
264 | - width: 100%; | |
224 | + margin-bottom: 6rpx; | |
265 | 225 | text-align: left; |
266 | 226 | padding: 4rpx 0; |
267 | - overflow: hidden; | |
268 | 227 | height: 48rpx; |
228 | + overflow: hidden; | |
229 | + white-space: nowrap; | |
269 | 230 | text-overflow: ellipsis; |
270 | - white-space: nowrap | |
271 | 231 | } |
272 | 232 | |
273 | -.o1_right .o1_sj_kill{ | |
233 | +.o1_right .o1_sj_kill { | |
274 | 234 | height: 60rpx; |
275 | - | |
276 | 235 | margin-bottom: 10rpx; |
277 | 236 | } |
278 | 237 | |
279 | -.o1_right .o1_sj_kill text{ | |
238 | +.o1_right .o1_sj_kill text { | |
280 | 239 | background-color: #fdcb08; |
281 | 240 | text-align: center; |
282 | 241 | border-radius: 10rpx; |
283 | - padding:4rpx; | |
284 | -margin-left:6rpx; | |
285 | - | |
242 | + padding: 4rpx; | |
243 | + margin-left: 6rpx; | |
286 | 244 | } |
287 | 245 | |
288 | - | |
289 | - | |
290 | -.o1_right .sp_jg{ | |
291 | - color: #C4182E; | |
246 | +.o1_right .sp_jg { | |
247 | + color: #c4182e; | |
292 | 248 | font-size: 36rpx; |
293 | - | |
294 | 249 | overflow: hidden; |
295 | 250 | display: inline-block; |
296 | 251 | margin-right: 10rpx; |
297 | 252 | } |
298 | 253 | |
299 | -.o1_right .sp_jgx{ | |
254 | +.o1_right .sp_jgx { | |
300 | 255 | color: #dcdcdc; |
301 | 256 | text-decoration: line-through; |
302 | 257 | font-size: 26rpx; |
303 | - | |
304 | 258 | overflow: hidden; |
305 | 259 | display: inline-block; |
306 | 260 | } |
307 | 261 | |
308 | - | |
309 | -.o1_img image{ | |
310 | - width: 100%; | |
311 | - height: 100%; | |
312 | - | |
313 | - position:relative; | |
314 | -top:-23rpx; | |
315 | -left:0rpx; | |
316 | - | |
262 | +.o1_img image { | |
263 | + width: 220rpx; | |
264 | + height: 220rpx; | |
317 | 265 | } |
318 | - | |
319 | -.o1_right .wo{ | |
320 | - background-color: #C4182E; | |
266 | +.o1_right{ | |
267 | + width: 465rpx; | |
268 | +} | |
269 | +.o1_right .wo { | |
270 | + background-color: #c4182e; | |
321 | 271 | width: 160rpx; |
322 | 272 | height: 60rpx; |
323 | 273 | line-height: 60rpx; |
324 | 274 | color: white; |
325 | 275 | text-align: center; |
326 | - font-size: 38rpx; | |
327 | - margin-left:298rpx; | |
328 | -border-radius:14rpx; | |
329 | -padding-left: 10rpx; | |
330 | -padding-right: 10rpx; | |
276 | + font-size: 32rpx; | |
277 | + border-radius: 14rpx; | |
331 | 278 | } |
332 | - | |
333 | - | |
334 | - | |
279 | +.rob{ | |
280 | + display: flex; | |
281 | + justify-content: flex-end; | |
282 | +} | |
283 | +.money{ | |
284 | + display: flex; | |
285 | + align-items: center; | |
286 | +} | |
335 | 287 | \ No newline at end of file | ... | ... |