Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
d37f0775 by 任超
Options

style:我的预约

1 parent f154c914
Inline Side-by-side
Showing 8 changed files with 294 additions and 127 deletions
...@@ -310,7 +310,7 @@ div.banner ul li a { ...@@ -310,7 +310,7 @@ div.banner ul li a {
310 310
311 div.c_one div:first-child .news, div.c_one div:first-child .notice { 311 div.c_one div:first-child .news, div.c_one div:first-child .notice {
312 margin-top: 40px; 312 margin-top: 40px;
313 height: 330px; 313 height: 332px;
314 border: #DEDEDE 1px solid; 314 border: #DEDEDE 1px solid;
315 padding: 0 15px 0 15px; 315 padding: 0 15px 0 15px;
316 } 316 }
...@@ -361,7 +361,7 @@ div.c_one .news .news-img { ...@@ -361,7 +361,7 @@ div.c_one .news .news-img {
361 margin-top: 20px; 361 margin-top: 20px;
362 float: left; 362 float: left;
363 width: 350px; 363 width: 350px;
364 height: 234px; 364 height: 236px;
365 } 365 }
366 div.c_one .news .news-img img { 366 div.c_one .news .news-img img {
367 height: 100%; 367 height: 100%;
......
1 .progressBar {
2 padding-top: 30px;
3 color: #4A4A4A;
4 }
5 .app_progress li {
6 display: inline-block;
7 text-align: center;
8 }
9 .app_progress li:not(:first-child) {
10 margin-left: -47px;
11 }
12
13 .app_progress li p{
14 width: 29.5px;
15 height: 29.5px;
16 border-radius: 50%;
17 background-color: #E6E6E6;
18 margin: 0 auto;
19 }
20 .app_progress li h5 {
21 margin-top: 12px;
22 font-size: 16px;
23 }
24 .progressBar .layui-progress {
25 display: inline-block;
26 width: 352px;
27 position: relative;
28 top: -41px;
29 left: -24px;
30 }
31 .active {
32 background-color: #47E1BF!important;
33 position: relative;
34 }
35 .active::after {
36 content: " ";
37 display: block;
38 position: absolute;
39 left: 11px;
40 top: 6px;
41 width: 8px;
42 height: 12px;
43 border-color: #fff;
44 border-style: solid;
45 border-width: 0 2px 2px 0;
46 transform: rotate(45deg);
47 }
48 .layui-progress-bar {
49 background-color: #47E1BF!important;
50 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
90 } 90 }
91 /* ----------------预约列表-------------------- */ 91 /* ----------------预约列表-------------------- */
92 .appointment_list { 92 .appointment_list {
93 margin-top: 10px; 93 margin-top: 20px;
94 font-size: 0; 94 font-size: 0;
95 margin-left: -10px; 95 margin-left: -10px;
96 margin-right: -10px; 96 margin-right: -10px;
...@@ -100,12 +100,14 @@ ...@@ -100,12 +100,14 @@
100 display: inline-block; 100 display: inline-block;
101 padding: 0 10px; 101 padding: 0 10px;
102 box-sizing: border-box; 102 box-sizing: border-box;
103 float: left;
103 } 104 }
104 .appointment_list li .item_content { 105 .appointment_list li .item_content {
105 border: 1px solid #CBCBCB; 106 border: 1px solid #CBCBCB;
106 border-radius: 4px; 107 border-radius: 4px;
107 border: 1px solid #CBCBCB; 108 border: 1px solid #CBCBCB;
108 font-size: 16px; 109 font-size: 16px;
110 height: 368px;
109 } 111 }
110 .item_title { 112 .item_title {
111 height: 48px; 113 height: 48px;
...@@ -130,4 +132,43 @@ ...@@ -130,4 +132,43 @@
130 } 132 }
131 .cancel { 133 .cancel {
132 background-color: #F26363; 134 background-color: #F26363;
135 opacity: 0.5;
136 }
137 .item_info {
138 padding: 30px;
139 height: 180px;
140 }
141 .item_info li{
142 width: 100%;
143 line-height: 38px;
144 box-sizing: border-box;
145 }
146 .item_info li span {
147 display: inline-block;
148 width: 108px;
149 text-align: right;
150 color: #9B9B9B;
151 white-space: nowrap;
152 }
153 .item_info li p{
154 display: inline-block;
155 color: #303030;
156 }
157 .item_info li a{
158 display: inline-block;
159 color: #0091FF;
160 margin-left: 20px;
161 }
162 .cancel_reservation {
163 display: block;
164 width: 100px;
165 height: 40px;
166 background: #FFFFFF;
167 border-radius: 3px;
168 border: 1px solid #E6E6E6;
169 font-size: 16px;
170 color: #9B9B9B;
171 line-height: 40px;
172 text-align: center;
173 margin: 0 auto;
133 } 174 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .navigation_crumbs { 1 .navigation_crumbs {
2 height: 45px; 2 height: 45px;
3 } 3 }
4 .appointment_notice { 4 .clause_box {
5 padding-top: 25px; 5 min-height:calc(100vh - 342px);
6 margin-bottom: 20px;
7 }
8 .app_progress li {
9 padding: 0 30px;
10 line-height: 40px;
11 background: #eee;
12 display: inline-block;
13 color: #fff;
14 position: relative;
15 color: black;
16 cursor: pointer;
17 }
18 .app_progress li:hover {
19 background-color: #1E9FFF!important;
20 color: #fff!important;
21 }
22
23 .app_progress li:hover:after {
24 border-left-color: #1E9FFF;
25 }
26
27 .app_progress li:after{
28 content: '';
29 display: block;
30 border-top: 20px solid #fff;
31 border-bottom: 20px solid #fff;
32 border-left: 12px solid #eee;
33 position: absolute;
34 right:0;
35 top: 0;
36 } 6 }
37 .active { 7 .clause {
38 background-color: #1E9FFF!important; 8 border-radius: 4px;
39 color: #fff!important; 9 border: 1px solid #CBCBCB;
40 } 10 padding: 30px 20px;
41 .app_progress li.active:after { 11 margin-bottom: 20px;
42 border-left-color: #1E9FFF;
43 }
44 .line {
45 width: 80px;
46 height: 0;
47 display: inline-block;
48 border-bottom: 2px dotted#dddddd;
49 margin-bottom: 4px;
50 } 12 }
51 .clause p { 13 .clause p {
52 line-height: 26px; 14 line-height: 26px;
...@@ -61,9 +23,49 @@ ...@@ -61,9 +23,49 @@
61 text-align: center; 23 text-align: center;
62 float: right; 24 float: right;
63 } 25 }
26 .clause {
27 color: #6D7278;
28 }
29 .clause h3 {
30 font-size: 16px;
31 font-weight: 600;
32 color: #6D7278;
33 line-height: 28px;
34 margin: 10px;
35 }
36 .clause p {
37 font-size: 14px;
38 line-height: 28px;
39 }
64 .confim_input { 40 .confim_input {
65 text-align: center; 41 text-align: center;
66 } 42 }
43 .checkbox {
44 width: 16px;
45 height: 16px;
46 border-radius: 50%;
47 border: 1px solid #2FA5FF;
48 display: inline-block;
49 cursor: pointer;
50 position: relative;
51 }
52 .checkbox img {
53 width: 16px;
54 height: 16px;
55 position: absolute;
56 left: 0;
57 top: 0;
58 }
59 .bordernone {
60 border: none;
61 }
62 .confim_input p {
63 display: inline-block;
64 color: #6D7278;
65 line-height: 14px;
66 position: relative;
67 top: -2px;
68 }
67 .next_button { 69 .next_button {
68 text-align: center; 70 text-align: center;
69 margin: 20px auto; 71 margin: 20px auto;
......
1 layui.use('element', function () { 1 $(function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 2 layui.use('element', function () {
3 //监听导航点击 3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 element.on('nav(demo)', function (elem) { 4 //监听导航点击
5 //console.log(elem) 5 element.on('nav(demo)', function (elem) {
6 layer.msg(elem.text()); 6 //console.log(elem)
7 layer.msg(elem.text());
8 });
7 }); 9 });
8 }); 10 var accept = $('.accept');
9 var accept = $('.accept'); 11 $('.next_button button').click(function () {
10 $('.next_button button').click(function () { 12 if (!accept.is(':checked')) {
11 if (!accept.is(':checked')) { 13 layui.use('layer', function () {
12 layui.use('layer', function () { 14 var layer = layui.layer;
13 var layer = layui.layer; 15 layer.open({
14 layer.open({ 16 title: '标题'
15 title: '标题' 17 , content: '请先选择同意协议'
16 , content: '请先选择同意协议' 18 });
17 }); 19 });
18 }); 20 } else {
19 } else { 21 layui.use('layer', function () {
20 layui.use('layer', function () { 22 var layer = layui.layer;
21 var layer = layui.layer; 23 layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', {
22 layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', { 24 title: '真实准确的承诺',
23 title: '真实准确的承诺', 25 btn: ['不同意', '同意进入下一步'] //按钮
24 btn: ['不同意', '同意进入下一步'] //按钮 26 }, function () {
25 }, function () { 27 layer.closeAll();
26 layer.closeAll(); 28 }, function () {
27 }, function () { 29 window.location.href = "./xzqy.html";
28 window.location.href = "./xzqy.html"; 30 });
29 }); 31 });
30 }); 32 }
31 } 33 })
34 $('.checkbox').click(function(){
35 if($(this).find(".img").length >0){
36 $(this).find('.img').remove()
37 $(this).addClass('.bordernone')
38 }else {
39 $(this).append("<img class='img' src='../staticImages/check.png'>")
40 $(this).removeClass('.bordernone')
41 }
42 })
32 }) 43 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 <i class="layui-icon layui-icon-right"></i> 52 <i class="layui-icon layui-icon-right"></i>
53 </p> 53 </p>
54 </div> 54 </div>
55 <ul> 55 <ul class="item_info">
56 <li> 56 <li>
57 <span>预约人：</span> 57 <span>预约人：</span>
58 <p>任超</p> 58 <p>任超</p>
...@@ -71,10 +71,11 @@ ...@@ -71,10 +71,11 @@
71 <p>2020-12-56 上午 16：13</p> 71 <p>2020-12-56 上午 16：13</p>
72 </li> 72 </li>
73 <li> 73 <li>
74 <span>预约流水号</span> 74 <span>预约流水号：</span>
75 <p>897987987987</p> 75 <p>897987987987</p>
76 </li> 76 </li>
77 </ul> 77 </ul>
78 <a class="cancel_reservation">取消预约</a>
78 </div> 79 </div>
79 </li> 80 </li>
80 <li> 81 <li>
...@@ -86,17 +87,65 @@ ...@@ -86,17 +87,65 @@
86 <i class="layui-icon layui-icon-right"></i> 87 <i class="layui-icon layui-icon-right"></i>
87 </p> 88 </p>
88 </div> 89 </div>
90 <ul class="item_info">
91 <li>
92 <span>预约人：</span>
93 <p>任超</p>
94 </li>
95 <li>
96 <span>办事大厅：</span>
97 <p>米香园办事大厅</p>
98 </li>
99 <li>
100 <span>办理业务类型：</span>
101 <p>二手房交易</p>
102 <a href="">办事指南</a>
103 </li>
104 <li>
105 <span>预约日期：</span>
106 <p>2020-12-56 上午 16：13</p>
107 </li>
108 <li>
109 <span>预约流水号：</span>
110 <p>897987987987</p>
111 </li>
112 </ul>
113 <a class="cancel_reservation">取消预约</a>
89 </div> 114 </div>
90 </li> 115 </li>
91 <li> 116 <li>
92 <div class="item_content cancel"> 117 <div class="item_content">
93 <div class="item_title"> 118 <div class="item_title cancel">
94 <h3>正常</h3> 119 <h3>正常</h3>
95 <p> 120 <p>
96 查看 121 查看
97 <i class="layui-icon layui-icon-right"></i> 122 <i class="layui-icon layui-icon-right"></i>
98 </p> 123 </p>
99 </div> 124 </div>
125 <ul class="item_info">
126 <li>
127 <span>预约人：</span>
128 <p>任超</p>
129 </li>
130 <li>
131 <span>办事大厅：</span>
132 <p>米香园办事大厅</p>
133 </li>
134 <li>
135 <span>办理业务类型：</span>
136 <p>二手房交易</p>
137 <a href="">办事指南</a>
138 </li>
139 <li>
140 <span>预约日期：</span>
141 <p>2020-12-56 上午 16：13</p>
142 </li>
143 <li>
144 <span>预约流水号：</span>
145 <p>897987987987</p>
146 </li>
147 </ul>
148 <a class="cancel_reservation">取消预约</a>
100 </div> 149 </div>
101 </li> 150 </li>
102 </ul> 151 </ul>
......
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>
...@@ -8,6 +9,7 @@ ...@@ -8,6 +9,7 @@
8 <title>个人中心-预约须知</title> 9 <title>个人中心-预约须知</title>
9 <script type="text/javascript" src="../staticJs/head.js"></script> 10 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css"> 11 <link rel="stylesheet" type="text/css" href="../staticCss/yyxz.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
11 </head> 13 </head>
12 14
13 <body> 15 <body>
...@@ -22,65 +24,77 @@ ...@@ -22,65 +24,77 @@
22 </div> 24 </div>
23 </div> 25 </div>
24 <!-- ----------------------------------内容模块的开始----------------------------------------------- --> 26 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
25 <div class="appointment_notice contentBox"> 27 <div class="progressBar contentBox">
26 <ul class="app_progress"> 28 <ul class="app_progress">
27 <li class="active"> 29 <li>
28 <span>1</span> 30 <p class="active"></p>
29 预约须知 31 <h5>
32 预约须知
33 </h5>
30 </li> 34 </li>
31 <div class="line"></div> 35 <div class="layui-progress">
36 <div class="layui-progress-bar" lay-percent="50%"></div>
37 </div>
32 <li> 38 <li>
33 <span>2</span> 39 <p></p>
34 选择区域 40 <h5>
41 选择区域
42 </h5>
35 </li> 43 </li>
36 <div class="line"></div> 44 <div class="layui-progress">
45 <div class="layui-progress-bar"></div>
46 </div>
37 <li> 47 <li>
38 <span>3</span> 48 <p></p>
39 预约时间 49 <h5>
50 预约时间
51 </h5>
40 </li> 52 </li>
41 <div class="line"></div> 53 <div class="layui-progress">
54 <div class="layui-progress-bar"></div>
55 </div>
42 <li> 56 <li>
43 <span>4</span> 57 <p></p>
44 预约结果 58 <h5>
59 预约结果
60 </h5>
45 </li> 61 </li>
46 </ul> 62 </ul>
47 </div> 63 </div>
48 <div class="clause contentBox"> 64 <div class="clause_box contentBox">
49 <p>一、预约方式</p> 65 <div class="clause">
50 <p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p> 66 <h3>一、预约方式</h3>
51 <p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p> 67 <p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
52 <p> 68 <p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
53 二、预约业务范围 69 <h3>
54 </p> 70 二、预约业务范围
55 <p> 71 </h3>
56 现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约 72 <p>
57 </p> 73 现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
58 <p> 74 </p>
59 三、预约业务办理 75 <h3>
60 </p> 76 三、预约业务办理
61 <p> 77 </h3>
62 预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任 78 <p>
63 </p> 79 预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
64 <p> 80 </p>
65 五、注意事项 81 <h3>
66 </p> 82 五、注意事项
67 <p> 83 </h3>
68 1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。 84 <p>
69 </p> 85 1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
70 <p> 86 </p>
71 2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。 87 <p>
72 </p> 88 2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
73 <p> 89 </p>
74 3.本须知自公布之日起执行。 90 <p>
75 </p> 91 3.本须知自公布之日起执行。
76 <div class="date"> 92 </p>
77 <ul>
78 <li>XX市不动产登记中心</li>
79 <li>2020年11月27日</li>
80 </ul>
81 </div> 93 </div>
82 <div class="confim_input"> 94 <div class="confim_input">
83 <input type="checkbox" name="" class="accept" title="接受" checked>&nbsp;接受 95 <div class="checkbox">
96 </div>
97 <p>接收</p>
84 </div> 98 </div>
85 <div class="next_button"> 99 <div class="next_button">
86 <button type="button" class="layui-btn layui-btn-normal">下一步</button> 100 <button type="button" class="layui-btn layui-btn-normal">下一步</button>
......