Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
94dffa72 by 任超
Options

feats:办事指南添加行政区

1 parent 6ab02c38
Pipeline #25 for 94dffa72 failed in 0 seconds
Inline Side-by-side
Showing 4 changed files with 174 additions and 88 deletions
...@@ -137,4 +137,53 @@ ...@@ -137,4 +137,53 @@
137 border: none!important; 137 border: none!important;
138 margin-left: -10px; 138 margin-left: -10px;
139 margin-bottom: 30px; 139 margin-bottom: 30px;
140 }
141
142 /* 行政区 */
143 .selectCity {
144 width: 1200px;
145 margin: 0 auto;
146 margin-top: 20px;
147 }
148 .selectCity h2 {
149 display: inline-block;
150 margin-right: 9px;
151 }
152 .area_list_content {
153 overflow: hidden;
154 margin-top: 20px;
155 width: 100%;
156 }
157 .area_list_content h2 {
158 display: inline-block;
159 float: left;
160 margin-right: 12px;
161 }
162 .selectCity .area_list {
163 width: 95%;
164 float: left;
165 }
166 .selectCity .area_list li {
167 display: inline-block;
168 width: 100px;
169 height: 36px;
170 border-radius: 4px;
171 margin-right: 15px;
172 color: #fff;
173 text-align: center;
174 line-height: 36px;
175 margin-bottom: 10px;
176 cursor: pointer;
177 background: #FFFFFF;
178 border-radius: 4px;
179 border: 1px solid #E6E6E6;
180 color: #6D7278;
181 }
182 .selectCity .area_list li:hover {
183 color: #006CFF;
184 border-color: #006CFF;
185 }
186 .active2 {
187 color: #006CFF!important;
188 border-color: #006CFF!important;
140 } 189 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () { 1 $(function () {
2 layui.use('element', function () { 2 layui.use('element', function () {
3 var element = layui.element; 3 var element = layui.element;
4 });
5 layui.use('element', function () {
6 var element = layui.element;
7 //监听Tab切换，以改变地址hash值
8 element.on('tab(navtab)', function () {
9 if (this.getAttribute('lay-id') == 1) {
10 $("body,html").animate({ scrollTop: $(".tudi").offset().top });
11 $(".online_business h2").removeClass('titleActive')
12 $(".tudi .online_business h2").addClass('titleActive')
13 } else if (this.getAttribute('lay-id') == 2) {
14 $("body,html").animate({ scrollTop: $(".jianzhu").offset().top });
15 $(".online_business h2").removeClass('titleActive')
16 $(".jianzhu .online_business h2").addClass('titleActive')
17 } else if (this.getAttribute('lay-id') == 3) {
18 $("body,html").animate({ scrollTop: $(".linmu").offset().top });
19 $(".online_business h2").removeClass('titleActive')
20 $(".linmu .online_business h2").addClass('titleActive')
21 } else if (this.getAttribute('lay-id') == 4) {
22 $("body,html").animate({ scrollTop: $(".qita").offset().top });
23 $(".online_business h2").removeClass('titleActive')
24 $(".qita .online_business h2").addClass('titleActive')
25 } else {
26 $("body,html").animate({ scrollTop: 0 });
27 $(".online_business h2").removeClass('titleActive')
28 }
29 });
30 element.on('tab(navtab1)', function () {
31 if (this.getAttribute('lay-id') == 1) {
32 $("body,html").animate({ scrollTop: $(".tudi1").offset().top });
33 $(".navtab1 h2").removeClass('titleActive')
34 $(".tudi1 .navtab1 h2").addClass('titleActive')
35 } else if (this.getAttribute('lay-id') == 2) {
36 $("body,html").animate({ scrollTop: $(".jianzhu1").offset().top });
37 $(".navtab1 h2").removeClass('titleActive')
38 $(".jianzhu1 .navtab1 h2").addClass('titleActive')
39 } else if (this.getAttribute('lay-id') == 3) {
40 $("body,html").animate({ scrollTop: $(".linmu1").offset().top });
41 $(".navtab1 h2").removeClass('titleActive')
42 $(".linmu1 .navtab1 h2").addClass('titleActive')
43 } else {
44 $("body,html").animate({ scrollTop: 0 });
45 $(".navtab1 h2").removeClass('titleActive')
46 }
47 }); 4 });
48 }); 5 layui.use('element', function () {
49 layui.use('util', function () { 6 var element = layui.element;
50 let util = layui.util; 7 //监听Tab切换，以改变地址hash值
51 //执行 8 element.on('tab(navtab)', function () {
52 util.fixbar({ 9 if (this.getAttribute('lay-id') == 1) {
53 bar1: true, 10 $("body,html").animate({ scrollTop: $(".tudi").offset().top });
54 bar2: true, 11 $(".online_business h2").removeClass('titleActive')
55 top: true 12 $(".tudi .online_business h2").addClass('titleActive')
56 , click: function (type) { 13 } else if (this.getAttribute('lay-id') == 2) {
57 console.log(type); 14 $("body,html").animate({ scrollTop: $(".jianzhu").offset().top });
58 if (type === 'bar1') { 15 $(".online_business h2").removeClass('titleActive')
59 alert('点击了bar1') 16 $(".jianzhu .online_business h2").addClass('titleActive')
17 } else if (this.getAttribute('lay-id') == 3) {
18 $("body,html").animate({ scrollTop: $(".linmu").offset().top });
19 $(".online_business h2").removeClass('titleActive')
20 $(".linmu .online_business h2").addClass('titleActive')
21 } else if (this.getAttribute('lay-id') == 4) {
22 $("body,html").animate({ scrollTop: $(".qita").offset().top });
23 $(".online_business h2").removeClass('titleActive')
24 $(".qita .online_business h2").addClass('titleActive')
25 } else {
26 $("body,html").animate({ scrollTop: 0 });
27 $(".online_business h2").removeClass('titleActive')
60 } 28 }
61 } 29 });
30 element.on('tab(navtab1)', function () {
31 if (this.getAttribute('lay-id') == 1) {
32 $("body,html").animate({ scrollTop: $(".tudi1").offset().top });
33 $(".navtab1 h2").removeClass('titleActive')
34 $(".tudi1 .navtab1 h2").addClass('titleActive')
35 } else if (this.getAttribute('lay-id') == 2) {
36 $("body,html").animate({ scrollTop: $(".jianzhu1").offset().top });
37 $(".navtab1 h2").removeClass('titleActive')
38 $(".jianzhu1 .navtab1 h2").addClass('titleActive')
39 } else if (this.getAttribute('lay-id') == 3) {
40 $("body,html").animate({ scrollTop: $(".linmu1").offset().top });
41 $(".navtab1 h2").removeClass('titleActive')
42 $(".linmu1 .navtab1 h2").addClass('titleActive')
43 } else {
44 $("body,html").animate({ scrollTop: 0 });
45 $(".navtab1 h2").removeClass('titleActive')
46 }
47 });
62 }); 48 });
49 layui.use('util', function () {
50 let util = layui.util;
51 //执行
52 util.fixbar({
53 bar1: true,
54 bar2: true,
55 top: true
56 , click: function (type) {
57 console.log(type);
58 if (type === 'bar1') {
59 alert('点击了bar1')
60 }
61 }
62 });
63 })
64 addTabs('#bszn')
65 _initData()
66 });
67 //config的设置是全局的
68 layui.config({
69 base: '../../staticJs/'
70 }).extend({ //设定模块别名
71 common: 'cityCommon'
63 }); 72 });
64 73
74 $(document).on("click", ".area_list li", function (e) {
75 $(".area_list li").removeClass("active2")
76 $(this).addClass("active2");
77 _businessList($(this).attr("data-id"))
78 })
65 79
66 addTabs('#bszn') 80 layui.use(['form', 'common'], function () {
81 var common = layui.common,
82 form = layui.form;
83 //三级地址联动
84 common.showCity('province', 'city');
85 //区域选择
86 form.on('select(selectCity)', function (data) {
87 return false;
88 });
67 }); 89 });
90 // 初始化数据
91 function _initData() {
92 var area_list = $(".area_list");
93 area_list.empty();
94 var li
95 $.ajax({
96 type: "get", //提交方式
97 url: portal.api_url + "/cms/district/queryAllDistrict",//路径
98 dataType: "json",
99 //数据，这里使用的是Json格式进行传输
100 success: function (result) {//返回数据根据结果进行相应的处理
101 if (result.code == 200 && result.data != null) {
102 let data = result.data[0].children[0].children
103 for (var i = 0; i < data.length; i++) {
104 li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>';
105 area_list.append(li);
106 }
107
108 }
109 }
110 })
111 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -20,7 +20,27 @@ ...@@ -20,7 +20,27 @@
20 </span> 20 </span>
21 </div> 21 </div>
22 </div> 22 </div>
23 23 <!-- 行政区 -->
24 <div class="selectCity">
25 <form class="layui-form">
26 <h2 class="title">省</h2>
27 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
28 <select name="province" class="Pselected" disabled data-area="陕西省"" lay-filter=" province">
29 <option value="">选择省</option>
30 </select>
31 </div>
32 <h2>市</h2>
33 <div class="layui-inline selected layui-select-default">
34 <select name="city" class="Cselected" disabled data-area="西安市" lay-filter="selectCity">
35 <option value="">选择市</option>
36 </select>
37 </div>
38 </form>
39 <div class="area_list_content">
40 <h2>区</h2>
41 <ul class="area_list"></ul>
42 </div>
43 </div>
24 <div class="one_content contentBox"> 44 <div class="one_content contentBox">
25 <div class="layui-tab"> 45 <div class="layui-tab">
26 <ul class="layui-tab-title busTabs"> 46 <ul class="layui-tab-title busTabs">
...@@ -538,5 +558,6 @@ ...@@ -538,5 +558,6 @@
538 </body> 558 </body>
539 <script type="text/javascript" src="../staticJs/down.js"></script> 559 <script type="text/javascript" src="../staticJs/down.js"></script>
540 <script type="text/javascript" src="../staticJs/common.js"></script> 560 <script type="text/javascript" src="../staticJs/common.js"></script>
561 <script type="text/javascript" src="../staticJs/city-picker.js"></script>
541 <script type="text/javascript" src="../staticJs/bszn.js"></script> 562 <script type="text/javascript" src="../staticJs/bszn.js"></script>
542 </html> 563 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -51,34 +51,6 @@ ...@@ -51,34 +51,6 @@
51 <div class="online_examination"> 51 <div class="online_examination">
52 <h1 class="type_title">网上预审(现场办结)</h1> 52 <h1 class="type_title">网上预审(现场办结)</h1>
53 <div id="settlement"></div> 53 <div id="settlement"></div>
54 <!-- <ul class="item_list">
55 <div class="list_title">
56 <h2>
57 <svg class="icon svg-icon" aria-hidden="true">
58 <use xlink:href="#icontudi"></use>
59 </svg>
60 预告类
61 </h2>
62 </div>
63 <li>
64 <p>二手房买卖登记</p>
65 <div class="button">
66 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
67 <a href='./esf-xxjy.html'>立即办理</a>
68 </button>
69 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
70 </div>
71 </li>
72 <li>
73 <p>商品房转移登记</p>
74 <div class="button">
75 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
76 <a href='./xxjy.html'>立即办理</a>
77 </button>
78 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
79 </div>
80 </li>
81 </ul> -->
82 </div> 54 </div>
83 </div> 55 </div>
84 </div> 56 </div>
......