fe / yohobuywap-node · Commits

Go to a project

Authored by baoss
Commit 58aba7e220569a37ffdc33abb1d75f5e56fb91f8 2 parents 9b8b9005 b080e5fa

Merge branch 'feature/group-buy' of git.yoho.cn:fe/yohobuywap-node into feature/group-buy

Inline Side-by-side
Showing 3 changed files with 116 additions and 79 deletions
... ... @@ -4,62 +4,69 @@
<div class="inner-card go-join" data-product-skn="{{yourJoinItem.productSkn}}"
data-activity-id="{{activityId}}" data-group-no="{{groupNo}}" data-page-go="{{pageGo}}">
<img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img">
<div class="info" >
<div class="info">
<div class="name">{{yourJoinItem.productName}}</div>
<div class="group-price">{{yourJoinItem.productGroupPrice}}</div>
<div class="single-buy-price">单人购买：<span class="line-through">{{yourJoinItem
.productSalePrice}}</span></div>
</div>
</div>
<div class="members">
{{#membershipItems}}
{{#if empty}}
<div class="meb-item empty"></div>
{{else}}
<div class="meb-item">
<img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt="">
{{#if @first}}
<span class="leader-badge"></span>
<div class="card-body">
<div class="members">
{{#membershipItems}}
{{#if empty}}
<div class="meb-item empty"></div>
{{else}}
<div class="meb-item">
<img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt="">
{{#if @first}}
<span class="leader-badge"></span>
{{/if}}
</div>
{{/if}}
{{/membershipItems}}
</div>
{{/if}}
{{/membershipItems}}
</div>
{{#ifcond pageGo '===' 1}}
<div class="status-text">还差{{lackNum}}人拼团成功，剩余时间</div>
<div class="status-btn positive">邀请小伙伴拼团</div>
{{/ifcond}}
{{#ifcond pageGo '===' 1}}
<div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功，剩余时间</div>
{{> group/progress-countdown}}
<div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div>
{{/ifcond}}
{{#ifcond pageGo '===' 2}}
<div class="status-text">还差{{lackNum}}人拼团成功，剩余时间</div>
{{/ifcond}}
{{#ifcond pageGo '===' 2}}
<div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功，剩余时间</div>
{{> group/progress-countdown}}
<div class="status-btn positive">去参团</div>
{{/ifcond}}
{{#ifcond pageGo '===' 3}}
<div class="status-text">还差{{lackNum}}人拼团成功，剩余时间</div>
<div class="status-btn positive">邀请小伙伴拼团</div>
{{/ifcond}}
{{#ifcond pageGo '===' 3}}
<div class="status-tip">还差<span class="red">{{lackNum}}人</span>拼团成功，剩余时间</div>
{{> group/progress-countdown}}
<div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div>
{{/ifcond}}
{{#ifcond pageGo '===' 4}}
<div class="status-text">拼团成功</div>
{{/ifcond}}
{{#ifcond pageGo '===' 4}}
<div class="status-text">拼团成功</div>
<div class="status-btn">查看更多拼团活动</div>
{{/ifcond}}
{{#ifcond pageGo '===' 5}}
<div class="status-text">你来晚了 你的好友拼团已经成功</div>
{{/ifcond}}
{{#ifcond pageGo '===' 5}}
<div class="status-text">你来晚了 你的好友拼团已经成功</div>
<div class="status-btn positive">我也要开团</div>
{{/ifcond}}
{{#ifcond pageGo '===' 6}}
<div class="status-text">拼团失败</div>
<div class="status-btn">查看更多拼团活动</div>
{{/ifcond}}
{{#ifcond pageGo '===' 6}}
<div class="status-text">拼团失败</div>
{{/ifcond}}
{{#ifcond pageGo '===' 7}}
<div class="status-text">拼团失败</div>
<div class="status-btn">查看更多拼团活动</div>
{{/ifcond}}
{{#ifcond pageGo '===' 7}}
<div class="status-text">拼团失败</div>
<div class="status-btn">查看更多拼团活动</div>
{{/ifcond}}
<a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a>
<a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a>
</div>
</div>
{{/data}}
<div class="divide"></div>
... ...
<div class="count-down">
<span class="digit-square">1</span>
<span class="digit-square">1</span> :
<span class="digit-square">1</span>
<span class="digit-square">1</span> :
<span class="digit-square">1</span>
<span class="digit-square">1</span>
</div>
... ...
... ... @@ -4,40 +4,34 @@
.card {
position: relative;
width: 680px;
height: 690px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 20px rgba(205, 205, 205, 0.5);
}
.status-text {
position: absolute;
bottom: 250px;
left: 50%;
transform: translateX(-50%);
font-size: 36px;
color: #444;
letter-spacing: -1px;
text-align: center;
font-weight: bold;
}
.status-btn {
position: absolute;
bottom: 130px;
left: 50%;
display: inline-block;
height: 80px;
padding: 0 50px;
min-width: 380px;
margin-top: 40px;
font-size: 32px;
color: #fff;
text-align: center;
line-height: 80px;
border-radius: 40px;
background-color: #000;
transform: translateX(-50%);
&.positive {
background: #d0021b;
margin-top: 60px;
}
}
... ... @@ -80,44 +74,59 @@
}
}
.card-body {
position: relative;
width: 680px;
padding-top: 140px;
padding-bottom: 130px;
text-align: center;
}
.members {
position: absolute;
top: 194px;
left: 0;
right: 0;
margin-top: 40px;
font-size: 0;
text-align: center;
}
.meb-item {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
margin-left: 40px;
border-radius: 40px;
.meb-item {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
margin-left: 40px;
border-radius: 40px;
&:first-child {
margin-left: 0;
}
&:first-child {
margin-left: 0;
}
&.empty {
background-image: url("img/activity/group/member-empty.png");
background-size: 80px 80px;
}
&.empty {
background-image: url("img/activity/group/member-empty.png");
background-size: 80px 80px;
}
.avatar {
border-radius: 40px;
.avatar {
border-radius: 40px;
}
.leader-badge {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
background-image: url("img/activity/group/member-leader.png");
background-size: 80px 80px;
}
}
}
.leader-badge {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
background-image: url("img/activity/group/member-leader.png");
background-size: 80px 80px;
.status-tip {
font-size: 24px;
margin-top: 38px;
margin-bottom: 20px;
.red {
color: #d0021b;
}
}
... ... @@ -128,6 +137,7 @@
left: 28px;
font-size: 24px;
color: #b0b0b0;
text-align: left;
letter-spacing: -0.68px;
}
... ... @@ -253,4 +263,16 @@
width: 104px;
height: 110px;
}
.count-down {
.digit-square {
display: inline-block;
width: 36px;
height: 44px;
font-size: 28px;
color: #fff;
line-height: 44px;
background-color: #000;
}
}
}
... ...