style:验证码

@@ -85,15 +85,19 @@
 .personInfo li span , .verificationCode span{
     color: #9B9B9B;
     font-size: 14px;
+    width: 100px;
+    display: inline-block;
+    text-align: right;
 }
 .personInfo li p {
     display: inline-block;
     color: #4A4A4A;
 }
-.personInfo li em {
+.personInfo li .verCode {
     font-style: normal;
-    width: 70px;
+    width: 90px;
     height: 16px;
+    line-height: 16px;
     border-radius: 2px;
     border: 1px solid #0091FF;
     font-size: 12px;
@@ -110,3 +114,45 @@
     width: 182px;
     display: inline-block;
 }
+.query_criteria {
+    margin: 20px 0;
+}
+.query_criteria .query_criteria_title{
+    color: #9B9B9B;
+    font-size: 14px;
+    width: 100px;
+    padding-left: 0;
+    padding-right: 7px;
+    margin-left: -3px;
+}
+.layui-input-inline .layui-form-label {
+    display: inline-block;
+    width: 50px;
+    text-align: center;
+    background: #FAFAFA;
+    border: 1px solid #DEDEDE;
+    box-sizing: border-box;
+    height: 38px;
+    line-height: 20px;
+}
+.layui-input-inline input {
+    display: inline-block;
+    width: 230px;
+}
+.query_criteria .bdc_title {
+    display: inline-block;
+    margin: 0 15px;
+}
+.examples {
+    color: #FF3D3D;
+    position: relative;
+    top: -15px;
+    margin-left: 103px;
+}
+.submit_button {
+    text-align: center;
+    margin: 30px 0;
+}
+.disabled{
+    cursor: auto;
+}
\ No newline at end of file

@@ -25,6 +25,25 @@ function fetchDataReview() {
             return false;
         });
     });
+    $('.verCode').click(function() {
+        var time = 10;
+        settime($(this));
+        function settime(obj) {
+            if (time == 0) {
+                $(obj).attr('disabled', false);
+                $(obj).html("点击获取验证码");
+                time = 60;
+                return;
+            } else {
+                $(obj).attr('disabled', true);
+                $(obj).html(time + "秒后重新发送");
+                time--;
+            }
+            setTimeout(function () {
+                settime(obj)
+            }, 1000)
+        }
+    })
 }
 // 初始化数据
 function _initData() {

@@ -56,7 +56,7 @@
                 <li>
                     <span>手机号：</span>
                     <p>187789798798</p>
-                    <em>获取验证码</em>
+                    <button type="button" name="button" class="verCode">点击获取验证码</button>
                 </li>
                 <li>
                     <span>身份证号：</span>
@@ -67,14 +67,23 @@
                 <span>验证码：</span>
                 <input type="tel" placeholder="请输入验证码" class="layui-input">
             </div>
-            <div>
-                <label class="layui-form-label">短输入框</label>
+            <div class="query_criteria">
+                <label class="layui-form-label query_criteria_title">不动产证书号：</label>
                 <div class="layui-input-inline">
+                    <label class="layui-form-label">陕</label>
                     <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                         class="layui-input">
                 </div>
+                <p class="bdc_title">西安市不动产</p>
+                <div class="layui-input-inline">
+                    <input type="text" name="username" lay-verify="required" class="layui-input">
+                    <span>号</span>
+                </div>
+            </div>
+            <div class="examples">如：陕 (2019). 西安不动产第10</div>
+            <div class="submit_button">
+                <button type="button" class="layui-btn layui-btn-normal">查看电子证照</button>
             </div>
-            <button type="button" class="layui-btn layui-btn-normal">查询</button>
         </div>
     </div>
 </body>