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 @@
border: none!important;
margin-left: -10px;
margin-bottom: 30px;
}
/* 行政区 */
.selectCity {
width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
.selectCity h2 {
display: inline-block;
margin-right: 9px;
}
.area_list_content {
overflow: hidden;
margin-top: 20px;
width: 100%;
}
.area_list_content h2 {
display: inline-block;
float: left;
margin-right: 12px;
}
.selectCity .area_list {
width: 95%;
float: left;
}
.selectCity .area_list li {
display: inline-block;
width: 100px;
height: 36px;
border-radius: 4px;
margin-right: 15px;
color: #fff;
text-align: center;
line-height: 36px;
margin-bottom: 10px;
cursor: pointer;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #E6E6E6;
color: #6D7278;
}
.selectCity .area_list li:hover {
color: #006CFF;
border-color: #006CFF;
}
.active2 {
color: #006CFF!important;
border-color: #006CFF!important;
}
\ No newline at end of file
......
$(function () {
layui.use('element', function () {
var element = layui.element;
});
layui.use('element', function () {
var element = layui.element;
//监听Tab切换，以改变地址hash值
element.on('tab(navtab)', function () {
if (this.getAttribute('lay-id') == 1) {
$("body,html").animate({ scrollTop: $(".tudi").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".tudi .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 2) {
$("body,html").animate({ scrollTop: $(".jianzhu").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".jianzhu .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 3) {
$("body,html").animate({ scrollTop: $(".linmu").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".linmu .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 4) {
$("body,html").animate({ scrollTop: $(".qita").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".qita .online_business h2").addClass('titleActive')
} else {
$("body,html").animate({ scrollTop: 0 });
$(".online_business h2").removeClass('titleActive')
}
});
element.on('tab(navtab1)', function () {
if (this.getAttribute('lay-id') == 1) {
$("body,html").animate({ scrollTop: $(".tudi1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".tudi1 .navtab1 h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 2) {
$("body,html").animate({ scrollTop: $(".jianzhu1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".jianzhu1 .navtab1 h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 3) {
$("body,html").animate({ scrollTop: $(".linmu1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".linmu1 .navtab1 h2").addClass('titleActive')
} else {
$("body,html").animate({ scrollTop: 0 });
$(".navtab1 h2").removeClass('titleActive')
}
layui.use('element', function () {
var element = layui.element;
});
});
layui.use('util', function () {
let util = layui.util;
//执行
util.fixbar({
bar1: true,
bar2: true,
top: true
, click: function (type) {
console.log(type);
if (type === 'bar1') {
alert('点击了bar1')
layui.use('element', function () {
var element = layui.element;
//监听Tab切换，以改变地址hash值
element.on('tab(navtab)', function () {
if (this.getAttribute('lay-id') == 1) {
$("body,html").animate({ scrollTop: $(".tudi").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".tudi .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 2) {
$("body,html").animate({ scrollTop: $(".jianzhu").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".jianzhu .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 3) {
$("body,html").animate({ scrollTop: $(".linmu").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".linmu .online_business h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 4) {
$("body,html").animate({ scrollTop: $(".qita").offset().top });
$(".online_business h2").removeClass('titleActive')
$(".qita .online_business h2").addClass('titleActive')
} else {
$("body,html").animate({ scrollTop: 0 });
$(".online_business h2").removeClass('titleActive')
}
}
});
element.on('tab(navtab1)', function () {
if (this.getAttribute('lay-id') == 1) {
$("body,html").animate({ scrollTop: $(".tudi1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".tudi1 .navtab1 h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 2) {
$("body,html").animate({ scrollTop: $(".jianzhu1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".jianzhu1 .navtab1 h2").addClass('titleActive')
} else if (this.getAttribute('lay-id') == 3) {
$("body,html").animate({ scrollTop: $(".linmu1").offset().top });
$(".navtab1 h2").removeClass('titleActive')
$(".linmu1 .navtab1 h2").addClass('titleActive')
} else {
$("body,html").animate({ scrollTop: 0 });
$(".navtab1 h2").removeClass('titleActive')
}
});
});
layui.use('util', function () {
let util = layui.util;
//执行
util.fixbar({
bar1: true,
bar2: true,
top: true
, click: function (type) {
console.log(type);
if (type === 'bar1') {
alert('点击了bar1')
}
}
});
})
addTabs('#bszn')
_initData()
});
//config的设置是全局的
layui.config({
base: '../../staticJs/'
}).extend({ //设定模块别名
common: 'cityCommon'
});
$(document).on("click", ".area_list li", function (e) {
$(".area_list li").removeClass("active2")
$(this).addClass("active2");
_businessList($(this).attr("data-id"))
})
addTabs('#bszn')
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city');
//区域选择
form.on('select(selectCity)', function (data) {
return false;
});
});
// 初始化数据
function _initData() {
var area_list = $(".area_list");
area_list.empty();
var li
$.ajax({
type: "get", //提交方式
url: portal.api_url + "/cms/district/queryAllDistrict",//路径
dataType: "json",
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
let data = result.data[0].children[0].children
for (var i = 0; i < data.length; i++) {
li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>';
area_list.append(li);
}
}
}
})
}
\ No newline at end of file
......
......@@ -20,7 +20,27 @@
</span>
</div>
</div>
<!-- 行政区 -->
<div class="selectCity">
<form class="layui-form">
<h2 class="title">省</h2>
<div class="layui-inline layui-select-default" style="margin-right: 10px;">
<select name="province" class="Pselected" disabled data-area="陕西省"" lay-filter=" province">
<option value="">选择省</option>
</select>
</div>
<h2>市</h2>
<div class="layui-inline selected layui-select-default">
<select name="city" class="Cselected" disabled data-area="西安市" lay-filter="selectCity">
<option value="">选择市</option>
</select>
</div>
</form>
<div class="area_list_content">
<h2>区</h2>
<ul class="area_list"></ul>
</div>
</div>
<div class="one_content contentBox">
<div class="layui-tab">
<ul class="layui-tab-title busTabs">
......@@ -538,5 +558,6 @@
</body>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/city-picker.js"></script>
<script type="text/javascript" src="../staticJs/bszn.js"></script>
</html>
\ No newline at end of file
......
......@@ -51,34 +51,6 @@
<div class="online_examination">
<h1 class="type_title">网上预审(现场办结)</h1>
<div id="settlement"></div>
<!-- <ul class="item_list">
<div class="list_title">
<h2>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontudi"></use>
</svg>
预告类
</h2>
</div>
<li>
<p>二手房买卖登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
<a href='./esf-xxjy.html'>立即办理</a>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
<li>
<p>商品房转移登记</p>
<div class="button">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
<a href='./xxjy.html'>立即办理</a>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">网上申请</button>
</div>
</li>
</ul> -->
</div>
</div>
</div>
......