select-giftcard-style

@@ -5,24 +5,30 @@
                 <label>余额</label>
                 <span>￥1100</span>
             </div>
-            <div class="logo pull-right"></div>
+            <div class="logo pull-right">
+                <i class="iconfont">&#xe60e;</i>
+                <i class="iconfont">&#xe60d;</i>
             </div>
-        <div class="card-body">
-            <div class="content">
-                <div class="face-value clearfix">
+        </div>
+        <div class="card-body clearfix">
+            <div class="content pull-left">
+                <div class="content-li clearfix">
                     <div class="left-label pull-left">面值</div>
-                    <div class="right-content pull-left"></div>
+                    <div class="right-content pull-left">¥2000.00</div>
                 </div>
-                <div class="card-num clearfix">
+                <div class="content-li clearfix">
                     <div class="left-label pull-left">卡号</div>
                     <div class="right-content pull-left">12345678909765</div>
                 </div>
-                <div class="valid-priod clearfix">
+                <div class="content-li 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 class="right-content pull-left">2017.05.01－2017.07.31 <span class="tip">(即将过期)</span></div>
+                </div>
             </div>
+            <div class="checkbox pull-right">
+                <i class="iconfont">&#xe647;</i>
+                <i class="iconfont hide">&#xe617;</i>
             </div>
-            <div class="checkbox"></div>
         </div>
     </div>
 </div>
\ No newline at end of file

@@ -16,7 +16,7 @@ class SelectGiftCard extends Page {
 
     init() {
         this.selector.page.css('min-height', () => {
-            return $(window).height();
+            return $(window).height() - $('#yoho-header').height();
         });
     }
 

@@ -12,6 +12,10 @@ $title-font-color: #fff;
 
     background-color: #f0f0f0;
 
+    .hide {
+        display: none;
+    }
+
     .pull-left {
         float: left;
     }
@@ -25,8 +29,6 @@ $title-font-color: #fff;
     }
 
     .giftcard {
-        height: 200px;
-
         > .card-title {
             height: 88px;
             line-height: 88px;
@@ -36,7 +38,8 @@ $title-font-color: #fff;
             border-top-right-radius: 12.5px;
 
             .balance > label {
-                font-size: 26px;
+                margin-left: 80px;
+                font-size: 28px;
             }
 
             .balance > span {
@@ -44,16 +47,43 @@ $title-font-color: #fff;
             }
 
             .logo {
+                font-size: 40px;
+                margin-right: 20px;
                 float: right;
             }
         }
 
         > .card-body {
-            height: 168px;
+            padding: 10px 30px;
+            height: 188px;
             background-color: #fff;
             border-bottom-left-radius: 12.5px;
             border-bottom-right-radius: 12.5px;
             font-size: 11px;
+
+            > .content {
+                width: 590px;
+                color: #444;
+            }
+
+            > .content > .content-li {
+                line-height: 54px;
+
+                > .left-label {
+                    width: 90px;
+                    font-weight: 600;
+                }
+            }
+
+            > .checkbox {
+                width: 40px;
+                height: 188px;
+                padding-top: 54px;
+            }
+
+            > .checkbox > .iconfont {
+                font-size: 40px;
+            }
         }
     }
 }