fe / yohobuy-node · Commits

Go to a project

Authored by 郝肖肖
Commit ee4f782d78c3dd1ce30db2de629932df1a5c3a64 1 parent dd4f11ed

'个人中心优惠券样式调整加运费券'

Inline Side-by-side
Showing 10 changed files with 153 additions and 94 deletions
... ... @@ -43,6 +43,7 @@ module.exports = class extends global.yoho.BaseModel {
result[i] = {};
result[i].id = item.couponId;
result[i].code = item.couponCode;
result[i].couponType = Number(item.couponType);
// 格式化有效日期 "couponValidity": "2016.03.15-2016.03.31"
let dates = item.couponValidity.split('-'),
... ...
... ... @@ -24,26 +24,30 @@
{{# unUseCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-name">
<div class="coupons-card coupons-notuse">
<div class="coupons-date clearfix">
<p class="left">{{useRemark}}</p>
<p class="right">{{overState}}</p>
</div>
<div class="coupons-num clearfix">
<div class="left coupons-sht">
<div class="coupons-card{{#isEqual couponType 5}} coupons-freight{{/isEqual}}">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
<p class="right-title">{{overState}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
<p class="coupons-full">{{rule}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="left coupons-dtl">{{beginTime}} - {{endTime}}</div>
<div class="coupons-dtl">{{beginTime}} - {{endTime}}</div>
</div>
</div>
</div>
<div class="coupons-info">
<div class="coupons-text">
{{notes}}
</div>
</div>
<div class="coupons-opt">
<a class="btn use-btn" id="coupon-use" href="{{proListUrl}}" target="_black">立即使用</a>
</div>
... ... @@ -54,17 +58,20 @@
{{# usedCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-name">
<div class="coupons-card coupons-use">
<div class="coupons-date clearfix">
<p class="left">{{useRemark}}</p>
</div>
<div class="coupons-num clearfix">
<div class="left coupons-sht">
<div class="coupons-card coupons-use{{#isEqual couponType 5}} coupons-freight{{/isEqual}}">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
<p class="right-title">{{overState}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
<p class="coupons-full">{{rule}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="left coupons-dtl">{{beginTime}} - {{endTime}}</div>
<div class="coupons-dtl">{{beginTime}} - {{endTime}}</div>
</div>
</div>
</div>
... ... @@ -90,17 +97,20 @@
{{# noValidCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-name">
<div class="coupons-card coupons-overtime">
<div class="coupons-date clearfix">
<p class="left">{{useRemark}}</p>
</div>
<div class="coupons-num clearfix">
<div class="left coupons-sht">
<div class="coupons-card coupons-invalid">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
<p class="right-title">{{overState}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
<p class="coupons-full">{{rule}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="left coupons-dtl">{{beginTime}} - {{endTime}}</div>
<div class="coupons-dtl">{{beginTime}} - {{endTime}}</div>
</div>
</div>
</div>
... ...

6.56 KB | W: | H:

2.92 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -11,41 +11,41 @@
border: 1px solid #e6e6e6;
margin: 0 auto 10px;
.coupons-name {
width: 240px;
}
.coupons-header {
height: 25px;
padding: 0 20px;
line-height: 25px;
text-align: center;
border-bottom: 1px solid #e6e6e6;
background: #efefef;
.coupons-info {
width: 388px;
span {
display: block;
float: left;
}
.coupons-text {
color: #000;
padding: 0 25px;
text-align: left;
span.coupons-name {
width: 241px;
}
}
.coupons-opt {
width: 100px;
color: #000;
}
}
span.coupons-info {
width: 388px;
.coupons-header {
height: 25px;
padding: 0 20px;
line-height: 25px;
text-align: center;
border-bottom: 1px solid #e6e6e6;
background: #efefef;
.coupons-text {
color: #000;
padding: 0 25px;
text-align: left;
}
}
span {
display: block;
float: left;
span.coupons-opt {
width: 100px;
color: #000;
}
}
}
.coupon {
.coupons-wrap .coupon {
display: table;
border-bottom: 1px solid #e6e6e6;
width: 736px;
... ... @@ -69,69 +69,117 @@
}
.coupons-card {
width: 240px;
width: 221px;
height: 80px;
color: #fff;
display: table;
table-layout: fixed;
text-align: left;
padding: 0 10px;
background-image: resolve(home/coupons1.png);
background-repeat: no-repeat;
.coupons-card-header {
height: 20px;
color: #fff;
overflow: hidden;
&.coupons-notuse {
background-image: resolve(home/notuse.png);
p.left-title {
width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.coupons-dtl {
width: 150px;
p.right-title {
width: 61px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: right;
}
}
&.coupons-use {
background-image: resolve(home/use.png);
.coupons-card-content {
height: 60px;
display: table;
overflow: hidden;
}
&.coupons-overtime {
background-image: resolve(home/overtime.png);
.coupons-card-content .coupons-card-row {
display: table-row;
}
.coupons-date {
padding: 0 10px;
.coupons-card-content .coupons-card-row .coupons-sht {
display: table-cell;
width: 65px;
vertical-align: middle;
text-align: center;
font-size: 12px;
& > p {
height: 20px;
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
display: inline-block;
width: inherit;
vertical-align: bottom;
}
p.left {
width: 70%;
.coupons-price {
vertical-align: sub;
font-size: 24px;
}
}
p.right {
width: 30%;
}
.coupons-card-content .coupons-card-row .coupons-full {
display: table-cell;
vertical-align: middle;
}
.coupons-num {
margin-top: 10px;
.coupons-card-content .coupons-card-row .coupons-dtl {
display: table-cell;
padding-left: 10px;
padding-top: 17px;
}
}
.coupons-sht {
width: 70px;
}
.coupons-freight {
background-image: resolve(home/coupons2.png);
}
.coupons-sht .coupons-price {
font-size: 20px;
line-height: 24px;
}
.coupons-use {
&:before {
content: "";
background-image: resolve(home/use.png);
background-repeat: no-repeat;
width: 55px;
height: 48px;
position: absolute;
margin-left: 148px;
margin-top: 25px;
}
}
.coupons-dtl {
width: 100px;
height: 45px;
margin-left: 5px;
line-height: 23px;
text-align: left;
overflow: hidden;
}
.coupons-invalid {
background-image: resolve(home/coupons3.png);
&:before {
content: "";
background-image: resolve(home/invalid.png);
background-repeat: no-repeat;
width: 55px;
height: 48px;
position: absolute;
margin-left: 148px;
margin-top: 25px;
}
}
.coupons-info {
width: 388px;
}
.coupons-opt {
.btn {
width: 90px;
... ... @@ -153,11 +201,11 @@
}
}
.coupon .end-soon {
.coupons-wrap .coupon .end-soon {
color: #e8044f;
}
.un-use-coupons {
.coupons-wrap .un-use-coupons {
.coupons-img {
width: 20%;
}
... ...