Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
789d40ce by 任超
Options

feat:预约须知

1 parent b04116e5
Inline Side-by-side
Showing 8 changed files with 466 additions and 21 deletions
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 line-height: 25px; 12 line-height: 25px;
13 background: #FAFAFA; 13 background: #FAFAFA;
14 border: 1px solid #E6E6E6; 14 border: 1px solid #E6E6E6;
15 box-sizing: border-box;
15 } 16 }
16 .navigation_crumbs .layui-breadcrumb a:hover { 17 .navigation_crumbs .layui-breadcrumb a:hover {
17 color: #f46143!important; 18 color: #f46143!important;
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 height: 100px; 9 height: 100px;
10 padding: 20px; 10 padding: 20px;
11 box-sizing: border-box; 11 box-sizing: border-box;
12 background-color: #7ed3df;
13 } 12 }
14 .personal_information img { 13 .personal_information img {
15 width: 60px; 14 width: 60px;
...@@ -56,9 +55,7 @@ ...@@ -56,9 +55,7 @@
56 height: 100%; 55 height: 100%;
57 border: 1px solid #E6E6E6; 56 border: 1px solid #E6E6E6;
58 box-sizing: border-box; 57 box-sizing: border-box;
59 } 58 padding-left: 20px;
60 .business_module li:nth-child(5n+5) a{
61 padding-right: 0;
62 } 59 }
63 .business_module li a:hover { 60 .business_module li a:hover {
64 color: #f46143; 61 color: #f46143;
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
63 </div> 63 </div>
64 <!-- -----------------------------------个人中心模块---------------------------------------------- --> 64 <!-- -----------------------------------个人中心模块---------------------------------------------- -->
65 <div class="personal_center contentBox"> 65 <div class="personal_center contentBox">
66 <div class="personal_information"> 66 <div class="personal_information layui-bg-gray">
67 <img src="../../staticImages/logo-realestate.png" alt="个人中心"> 67 <img src="../../staticImages/logo-realestate.png" alt="个人中心">
68 <ul> 68 <ul>
69 <li> 69 <li>
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
97 </a> 97 </a>
98 </li> 98 </li>
99 <li> 99 <li>
100 <a href=""> 100 <a href="../wdyy/index.html">
101 我的预约 101 我的预约
102 </a> 102 </a>
103 </li> 103 </li>
......
1 .navigation_crumbs {
2 height: 45px;
3 }
1 .perinfo { 4 .perinfo {
5 height: 100px;
6 padding: 20px;
7 box-sizing: border-box;
8 }
9 .perinfo_left{
10 float: left;
11 }
12 .perinfo_left img {
13 width: 60px;
14 height: 60px;
15 float: left;
16 }
17 .perinfo_left ul {
18 float: left;
19 margin-left: 20px;
20 margin-top: 5px;
21 }
22 .perinfo_left ul li {
23 margin-bottom: 10px;
24 font-size: 16px;
25 }
26 .perinfo_left ul li p{
27 display: inline-block;
28 }
29 .my_appointment {
30 color: #5FB878;
31 border: 2px solid#5FB878;
32 font-size: 20px;
33 display: inline-block;
34 padding: 5px 10px;
35 border-radius: 5px;
36 margin-left: 20%;
37 margin-top: 10px;
38 }
39 .my_appointment:hover {
40 color: #f46143;
41 border-color: #f46143;
42 }
43 .time {
44 float: right;
45 margin-top: 20px;
46 }
47 /* ----------------预约列表-------------------- */
48 .appointment_list {
2 49
3 } 50 }
...\ No newline at end of file ...\ No newline at end of file
4 .perinfo_left
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,25 +4,25 @@ ...@@ -4,25 +4,25 @@
4 <head> 4 <head>
5 <title>个人中心</title> 5 <title>个人中心</title>
6 <meta charset="UTF-8"> 6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 <meta name="format-detection" content="telephone=no"> 8 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit"> 9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp"/> 11 <meta http-equiv="Cache-Control" content="no-siteapp" />
12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png"> 12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico'/> 13 <link rel='icon' href='favicon.ico' type='image/x-ico' />
14 <meta name="description" content=""/> 14 <meta name="description" content="" />
15 <meta name="keywords" content=""/> 15 <meta name="keywords" content="" />
16 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css"/> 16 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css"/> 17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
18 <link rel="stylesheet" type="text/css" href="./css/index.css"> 18 <link rel="stylesheet" type="text/css" href="./css/index.css">
19 </head> 19 </head>
20 20
21 <body> 21 <body>
22 <div class="main"> 22 <div class="main">
23 <div class="subject top-logo"> 23 <div class="subject top-logo">
24 <div class="top_logo_content"> 24 <div class="top_logo_content">
25 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台"/></a></h1> 25 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
26 <div class="top_logo_search"> 26 <div class="top_logo_search">
27 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索" 27 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
28 autocomplete="off" class="layui-input"> 28 autocomplete="off" class="layui-input">
...@@ -57,12 +57,13 @@ ...@@ -57,12 +57,13 @@
57 <div class="contentBox"> 57 <div class="contentBox">
58 <span class="layui-breadcrumb"> 58 <span class="layui-breadcrumb">
59 <a href="../../staticIndex.html">首页</a> 59 <a href="../../staticIndex.html">首页</a>
60 <a><cite>个人中心</cite></a> 60 <a href="../grzx/index.html">个人中心</a>
61 <a><cite>我的预约</cite></a>
61 </span> 62 </span>
62 </div> 63 </div>
63 </div> 64 </div>
64 <!-- -----------------个人信息------------------------ --> 65 <!-- -----------------个人信息------------------------ -->
65 <div class="perinfo contentBox"> 66 <div class="perinfo contentBox layui-bg-gray">
66 <div class="perinfo_left"> 67 <div class="perinfo_left">
67 <img src="../../staticImages/logo-realestate.png" alt=""> 68 <img src="../../staticImages/logo-realestate.png" alt="">
68 <ul> 69 <ul>
...@@ -76,11 +77,15 @@ ...@@ -76,11 +77,15 @@
76 </li> 77 </li>
77 </ul> 78 </ul>
78 </div> 79 </div>
79 <a href="">在线预约</a> 80 <a class="my_appointment" href="../yyxz/index.html">在线预约</a>
80 <div class="time"> 81 <div class="time">
81 2088-20-88 82 登录时间：2088-20-88
82 </div> 83 </div>
83 </div> 84 </div>
85 <!-- -------------预约列表--------------- -->
86 <div class="appointment_list contentBox">
87 <table class="layui-hide" id="test" lay-filter="test"></table>
88 </div>
84 <div class="footer"> 89 <div class="footer">
85 <div class="system_service"> 90 <div class="system_service">
86 <ul class=""> 91 <ul class="">
...@@ -149,7 +154,7 @@ ...@@ -149,7 +154,7 @@
149 </ol> 154 </ol>
150 </div> 155 </div>
151 </div> 156 </div>
152 </div> 157 </div>
153 </body> 158 </body>
154 159
155 </html> 160 </html>
...@@ -162,6 +167,8 @@ ...@@ -162,6 +167,8 @@
162 <script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script> 167 <script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
163 <script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script> 168 <script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
164 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script> 169 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
170 <!-- ----------------------------静态文件-------------------------------------- -->
171 <script type="text/javascript" src="./lib/index.json"></script>
165 <script type="text/javascript"> 172 <script type="text/javascript">
166 layui.use('element', function () { 173 layui.use('element', function () {
167 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 174 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
...@@ -171,4 +178,51 @@ ...@@ -171,4 +178,51 @@
171 layer.msg(elem.text()); 178 layer.msg(elem.text());
172 }); 179 });
173 }); 180 });
181 layui.use('table', function () {
182 var table = layui.table;
183 table.render({
184 elem: '#test'
185 , url: './lib/index.json'
186 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
187 , cols: [[
188 { field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
189 , { field: 'username', title: '预约号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
190 , { field: 'sex', title: ' 预约人', align: 'center' }
191 , { field: 'city', title: '办事大厅', align: 'center' }
192 , { field: 'sign', title: ' 预约业务', align: 'center' }
193 , { field: 'classify', title: '预约时间', align: 'center' }
194 , { field: 'state', title: '状态', align: 'center', templet: '#state' }
195 , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
196 ]]
197 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
198 return {
199 "code": res.code, //解析接口状态
200 "data": res.data //解析数据列表
201 };
202 }
203 });
204 //监听行工具事件
205 table.on('tool(test)', function (obj) {
206 var data = obj.data;
207 console.log(data)
208 if (obj.event === 'del') {
209 } else if (obj.event === 'edit') {
210
211 }
212 });
213 });
214 </script>
215 <script type="text/html" id="zizeng">
216 {{d.LAY_TABLE_INDEX+1}}
217 </script>
218 <script type="text/html" id="barDemo">
219 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
220 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
221 </script>
222 <script type="text/html" id="state">
223 {{# if(d.state=='1'){ }}
224 是
225 {{# } else{}}
226 否
227 {{# } }}
174 </script> 228 </script>
...\ No newline at end of file ...\ No newline at end of file
......
1 {
2 "code": 0,
3 "msg": "",
4 "count": 1000,
5 "data": [
6 {
7 "username": "user-0",
8 "sex": "女",
9 "city": "城市-0",
10 "sign": "签名-0",
11 "experience": 255,
12 "logins": 24,
13 "wealth": 82830700,
14 "classify": "作家",
15 "score": 57,
16 "state": 1
17 },
18 {
19 "username": "user-1",
20 "sex": "男",
21 "city": "城市-1",
22 "sign": "签名-1",
23 "experience": 884,
24 "logins": 58,
25 "wealth": 64928690,
26 "classify": "词人",
27 "score": 27,
28 "state": 1
29 },
30 {
31 "username": "user-2",
32 "sex": "女",
33 "city": "城市-2",
34 "sign": "签名-2",
35 "experience": 650,
36 "logins": 77,
37 "wealth": 6298078,
38 "classify": "酱油",
39 "score": 31,
40 "state": 0
41 }
42 ]
43 }
...\ No newline at end of file ...\ No newline at end of file
1 .navigation_crumbs {
2 height: 45px;
3 }
4 .appointment_notice {
5 margin-top: 30px;
6 margin-bottom: 30px;
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 }
17 .app_progress li:after{
18 content: '';
19 display: block;
20 border-top: 20px solid #fff;
21 border-bottom: 20px solid #fff;
22 border-left: 12px solid #eee;
23 position: absolute;
24 right:0;
25 top: 0;
26 }
27 .active {
28 background-color: #1E9FFF!important;
29 color: #fff!important;
30 }
31 .app_progress li.active:after {
32 border-left-color: #1E9FFF;
33 }
34 .line {
35 width: 80px;
36 height: 0;
37 display: inline-block;
38 border-bottom: 2px dotted#dddddd;
39 margin-bottom: 4px;
40 }
41 .clause p {
42 line-height: 26px;
43 }
44 .clause .date {
45 overflow: hidden;
46 margin: 20px 0;
47 }
48 .clause .date ul {
49 width: 200px;
50 text-align: center;
51 float: right;
52 }
53 .confim_input {
54 text-align: center;
55 }
56 .next_button {
57 text-align: center;
58 margin: 20px auto;
59 }
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <title>个人中心</title>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp" />
12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico' />
14 <meta name="description" content="" />
15 <meta name="keywords" content="" />
16 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
18 <link rel="stylesheet" type="text/css" href="./css/index.css">
19 </head>
20
21 <body>
22 <div class="main">
23 <div class="subject top-logo">
24 <div class="top_logo_content">
25 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
26 <div class="top_logo_search">
27 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
28 autocomplete="off" class="layui-input">
29 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
30 </div>
31 <ul class="login">
32 <li>登录</li>
33 <li>注册</li>
34 </ul>
35 </div>
36 </div>
37 <div class="navigation">
38 <ul class="layui-nav layui-bg-blue" lay-filter="">
39 <li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
40 <li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
41 <li class="layui-nav-item"><a href="">业务办理</a></li>
42 <li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
43 <li class="layui-nav-item">
44 <a href="javascript:;">查验中心</a>
45 <dl class="layui-nav-child">
46 <!-- 二级菜单 -->
47 <dd><a href="">移动模块</a></dd>
48 <dd><a href="">后台模版</a></dd>
49 <dd><a href="">电商平台</a></dd>
50 </dl>
51 </li>
52 <li class="layui-nav-item"><a href="">在线缴费</a></li>
53 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
54 </ul>
55 </div>
56 <div class="navigation_crumbs">
57 <div class="contentBox">
58 <span class="layui-breadcrumb">
59 <a href="../../staticIndex.html">首页</a>
60 <a href="../grzx/index.html">个人中心</a>
61 <a><cite>我的预约</cite></a>
62 </span>
63 </div>
64 </div>
65 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
66 <div class="appointment_notice contentBox">
67 <ul class="app_progress">
68 <li class="active">
69 <span>1</span>
70 预约须知
71 </li>
72 <div class="line"></div>
73 <li>
74 <span>2</span>
75 选择区域
76 </li>
77 <div class="line"></div>
78 <li>
79 <span>3</span>
80 预约时间
81 </li>
82 <div class="line"></div>
83 <li>
84 <span>4</span>
85 预约结果
86 </li>
87 </ul>
88 </div>
89 <div class="clause contentBox">
90 <p>一、预约方式</p>
91 <p>1.预约采用实名制。预约申请人为不动产权利人，有共有人的，由其中一名权利人预约，其他共有权人不能重复预约。</p>
92 <p>2.每个预约号只能预约一种业务，且只能办理与预约对应的不动产登记业务，如需办理其他业务，则须另外再提交预约申请。</p>
93 <p>
94 二、预约业务范围
95 </p>
96 <p>
97 现暂时开通转移登记、抵押登记（含部分抵押注销登记）、抵押注销登记预约
98 </p>
99 <p>
100 三、预约业务办理
101 </p>
102 <p>
103 预约成功后不能在预约时间内前来办理业务的，须于预约办理日期的前一天18:00前取消预约，否则将视为失约并承担相应的责任
104 </p>
105 <p>
106 五、注意事项
107 </p>
108 <p>
109 1.请勿随意预约、取消或失约。为加强网上预约管理，取消预约的权证一个月内不能再次申请预约，同一权证累计取消预约两次的，从第二次取消预约起半年内不能再次申请预约；失约一次的权证两个月内不能再次申请预约，同一权证累计失约两次的将纳入失信黑名单，从第二次失约起一年内不能再次申请预约。
110 </p>
111 <p>
112 2.请认真阅读网上预约的操作说明。预约申请人须按照网上预约操作说明的要求，提前准备好预约办理业务的要件材料。具体业务办理详情请查看办事指南。
113 </p>
114 <p>
115 3.本须知自公布之日起执行。
116 </p>
117 <div class="date">
118 <ul>
119 <li>XX市不动产登记中心</li>
120 <li>2020年11月27日</li>
121 </ul>
122 </div>
123 <div class="confim_input">
124 <input type="checkbox" name="" class="accept" title="接受" checked>&nbsp;接受
125 </div>
126 <div class="next_button">
127 <button type="button" class="layui-btn layui-btn-normal">下一步</button>
128 </div>
129 </div>
130 <!-- ----------------------------------内容模块end-------------------------------------------------- -->
131 <div class="footer">
132 <div class="system_service">
133 <ul class="">
134 <li>
135 <a href="">
136 <span>公示公告</span>
137 </a>
138 </li>
139 <li>
140 <a href="">
141 <span>法律法规</span>
142 </a>
143 </li>
144 <li>
145 <a href="">
146 <span>相应政策</span>
147 </a>
148 </li>
149 <li>
150 <a href="">
151 <span>下载服务</span>
152 </a>
153 </li>
154 <li>
155 <a href="">
156 <span>关于我们</span>
157 </a>
158 </li>
159 </ul>
160 </div>
161 <div class="subject">
162 <div class="footer_logo">
163 <a href="">
164 <img src="./../../staticImages/jiguan.png">
165 </a>
166 </div>
167 <ul>
168 <li>
169 西安市自然资源和规划局
170 </li>
171 <li>
172 电话：028-456465
173 </li>
174 <li>
175 地址：西安市丰城8路
176 </li>
177 <li>
178 网站标识吗：87987987
179 </li>
180 <li>
181 备案：陕IPC456465465
182 </li>
183 <li>
184 陕公网备案：456465465
185 </li>
186 </ul>
187 <ol>
188 <li>
189 <img src="./../../staticImages/code.png">
190 <p>扫描关注公众号</p>
191 </li>
192 <li>
193 <img src="./../../staticImages/code.png">
194 <p>扫描关注公众号</p>
195 </li>
196 </ol>
197 </div>
198 </div>
199 </div>
200 </body>
201
202 </html>
203 <!--[if (gte IE 9)|!(IE)]><!-->
204 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
205 <!--<![endif]-->
206 <script type="text/javascript" src="../../staticLib/handlebars/handlebars.min.js"></script>
207 <script type="text/javascript" src="../../staticLib/iscroll/iscroll-probe.js"></script>
208 <script type="text/javascript" src="../../staticLib/amazeui/amazeui.min.js"></script>
209 <script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
210 <script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
211 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
212 <script type="text/javascript">
213 layui.use('element', function () {
214 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
215 //监听导航点击
216 element.on('nav(demo)', function (elem) {
217 //console.log(elem)
218 layer.msg(elem.text());
219 });
220 });
221 var accept = $('.accept');
222 $('.next_button button').click(function () {
223 if (!accept.is(':checked')) {
224 layui.use('layer', function () {
225 var layer = layui.layer;
226 layer.open({
227 title: '标题'
228 , content: '请先选择同意协议'
229 });
230 });
231 } else {
232 layui.use('layer', function () {
233 var layer = layui.layer;
234 layer.confirm('本人承诺所填的预约信息属实，如有虚假，将承担法律责任', {
235 title: '真实准确的承诺',
236 btn: ['不同意', '同意进入下一步'] //按钮
237 }, function () {
238
239 }, function () {
240
241 });
242 });
243 }
244 })
245 </script>
...\ No newline at end of file ...\ No newline at end of file