fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 498cf7bc6d57c86d7a065fda712e460fb3aa3cae 1 parent 10cdd225

page-base-ok

Inline Side-by-side
Showing 3 changed files with 169 additions and 1 deletions
... ... @@ -363,7 +363,8 @@ exports.selectCoupons = (req, res) => {
selectCouponPage: true,
pageHeader: headerData,
pageFooter: false,
localCss: true
localCss: true,
width750: true
});
};
... ...
<div class="select-coupons-page">
<div class="filter-box">
<span class="valid">可用(99+)<span class="iconfont">&#xe609;</span></span>
<span class="invalid">不可用(99+)</span>
</div>
<div class="exchange-box">
<input type="text" placeholder="请输入优惠券码">
<button>兑换</button>
</div>
<div class="tip-box">
<div class="tips">
<p>店铺券、活动券、运费券可叠加使用；</p>
<p>跨店铺店铺券可以叠加使用，同一个店铺的店铺券不可叠加使用。</p>
</div>
<div class="close"><span class="iconfont">&#xe623;</span></div>
</div>
<div class="coupon-list">
<div class="coupon">
<div class="coupon-left">
<p class="value">¥
<span>100</span>
</p>
<p class="threshold">满499可用</p>
</div>
<div class="coupon-right">
<div class="info">
<p class="title">
<span>[店铺券]</span>Adidas Origins店铺使用</p>
<p class="time">2018.1.12-2018.5.20</p>
</div>
<div class="check"><span class="iconfont checkbox icon-cb-radio"></span></div>
</div>
</div>
</div>
</div>
... ...
body {
background-color: #f0f0f0;
}
.select-coupons-page {
.filter-box {
height: 88px;
display: flex;
padding: 14px 0;
box-shadow: 0 0 16px 0 #eee;
background-color: #fff;
position: relative;
span {
flex: 1;
line-height: 60px;
text-align: center;
border-right: 1px solid #e0e0e0;
color: #b0b0b0;
}
span:last-child {
border: none;
}
}
.exchange-box {
height: 90px;
padding: 16px 20px;
background-color: #fff;
input {
width: 580px;
height: 60px;
margin-right: 12px;
padding: 0 20px;
background-color: #f0f0f0;
border-radius: 4px;
border: none;
}
button {
width: 110px;
height: 60px;
border-radius: 4px;
font-size: 28px;
color: #fff;
background-color: #444;
}
}
.tip-box {
width: 100%;
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 22px;
background-color: #ff8083;
}
.coupon-list {
padding: 20px;
.coupon {
width: 710px;
height: 200px;
margin-bottom: 20px;
.coupon-left {
width: 200px;
height: 200px;
background-image: resolve("home/coupon/bg_left@2x.png");
background-size: 100% 100%;
float: left;
text-align: center;
padding-top: 32px;
}
.coupon-left > p {
color: #fc5960;
font-size: 24px;
font-weight: 300;
&.value > span {
font-size: 60px;
font-weight: 600;
}
}
.coupon-right {
width: 510px;
height: 200px;
background-image: resolve("home/coupon/bg_right@2x.png");
background-size: 100% 100%;
float: right;
padding: 22px 0 22px 22px;
font-size: 22px;
color: #b0b0b0;
position: relative;
display: flex;
.info {
flex: 1;
}
.info > .title {
font-size: 24px;
color: #444;
margin-bottom: 40px;
}
.info > .time {
margin-bottom: 26px;
}
.check {
width: 90px;
display: flex;
justify-content: center;
align-self: center;
}
.check > .iconfont {
font-size: 40px;
color: #444;
}
}
}
}
}
... ...