style:信息校验样式

@@ -38,42 +38,92 @@
     text-align: center;
     text-align: center;
     line-height: 36px;
     line-height: 36px;
 }
 }
-.data_list {
-    margin-bottom: 20px;
+/* ----------------预约列表-------------------- */
+.appointment_list {
+    margin-top: 20px;
+    font-size: 0;
+    margin-left: -10px;
+    margin-right: -10px;
+    overflow: hidden;
 }
 }
-.data_list li {
-    width: 31%;
-    border: 1px solid #d2d2d2;
+.appointment_list li {
+    width: 33.333%;
     display: inline-block;
     display: inline-block;
-    color: #4a4a4a;
-    border-radius: 3px;
+    padding: 0 10px;
     box-sizing: border-box;
     box-sizing: border-box;
-    margin-right: 20px;
+    float: left;
 }
 }
-.data_list li:last-child {
-    margin-right: 0;
+.appointment_list li .item_content {
+    border: 1px solid #CBCBCB;
+    border-radius: 4px;
+    border: 1px solid #CBCBCB;
+    font-size: 16px;
+    height: 368px;
 }
 }
-.data_list li h3 {
-    background-color: #5FB878;
-    text-align: center;
-    line-height: 36px;
-    padding: 0 10px;
-    color: #fff;
+.item_title {
+    height: 48px;
+    line-height: 48px;
+    color: #FFFFFF;
+    padding: 0 20px;
+    box-sizing: border-box;
 }
 }
-.data_list li p {
-    line-height: 40px;
-    padding: 0 10px;
+.item_title h3 {
+    display: inline-block;
+    float: left;
 }
 }
-.data_list li p span {
-    width: 85px;
-    text-align-last: justify;
+.item_title p {
     display: inline-block;
     display: inline-block;
-    margin-right: 10px;
+    float: right;
 }
 }
-.next_button {
+.success {
+    background-color: #44D7B6;
+}
+.overdue {
+    background-color: #F26363;
+}
+.cancel {
+    background-color: #F26363;
+    opacity: 0.5;
+}
+.item_info {
+    padding: 30px;
+    height: 180px;
+}
+.item_info li{
+    width: 100%;
+    line-height: 38px;
+    box-sizing: border-box;
+}
+.item_info li span {
+    display: inline-block;
+    width: 108px;
+    text-align: right;
+    color: #9B9B9B;
+    white-space: nowrap;
+}
+.item_info li p{
+    display: inline-block;
+    color: #303030;
+}
+.item_info li a{
+    display: inline-block;
+    color: #0091FF;
+    margin-left: 20px;
+}
+.cancel_reservation {
+    display: block;
+    width: 100px;
+    height: 40px;
+    background: #FFFFFF;
+    border-radius: 3px;
+    border: 1px solid #E6E6E6;
+    font-size: 16px;
+    color: #9B9B9B;
+    line-height: 40px;
     text-align: center;
     text-align: center;
-    margin-bottom: 20px;
+    margin: 0 auto;
 }
 }
-.next_button a {
-    color: #fff;
+.next_button {
+    text-align: center;
+    margin: 50px 0 100px 0;
 }
 }
\ No newline at end of file

@@ -19,8 +19,8 @@
     flex: 2.1;
     flex: 2.1;
     position: relative;
     position: relative;
     top: 10px;
     top: 10px;
-    margin-left: -3%;
-    margin-right: -3%;
+    margin-left: -3.8%;
+    margin-right: -3.8%;
 }
 }
 .item_proress {
 .item_proress {
     position: relative;
     position: relative;
@@ -36,6 +36,7 @@
 }
 }
 .app_progress li h5 {
 .app_progress li h5 {
     white-space: nowrap;
     white-space: nowrap;
+    margin-top: 5px;
 }
 }
 .active {
 .active {
     background-color: #47E1BF!important;
     background-color: #47E1BF!important;

@@ -71,4 +71,52 @@ $(function () {
             return false;
             return false;
         });
         });
     });
     });
+    // 进度条
+    var data = {
+        'progressList': [
+            {
+                stepName: "信息效验",
+                stepState: 1 //0：未办理 1：正在办理 2：已办理
+            },
+            {
+                stepName: "填报信息",
+                stepState: 0
+            },
+            {
+                stepName: "完税核税",
+                stepState: 0
+            },
+            {
+                stepName: "身份认证",
+                stepState: 0
+            },
+            {
+                stepName: "资料审核",
+                stepState: 0
+            },
+            // {
+            //     stepName: "线上缴费",
+            //     stepState: 0
+            // },
+            // {
+            //     stepName: "生成电子证书",
+            //     stepState: 0
+            // }
+        ],
+    }
+
+    layui.use('laytpl', function () {
+        laytpl = layui.laytpl;
+        var getTpl = document.getElementById('progress').innerHTML
+            , view = document.getElementById('app_progress');
+        laytpl(getTpl).render(data, function (html) {
+            view.innerHTML = html;
+        });
+
+        layui.use(['element'], function () {
+            var element = layui.element;
+            //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
+            element.init();
+        });
+    });
 })
 })

@@ -100,7 +100,7 @@
                         <p>预售商品房抵押登记</p>
                         <p>预售商品房抵押登记</p>
                         <div class="button">
                         <div class="button">
                             <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
                             <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
-                                <a href='./bljy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
+                                <a href='./xxjy.html?title=预告类&bus=预售商品房抵押登记'>立即办理</a>
                             </button>
                             </button>
                             <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
                             <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
                         </div>
                         </div>