开通有货分期

@@ -5,49 +5,54 @@
   </div>
 
   <form action="" class="apply-form">
-    <p>
-      <label for="name">姓名： </label>
+    <div class="field">
+      <label for="name">姓名：</label>
 
       <input id="name" name="name" type="text" placeholder="姓名" maxlength="20"/>
-    </p>
+      <div class="clearfix"></div>
+    </div>
 
-    <p>
-      <label for="name">身份证号： </label>
+    <div class="field">
+      <label for="name">身份证号：</label>
 
       <input id="name" name="idCardNo" type="text" placeholder="身份证号" maxlength="18"/>
-    </p>
+      <div class="clearfix"></div>
+    </div>
 
 
-    <p>
+    <div class="field">
       <label for="name">卡号：</label>
-      <input id="name" name="cardNo" type="text" placeholder="银行卡号" maxlength="19"/>
-    </p>
+
+      <input id="card-no" name="cardNo" type="text" placeholder="银行卡号" size="26"/>
+      <div class="clearfix"></div>
+    </div>
 
 
-    <p>
+    <div class="field">
       <label for="name">手机号：</label>
       <input id="name" name="mobilePhone" type="text" placeholder="银行预留手机号码"/>
-    </p>
+      <div class="clearfix"></div>
+    </div>
 
-    <p>
+    <div class="field">
       <label for="name">验证码：</label>
       <input id="name" name="verifyCode" type="text" placeholder="请输入验证码" size="14" maxlength="4"/>
       <button id="send-sms" class="count-down">获取验证码</button>
-    </p>
+      <div class="clearfix"></div>
+    </div>
 
     <div class="agreements">
       <input id="accept-agreements" name="agreements" type="checkbox"/>
       <label for="accept-agreements">
-        免费开通,详情见 <a href="#">《有货分期服务协议》&《第三方支付协议》</a>
+        <span>免费开通,详情见 <a href="#">《有货分期服务协议》&《第三方支付协议》</a></span>
       </label>
+      <div class="clearfix"></div>
     </div>
 
     <div class="data-encryption">
-        数据智能加密，保障您的用卡安全
+      数据智能加密，保障您的用卡安全
     </div>
 
-    <button class="apply-button" type="submit">
-      下一步
-    </button>
+    <button class="apply-button" type="submit">下一步</button>
   </form>
 </div>

 .installment-starting-service-page {
+    background: #fff;
+
+    input[type=checkbox] {
+        display: none;
+
+        & + label {
+            &:before {
+                position: absolute;
+                margin-top: 4px;
+                content: "";
+                display: inline-block;
+                width: 32px;
+                height: 32px;
+                font-size: 27px;
+                background: url("/img/home/circle-check-off.png");
+                background-size: cover;
+                margin-left: -40px;
+            }
+        }
+
+        &:checked {
+            & + label:before {
+                background: url("/img/home/circle-check-on.png");
+                background-size: cover;
+            }
+        }
+    }
+
     .exclamation {
         background-color: #ff7f7f;
         color: white;
@@ -6,9 +34,10 @@
         font-weight: normal;
     }
 
-    p {
+    .field {
         padding: 30px;
         border-bottom: 1px solid #e0e0e0;
+        min-height: 90px;
     }
 
     .apply-button {
@@ -24,23 +53,7 @@
     }
 
     .agreements {
-        padding: 30px;
-
-        input[type=checkbox] {
-            label:before {
-                display: inline-block;
-                position: absolute;
-                width: 16px;
-                height: 16px;
-                left: 0;
-                top: 0;
-                margin-left: -20px;
-                padding-left: 3px;
-                padding-top: 1px;
-                font-size: 11px;
-                color: #555;
-            }
-        }
+        padding: 30px 45px 0 70px;
 
         label {
             font-size: 27px;
@@ -75,9 +88,20 @@
     label {
         font-size: 40px;
         color: #444;
+        float: left;
     }
 
     input[type=text] {
         font-size: 30px;
+        height: 40px;
+        color: #444;
+        float: left;
+        margin-top: 5px;
+    }
+
+    .provider-mark {
+        text-align: center;
+        font-size: 27px;
+        color: #444;
     }
 }