Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
303851ea by 任超
Options

style:个人中心

1 parent d6a47fef
Inline Side-by-side
Showing 8 changed files with 220 additions and 62 deletions
......@@ -127,7 +127,7 @@ div.top-logo .top_logo_search input {
div.top-logo .login {
float: right;
position: relative;
top: 19px;
top: -5px;
}
.login li {
color: #6D7278;
......@@ -386,12 +386,11 @@ div.footer .system_service ul li a:hover {
font-size: 14px;
border-radius: 4px;
}
.personalCenter {
display: none!important;
display: inline-block;
}
.show{
display: inline-block!important;
.personalCenter a {
color: #006CFF;
}
.appointment_content {
background: #FFFFFF;
......@@ -468,3 +467,12 @@ div.footer .system_service ul li a:hover {
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
}
.userImage {
position: relative;
top: 2px;
left: -3px;
}
.isLogin {
position: relative;
top: 18px;
}
\ No newline at end of file
......
......@@ -2,33 +2,111 @@
width: 1200px;
margin: 0 auto;
margin-top: 20px;
text-align: center;
padding-bottom: 30px;
}
.businessInquiry .informationService div {
margin: 25px 0;
/* 行政区 */
.selectCity {
width: 1200px;
margin: 20px auto;
}
.businessInquiry .informationService div span {
.selectCity h2 {
display: inline-block;
width: 115px;
text-align: right;
margin-right: 9px;
}
.area_list_content {
overflow: hidden;
margin-top: 20px;
width: 100%;
}
.businessInquiry .informationService input {
width: 300px;
.area_list_content h2 {
display: inline-block;
float: left;
margin-right: 12px;
}
.selectCity .area_list {
width: 95%;
float: left;
}
.informationService .layui-btn {
.selectCity .area_list li {
display: inline-block;
width: 160px!important;
}
.typesCertificates {
width: 300px;
height: 38px;
line-height: 1.3;
line-height: 38px\9;
border-width: 1px;
border-style: solid;
background-color: #fff;
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;
}
.region_title {
height: 16px;
padding-left: 8px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
padding-bottom: 10px;
color: #4A4A4A;
}
.region_title::before {
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
/* 个人信息查询 */
.personInfo{
font-size: 0;
}
.personInfo li{
font-size: 14px;
width: 50%;
display: inline-block;
margin-bottom: 20px;
position: relative;
}
.personInfo li span , .verificationCode span{
color: #9B9B9B;
font-size: 14px;
}
.personInfo li p {
display: inline-block;
color: #4A4A4A;
}
.personInfo li em {
font-style: normal;
width: 70px;
height: 16px;
border-radius: 2px;
border-color: #e6e6e6;
border: 1px solid #0091FF;
font-size: 12px;
color: #0091FF;
display: inline-block;
position: relative;
right: -20px;
top: -10px;
cursor: pointer;
text-align: center;
}
.verificationCode input {
width: 182px;
display: inline-block;
}
\ No newline at end of file
......
layui.use('element', function () {
let element = layui.element;
});
$(function(){
layui.config({
base: '../../staticJs/'
}).extend({ //设定模块别名
common: 'cityCommon'
});
$(function () {
fetchDataReview();
_initData();
})
function fetchDataReview() {
$(document).on("click", ".area_list li", function (e) {
$(".area_list li").removeClass("active2")
$(this).addClass("active2");
})
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++) {
if (i == 0) {
li = '<li data-id="' + data[i].id + '" class="active2">' + data[i].name + '</li>';
} else {
li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>';
}
area_list.append(li);
}
}
}
});
}
\ No newline at end of file
......
......@@ -32,18 +32,17 @@ document.writeln(" class=\'layui-input\'>");
document.writeln(" <img class=\'search_img\' src=\'" + localhostPaht + "/staticImages/search.png\'>");
document.writeln(" </div>");
document.writeln(" <ul class='login login-con isLogin'>");
document.writeln(" <!-- <li>登录</li> -->");
document.writeln(" <li class='loginSelect'>");
document.writeln(" <p class='loginButton PersonLogin'>登录</p>");
document.writeln(" </li>");
document.writeln(" </ul>");
document.writeln(" <ul class='login layui-nav login-con loginAfter'>");
document.writeln(" <!-- <li>登录</li> -->");
document.writeln(" <img class='userImage' src=\'" + localhostPaht + "/staticImages/user.png\'>");
document.writeln(" <p class='personalCenter'><a href=\'" + localhostPaht + "/staticViews/grzx.html\'>个人中心</a></p>");
document.writeln(" <li class='layui-nav-item loginSelect'>");
document.writeln(" <p class='loginButton PersonLogin'>登录</p>");
document.writeln(" <dl class='layui-nav-child userInfo'>");
document.writeln(" <!-- 二级菜单 -->");
document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/grzx.html\'>个人中心</a></dd>");
document.writeln(" <dd><a>个人信息</a></dd>");
document.writeln(" <dd><a id='cancellation'>注销</a></dd>");
document.writeln(" </dl>");
......
......@@ -20,13 +20,11 @@ function login() {
});
})
}
function fetchDataReview() {
$(document).on('click', '.PersonLogin', function () {
$(document).on('click', '.PersonLogin', function () {
login();
})
// 点击登陆的时候
$(document).on('click', '#loginButton', function () {
})
// 点击登陆的时候
$(document).on('click', '#loginButton', function () {
var userLoginRequest = {};
var username = $('#phone').val();
var password = $('#IDcard').val();
......@@ -34,8 +32,8 @@ function fetchDataReview() {
userLoginRequest.password = password;
delCookie();
clicklogin(userLoginRequest);
});
});
function fetchDataReview() {
// cancellation
$(document).on('click', '#cancellation', function () {
layui.use('layer', function () {
......@@ -63,7 +61,7 @@ $(function () {
$('.personalCenter').addClass('show');
$('.loginAfter').show();
$('.isLogin').hide();
}else {
} else {
$('.loginAfter').hide();
$('.isLogin').show();
}
......
$(function () {
layui.use('element', function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
addTabs('#wssq')
});
$(function () {
addTabs('#wssq');
//config的设置是全局的
layui.config({
base: '../../staticJs/'
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
......@@ -21,27 +22,57 @@
</div>
</div>
<div class="informationService middleZoneHeight">
<div>
<span>申请人：</span>
<input type="text" name="" placeholder="请输入申请人" class="layui-input">
<div class="selectCity">
<h2 class="region_title">请先选择对应的区域</h2>
<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>
<div>
<span>证件种类：</span>
<select name="interest" lay-filter="" class="typesCertificates">
<option value="1">身份证</option>
<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>
<div>
<span>证件号码：</span>
<input type="text" name="" placeholder="请输入证件号码" class="layui-input">
</form>
<div class="area_list_content">
<h2>区</h2>
<ul class="area_list"></ul>
</div>
<div>
<span>不动产权证号：</span>
<input type="text" name="" placeholder="请输入档案编号" class="layui-input">
</div>
<h2 class="region_title">请输入查询信息</h2>
<ul class="personInfo">
<li>
<span>权利人：</span>
<p>任超</p>
</li>
<li>
<span>证件类型：</span>
<p>身份证</p>
</li>
<li>
<span>手机号：</span>
<p>187789798798</p>
<em>获取验证码</em>
</li>
<li>
<span>身份证号：</span>
<p>610127879798</p>
</li>
</ul>
<div class="verificationCode">
<span>验证码：</span>
<input type="tel" placeholder="请输入验证码" class="layui-input">
</div>
<div>
<span>所属行政区：</span>
<input type="text" id="tree" lay-filter="tree" class="layui-input">
<label class="layui-form-label">短输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
class="layui-input">
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal">查询</button>
</div>
......@@ -49,4 +80,5 @@
</body>
<script type="text/javascript" src="../../staticJs/down.js"></script>
<script type="text/javascript" src="../../staticJs/convenienceService/businessInquiry.js"></script>
</html>
\ No newline at end of file
......