Skip to content

任超 / js.portalStaticPage

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

feat:业务预约

1 parent 3ea369a6
Expand all
Inline Side-by-side
Showing 7 changed files with 394 additions and 0 deletions
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