fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 489afa950990397c463f12ad71a8cf4516c232ba 1 parent 4329d1cb

个人中心优惠券样式

Inline Side-by-side
Showing 2 changed files with 182 additions and 27 deletions
<div class="yoho-page my-coupon-page">
<div class="employ">
<span class="active">未使用</span>
<span>已使用</span>
</div>
<div id="employ" class="coupon-list">
{{#if list}}
{{#list}}
<div class="employ-main">
<span>{{money}}</span>
<p class="coupon-name">{{coupon_name}}</p>
<p>有效期：{{couponValidity}}</p>
{{#if ../used}}
<i></i>
{{/if}}
</div>
{{/list}}
<div class="coupon-tab">
<ul>
<li class="activate">未使用</li>
<li>已使用</li>
<li>已失效</li>
</ul>
</div>
{{else}}
<div class="null">
<i></i>
<p>您还没有优惠券!</p>
<a href="/product/new">随便逛逛</a>
</div>
<div class="coupon-list">
<div class="coupon-group">
<div class="coupon-header">VANS专享券满899减200</div>
<div class="coupon-content">
<div class="coupon-content-group1">
<p class="coupon-money">200</p>
<p>满899可用</p>
</div>
<div class="coupon-content-group2">
<div class="coupon-content-group2-table">
<div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>
<div>
<div class="left down">详细信息<i class="iconfont"></i></div>
<div class="right"><span class="btn">立即使用</span></div>
</div>
</div>
</div>
</div>
<div class="coupon-footer hide">
<p>限品牌：VANS</p>
<p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
<p>说明：金卡用户专用</p>
</div>
</div>
{{/if}}
</div>
<div id="employ2" class="coupon-list">
</div>
\ No newline at end of file
<div class="coupon-group">
<div class="coupon-header">VANS专享券满899减200</div>
<div class="coupon-content">
<div class="coupon-content-group1">
<p class="coupon-money">200</p>
<p>满899可用</p>
</div>
<div class="coupon-content-group2">
<div class="coupon-content-group2-table">
<div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>
<div>
<div class="left up">详细信息<i class="iconfont"></i></div>
<div class="right"><span class="btn">立即使用</span></div>
</div>
</div>
</div>
</div>
<div class="coupon-footer">
<p>限品牌：VANS</p>
<p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
<p>说明：金卡用户专用</p>
</div>
</div>
</div>
</div>
... ...
@import "coupons";
\ No newline at end of file
.my-coupon-page {
background-color: #f2f2f2;
.coupon-tab {
height: 90px;
line-height: 90px;
text-align: center;
background-color: #fff;
font-size: 32px;
color: #b0b0b0;
ul li {
float: left;
width: 33.33%;
&.activate {
color: #444;
}
}
}
.coupon-group {
background-color: #f2f2f2;
color: #fff;
margin: 20px 20px 0;
& > div {
padding: 0 15px;
}
.coupon-header {
border-radius: 10px 10px 0 0;
background-color: #e53333;
height: 60px;
line-height: 60px;
box-shadow: 0 0 10px #eee;
}
.coupon-content {
border-radius: 0 0 10px 10px;
height: 140px;
border-top: 1px dashed #e53333;
display: table;
color: #f2f2f2;
padding: 15px 0;
background-color: #f06a6b;
.coupon-content-group1 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 20px;
p {
width: 200px;
overflow: hidden;
}
.coupon-money {
font-size: 70px;
}
}
.coupon-content-group2 {
display: table-cell;
font-size: 16px;
border-left: 1px solid #f1aeaf;
padding-left: 20px;
padding-right: 20px;
width: 100%;
.coupon-content-group2-table {
display: table;
overflow: hidden;
height: 100%;
line-height: 45px;
}
.coupon-content-group2-table > div {
display: table-row;
height: 100%;
}
.left {
float: left;
line-height: 45px;
&.down .iconfont:before {
content: '\e609';
}
&.up .iconfont:before {
content: '\e608';
}
}
.right {
float: right;
}
.coupon-expire {
color: #000;
}
.btn {
display: inline-block;
width: 120px;
height: 45px;
text-align: center;
background-color: #e53333;
border-radius: 10px;
color: #fff;
}
}
}
.coupon-footer {
background-color: #f06a6b;
padding: 20px;
font-size: 20px;
border-radius: 10px;
border-top: 1px dashed #fff;
}
}
}
... ...