Merge branch 'feature/group-buy' of git.yoho.cn:fe/yohobuywap-node into feature/group-buy
Showing
3 changed files
with
116 additions
and
79 deletions
@@ -4,62 +4,69 @@ | @@ -4,62 +4,69 @@ | ||
4 | <div class="inner-card go-join" data-product-skn="{{yourJoinItem.productSkn}}" | 4 | <div class="inner-card go-join" data-product-skn="{{yourJoinItem.productSkn}}" |
5 | data-activity-id="{{activityId}}" data-group-no="{{groupNo}}" data-page-go="{{pageGo}}"> | 5 | data-activity-id="{{activityId}}" data-group-no="{{groupNo}}" data-page-go="{{pageGo}}"> |
6 | <img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img"> | 6 | <img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img"> |
7 | - <div class="info" > | 7 | + <div class="info"> |
8 | <div class="name">{{yourJoinItem.productName}}</div> | 8 | <div class="name">{{yourJoinItem.productName}}</div> |
9 | <div class="group-price">{{yourJoinItem.productGroupPrice}}</div> | 9 | <div class="group-price">{{yourJoinItem.productGroupPrice}}</div> |
10 | <div class="single-buy-price">单人购买:<span class="line-through">{{yourJoinItem | 10 | <div class="single-buy-price">单人购买:<span class="line-through">{{yourJoinItem |
11 | .productSalePrice}}</span></div> | 11 | .productSalePrice}}</span></div> |
12 | </div> | 12 | </div> |
13 | </div> | 13 | </div> |
14 | - | ||
15 | - <div class="members"> | ||
16 | - {{#membershipItems}} | ||
17 | - {{#if empty}} | ||
18 | - <div class="meb-item empty"></div> | ||
19 | - {{else}} | ||
20 | - <div class="meb-item"> | ||
21 | - <img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt=""> | ||
22 | - {{#if @first}} | ||
23 | - <span class="leader-badge"></span> | 14 | + <div class="card-body"> |
15 | + <div class="members"> | ||
16 | + {{#membershipItems}} | ||
17 | + {{#if empty}} | ||
18 | + <div class="meb-item empty"></div> | ||
19 | + {{else}} | ||
20 | + <div class="meb-item"> | ||
21 | + <img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt=""> | ||
22 | + {{#if @first}} | ||
23 | + <span class="leader-badge"></span> | ||
24 | + {{/if}} | ||
25 | + </div> | ||
24 | {{/if}} | 26 | {{/if}} |
27 | + {{/membershipItems}} | ||
25 | </div> | 28 | </div> |
26 | - {{/if}} | ||
27 | - {{/membershipItems}} | ||
28 | - </div> | ||
29 | 29 | ||
30 | - {{#ifcond pageGo '===' 1}} | ||
31 | - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div> | ||
32 | - <div class="status-btn positive">邀请小伙伴拼团</div> | ||
33 | - {{/ifcond}} | 30 | + {{#ifcond pageGo '===' 1}} |
31 | + <div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功,剩余时间</div> | ||
32 | + {{> group/progress-countdown}} | ||
33 | + <div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div> | ||
34 | + {{/ifcond}} | ||
34 | 35 | ||
35 | - {{#ifcond pageGo '===' 2}} | ||
36 | - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div> | ||
37 | - {{/ifcond}} | 36 | + {{#ifcond pageGo '===' 2}} |
37 | + <div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功,剩余时间</div> | ||
38 | + {{> group/progress-countdown}} | ||
39 | + <div class="status-btn positive">去参团</div> | ||
40 | + {{/ifcond}} | ||
38 | 41 | ||
39 | - {{#ifcond pageGo '===' 3}} | ||
40 | - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div> | ||
41 | - <div class="status-btn positive">邀请小伙伴拼团</div> | ||
42 | - {{/ifcond}} | 42 | + {{#ifcond pageGo '===' 3}} |
43 | + <div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功,剩余时间</div> | ||
44 | + {{> group/progress-countdown}} | ||
45 | + <div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div> | ||
46 | + {{/ifcond}} | ||
43 | 47 | ||
44 | - {{#ifcond pageGo '===' 4}} | ||
45 | - <div class="status-text">拼团成功</div> | ||
46 | - {{/ifcond}} | 48 | + {{#ifcond pageGo '===' 4}} |
49 | + <div class="status-text">拼团成功</div> | ||
50 | + <div class="status-btn">查看更多拼团活动</div> | ||
51 | + {{/ifcond}} | ||
47 | 52 | ||
48 | - {{#ifcond pageGo '===' 5}} | ||
49 | - <div class="status-text">你来晚了 你的好友拼团已经成功</div> | ||
50 | - {{/ifcond}} | 53 | + {{#ifcond pageGo '===' 5}} |
54 | + <div class="status-text">你来晚了 你的好友拼团已经成功</div> | ||
55 | + <div class="status-btn positive">我也要开团</div> | ||
56 | + {{/ifcond}} | ||
51 | 57 | ||
58 | + {{#ifcond pageGo '===' 6}} | ||
59 | + <div class="status-text">拼团失败</div> | ||
60 | + <div class="status-btn">查看更多拼团活动</div> | ||
61 | + {{/ifcond}} | ||
52 | 62 | ||
53 | - {{#ifcond pageGo '===' 6}} | ||
54 | - <div class="status-text">拼团失败</div> | ||
55 | - {{/ifcond}} | 63 | + {{#ifcond pageGo '===' 7}} |
64 | + <div class="status-text">拼团失败</div> | ||
65 | + <div class="status-btn">查看更多拼团活动</div> | ||
66 | + {{/ifcond}} | ||
56 | 67 | ||
57 | - {{#ifcond pageGo '===' 7}} | ||
58 | - <div class="status-text">拼团失败</div> | ||
59 | - <div class="status-btn">查看更多拼团活动</div> | ||
60 | - {{/ifcond}} | ||
61 | - | ||
62 | - <a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a> | 68 | + <a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a> |
69 | + </div> | ||
63 | </div> | 70 | </div> |
64 | {{/data}} | 71 | {{/data}} |
65 | <div class="divide"></div> | 72 | <div class="divide"></div> |
@@ -4,40 +4,34 @@ | @@ -4,40 +4,34 @@ | ||
4 | .card { | 4 | .card { |
5 | position: relative; | 5 | position: relative; |
6 | width: 680px; | 6 | width: 680px; |
7 | - height: 690px; | ||
8 | margin: 0 auto; | 7 | margin: 0 auto; |
9 | background: #fff; | 8 | background: #fff; |
10 | box-shadow: 0 0 20px rgba(205, 205, 205, 0.5); | 9 | box-shadow: 0 0 20px rgba(205, 205, 205, 0.5); |
11 | } | 10 | } |
12 | 11 | ||
13 | .status-text { | 12 | .status-text { |
14 | - position: absolute; | ||
15 | - bottom: 250px; | ||
16 | - left: 50%; | ||
17 | - transform: translateX(-50%); | ||
18 | font-size: 36px; | 13 | font-size: 36px; |
19 | color: #444; | 14 | color: #444; |
20 | - letter-spacing: -1px; | ||
21 | text-align: center; | 15 | text-align: center; |
22 | font-weight: bold; | 16 | font-weight: bold; |
23 | } | 17 | } |
24 | 18 | ||
25 | .status-btn { | 19 | .status-btn { |
26 | - position: absolute; | ||
27 | - bottom: 130px; | ||
28 | - left: 50%; | 20 | + display: inline-block; |
29 | height: 80px; | 21 | height: 80px; |
30 | padding: 0 50px; | 22 | padding: 0 50px; |
23 | + min-width: 380px; | ||
24 | + margin-top: 40px; | ||
31 | font-size: 32px; | 25 | font-size: 32px; |
32 | color: #fff; | 26 | color: #fff; |
33 | text-align: center; | 27 | text-align: center; |
34 | line-height: 80px; | 28 | line-height: 80px; |
35 | border-radius: 40px; | 29 | border-radius: 40px; |
36 | background-color: #000; | 30 | background-color: #000; |
37 | - transform: translateX(-50%); | ||
38 | 31 | ||
39 | &.positive { | 32 | &.positive { |
40 | background: #d0021b; | 33 | background: #d0021b; |
34 | + margin-top: 60px; | ||
41 | } | 35 | } |
42 | } | 36 | } |
43 | 37 | ||
@@ -80,44 +74,59 @@ | @@ -80,44 +74,59 @@ | ||
80 | } | 74 | } |
81 | } | 75 | } |
82 | 76 | ||
77 | + .card-body { | ||
78 | + position: relative; | ||
79 | + width: 680px; | ||
80 | + padding-top: 140px; | ||
81 | + padding-bottom: 130px; | ||
82 | + text-align: center; | ||
83 | + } | ||
84 | + | ||
83 | .members { | 85 | .members { |
84 | - position: absolute; | ||
85 | - top: 194px; | ||
86 | - left: 0; | ||
87 | - right: 0; | 86 | + margin-top: 40px; |
88 | font-size: 0; | 87 | font-size: 0; |
89 | text-align: center; | 88 | text-align: center; |
90 | - } | ||
91 | 89 | ||
92 | - .meb-item { | ||
93 | - position: relative; | ||
94 | - display: inline-block; | ||
95 | - width: 80px; | ||
96 | - height: 80px; | ||
97 | - margin-left: 40px; | ||
98 | - border-radius: 40px; | 90 | + .meb-item { |
91 | + position: relative; | ||
92 | + display: inline-block; | ||
93 | + width: 80px; | ||
94 | + height: 80px; | ||
95 | + margin-left: 40px; | ||
96 | + border-radius: 40px; | ||
99 | 97 | ||
100 | - &:first-child { | ||
101 | - margin-left: 0; | ||
102 | - } | 98 | + &:first-child { |
99 | + margin-left: 0; | ||
100 | + } | ||
103 | 101 | ||
104 | - &.empty { | ||
105 | - background-image: url("img/activity/group/member-empty.png"); | ||
106 | - background-size: 80px 80px; | ||
107 | - } | 102 | + &.empty { |
103 | + background-image: url("img/activity/group/member-empty.png"); | ||
104 | + background-size: 80px 80px; | ||
105 | + } | ||
108 | 106 | ||
109 | - .avatar { | ||
110 | - border-radius: 40px; | 107 | + .avatar { |
108 | + border-radius: 40px; | ||
109 | + } | ||
110 | + | ||
111 | + .leader-badge { | ||
112 | + position: absolute; | ||
113 | + top: 0; | ||
114 | + left: 0; | ||
115 | + width: 80px; | ||
116 | + height: 80px; | ||
117 | + background-image: url("img/activity/group/member-leader.png"); | ||
118 | + background-size: 80px 80px; | ||
119 | + } | ||
111 | } | 120 | } |
121 | + } | ||
112 | 122 | ||
113 | - .leader-badge { | ||
114 | - position: absolute; | ||
115 | - top: 0; | ||
116 | - left: 0; | ||
117 | - width: 80px; | ||
118 | - height: 80px; | ||
119 | - background-image: url("img/activity/group/member-leader.png"); | ||
120 | - background-size: 80px 80px; | 123 | + .status-tip { |
124 | + font-size: 24px; | ||
125 | + margin-top: 38px; | ||
126 | + margin-bottom: 20px; | ||
127 | + | ||
128 | + .red { | ||
129 | + color: #d0021b; | ||
121 | } | 130 | } |
122 | } | 131 | } |
123 | 132 | ||
@@ -128,6 +137,7 @@ | @@ -128,6 +137,7 @@ | ||
128 | left: 28px; | 137 | left: 28px; |
129 | font-size: 24px; | 138 | font-size: 24px; |
130 | color: #b0b0b0; | 139 | color: #b0b0b0; |
140 | + text-align: left; | ||
131 | letter-spacing: -0.68px; | 141 | letter-spacing: -0.68px; |
132 | } | 142 | } |
133 | 143 | ||
@@ -253,4 +263,16 @@ | @@ -253,4 +263,16 @@ | ||
253 | width: 104px; | 263 | width: 104px; |
254 | height: 110px; | 264 | height: 110px; |
255 | } | 265 | } |
266 | + | ||
267 | + .count-down { | ||
268 | + .digit-square { | ||
269 | + display: inline-block; | ||
270 | + width: 36px; | ||
271 | + height: 44px; | ||
272 | + font-size: 28px; | ||
273 | + color: #fff; | ||
274 | + line-height: 44px; | ||
275 | + background-color: #000; | ||
276 | + } | ||
277 | + } | ||
256 | } | 278 | } |
-
Please register or login to post a comment