Commit d02cd3bac2d9dffd687e96997fa7be7da9d4339a

Authored by 前端研发-钱巧玲
1 parent 1072ea92

秒杀,拼单页面优化

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
... ...