fe / yohobuy-node · Commits

Go to a project

Authored by yyq
Commit a1f510a6049970db0bcec8eb56eda9c9fa375fad 1 parent 5d821647

ensure

Inline Side-by-side
Showing 4 changed files with 306 additions and 25 deletions
... ... @@ -200,19 +200,75 @@
<p class="coupon-err-tip"></p>
</div>
</dt>
<dd>
<dd class="coupon-choose-box">
<div class="coupon-opt-title">
<ul class="coupon-tab clearfix">
<li class="active">可用（99+）</li>
<li>不可用（12）</li>
</ul>
<div class="use-code">
<span class="err-tip red">23112</span>
<input type="text" class="coupon-code" placeholder="输入优惠码">
<label class="sure-convert fw300">兑换</label>
</div>
<span class="ticket-use-tip hide">
已成功使用<em class="red num">1</em>张优惠券，<em class="red price"></em>
<b class="cancel-use-ticket">取消使用</b>
</span>
<p class="tip-box red right"></p>
</div>
<div class="coupon-list-wrap"></div>
<div class="coupon-list-wrap1">
<div class="type-list clearfix">
<label class="active">全部优惠券</label>
<label>店铺券</label>
<label>活动券</label>
<label>运费券</label>
</div>
<div class="list-content">
<div class="coupon-item">
<div class="border">
<div class="due-tig"></div>
<div class="worth">
<p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">
使用说明 >
<p class="explain-wrap">
全场通用，特例商品暂不支持使用优惠券<br>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺可以叠加使用
</p>
</label>
<p class="mutex-tip">已选择一张此店铺优惠券；<br>单笔订单同店铺只能使用一张店铺券</p>
</div>
<span class="iconfont check-icon coupon-check-btn">&#xe622;</span>
<span class="iconfont coupon-check-btn">&#xe6c3;</span>
<span class="iconfont disable-icon coupon-check-btn">&#xe6f2;</span>
</div>
</div>
<div class="coupon-item mutex">
<div class="border">
<div class="due-tig"></div>
<div class="worth">
<p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">
使用说明 >
<p class="explain-wrap">
全场通用，特例商品暂不支持使用优惠券<br>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺可以叠加使用
</p>
</label>
<p class="mutex-tip">已选择一张此店铺优惠券；<br>单笔订单同店铺只能使用一张店铺券</p>
</div>
<span class="iconfont disable-icon coupon-check-btn">&#xe6f2;</span>
</div>
</div>
</div>
</div>
<div class="coupon-list-wrap">
</div>
</dd>
{{/unless}}
... ...
... ... @@ -27,7 +27,7 @@
<p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="name"><span class="type type-s">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">
使用说明 >
... ... @@ -45,7 +45,7 @@
<p>¥<span class="price">100</span><br><span class="conditions">满499可用</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="name"><span class="type type-a">[店铺券]</span> Adidas Origins店铺使用</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">使用说明 ></label>
</div>
... ... @@ -58,7 +58,7 @@
<p><span class="freight">普通</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type">[运费券]</span> 8月份运费券</p>
<p class="name"><span class="type type-d">[运费券]</span> 8月份运费券</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">使用说明 ></label>
</div>
... ... @@ -71,7 +71,7 @@
<p><span class="freight">顺丰</span></p>
</div>
<div class="coupon-info">
<p class="name"><span class="type">[运费券]</span> 8月份运费券</p>
<p class="name"><span class="type type-d">[运费券]</span> 8月份运费券</p>
<p class="time">2018.1.12-2018.5.20</p>
<label class="explain">使用说明 ></label>
</div>
... ...
... ... @@ -971,19 +971,42 @@
}
}
.coupon-choose-box {
border: 1px solid #e0e0e0;
}
.coupon-opt-title {
height: 50px;
line-height: 50px;
padding: 0 30px;
height: 40px;
line-height: 40px;
background-color: #f0f0f0;
border-bottom: 1px solid #e0e0e0;
.red {
color: $red;
}
.use-code {
.coupon-tab {
display: inline-block;
li {
min-width: 120px;
float: left;
color: #b0b0b0;
text-align: center;
cursor: pointer;
}
.active {
background: #fff;
color: #444;
font-weight: bold;
}
}
.use-code {
float: right;
margin-right: 20px;
> input {
width: 180px;
line-height: 24px;
... ... @@ -1005,29 +1028,230 @@
display: inline-block;
}
}
}
.ticket-use-tip {
.coupon-list-wrap1 {
padding: 20px;
position: relative;
.type-list {
width: 100%;
padding: 10px 0;
position: absolute;
left: 0;
top: -1px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
> label {
float: left;
min-width: 90px;
height: 30px;
line-height: 30px;
color: #444;
font-size: 12px;
text-align: center;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
margin-left: 40px;
cursor: pointer;
}
> label:first-child {
margin-left: 20px;
}
.num {
margin: 0 4px;
.active {
color: #fff;
background: #444;
border-color: #444;
}
}
.red {
color: $red;
.type-list + .list-content {
margin-top: 50px;
}
.cancel-use-ticket {
color: #1987cf;
.list-content {
width: 100%;
height: 420px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
}
.coupon-item {
width: 354px;
height: 100px;
font-size: 12px;
display: inline-block;
margin-left: 20px;
cursor: pointer;
margin-bottom: 15px;
overflow: hidden;
position: relative;
user-select: none;
.border {
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #efefef;
border-radius: 4px;
box-sizing: border-box;
}
.due-tig {
width: 42px;
height: 42px;
background: resolve(home/due-tig.png);
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.worth {
width: 100px;
line-height: 100px;
color: #fc5960;
border-right: 1px dashed #e0e0e0;
text-align: center;
position: absolute;
left: 0;
> p {
width: 90%;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.price {
font-size: 30px;
font-weight: bold;
}
.conditions {
line-height: 1.5;
margin-top: 10px;
display: block;
}
.freight {
font-size: 24px;
color: #444;
}
&:before,
&:after {
content: "";
width: 15px;
height: 15px;
position: absolute;
right: -8px;
background: resolve(home/grey-round.png);
}
&:before {
top: -10px;
}
&:after {
bottom: -9px;
}
}
.coupon-info {
padding: 12px 10px;
margin-left: 100px;
color: #b0b0b0;
.name {
max-width: 90%;
height: 36px;
line-height: 1.3;
font-size: 13px;
color: #444;
overflow: hidden;
}
.type {
font-weight: bold;
}
.time {
margin-bottom: 16px;
}
.explain-wrap {
width: calc(100% - 111px);
height: 98px;
line-height: 1.4;
position: absolute;
top: 1px;
left: 110px;
color: #444;
background: #fff;
box-sizing: border-box;
padding-top: 20px;
padding-right: 20px;
border-radius: 6px;
z-index: 2;
word-break: break-all;
overflow: hidden;
display: none;
}
.explain:hover .explain-wrap {
display: block;
}
.mutex-tip {
width: 210px;
height: 30px;
line-height: 1.2;
position: absolute;
left: 110px;
bottom: 7px;
background: #fff;
color: #444 !important;
overflow: hidden;
word-break: break-all;
display: none;
}
}
.coupon-check-btn {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 18px;
color: #b0b0b0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -10px;
}
.disable-icon {
color: #e0e0e0 !important;
font-size: 20px;
}
.check-icon {
color: #444;
font-size: 22px;
}
}
.mutex * {
color: #b0b0b0 !important;
}
}
.coupon-list-wrap {
padding: 0 30px;
border: 1px solid #e8e8e8;
line-height: 18px;
padding-bottom: 10px;
... ...
... ... @@ -125,7 +125,7 @@
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #e0e0e0;
border: 1px solid #efefef;
border-radius: 4px;
box-sizing: border-box;
}
... ... @@ -220,6 +220,7 @@
position: absolute;
top: 1px;
left: 110px;
color: #444;
background: #fff;
box-sizing: border-box;
padding-top: 20px;
... ...