giftcard-page

@@ -334,7 +334,8 @@ exports.selectGiftcard = (req, res) => {
         title: '礼品卡',
         pageHeader: headerData,
         pageFooter: false,
-        localCss: true
+        localCss: true,
+        width750: true
     });
 };
 

 <div class="yoho-page select-giftcard-page">
+    <div class="giftcard">
+        <div class="card-title clearfix">
+            <div class="balance pull-left">
+                <label>余额</label>
+                <span>￥1100</span>
+            </div>
+            <div class="logo pull-right"></div>
+        </div>
+        <div class="card-body">
+            <div class="content">
+                <div class="face-value clearfix">
+                    <div class="left-label pull-left">面值</div>
+                    <div class="right-content pull-left"></div>
+                </div>
+                <div class="card-num clearfix">
+                    <div class="left-label pull-left">卡号</div>
+                    <div class="right-content pull-left">12345678909765</div>
+                </div>
+                <div class="valid-priod clearfix">
+                    <div class="left-label pull-left">有效期</div>
+                    <div class="right-conten pull-left">2017.05.01－2017.07.31 <span class="tip">(即将过期)</span></div>
+                </div>
+            </div>
+            <div class="checkbox"></div>
+        </div>
+    </div>
 </div>
\ No newline at end of file

@@ -8,13 +8,16 @@ class SelectGiftCard extends Page {
         this.orderInfo = order.orderInfo;
 
         this.selector = {
-            rule: $('#rule')
+            rule: $('#rule'),
+            page: $('.select-giftcard-page')
         };
         this.init();
     }
 
     init() {
-        console.log('init');
+        this.selector.page.css('min-height', () => {
+            return $(window).height();
+        });
     }
 
     bindEvents() {

+@use postcss-clearfix;
+
+@define-extend padding-30 {
+    padding: 30px 30px 0;
+}
+
+$title-bg-color: #d0021b;
+$title-font-color: #fff;
+
+.select-giftcard-page {
+    @extend padding-30;
+
+    background-color: #f0f0f0;
+
+    .pull-left {
+        float: left;
+    }
+
+    .pull-right {
+        float: right;
+    }
+
+    .clearfix {
+        clear: fix;
+    }
+
+    .giftcard {
+        height: 200px;
+
+        > .card-title {
+            height: 88px;
+            line-height: 88px;
+            background-color: $title-bg-color;
+            color: $title-font-color;
+            border-top-left-radius: 12.5px;
+            border-top-right-radius: 12.5px;
+
+            .balance > label {
+                font-size: 26px;
+            }
+
+            .balance > span {
+                font-size: 36px;
+            }
+
+            .logo {
+                float: right;
+            }
+        }
+
+        > .card-body {
+            height: 168px;
+            background-color: #fff;
+            border-bottom-left-radius: 12.5px;
+            border-bottom-right-radius: 12.5px;
+            font-size: 11px;
+        }
+    }
+}