fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 6ccdd312d9f28ca68323c18684d628bffa3e3dda 1 parent 62d922f7

coupon-style

Inline Side-by-side
Showing 6 changed files with 33 additions and 9 deletions
<section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
<div class="coupon{{#isEqualOr is_overtime 'Y'}} coupon-overtime{{/isEqualOr}}">
<div class="coupon-left">
<p class="value">¥
<span>{{coupon_value_str}}</span>
</p>
<div class="coupon-left{{#isEqualOr is_overtime 'N'}}{{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}{{/isEqualOr}}">
<p class="value">{{#unlessor coupon_type '5'}}¥{{/unlessor}}<span>{{coupon_value_str}}</span></p>
{{#if use_rule}}
<p class="threshold">{{use_rule}}</p>
{{/if}}
</div>
<div class="coupon-right">
<p class="title">
<span class="{{#isEqualOr coupon_type '1'}} type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p>
<span class="{{#isEqualOr coupon_type '1'}}type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}}type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}}type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p>
<p class="time">{{coupon_validity}}</p>
{{#if notes}}
<p>
... ...
... ... @@ -116,7 +116,7 @@ body {
.coupon-left {
width: 200px;
height: 200px;
background-image: resolve("home/coupon/bg_left@2x.png");
background-image: resolve("home/coupon/overtime.png");
background-size: 100% 100%;
float: left;
display: flex;
... ... @@ -130,17 +130,43 @@ body {
font-size: 24px;
font-weight: 300;
&.value > span {
> span {
font-size: 60px;
font-weight: 600;
}
}
.coupon-left-activity {
background-image: resolve("home/coupon/activity.png");
}
.coupon-left-freight {
background-image: resolve("home/coupon/freight.png");
> p {
color: #000;
}
> p > span {
font-size: 48px;
font-weight: 600;
}
}
.coupon-left-shop {
background-image: resolve("home/coupon/shop.png");
> p {
color: #ffa72e;
}
}
.coupon-right {
width: 510px;
height: 200px;
background-image: resolve("home/coupon/bg_right@2x.png");
background-size: 100% 100%;
background-color: #fff;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
float: left;
padding: 22px;
font-size: 22px;
... ...