Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
124d2861 by 任超
Options

feat:业务预约

1 parent 3ea369a6
Inline Side-by-side
Showing 7 changed files with 700 additions and 0 deletions
1 /**
2 * Swiper 6.1.2
3 * Most modern mobile touch slider and framework with hardware accelerated transitions
4 * http://swiperjs.com
5 *
6 * Copyright 2014-2020 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: August 17, 2020
11 */
12
13 @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1
2 $(function () {
3 var Date = undefined;
4 // 国有房屋无业点击选中记录
5 var busIndex = undefined
6 var data = {
7 'dateList': [
8 {
9 week: '星期一',
10 date: '10月15号',
11 isSelect: true
12 },
13 {
14 week: '星期二',
15 date: '10月16号'
16 },
17 {
18 week: '星期三',
19 date: '10月17号'
20 },
21 {
22 week: '星期二',
23 date: '10月18号'
24 },
25 {
26 week: '星期五',
27 date: '10月19号'
28 },
29 {
30 week: '星期六',
31 date: '10月19号'
32 }
33 ],
34 "list": ['上午：09:00-10：00', '上午：10:00-11：00', '上午：11:00-12：00', '下午：14:00-15：00', '下午：15:00-16：00'],
35 "appint_detail": [
36 {
37 'total': 2
38 },
39 {
40 'total': 2
41 },
42 {
43 'total': 0
44 },
45 {
46 'total': 0
47 },
48 {
49 'total': 1
50 }
51 ]
52 };
53
54 // 获取当前选中的日期
55 for (var i = 0; i < data.dateList.length; i++) {
56 if(data.dateList[i].isSelect) {
57 Date = data.dateList[i].date
58 }
59 };
60
61 layui.use('element', function () {
62 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
63 //监听导航点击
64 element.on('nav(demo)', function (elem) {
65 //console.log(elem)
66 layer.msg(elem.text());
67 });
68 });
69 function a(i) {
70 $(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
71 }
72
73 $('.business_list li').click(function () {
74 $('.layui_anim_content').show()
75 var demo = $('.layui-anim')
76 $('html,body').addClass('ovfHiden');
77 var othis = demo, anim = othis.data('anim');
78 othis.removeClass(anim);
79 setTimeout(function () {
80 demo.show()
81 othis.addClass(anim);
82 });
83
84 // 获取当前点击li 的下标
85 let index = $(this).index() + 1;
86 busIndex = index
87 })
88
89 layui.use('laytpl', function () {
90 laytpl = layui.laytpl;
91
92
93 var getTpl = document.getElementById('date').innerHTML
94 , view = document.getElementById('swiperDate');
95 laytpl(getTpl).render(data, function (html) {
96 view.innerHTML = html;
97 });
98
99 var getTpl = document.getElementById('appoint_timeList').innerHTML
100 , view = document.getElementById('view');
101 laytpl(getTpl).render(data, function (html) {
102 view.innerHTML = html;
103 });
104
105 var getTpl = document.getElementById('appint_detail').innerHTML
106 , view = document.getElementById('view1');
107 laytpl(getTpl).render(data, function (html) {
108 view.innerHTML = html;
109 });
110 });
111 var swiper = new Swiper('.swiper-container', {
112 slidesPerView: 5,
113 spaceBetween: 20,
114 slidesPerGroup: 1,
115 observer: true,
116 observeParents: true,
117 on: {
118 click: function (swiper) {
119 var index = swiper['clickedIndex'];
120 a(index);
121 }
122 },
123 loopFillGroupWithBlank: true,
124 navigation: {
125 nextEl: '.swiper-button-next',
126 prevEl: '.swiper-button-prev',
127 },
128 });
129 $(document).on('click', '.able_appint', function () {
130 $('.able_appint').removeClass("able_appintActive")
131 $(this).addClass("able_appintActive")
132 modleClose()
133 console.log(9999, busIndex)
134 // $('.business_list li').eq(busIndex-1).addClass('bugActive')
135 });
136 });
137 function modleClose() {
138 $('.layui_anim_content').hide()
139 $('.layui-anim').hide()
140 $('html,body').removeClass('ovfHiden');
141 }
...@@ -101,3 +101,13 @@ ...@@ -101,3 +101,13 @@
101 .map_content { 101 .map_content {
102 margin-top: 20px; 102 margin-top: 20px;
103 } 103 }
104 .footer_button {
105 margin: 20px 0;
106 text-align: center;
107 }
108 .footer_button button {
109 margin-right: 10px;
110 }
111 .footer_button a {
112 color: #fff;
113 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -150,6 +150,18 @@ ...@@ -150,6 +150,18 @@
150 <div class="map_content contentBox"> 150 <div class="map_content contentBox">
151 <div id="container" style="width: 100%;height: 500px;"></div> 151 <div id="container" style="width: 100%;height: 500px;"></div>
152 </div> 152 </div>
153 <div class="footer_button">
154 <button type="button" class="layui-btn layui-btn-normal">
155 <a href="../yyxz/index.html" title="上一步">
156 上一步
157 </a>
158 </button>
159 <button type="button" class="layui-btn layui-btn-normal">
160 <a href="../yysj/index.html" title="下一步">
161 下一步
162 </a>
163 </button>
164 </div>
153 <!-- ----------------------------------内容模块end-------------------------------------------------- --> 165 <!-- ----------------------------------内容模块end-------------------------------------------------- -->
154 <div class="footer"> 166 <div class="footer">
155 <div class="system_service"> 167 <div class="system_service">
......
1 .yysj_main .navigation .layui-nav-item{
2 width: 133px;
3 }
4 .ovfHiden{overflow: hidden;height: 100%;}
5 .navigation_crumbs {
6 height: 45px;
7 }
8
9 .appointment_notice {
10 margin-top: 30px;
11 margin-bottom: 30px;
12 }
13 .app_progress li {
14 padding: 0 30px;
15 line-height: 40px;
16 background: #eee;
17 display: inline-block;
18 color: #fff;
19 position: relative;
20 color: black;
21 cursor: pointer;
22 }
23 .app_progress li:hover {
24 background-color: #1E9FFF!important;
25 color: #fff!important;
26 }
27
28 .app_progress li:hover:after {
29 border-left-color: #1E9FFF;
30 }
31 .app_progress li:after{
32 content: '';
33 display: block;
34 border-top: 20px solid #fff;
35 border-bottom: 20px solid #fff;
36 border-left: 12px solid #eee;
37 position: absolute;
38 right:0;
39 top: 0;
40 }
41 .active {
42 background-color: #1E9FFF!important;
43 color: #fff!important;
44 }
45 .app_progress li.active:after {
46 border-left-color: #1E9FFF;
47 }
48 .line {
49 width: 80px;
50 height: 0;
51 display: inline-block;
52 border-bottom: 2px dotted#dddddd;
53 margin-bottom: 4px;
54 }
55 /* -------------------------------预约日期---------------------------------------- */
56 .appoint_time {
57 width: 1200px;
58 height: 60px;
59 margin: 0 auto;
60 padding: 0 50px;
61 box-sizing: border-box;
62 position: relative;
63 }
64 .swiper-container {
65 width: 100%;
66 height: 100%;
67 }
68
69 .swiper-slide {
70 text-align: center;
71 font-size: 18px;
72 text-align: center;
73 color: #fff;
74 cursor: pointer;
75 }
76 .swiper-slide li {
77 height: 20px;
78 font-size: 18px;
79 margin-top: 6px;
80 }
81 .active {
82 background-color: #1E9FFF;
83 }
84 .business_choice {
85 margin: 20px auto;
86 }
87 .business_choice .title {
88 position: relative;
89 padding-left: 10px;
90 }
91 .business_choice .title::before {
92 content:"";
93 width:3px;
94 height:40px;
95 background-color: #1E9FFF;
96 position:absolute;
97 left: 0px;
98 top: 3px;
99 }
100 .business_choice h2{
101 font-size: 18px;
102 }
103
104 /* -------------分割线----------------------- */
105 .site-title {
106 margin: 20px 0;
107 }
108 .site-title fieldset {
109 border-top: 1px solid #eee;
110 }
111 .site-title fieldset legend {
112 margin: 0 auto;
113 font-size: 20px;
114 padding: 0 15px;
115 }
116 .site-title fieldset legend a:hover {
117 color: #f46143;
118 }
119 .business_list {
120 width: 1220px!important;
121 font-size: 0;
122 margin-left: -10px;
123 }
124 .business_list li{
125 width: 25%;
126 margin-bottom: 10px;
127 height: 43px;
128 line-height: 43px;
129 text-align: center;
130 display: inline-block;
131 font-size: 14px;
132 padding: 0 10px;
133 box-sizing: border-box;
134 }
135 .business_list li .bugActive {
136 background-color: #1E9FFF;
137 color: #fff;
138 }
139 .business_list li a{
140 display: block;
141 border-radius: 3px;
142 height: 100%;
143 background-color: #eee;
144 box-sizing: content-box;
145 }
146 .business_list li a:hover {
147 background-color: #1E9FFF;
148 color: #fff;
149 cursor: pointer;
150 }
151 .layui_anim_list {
152 width: 530px!important;
153 height: 450px;
154 position: fixed;
155 left: 0;
156 top: 0;
157 bottom: 0;
158 right: 0;
159 margin: auto;
160 background-color: #fff;
161 display: none;
162 z-index: 102;
163 padding: 10px;
164 border-radius: 5px;
165 }
166 .layui_anim_content {
167 display: none;
168 width: 100%;
169 height: 100%;
170 position:fixed;
171 left: 0;
172 top: 0;
173 background-color: rgba(0, 0, 0, 0.5);
174 z-index: 101;
175 }
176 .layui-anim h2 {
177 text-align: right;
178 }
179 .layui-anim h2 i {
180 font-size: 18px;
181 padding: 10px;
182 cursor: pointer;
183 }
184 .appointment_time {
185 float: left;
186 margin-right: 60px;
187 }
188 .appointment_time li {
189 width: 200px;
190 height: 60px;
191 margin-bottom: 20px;
192 text-align: center;
193 line-height: 60px;
194 }
195 .content_box {
196 padding: 10px 20px;
197 }
198 .appint_detail li{
199 width: 200px;
200 height: 60px;
201 margin-bottom: 20px;
202 text-align: center;
203 cursor: pointer;
204 box-sizing: border-box;
205 padding-top: 10px;
206 }
207 .appint_detail li span {
208 height: 20px;
209 display: block;
210 }
211 .appint_detail li p {
212 height: 20px;
213 }
214 .full_engagement {
215 margin-top: 10px;
216 }
217 .appint_detail .layui-bg-gray{
218 cursor:not-allowed;
219 }
220 .able_appint {
221 border: 1px solid #e2e2e2;
222 color: #393D49;
223 }
224 .able_appint:hover {
225 background-color: #01AAED;
226 color: #fff;
227 }
228 .able_appintActive {
229 background-color: #5FB878;
230 color: #fff;
231 }
...\ 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 class="active">
89 <span>3</span>
90 预约时间
91 </li>
92 <div class="line"></div>
93 <li>
94 <span>4</span>
95 预约结果
96 </li>
97 </ul>
98 </div>
99 <div class="appoint_time">
100 <div class="swiper-container">
101 <div class="swiper-wrapper" id="swiperDate"></div>
102 </div>
103 <!-- Add Arrows -->
104 <div class="swiper-button-next"></div>
105 <div class="swiper-button-prev"></div>
106 </div>
107 <!-- ----------------------------------业务选择start----------------------------------------------- -->
108 <div class="business_choice contentBox">
109 <div class="title">
110 <h2>选择业务</h2>
111 <p>(请选择您要办理的业务)</p>
112 </div>
113 <div class="site-title">
114 <fieldset>
115 <legend>
116 <a href="" name="fieldset">
117 国有房屋
118 </a>
119 </legend>
120 </fieldset>
121 </div>
122 <ul class="business_list">
123 <li>
124 <a title="二手房转移登记">
125 二手房转移登记
126 </a>
127 </li>
128 <li>
129 <a title="有证房抵押首次登记">
130 有证房抵押首次登记/注销登记
131 </a>
132 </li>
133 <li>
134 <a title="解封登记">
135 查封/解封登记
136 </a>
137 </li>
138 <li>
139 <a title="解封登记">
140 查封/解封登记
141 </a>
142 </li>
143 <li>
144 <a title="证房抵押首次登记">
145 证房抵押首次登记/注销登记
146 </a>
147 </li>
148 <li>
149 <a title="二手房转移登记">
150 二手房转移登记
151 </a>
152 </li>
153 </ul>
154 </div>
155 <div class="layui-anim layui_anim_list" data-anim="layui-anim-scale">
156 <h2>
157 <i class="layui-icon layui-icon-close" onclick="modleClose()"></i>
158 </h2>
159 <ul class="content_box">
160 <li id="view"></li>
161 <li id="view1"></li>
162 </ul>
163 </div>
164 <div class="layui_anim_content"></div>
165 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
166 <div class="footer">
167 <div class="system_service">
168 <ul class="">
169 <li>
170 <a href="" title="公示公告">
171 <span>公示公告</span>
172 </a>
173 </li>
174 <li>
175 <a href="" title="法律法规">
176 <span>法律法规</span>
177 </a>
178 </li>
179 <li>
180 <a href="" title="相应政策">
181 <span>相应政策</span>
182 </a>
183 </li>
184 <li>
185 <a href="" title="下载服务">
186 <span>下载服务</span>
187 </a>
188 </li>
189 <li>
190 <a href="" title="关于我们">
191 <span>关于我们</span>
192 </a>
193 </li>
194 </ul>
195 </div>
196 <div class="subject">
197 <div class="footer_logo">
198 <a href="" title="党政机关">
199 <img src="./../../staticImages/jiguan.png" alt="党政机关" />
200 </a>
201 </div>
202 <ul>
203 <li>
204 西安市自然资源和规划局
205 </li>
206 <li>
207 电话：028-456465
208 </li>
209 <li>
210 地址：西安市丰城8路
211 </li>
212 <li>
213 网站标识吗：87987987
214 </li>
215 <li>
216 备案：陕IPC456465465
217 </li>
218 <li>
219 陕公网备案：456465465
220 </li>
221 </ul>
222 <ol>
223 <li>
224 <img src="./../../staticImages/code.png" alt="公众号" />
225 <p>扫描关注公众号</p>
226 </li>
227 <li>
228 <img src="./../../staticImages/code.png" alt="公众号" />
229 <p>扫描关注公众号</p>
230 </li>
231 </ol>
232 </div>
233 </div>
234 </div>
235 </body>
236
237 </html>
238 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
239 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
240 <script src="../../staticJs/swiper-bundle.min.js"></script>
241 <script type="text/javascript" src="../../staticJs/yysj.js"></script>
242
243 <script id="date" type="text/html">
244 {{# layui.each(d.dateList, function(index, item){ }}
245 {{# if(item.isSelect){ }}
246 <ul class="swiper-slide layui-bg-gray active">
247 <li>{{item.week}}</li>
248 <li>{{item.date}}</li>
249 </ul>
250 {{# } }}
251 {{# if(!item.isSelect){ }}
252 <ul class="swiper-slide layui-bg-gray">
253 <li>{{item.week}}</li>
254 <li>{{item.date}}</li>
255 </ul>
256 {{# } }}
257 {{# }); }}
258 </script>
259
260
261 <script id="appoint_timeList" type="text/html">
262 <ul class="appointment_time">
263 {{# layui.each(d.list, function(index, item){ }}
264 <li class="layui-bg-gray">
265 {{item}}
266 </li>
267 {{# }); }}
268 {{# if(d.list.length === 0){ }}
269 无数据
270 {{# } }}
271 </ul>
272 </script>
273
274 <script id="appint_detail" type="text/html">
275 <ol class="appint_detail">
276 {{# layui.each(d.appint_detail, function(index, item){ }}
277 {{# if(item.total > 0){ }}
278 <li class="able_appint">
279 <span>可预约</span>
280 <p>余{{item.total}}位</p>
281 </li>
282 {{# } }}
283 {{# if(item.total == 0){ }}
284 <li class="layui-bg-gray">
285 <p class="full_engagement">已约满</p>
286 </li>
287 {{# } }}
288 {{# }); }}
289 {{# if(d.list.length === 0){ }}
290 无数据
291 {{# } }}
292 </ol>
293 </script>
...\ No newline at end of file ...\ No newline at end of file