fe / yohobuywap-node · Commits

Go to a project

Authored by 李奇
Commit b080e5fa08c30cb0dafdc0308c9e4631ffcae705 1 parent 0dcb429e

拼团详情页状态值设定

Inline Side-by-side
Showing 3 changed files with 60 additions and 23 deletions
... ... @@ -4,14 +4,14 @@
<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="card-body">
<div class="members">
{{#membershipItems}}
{{#if empty}}
... ... @@ -28,30 +28,36 @@
</div>
{{#ifcond pageGo '===' 1}}
<div class="status-text">还差{{lackNum}}人拼团成功，剩余时间</div>
<div class="status-btn positive">邀请小伙伴拼团</div>
<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>
<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>
<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>
<div class="status-btn">查看更多拼团活动</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 '===' 7}}
... ... @@ -61,6 +67,7 @@
<a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a>
</div>
</div>
{{/data}}
<div class="divide"></div>
<div class="banner official-account"></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,14 +74,18 @@
}
}
.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;
... ... @@ -120,6 +118,17 @@
background-size: 80px 80px;
}
}
}
.status-tip {
font-size: 24px;
margin-top: 38px;
margin-bottom: 20px;
.red {
color: #d0021b;
}
}
.tip {
position: absolute;
... ... @@ -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;
}
}
}
... ...