Skip to content

任超 / js.portalStaticPage

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

feat:预约须知

1 parent b04116e5
Expand all
Inline Side-by-side
Showing 8 changed files with 221 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