Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
2b8b186c by 任超
Options

style:我的预约

1 parent 849fed7b
Inline Side-by-side
Showing 11 changed files with 257 additions and 167 deletions
...@@ -392,6 +392,21 @@ div.footer .system_service ul li a:hover { ...@@ -392,6 +392,21 @@ div.footer .system_service ul li a:hover {
392 .show{ 392 .show{
393 display: inline-block!important; 393 display: inline-block!important;
394 } 394 }
395 .appointment_content {
396 background: #FFFFFF;
397 box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
398 -moz-box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
399 -webkit-box-shadow: 0px 2px 4px 0px rgba(10, 14, 40, 0.05);
400 border-radius: 6px;
401 border: 1px solid #E5E8ED;
402 width: 1200px;
403 margin: 0 auto;
404 margin-top: 20px;
405 padding: 20px;
406 box-sizing: border-box;
407 margin-bottom: 30px;
408 }
409
395 /* card样式 */ 410 /* card样式 */
396 .cardItem { 411 .cardItem {
397 background: #FFFFFF; 412 background: #FFFFFF;
......
1 .progressBar { 1 .progressBar {
2 padding-top: 30px; 2 padding-top: 30px;
3 color: #4A4A4A; 3 color: #4A4A4A;
4 width: 95%;
5 margin: 0 auto;
4 } 6 }
5 .app_progress li { 7 .app_progress li {
6 display: inline-block; 8 display: inline-block;
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
29 } 31 }
30 .progressBar .layui-progress { 32 .progressBar .layui-progress {
31 display: inline-block; 33 display: inline-block;
32 width: 352px; 34 width: 313px;
33 position: relative; 35 position: relative;
34 top: -41px; 36 top: -41px;
35 left: -24px; 37 left: -24px;
......
...@@ -166,4 +166,10 @@ ...@@ -166,4 +166,10 @@
166 .layui-btn-disabled { 166 .layui-btn-disabled {
167 background-color: #0091FF!important; 167 background-color: #0091FF!important;
168 opacity: 0.5!important; 168 opacity: 0.5!important;
169 }
170 .map {
171 width: 80%;
172 height: 500px;
173 float: right;
174 margin-bottom: 50px;
169 } 175 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -56,7 +56,29 @@ ...@@ -56,7 +56,29 @@
56 color: #4A4A4A; 56 color: #4A4A4A;
57 font-weight: 600; 57 font-weight: 600;
58 margin-bottom: 10px; 58 margin-bottom: 10px;
59 text-align: center;
59 } 60 }
61 .appointment_status .title .title-left {
62 display: inline-block;
63 position: relative;
64 top: -36px;
65 margin-right: 15px;
66 }
67 .appointment_status .title .title-left p {
68 color: #6D7278;
69 font-weight: 100;
70 }
71 .qrcode {
72 display: inline-block;
73 margin-left: 15px;
74 }
75 .appointment_status .title img {
76 width: 24px;
77 height: 24px;
78 position: relative;
79 top: 5px;
80 }
81
60 .appointment_status .title h3 { 82 .appointment_status .title h3 {
61 font-weight: 600; 83 font-weight: 600;
62 margin-bottom: 8px; 84 margin-bottom: 8px;
...@@ -65,9 +87,6 @@ ...@@ -65,9 +87,6 @@
65 color: #FA6400; 87 color: #FA6400;
66 font-size: 18px; 88 font-size: 18px;
67 } 89 }
68 .appointment_status ul {
69 margin-top: 30px;
70 }
71 .appointment_status ul li { 90 .appointment_status ul li {
72 color: #4A4A4A; 91 color: #4A4A4A;
73 line-height: 28px; 92 line-height: 28px;
...@@ -116,6 +135,40 @@ ...@@ -116,6 +135,40 @@
116 text-align: right; 135 text-align: right;
117 } 136 }
118 #container { 137 #container {
119 margin-bottom: 100px;
120 margin-top: 10px; 138 margin-top: 10px;
139 }
140 .qrcode img {
141 width: 107px!important;
142 height: 107px!important;
143 border: 1px solid #DEDEDE;
144 margin-bottom: 10px;
145 }
146 .qrcode p {
147 color: #6D7278;
148 font-size: 14px;
149 font-weight: 100;
150 }
151
152 .region_title {
153 height: 25px;
154 padding-left: 8px;
155 font-size: 16px;
156 line-height: 25px;
157 font-weight: 600;
158 margin-bottom: 20px;
159 position: relative;
160 padding-bottom: 10px;
161 color: #4A4A4A;
162 border-bottom: 1px dotted #E6E6E6;
163 width: 100%;
164 }
165 .region_title::before {
166 position:absolute;
167 content:"";
168 left:0;
169 width:4px;
170 height:12px;
171 border-radius: 1px;
172 top: 5px;
173 background-color: #0091FF;
121 } 174 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
32 } 32 }
33 /* -------------------------------预约日期---------------------------------------- */ 33 /* -------------------------------预约日期---------------------------------------- */
34 .appoint_time { 34 .appoint_time {
35 width: 1200px;
36 height: 92px; 35 height: 92px;
37 margin: 0 auto; 36 margin: 0 auto;
38 padding: 0 150px; 37 padding: 0 150px;
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
69 } 69 }
70 .next_button { 70 .next_button {
71 text-align: center; 71 text-align: center;
72 margin: 30px 0 100px 0; 72 margin: 30px 0;
73 } 73 }
74 .next_button button { 74 .next_button button {
75 width: 140px; 75 width: 140px;
......
...@@ -29,6 +29,7 @@ function getAppointmentDetail() { ...@@ -29,6 +29,7 @@ function getAppointmentDetail() {
29 var endTime = result.data.endTime; 29 var endTime = result.data.endTime;
30 var yysjtotal = year + month + day + startTime + endTime; 30 var yysjtotal = year + month + day + startTime + endTime;
31 $('#yysj').text(yysjtotal); 31 $('#yysj').text(yysjtotal);
32 $('.qrcode img').attr('src',result.data.qrcode);
32 if (result.data.renegeCount == null) { 33 if (result.data.renegeCount == null) {
33 renegeCounttotal = 0; 34 renegeCounttotal = 0;
34 } else { 35 } else {
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <style> 6 <style>
6 </style> 7 </style>
...@@ -22,84 +23,86 @@ ...@@ -22,84 +23,86 @@
22 </span> 23 </span>
23 </div> 24 </div>
24 </div> 25 </div>
25 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 26 <div class="appointment_content">
26 <div class="progressBar contentBox"> 27 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
27 <ul class="app_progress"> 28 <div class="progressBar">
28 <li> 29 <ul class="app_progress">
29 <p class="active"></p> 30 <li>
30 <h5> 31 <p class="active"></p>
31 预约须知 32 <h5>
32 </h5> 33 预约须知
33 </li> 34 </h5>
34 <div class="layui-progress"> 35 </li>
35 <div class="layui-progress-bar" lay-percent="100%"></div> 36 <div class="layui-progress">
36 </div> 37 <div class="layui-progress-bar" lay-percent="100%"></div>
37 <li> 38 </div>
38 <p class="activeing"></p> 39 <li>
39 <h5 class="activeingtext"> 40 <p class="activeing"></p>
40 选择区域 41 <h5 class="activeingtext">
41 </h5> 42 选择区域
42 </li> 43 </h5>
43 <div class="layui-progress"> 44 </li>
44 <div class="layui-progress-bar" lay-percent="50%"></div> 45 <div class="layui-progress">
45 </div> 46 <div class="layui-progress-bar" lay-percent="50%"></div>
46 <li> 47 </div>
47 <p></p> 48 <li>
48 <h5> 49 <p></p>
49 预约时间 50 <h5>
50 </h5> 51 预约时间
51 </li> 52 </h5>
52 <div class="layui-progress"> 53 </li>
53 <div class="layui-progress-bar"></div> 54 <div class="layui-progress">
54 </div> 55 <div class="layui-progress-bar"></div>
55 <li> 56 </div>
56 <p></p> 57 <li>
57 <h5> 58 <p></p>
58 预约结果 59 <h5>
59 </h5> 60 预约结果
60 </li> 61 </h5>
61 </ul> 62 </li>
62 </div>
63 <!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
64 <div class="selectCity">
65 <h2 class="region_title">选择区域</h2>
66 <form class="layui-form">
67 <h2 class="title">省</h2>
68 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
69 <select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
70 <option value="">选择省</option>
71 </select>
72 </div>
73 <h2>市</h2>
74 <div class="layui-inline selected layui-select-default">
75 <select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
76 <option value="">选择市</option>
77 </select>
78 </div>
79 </form>
80 <div class="area_list_content">
81 <h2>区</h2>
82 <ul class="area_list">
83 </ul> 63 </ul>
84 </div> 64 </div>
85 </div> 65 <!-- ---------------------------------------省市办事大厅选择------------------------------------------- -->
86 <!-- ----------------------------------地图api--------------------------------------------------- --> 66 <div class="selectCity">
87 <div class="map_content contentBox"> 67 <h2 class="region_title">选择区域</h2>
88 <h2 class="region_title">选择办事大厅</h2> 68 <form class="layui-form">
89 <ul class="office_halls"></ul> 69 <h2 class="title">省</h2>
90 <div id="container" style="width: 80%;height: 500px;float: right;"></div> 70 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
91 </div> 71 <select name="province" class="Pselected" disabled data-area="浙江省"" lay-filter=" province">
92 <div class="footer_button"> 72 <option value="">选择省</option>
93 <button type="button" class="layui-btn layui-btn-normal"> 73 </select>
94 <a href="./yyxz.html" title="上一步"> 74 </div>
95 上一步 75 <h2>市</h2>
96 </a> 76 <div class="layui-inline selected layui-select-default">
97 </button> 77 <select name="city" class="Cselected" disabled data-area="杭州市" lay-filter="selectCity">
98 <button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled"> 78 <option value="">选择市</option>
99 <a title="下一步"> 79 </select>
100 下一步 80 </div>
101 </a> 81 </form>
102 </button> 82 <div class="area_list_content">
83 <h2>区</h2>
84 <ul class="area_list">
85 </ul>
86 </div>
87 </div>
88 <!-- ----------------------------------地图api--------------------------------------------------- -->
89 <div class="map_content">
90 <h2 class="region_title">选择办事大厅</h2>
91 <ul class="office_halls"></ul>
92 <div id="container" class="map"></div>
93 </div>
94 <div class="footer_button">
95 <button type="button" class="layui-btn layui-btn-normal">
96 <a href="./yyxz.html" title="上一步">
97 上一步
98 </a>
99 </button>
100 <button type="button" id="nextButton" class="layui-btn nextButton layui-btn-normal layui-btn-disabled">
101 <a title="下一步">
102 下一步
103 </a>
104 </button>
105 </div>
103 </div> 106 </div>
104 </div> 107 </div>
105 </body> 108 </body>
......
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
23 </div> 23 </div>
24 </div> 24 </div>
25 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 25 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
26 <div class="central_area"> 26 <div class="central_area appointment_content">
27 <div class="progressBar contentBox"> 27 <div class="progressBar">
28 <ul class="app_progress"> 28 <ul class="app_progress">
29 <li> 29 <li>
30 <p class="active"></p> 30 <p class="active"></p>
...@@ -62,23 +62,32 @@ ...@@ -62,23 +62,32 @@
62 </ul> 62 </ul>
63 </div> 63 </div>
64 <!-- ---------------------预约状态------------------------- --> 64 <!-- ---------------------预约状态------------------------- -->
65 <div class="appointment_status contentBox"> 65 <div class="appointment_status">
66 <div class="status_info"> 66 <div class="status_info">
67 <div class="title"> 67 <div class="title">
68 <h3> 68 <div class="title-left">
69 预约成功！您的预约号： 69 <h3>
70 <span id='reservationNumber'></span> 70 <img src="../staticImages/Yes.png">
71 </h3> 71 预约成功！您的预约号：
72 <p>请记录下您的预约号，以便后续的预约服务。</p> 72 <span id='reservationNumber'></span>
73 </h3>
74 <p>请记录下您的预约号，以便后续的预约服务</p>
75 </div>
76 <div class="qrcode">
77 <img src="">
78 <p>扫描 查看预约信息</p>
79 </div>
73 </div> 80 </div>
74 <ul> 81 <h2 class="region_title">注意事项</h2>
82 <ul style="margin-bottom: 20px;">
75 <li>1.您曾经失约<span id='renegeCount'></span>次，请留意您本次的预约时间和业务类型，切勿迟到或失约。</li> 83 <li>1.您曾经失约<span id='renegeCount'></span>次，请留意您本次的预约时间和业务类型，切勿迟到或失约。</li>
76 <li>2.如确需取消预约，请提前1天登陆系统办理</li> 84 <li>2.如确需取消预约，请提前1天登陆系统办理</li>
77 <li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li> 85 <li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
78 </ul> 86 </ul>
87 <h2 class="region_title">预约信息</h2>
79 </div> 88 </div>
80 </div> 89 </div>
81 <div class="appointment_info_content contentBox"> 90 <div class="appointment_info_content">
82 <div class="appointment_info"> 91 <div class="appointment_info">
83 <ul> 92 <ul>
84 <li> 93 <li>
......
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
25 </div> 25 </div>
26 </div> 26 </div>
27 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 27 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
28 <div class="central_area"> 28 <div class="central_area appointment_content">
29 <div class="progressBar contentBox"> 29 <div class="progressBar">
30 <ul class="app_progress"> 30 <ul class="app_progress">
31 <li> 31 <li>
32 <p class="active"></p> 32 <p class="active"></p>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
64 <div class="swiper-button-prev"></div> 64 <div class="swiper-button-prev"></div>
65 </div> 65 </div>
66 <!-- ----------------------------------业务选择start----------------------------------------------- --> 66 <!-- ----------------------------------业务选择start----------------------------------------------- -->
67 <div class="business_choice contentBox"> 67 <div class="business_choice">
68 <div class="site-title"> 68 <div class="site-title">
69 <fieldset> 69 <fieldset>
70 <legend> 70 <legend>
......
...@@ -26,80 +26,82 @@ ...@@ -26,80 +26,82 @@
26 </div> 26 </div>
27 </div> 27 </div>
28 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 28 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
29 <div class="progressBar contentBox"> 29 <div class="appointment_content">
30 <ul class="app_progress"> 30 <div class="progressBar">
31 <li> 31 <ul class="app_progress">
32 <p class="activeing"></p> 32 <li>
33 <h5 class="activeingtext"> 33 <p class="activeing"></p>
34 预约须知 34 <h5 class="activeingtext">
35 </h5> 35 预约须知
36 </li> 36 </h5>
37 <div class="layui-progress"> 37 </li>
38 <div class="layui-progress-bar" lay-percent="50%"></div> 38 <div class="layui-progress">
39 <div class="layui-progress-bar" lay-percent="50%"></div>
40 </div>
41 <li>
42 <p></p>
43 <h5>
44 选择区域
45 </h5>
46 </li>
47 <div class="layui-progress">
48 <div class="layui-progress-bar"></div>
49 </div>
50 <li>
51 <p></p>
52 <h5>
53 预约时间
54 </h5>
55 </li>
56 <div class="layui-progress">
57 <div class="layui-progress-bar"></div>
58 </div>
59 <li>
60 <p></p>
61 <h5>
62 预约结果
63 </h5>
64 </li>
65 </ul>
66 </div>
67 <div class="clause_box">
68 <div class="clause">
69 <h3>一、预约方式</h3>
70 <p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
71 <p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
72 <h3>
73 二、预约业务范围
74 </h3>
75 <p>
76 现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
77 </p>
78 <h3>
79 三、预约业务办理
80 </h3>
81 <p>
82 预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
83 </p>
84 <h3>
85 五、注意事项
86 </h3>
87 <p>
88 1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
89 </p>
90 <p>
91 2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
92 </p>
93 <p>
94 3.本须知自公布之日起执行。
95 </p>
39 </div> 96 </div>
40 <li> 97 <div class="confim_input">
41 <p></p> 98 <div class="checkbox">
42 <h5> 99 </div>
43 选择区域 100 <p>接受</p>
44 </h5>
45 </li>
46 <div class="layui-progress">
47 <div class="layui-progress-bar"></div>
48 </div> 101 </div>
49 <li> 102 <div class="next_button">
50 <p></p> 103 <button type="button" class="layui-btn layui-btn-normal">下一步</button>
51 <h5>
52 预约时间
53 </h5>
54 </li>
55 <div class="layui-progress">
56 <div class="layui-progress-bar"></div>
57 </div> 104 </div>
58 <li>
59 <p></p>
60 <h5>
61 预约结果
62 </h5>
63 </li>
64 </ul>
65 </div>
66 <div class="clause_box contentBox">
67 <div class="clause">
68 <h3>一、预约方式</h3>
69 <p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
70 <p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
71 <h3>
72 二、预约业务范围
73 </h3>
74 <p>
75 现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
76 </p>
77 <h3>
78 三、预约业务办理
79 </h3>
80 <p>
81 预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
82 </p>
83 <h3>
84 五、注意事项
85 </h3>
86 <p>
87 1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
88 </p>
89 <p>
90 2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
91 </p>
92 <p>
93 3.本须知自公布之日起执行。
94 </p>
95 </div>
96 <div class="confim_input">
97 <div class="checkbox">
98 </div>
99 <p>接受</p>
100 </div>
101 <div class="next_button">
102 <button type="button" class="layui-btn layui-btn-normal">下一步</button>
103 </div> 105 </div>
104 </div> 106 </div>
105 <!-- ----------------------------------内容模块end-------------------------------------------------- --> 107 <!-- ----------------------------------内容模块end-------------------------------------------------- -->
......