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
1 <div class="yoho-page my-coupon-page"> 1 <div class="yoho-page my-coupon-page">
2 - <div class="employ">  
3 - <span class="active">未使用</span>  
4 - <span>已使用</span>  
5 - </div>  
6 - <div id="employ" class="coupon-list">  
7 - {{#if list}}  
8 - {{#list}}  
9 - <div class="employ-main">  
10 - <span>{{money}}</span>  
11 - <p class="coupon-name">{{coupon_name}}</p>  
12 - <p>有效期：{{couponValidity}}</p>  
13 - {{#if ../used}}  
14 - <i></i>  
15 - {{/if}}  
16 - </div>  
17 - {{/list}} 2 + <div class="coupon-tab">
  3 + <ul>
  4 + <li class="activate">未使用</li>
  5 + <li>已使用</li>
  6 + <li>已失效</li>
  7 + </ul>
  8 + </div>
18 9
19 - {{else}}  
20 - <div class="null">  
21 - <i></i>  
22 - <p>您还没有优惠券!</p>  
23 - <a href="/product/new">随便逛逛</a>  
24 - </div> 10 + <div class="coupon-list">
  11 + <div class="coupon-group">
  12 + <div class="coupon-header">VANS专享券满899减200</div>
  13 + <div class="coupon-content">
  14 + <div class="coupon-content-group1">
  15 + <p class="coupon-money">200</p>
  16 + <p>满899可用</p>
  17 + </div>
  18 + <div class="coupon-content-group2">
  19 + <div class="coupon-content-group2-table">
  20 + <div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>
  21 + <div>
  22 + <div class="left down">详细信息<i class="iconfont"></i></div>
  23 + <div class="right"><span class="btn">立即使用</span></div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 + <div class="coupon-footer hide">
  29 + <p>限品牌：VANS</p>
  30 + <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
  31 + <p>说明：金卡用户专用</p>
  32 + </div>
  33 + </div>
25 34
26 - {{/if}}  
27 - </div>  
28 - <div id="employ2" class="coupon-list">  
29 -</div>  
  35 + <div class="coupon-group">
  36 + <div class="coupon-header">VANS专享券满899减200</div>
  37 + <div class="coupon-content">
  38 + <div class="coupon-content-group1">
  39 + <p class="coupon-money">200</p>
  40 + <p>满899可用</p>
  41 + </div>
  42 + <div class="coupon-content-group2">
  43 + <div class="coupon-content-group2-table">
  44 + <div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>
  45 + <div>
  46 + <div class="left up">详细信息<i class="iconfont"></i></div>
  47 + <div class="right"><span class="btn">立即使用</span></div>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + <div class="coupon-footer">
  53 + <p>限品牌：VANS</p>
  54 + <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
  55 + <p>说明：金卡用户专用</p>
  56 + </div>
  57 + </div>
  58 + </div>
  59 +</div>
1 -@import "coupons";  
  1 +.my-coupon-page {
  2 + background-color: #f2f2f2;
  3 +
  4 + .coupon-tab {
  5 + height: 90px;
  6 + line-height: 90px;
  7 + text-align: center;
  8 + background-color: #fff;
  9 + font-size: 32px;
  10 + color: #b0b0b0;
  11 +
  12 + ul li {
  13 + float: left;
  14 + width: 33.33%;
  15 +
  16 + &.activate {
  17 + color: #444;
  18 + }
  19 + }
  20 + }
  21 +
  22 + .coupon-group {
  23 + background-color: #f2f2f2;
  24 + color: #fff;
  25 + margin: 20px 20px 0;
  26 +
  27 + & > div {
  28 + padding: 0 15px;
  29 + }
  30 +
  31 + .coupon-header {
  32 + border-radius: 10px 10px 0 0;
  33 + background-color: #e53333;
  34 + height: 60px;
  35 + line-height: 60px;
  36 + box-shadow: 0 0 10px #eee;
  37 + }
  38 +
  39 + .coupon-content {
  40 + border-radius: 0 0 10px 10px;
  41 + height: 140px;
  42 + border-top: 1px dashed #e53333;
  43 + display: table;
  44 + color: #f2f2f2;
  45 + padding: 15px 0;
  46 + background-color: #f06a6b;
  47 +
  48 + .coupon-content-group1 {
  49 + display: table-cell;
  50 + text-align: center;
  51 + vertical-align: middle;
  52 + font-size: 20px;
  53 +
  54 + p {
  55 + width: 200px;
  56 + overflow: hidden;
  57 + }
  58 +
  59 + .coupon-money {
  60 + font-size: 70px;
  61 + }
  62 + }
  63 +
  64 + .coupon-content-group2 {
  65 + display: table-cell;
  66 + font-size: 16px;
  67 + border-left: 1px solid #f1aeaf;
  68 + padding-left: 20px;
  69 + padding-right: 20px;
  70 + width: 100%;
  71 +
  72 + .coupon-content-group2-table {
  73 + display: table;
  74 + overflow: hidden;
  75 + height: 100%;
  76 + line-height: 45px;
  77 + }
  78 +
  79 + .coupon-content-group2-table > div {
  80 + display: table-row;
  81 + height: 100%;
  82 + }
  83 +
  84 + .left {
  85 + float: left;
  86 + line-height: 45px;
  87 +
  88 + &.down .iconfont:before {
  89 + content: '\e609';
  90 + }
  91 +
  92 + &.up .iconfont:before {
  93 + content: '\e608';
  94 + }
  95 + }
  96 +
  97 + .right {
  98 + float: right;
  99 + }
  100 +
  101 + .coupon-expire {
  102 + color: #000;
  103 + }
  104 +
  105 + .btn {
  106 + display: inline-block;
  107 + width: 120px;
  108 + height: 45px;
  109 + text-align: center;
  110 + background-color: #e53333;
  111 + border-radius: 10px;
  112 + color: #fff;
  113 + }
  114 + }
  115 + }
  116 +
  117 + .coupon-footer {
  118 + background-color: #f06a6b;
  119 + padding: 20px;
  120 + font-size: 20px;
  121 + border-radius: 10px;
  122 + border-top: 1px dashed #fff;
  123 + }
  124 +
  125 + }
  126 +}