Skip to content

任超 / js.portalStaticPage

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

feat:预约结果

1 parent 124d2861
Inline Side-by-side
Showing 6 changed files with 367 additions and 14 deletions
1 $(function () {
2 layui.use('element', function () {
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 //监听导航点击
5 element.on('nav(demo)', function (elem) {
6 layer.msg(elem.text());
7 });
8 });
9 }
...\ No newline at end of file ...\ No newline at end of file
1 1
2 $(function () { 2 $(function () {
3 var Date = undefined; 3 var Date = undefined;
4 var appuintText = undefined
5 var bustime = undefined;
4 // 国有房屋无业点击选中记录 6 // 国有房屋无业点击选中记录
5 var busIndex = undefined 7 var busIndex = undefined
6 var data = { 8 var data = {
...@@ -52,25 +54,31 @@ $(function () { ...@@ -52,25 +54,31 @@ $(function () {
52 }; 54 };
53 55
54 // 获取当前选中的日期 56 // 获取当前选中的日期
55 for (var i = 0; i < data.dateList.length; i++) { 57 // for (var i = 0; i < data.dateList.length; i++) {
56 if(data.dateList[i].isSelect) { 58 // if (data.dateList[i].isSelect) {
57 Date = data.dateList[i].date 59 // Date = data.dateList[i].date
58 } 60 // break
59 }; 61 // }
62 // };
60 63
61 layui.use('element', function () { 64 layui.use('element', function () {
62 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 65 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
63 //监听导航点击 66 //监听导航点击
64 element.on('nav(demo)', function (elem) { 67 element.on('nav(demo)', function (elem) {
65 //console.log(elem)
66 layer.msg(elem.text()); 68 layer.msg(elem.text());
67 }); 69 });
68 }); 70 });
69 function a(i) { 71 function a(i) {
72 Date = data.dateList[i].date
70 $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active'); 73 $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
71 } 74 }
72 75
73 $('.business_list li').click(function () { 76 $('.business_list li').click(function () {
77 // 获取元素
78 appuintText = $(this).find('a').text()
79
80
81 $('.layui_anim_list').removeClass('disnone')
74 $('.layui_anim_content').show() 82 $('.layui_anim_content').show()
75 var demo = $('.layui-anim') 83 var demo = $('.layui-anim')
76 $('html,body').addClass('ovfHiden'); 84 $('html,body').addClass('ovfHiden');
...@@ -82,7 +90,7 @@ $(function () { ...@@ -82,7 +90,7 @@ $(function () {
82 }); 90 });
83 91
84 // 获取当前点击li 的下标 92 // 获取当前点击li 的下标
85 let index = $(this).index() + 1; 93 let index = $(this).index()
86 busIndex = index 94 busIndex = index
87 }) 95 })
88 96
...@@ -129,9 +137,44 @@ $(function () { ...@@ -129,9 +137,44 @@ $(function () {
129 $(document).on('click', '.able_appint', function () { 137 $(document).on('click', '.able_appint', function () {
130 $('.able_appint').removeClass("able_appintActive") 138 $('.able_appint').removeClass("able_appintActive")
131 $(this).addClass("able_appintActive") 139 $(this).addClass("able_appintActive")
140
141 let index = $(this).index()
142 // 获取当前选中的日期
143 bustime = data.list[index]
144 modleClose()
145 $(".business_list li .allowedMask").remove()
146 $(".business_list li .reserved").remove()
147 var str = "<div class='reserved'> <i class='layui-icon layui-icon-log'></i> <div><p>" + appuintText + "</p><p>" + bustime + "</p></div> <i class='layui-icon appintDel layui-icon-reduce-circle'></i></div>"
148 $(".business_list li").append('<div class="allowedMask"></div>');
149 $(".business_list li:eq(" + busIndex + ") a").removeClass('not-allowed')
150 $(".business_list li").eq(busIndex).append(str);
151 $(".business_list li:eq(" + busIndex + ") a").hide()
152 });
153
154 // 删除预约记录
155 $(document).on('click', '.appintDel', function (event) {
156 $('.layui_anim_list').addClass('disnone')
157 $('.able_appint').removeClass('able_appintActive')
158 layui.use('layer', function () {
159 var layer = layui.layer;
160 layer.confirm('此操作将删除预约记录，是否继续', {
161 btn: ['取消', '继续'] //按钮
162 }, function () {
163 layer.closeAll();
164 modleClose()
165 }, function () {
166 modleClose()
167 $(".business_list li a").show()
168 $(".business_list li .allowedMask").remove()
169 $(".business_list li .reserved").remove()
170 });
171 });
172 });
173
174
175 $(document).on('click', '.allowedMask', function () {
176 $('.layui_anim_list').addClass('disnone')
132 modleClose() 177 modleClose()
133 console.log(9999, busIndex)
134 // $('.business_list li').eq(busIndex-1).addClass('bugActive')
135 }); 178 });
136 }); 179 });
137 function modleClose() { 180 function modleClose() {
......
1 .navigation_crumbs {
2 height: 45px;
3 }
4
5 .appointment_notice {
6 margin-top: 30px;
7 margin-bottom: 30px;
8 }
9 .app_progress li {
10 padding: 0 30px;
11 line-height: 40px;
12 background: #eee;
13 display: inline-block;
14 color: #fff;
15 position: relative;
16 color: black;
17 cursor: pointer;
18 }
19 .app_progress li:hover {
20 background-color: #1E9FFF!important;
21 color: #fff!important;
22 }
23
24 .app_progress li:hover:after {
25 border-left-color: #1E9FFF;
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 }
37 .active {
38 background-color: #1E9FFF!important;
39 color: #fff!important;
40 }
41 .app_progress li.active:after {
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 }
...\ 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" href="../../staticCss/swiper-bundle.min.css">
17 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
18 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
19 <link rel="stylesheet" type="text/css" href="./css/index.css">
20 </head>
21
22 <body>
23 <div class="yysj_main">
24 <div class="subject top-logo">
25 <div class="top_logo_content">
26 <h1><a href="index.html" title="西安市不动产登记平台"><img src="./../../staticImages/logo.jpg"
27 alt="西安市不动产登记平台" /></a></h1>
28 <div class="top_logo_search">
29 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
30 autocomplete="off" class="layui-input">
31 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
32 </div>
33 <ul class="login">
34 <li>
35 <a href="" title="登录">
36 登录
37 </a>
38 </li>
39 <li>
40 <a href="" title="注册">
41 注册
42 </a>
43 </li>
44 </ul>
45 </div>
46 </div>
47 <div class="navigation">
48 <ul class="layui-nav layui-bg-blue" lay-filter="">
49 <li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
50 <li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
51 <li class="layui-nav-item"><a href="">业务办理</a></li>
52 <li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
53 <li class="layui-nav-item">
54 <a href="javascript:;">查验中心</a>
55 <dl class="layui-nav-child">
56 <!-- 二级菜单 -->
57 <dd><a href="">移动模块</a></dd>
58 <dd><a href="">后台模版</a></dd>
59 <dd><a href="">电商平台</a></dd>
60 </dl>
61 </li>
62 <li class="layui-nav-item"><a href="">在线缴费</a></li>
63 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
64 </ul>
65 </div>
66 <div class="navigation_crumbs">
67 <div class="contentBox">
68 <span class="layui-breadcrumb">
69 <a href="../../staticIndex.html" title="首页">首页</a>
70 <a href="../grzx/index.html" title="个人中心">个人中心</a>
71 <a title="我的预约"><cite>我的预约</cite></a>
72 </span>
73 </div>
74 </div>
75 <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
76 <div class="appointment_notice contentBox">
77 <ul class="app_progress">
78 <li>
79 <span>1</span>
80 预约须知
81 </li>
82 <div class="line"></div>
83 <li>
84 <span>2</span>
85 选择区域
86 </li>
87 <div class="line"></div>
88 <li>
89 <span>3</span>
90 预约时间
91 </li>
92 <div class="line"></div>
93 <li class="active">
94 <span>4</span>
95 预约结果
96 </li>
97 </ul>
98 </div>
99 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
100 <div class="footer">
101 <div class="system_service">
102 <ul class="">
103 <li>
104 <a href="" title="公示公告">
105 <span>公示公告</span>
106 </a>
107 </li>
108 <li>
109 <a href="" title="法律法规">
110 <span>法律法规</span>
111 </a>
112 </li>
113 <li>
114 <a href="" title="相应政策">
115 <span>相应政策</span>
116 </a>
117 </li>
118 <li>
119 <a href="" title="下载服务">
120 <span>下载服务</span>
121 </a>
122 </li>
123 <li>
124 <a href="" title="关于我们">
125 <span>关于我们</span>
126 </a>
127 </li>
128 </ul>
129 </div>
130 <div class="subject">
131 <div class="footer_logo">
132 <a href="" title="党政机关">
133 <img src="./../../staticImages/jiguan.png" alt="党政机关" />
134 </a>
135 </div>
136 <ul>
137 <li>
138 西安市自然资源和规划局
139 </li>
140 <li>
141 电话：028-456465
142 </li>
143 <li>
144 地址：西安市丰城8路
145 </li>
146 <li>
147 网站标识吗：87987987
148 </li>
149 <li>
150 备案：陕IPC456465465
151 </li>
152 <li>
153 陕公网备案：456465465
154 </li>
155 </ul>
156 <ol>
157 <li>
158 <img src="./../../staticImages/code.png" alt="公众号" />
159 <p>扫描关注公众号</p>
160 </li>
161 <li>
162 <img src="./../../staticImages/code.png" alt="公众号" />
163 <p>扫描关注公众号</p>
164 </li>
165 </ol>
166 </div>
167 </div>
168 </div>
169 </body>
170
171 </html>
172 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
173 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
174 <script src="../../staticJs/swiper-bundle.min.js"></script>
175 <script type="text/javascript" src="../../staticJs/yyjg.js"></script>
...\ No newline at end of file ...\ No newline at end of file
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 /* -------------------------------预约日期---------------------------------------- */ 55 /* -------------------------------预约日期---------------------------------------- */
56 .appoint_time { 56 .appoint_time {
57 width: 1200px; 57 width: 1200px;
58 height: 60px; 58 height: 50px;
59 margin: 0 auto; 59 margin: 0 auto;
60 padding: 0 50px; 60 padding: 0 50px;
61 box-sizing: border-box; 61 box-sizing: border-box;
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
75 } 75 }
76 .swiper-slide li { 76 .swiper-slide li {
77 height: 20px; 77 height: 20px;
78 font-size: 18px; 78 font-size: 14px;
79 margin-top: 6px; 79 margin-top: 3px;
80 } 80 }
81 .active { 81 .active {
82 background-color: #1E9FFF; 82 background-color: #1E9FFF;
...@@ -136,13 +136,54 @@ ...@@ -136,13 +136,54 @@
136 background-color: #1E9FFF; 136 background-color: #1E9FFF;
137 color: #fff; 137 color: #fff;
138 } 138 }
139 .business_list li a{ 139 .business_list li {
140 position: relative;
141 }
142 .business_list li a:first-child{
140 display: block; 143 display: block;
141 border-radius: 3px; 144 border-radius: 3px;
142 height: 100%; 145 height: 100%;
146 width: 93%;
147 background-color: #eee;
148 position: absolute;
149 left: 0;
150 top: 0;
151 }
152 .business_list li .reserved{
153 border-radius: 3px;
154 height: 100%;
155 width: 93%;
143 background-color: #eee; 156 background-color: #eee;
144 box-sizing: content-box; 157 position: absolute;
158 left: 0;
159 top: 0;
160 background-color: rgba(0,0,0,0.3);
161 z-index: 10;
162 text-align: center;
163 }
164
165 .business_list li .reserved i{
166 color: #FF5722;
167 font-size: 24px;
168 display: inline-block;
169 position: relative;
170 top: -5px;
171 }
172 .business_list li .reserved i:last-child {
173 cursor: pointer;
145 } 174 }
175
176 .business_list li .reserved div{
177 display: inline-block;
178 text-align: center;
179 margin: 0 15px;
180 }
181 .business_list li .reserved p {
182 height: 21px;
183 line-height: 21px;
184 color: #fff;
185 }
186
146 .business_list li a:hover { 187 .business_list li a:hover {
147 background-color: #1E9FFF; 188 background-color: #1E9FFF;
148 color: #fff; 189 color: #fff;
...@@ -228,4 +269,26 @@ ...@@ -228,4 +269,26 @@
228 .able_appintActive { 269 .able_appintActive {
229 background-color: #5FB878; 270 background-color: #5FB878;
230 color: #fff; 271 color: #fff;
272 }
273
274 .allowedMask {
275 border-radius: 3px;
276 height: 100%;
277 width: 93%;
278 position: absolute;
279 left: 0;
280 top: 0;
281 background-color: rgba(0,0,0,0);
282 z-index: 9;
283 cursor:not-allowed!important;
284 }
285 .disnone {
286 display: none!important;
287 }
288 .next_button {
289 text-align: center;
290 margin: 20px 0;
291 }
292 .next_button a {
293 color: #fff;
231 } 294 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -162,6 +162,19 @@ ...@@ -162,6 +162,19 @@
162 </ul> 162 </ul>
163 </div> 163 </div>
164 <div class="layui_anim_content"></div> 164 <div class="layui_anim_content"></div>
165
166 <div class="next_button">
167 <button type="button" class="layui-btn layui-btn-normal">
168 <a href="../xxqu/index.html" title="上一步">
169 上一步
170 </a>
171 </button>
172 <button type="button" class="layui-btn layui-btn-normal">
173 <a href="../yyjg/index.html" title="下一步">
174 下一步
175 </a>
176 </button>
177 </div>
165 <!-- ----------------------------------内容模块的end----------------------------------------------- --> 178 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
166 <div class="footer"> 179 <div class="footer">
167 <div class="system_service"> 180 <div class="system_service">
......