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 231 additions and 73 deletions
...@@ -127,7 +127,7 @@ div.top-logo .top_logo_search input { ...@@ -127,7 +127,7 @@ div.top-logo .top_logo_search input {
127 div.top-logo .login { 127 div.top-logo .login {
128 float: right; 128 float: right;
129 position: relative; 129 position: relative;
130 top: 19px; 130 top: -5px;
131 } 131 }
132 .login li { 132 .login li {
133 color: #6D7278; 133 color: #6D7278;
...@@ -386,12 +386,11 @@ div.footer .system_service ul li a:hover { ...@@ -386,12 +386,11 @@ div.footer .system_service ul li a:hover {
386 font-size: 14px; 386 font-size: 14px;
387 border-radius: 4px; 387 border-radius: 4px;
388 } 388 }
389
390 .personalCenter { 389 .personalCenter {
391 display: none!important; 390 display: inline-block;
392 } 391 }
393 .show{ 392 .personalCenter a {
394 display: inline-block!important; 393 color: #006CFF;
395 } 394 }
396 .appointment_content { 395 .appointment_content {
397 background: #FFFFFF; 396 background: #FFFFFF;
...@@ -467,4 +466,13 @@ div.footer .system_service ul li a:hover { ...@@ -467,4 +466,13 @@ div.footer .system_service ul li a:hover {
467 -ms-user-select:none; /*IE10*/ 466 -ms-user-select:none; /*IE10*/
468 -khtml-user-select:none; /*早期浏览器*/ 467 -khtml-user-select:none; /*早期浏览器*/
469 user-select:none; 468 user-select:none;
469 }
470 .userImage {
471 position: relative;
472 top: 2px;
473 left: -3px;
474 }
475 .isLogin {
476 position: relative;
477 top: 18px;
470 } 478 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,33 +2,111 @@ ...@@ -2,33 +2,111 @@
2 width: 1200px; 2 width: 1200px;
3 margin: 0 auto; 3 margin: 0 auto;
4 margin-top: 20px; 4 margin-top: 20px;
5 text-align: center;
6 padding-bottom: 30px; 5 padding-bottom: 30px;
7 } 6 }
8 .businessInquiry .informationService div { 7 /* 行政区 */
9 margin: 25px 0; 8 .selectCity {
9 width: 1200px;
10 margin: 20px auto;
11 }
12 .selectCity h2 {
13 display: inline-block;
14 margin-right: 9px;
15 }
16 .area_list_content {
17 overflow: hidden;
18 margin-top: 20px;
19 width: 100%;
10 } 20 }
11 .businessInquiry .informationService div span { 21 .area_list_content h2 {
12 display: inline-block; 22 display: inline-block;
13 width: 115px; 23 float: left;
14 text-align: right; 24 margin-right: 12px;
25 }
26 .selectCity .area_list {
27 width: 95%;
28 float: left;
15 } 29 }
16 .businessInquiry .informationService input { 30 .selectCity .area_list li {
17 width: 300px;
18 display: inline-block; 31 display: inline-block;
32 width: 100px;
33 height: 36px;
34 border-radius: 4px;
35 margin-right: 15px;
36 color: #fff;
37 text-align: center;
38 line-height: 36px;
39 margin-bottom: 10px;
40 cursor: pointer;
41 background: #FFFFFF;
42 border-radius: 4px;
43 border: 1px solid #E6E6E6;
44 color: #6D7278;
45 }
46 .selectCity .area_list li:hover {
47 color: #006CFF;
48 border-color: #006CFF;
49 }
50 .active2 {
51 color: #006CFF!important;
52 border-color: #006CFF!important;
19 } 53 }
20 .informationService .layui-btn { 54 .region_title {
55 height: 16px;
56 padding-left: 8px;
57 font-size: 16px;
58 font-weight: 600;
59 margin-bottom: 15px;
60 position: relative;
61 padding-bottom: 10px;
62 color: #4A4A4A;
63 }
64 .region_title::before {
65 position:absolute;
66 content:"";
67 left:0;
68 width:4px;
69 height:12px;
70 border-radius: 1px;
71 top: 5px;
72 background-color: #0091FF;
73 }
74 /* 个人信息查询 */
75 .personInfo{
76 font-size: 0;
77 }
78 .personInfo li{
79 font-size: 14px;
80 width: 50%;
81 display: inline-block;
82 margin-bottom: 20px;
83 position: relative;
84 }
85 .personInfo li span , .verificationCode span{
86 color: #9B9B9B;
87 font-size: 14px;
88 }
89 .personInfo li p {
21 display: inline-block; 90 display: inline-block;
22 width: 160px!important; 91 color: #4A4A4A;
23 } 92 }
24 .typesCertificates { 93 .personInfo li em {
25 width: 300px; 94 font-style: normal;
26 height: 38px; 95 width: 70px;
27 line-height: 1.3; 96 height: 16px;
28 line-height: 38px\9;
29 border-width: 1px;
30 border-style: solid;
31 background-color: #fff;
32 border-radius: 2px; 97 border-radius: 2px;
33 border-color: #e6e6e6; 98 border: 1px solid #0091FF;
99 font-size: 12px;
100 color: #0091FF;
101 display: inline-block;
102 position: relative;
103 right: -20px;
104 top: -10px;
105 cursor: pointer;
106 text-align: center;
107 }
108
109 .verificationCode input {
110 width: 182px;
111 display: inline-block;
34 } 112 }
...\ No newline at end of file ...\ No newline at end of file
......
1 layui.use('element', function () { 1 layui.use('element', function () {
2 let element = layui.element; 2 let element = layui.element;
3 }); 3 });
4 $(function(){
5
6 })
...\ No newline at end of file ...\ No newline at end of file
4 layui.config({
5 base: '../../staticJs/'
6 }).extend({ //设定模块别名
7 common: 'cityCommon'
8 });
9 $(function () {
10 fetchDataReview();
11 _initData();
12 })
13 function fetchDataReview() {
14 $(document).on("click", ".area_list li", function (e) {
15 $(".area_list li").removeClass("active2")
16 $(this).addClass("active2");
17 })
18 layui.use(['form', 'common'], function () {
19 var common = layui.common,
20 form = layui.form;
21 //三级地址联动
22 common.showCity('province', 'city');
23 //区域选择
24 form.on('select(selectCity)', function (data) {
25 return false;
26 });
27 });
28 }
29 // 初始化数据
30 function _initData() {
31 var area_list = $(".area_list");
32 area_list.empty();
33 var li
34 $.ajax({
35 type: "get", //提交方式
36 url: portal.api_url + "/cms/district/queryAllDistrict",//路径
37 dataType: "json",
38 //数据，这里使用的是Json格式进行传输
39 success: function (result) {//返回数据根据结果进行相应的处理
40 if (result.code == 200 && result.data != null) {
41 let data = result.data[0].children[0].children
42 for (var i = 0; i < data.length; i++) {
43 if (i == 0) {
44 li = '<li data-id="' + data[i].id + '" class="active2">' + data[i].name + '</li>';
45 } else {
46 li = '<li data-id="' + data[i].id + '">' + data[i].name + '</li>';
47 }
48 area_list.append(li);
49 }
50 }
51 }
52 });
53 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -32,18 +32,17 @@ document.writeln(" class=\'layui-input\'>"); ...@@ -32,18 +32,17 @@ document.writeln(" class=\'layui-input\'>");
32 document.writeln(" <img class=\'search_img\' src=\'" + localhostPaht + "/staticImages/search.png\'>"); 32 document.writeln(" <img class=\'search_img\' src=\'" + localhostPaht + "/staticImages/search.png\'>");
33 document.writeln(" </div>"); 33 document.writeln(" </div>");
34 document.writeln(" <ul class='login login-con isLogin'>"); 34 document.writeln(" <ul class='login login-con isLogin'>");
35 document.writeln(" <!-- <li>登录</li> -->");
36 document.writeln(" <li class='loginSelect'>"); 35 document.writeln(" <li class='loginSelect'>");
37 document.writeln(" <p class='loginButton PersonLogin'>登录</p>"); 36 document.writeln(" <p class='loginButton PersonLogin'>登录</p>");
38 document.writeln(" </li>"); 37 document.writeln(" </li>");
39 document.writeln(" </ul>"); 38 document.writeln(" </ul>");
40 document.writeln(" <ul class='login layui-nav login-con loginAfter'>"); 39 document.writeln(" <ul class='login layui-nav login-con loginAfter'>");
41 document.writeln(" <!-- <li>登录</li> -->"); 40 document.writeln(" <img class='userImage' src=\'" + localhostPaht + "/staticImages/user.png\'>");
41 document.writeln(" <p class='personalCenter'><a href=\'" + localhostPaht + "/staticViews/grzx.html\'>个人中心</a></p>");
42 document.writeln(" <li class='layui-nav-item loginSelect'>"); 42 document.writeln(" <li class='layui-nav-item loginSelect'>");
43 document.writeln(" <p class='loginButton PersonLogin'>登录</p>"); 43 document.writeln(" <p class='loginButton PersonLogin'>登录</p>");
44 document.writeln(" <dl class='layui-nav-child userInfo'>"); 44 document.writeln(" <dl class='layui-nav-child userInfo'>");
45 document.writeln(" <!-- 二级菜单 -->"); 45 document.writeln(" <!-- 二级菜单 -->");
46 document.writeln(" <dd><a href=\'" + localhostPaht + "/staticViews/grzx.html\'>个人中心</a></dd>");
47 document.writeln(" <dd><a>个人信息</a></dd>"); 46 document.writeln(" <dd><a>个人信息</a></dd>");
48 document.writeln(" <dd><a id='cancellation'>注销</a></dd>"); 47 document.writeln(" <dd><a id='cancellation'>注销</a></dd>");
49 document.writeln(" </dl>"); 48 document.writeln(" </dl>");
......
...@@ -20,22 +20,20 @@ function login() { ...@@ -20,22 +20,20 @@ function login() {
20 }); 20 });
21 }) 21 })
22 } 22 }
23 23 $(document).on('click', '.PersonLogin', function () {
24 login();
25 })
26 // 点击登陆的时候
27 $(document).on('click', '#loginButton', function () {
28 var userLoginRequest = {};
29 var username = $('#phone').val();
30 var password = $('#IDcard').val();
31 userLoginRequest.phone = username;
32 userLoginRequest.password = password;
33 delCookie();
34 clicklogin(userLoginRequest);
35 });
24 function fetchDataReview() { 36 function fetchDataReview() {
25 $(document).on('click', '.PersonLogin', function () {
26 login();
27 })
28 // 点击登陆的时候
29 $(document).on('click', '#loginButton', function () {
30 var userLoginRequest = {};
31 var username = $('#phone').val();
32 var password = $('#IDcard').val();
33 userLoginRequest.phone = username;
34 userLoginRequest.password = password;
35 delCookie();
36 clicklogin(userLoginRequest);
37 });
38
39 // cancellation 37 // cancellation
40 $(document).on('click', '#cancellation', function () { 38 $(document).on('click', '#cancellation', function () {
41 layui.use('layer', function () { 39 layui.use('layer', function () {
...@@ -63,7 +61,7 @@ $(function () { ...@@ -63,7 +61,7 @@ $(function () {
63 $('.personalCenter').addClass('show'); 61 $('.personalCenter').addClass('show');
64 $('.loginAfter').show(); 62 $('.loginAfter').show();
65 $('.isLogin').hide(); 63 $('.isLogin').hide();
66 }else { 64 } else {
67 $('.loginAfter').hide(); 65 $('.loginAfter').hide();
68 $('.isLogin').show(); 66 $('.isLogin').show();
69 } 67 }
......
1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 });
1 $(function () { 4 $(function () {
2 layui.use('element', function () { 5 addTabs('#wssq');
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 //监听导航点击
5 element.on('nav(demo)', function (elem) {
6 layer.msg(elem.text());
7 });
8 });
9 addTabs('#wssq')
10 //config的设置是全局的 6 //config的设置是全局的
11 layui.config({ 7 layui.config({
12 base: '../../staticJs/' 8 base: '../../staticJs/'
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
4 <head> 5 <head>
5 <style> 6 <style>
6 </style> 7 </style>
...@@ -21,27 +22,57 @@ ...@@ -21,27 +22,57 @@
21 </div> 22 </div>
22 </div> 23 </div>
23 <div class="informationService middleZoneHeight"> 24 <div class="informationService middleZoneHeight">
24 <div> 25 <div class="selectCity">
25 <span>申请人：</span> 26 <h2 class="region_title">请先选择对应的区域</h2>
26 <input type="text" name="" placeholder="请输入申请人" class="layui-input"> 27 <form class="layui-form">
27 </div> 28 <h2 class="title">省</h2>
28 <div> 29 <div class="layui-inline layui-select-default" style="margin-right: 10px;">
29 <span>证件种类：</span> 30 <select name="province" class="Pselected" disabled data-area="陕西省"" lay-filter=" province">
30 <select name="interest" lay-filter="" class="typesCertificates"> 31 <option value="">选择省</option>
31 <option value="1">身份证</option> 32 </select>
32 </select> 33 </div>
34 <h2>市</h2>
35 <div class="layui-inline selected layui-select-default">
36 <select name="city" class="Cselected" disabled data-area="西安市" lay-filter="selectCity">
37 <option value="">选择市</option>
38 </select>
39 </div>
40 </form>
41 <div class="area_list_content">
42 <h2>区</h2>
43 <ul class="area_list"></ul>
44 </div>
33 </div> 45 </div>
34 <div> 46 <h2 class="region_title">请输入查询信息</h2>
35 <span>证件号码：</span> 47 <ul class="personInfo">
36 <input type="text" name="" placeholder="请输入证件号码" class="layui-input"> 48 <li>
37 </div> 49 <span>权利人：</span>
38 <div> 50 <p>任超</p>
39 <span>不动产权证号：</span> 51 </li>
40 <input type="text" name="" placeholder="请输入档案编号" class="layui-input"> 52 <li>
53 <span>证件类型：</span>
54 <p>身份证</p>
55 </li>
56 <li>
57 <span>手机号：</span>
58 <p>187789798798</p>
59 <em>获取验证码</em>
60 </li>
61 <li>
62 <span>身份证号：</span>
63 <p>610127879798</p>
64 </li>
65 </ul>
66 <div class="verificationCode">
67 <span>验证码：</span>
68 <input type="tel" placeholder="请输入验证码" class="layui-input">
41 </div> 69 </div>
42 <div> 70 <div>
43 <span>所属行政区：</span> 71 <label class="layui-form-label">短输入框</label>
44 <input type="text" id="tree" lay-filter="tree" class="layui-input"> 72 <div class="layui-input-inline">
73 <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
74 class="layui-input">
75 </div>
45 </div> 76 </div>
46 <button type="button" class="layui-btn layui-btn-normal">查询</button> 77 <button type="button" class="layui-btn layui-btn-normal">查询</button>
47 </div> 78 </div>
...@@ -49,4 +80,5 @@ ...@@ -49,4 +80,5 @@
49 </body> 80 </body>
50 <script type="text/javascript" src="../../staticJs/down.js"></script> 81 <script type="text/javascript" src="../../staticJs/down.js"></script>
51 <script type="text/javascript" src="../../staticJs/convenienceService/businessInquiry.js"></script> 82 <script type="text/javascript" src="../../staticJs/convenienceService/businessInquiry.js"></script>
83
52 </html> 84 </html>
...\ No newline at end of file ...\ No newline at end of file
......