Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
b04116e5 by 任超
Options

feat:个人中心

1 parent 0e607484
Inline Side-by-side
Showing 9 changed files with 675 additions and 3 deletions
No preview for this file type
1 /* ------------------------公共头部和尾部css------------------------------------ */
2 /* ----------------------公共样式-------------------------- */
3 .contentBox {
4 width: 1200px;
5 margin: 0 auto;
6 overflow: hidden;
7 }
8 .navigation_crumbs {
9 width: 100%;
10 height: 25px;
11 padding: 10px 0;
12 line-height: 25px;
13 background: #FAFAFA;
14 border: 1px solid #E6E6E6;
15 }
16 .navigation_crumbs .layui-breadcrumb a:hover {
17 color: #f46143!important;
18 }
19 /* -------------------------头部start----------------------------------- */
20 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
21 border: 0;
22 margin: 0;
23 outline: 0 none;
24 padding: 0;
25 vertical-align: baseline;
26 font-size: 100%;
27 background: transparent;
28 font-family: Arial;
29 }
30
31 div a {
32 color: #000000;
33 text-decoration: none;
34 }
35
36 div.subject h2 a:hover {
37 color: #f46143;
38 }
39
40 div.subject {
41 margin: 0 auto;
42 float: none;
43 clear: both;
44 position: relative;
45 min-width: 1200px;
46 }
47 div.top-logo {
48 width: 1200px;
49 height: 70px!important;
50 padding-top: 20px;
51 }
52
53 div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */
54 font-size: 13px;
55 }
56
57 div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */
58 font-size: 13px;
59 }
60
61 div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */
62 font-size: 13px;
63 }
64 .top_logo_content {
65 height: 40px;
66 width: 100%;
67 margin: 0 auto;
68 }
69 div.top-logo .top_logo_search {
70 float: left;
71 width: 350px;
72 position: relative;
73 margin-left: 400px;
74 }
75 div.top-logo .top_logo_search input {
76 border-radius: 50px;
77 }
78 div.top-logo .login {
79 float: right;
80 margin-top: 8px;
81 }
82 div.top-logo .login a:hover {
83 color: #f46143;
84 }
85 div.top-logo .top_logo_search i {
86 position: absolute;
87 right: 10px;
88 top: 11px;
89 cursor: pointer;
90 }
91 .top-logo h1 {
92 display: inline-block;
93 float: left;
94 }
95 .top-logo ul li {
96 display: inline-block;
97 padding: 0 8px;
98 }
99
100 .top-logo ul li:first-child {
101 border-right: 1px solid grey;
102 }
103
104 div.navigation {
105 text-align: center;
106 }
107 .navigation .layui-nav-item {
108 width: 130px;
109 position: relative;
110 margin: 0 22px;
111 }
112 .layui-bg-blue {
113 background-color: #006CFF!important;
114 }
115
116 .layui-nav-item:not(:first-child)::before {
117 content: '';
118 position: absolute;
119 height: 22px;
120 border-left: 1px solid #ccc;
121 top: 21px;
122 left: -22px;
123 }
124 .layui-nav-item a{
125 font-size: 16px;
126 }
127
128 /* -----------------底部start----------------------------- */
129 div.footer {
130 background-color: #233042;
131 }
132 div.footer .system_service {
133 width: 100%;
134 border-bottom: 1px solid #4A4A4A;
135 }
136 div.footer .system_service ul {
137 padding: 40px 0;
138 width: 1400px;
139 margin: 0 auto;
140 font-size: 0;
141 }
142 div.footer .system_service ul li {
143 width: 20%;
144 display: inline-block;
145 text-align: center;
146 height: 18px;
147 box-sizing: border-box;
148 }
149 div.footer .system_service ul li:not(:last-child) {
150 border-right: 1px solid #6D7278;
151 }
152 div.footer .system_service ul li a{
153 font-size: 16px;
154 font-weight: 400;
155 color: #DEDEDE;
156 }
157 div.footer .system_service ul li a:hover {
158 color: #f46143;
159 }
160 .footer .subject {
161 width: 1200px;
162 margin: 0 auto;
163 padding: 40px 0;
164 overflow: hidden;
165 }
166 .footer .subject .footer_logo {
167 float: left;
168 }
169 .footer .subject .footer_logo a{
170 display: block;
171 width: 64px;
172 height: 74px;
173 padding: 10px;
174 }
175 .footer .subject .footer_logo a img {
176 width: 100%;
177 height: 100%;
178 }
179 .footer .subject ul, ol {
180 float: left;
181 color: #CBCBCB;
182 text-align: left;
183 }
184 .footer .subject ul {
185 width: 73%;
186 box-sizing: border-box;
187 padding-left: 40px;
188 margin-top: 10px;
189 }
190 .footer .subject ul li {
191 width: 30%;
192 display: inline-block;
193 text-align: left;
194 margin-bottom: 30px;
195 }
196 .footer .subject ol li {
197 display: inline-block;
198 text-align: center;
199 }
200 .footer .subject ol li:last-child {
201 margin-left: 60px;
202 }
203 .footer .subject ol li img {
204 width: 80px;
205 height: 80px;
206 }
207 .footer .subject ol li p {
208 font-size: 12px;
209 color: #CBCBCB;
210 margin-top: 5px;
211 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -68,6 +68,9 @@ div.top-logo .login { ...@@ -68,6 +68,9 @@ div.top-logo .login {
68 float: right; 68 float: right;
69 margin-top: 8px; 69 margin-top: 8px;
70 } 70 }
71 div.top-logo .login a:hover {
72 color: #f46143;
73 }
71 div.top-logo .top_logo_search i { 74 div.top-logo .top_logo_search i {
72 position: absolute; 75 position: absolute;
73 right: 10px; 76 right: 10px;
...@@ -251,7 +254,7 @@ div.banner ul li a { ...@@ -251,7 +254,7 @@ div.banner ul li a {
251 width: 380px; 254 width: 380px;
252 } 255 }
253 .laws_regulations .laws_list li a:hover { 256 .laws_regulations .laws_list li a:hover {
254 color: #f46143;; 257 color: #f46143;
255 } 258 }
256 .laws_regulations .laws_list li:not(:last-child) { 259 .laws_regulations .laws_list li:not(:last-child) {
257 border-bottom: 1px dotted #DEDEDE; 260 border-bottom: 1px dotted #DEDEDE;
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 <ul class="login"> 29 <ul class="login">
30 <!-- <li>登录</li> --> 30 <!-- <li>登录</li> -->
31 <li> 31 <li>
32 <a href="">个人中心</a> 32 <a href="./staticViews/grzx/index.html">个人中心</a>
33 </li> 33 </li>
34 <li>注册</li> 34 <li>注册</li>
35 </ul> 35 </ul>
......
...@@ -193,7 +193,6 @@ div.navigation { ...@@ -193,7 +193,6 @@ div.navigation {
193 float: right; 193 float: right;
194 margin-top: 15px; 194 margin-top: 15px;
195 } 195 }
196 /* ---------------------------------------------------- */
197 /* -----------------底部start----------------------------- */ 196 /* -----------------底部start----------------------------- */
198 div.footer { 197 div.footer {
199 background-color: #233042; 198 background-color: #233042;
......
1 /* ------------------------------end--------------------------------------- */
2 .main {
3 overflow-x: hidden;
4 }
5 .personal_center {
6 }
7 .personal_information {
8 width: 100%;
9 height: 100px;
10 padding: 20px;
11 box-sizing: border-box;
12 background-color: #7ed3df;
13 }
14 .personal_information img {
15 width: 60px;
16 height: 60px;
17 float: left;
18 }
19 .personal_information ul {
20 float: left;
21 width: 80%;
22 margin-left: 30px;
23 margin-top: 5px;
24 }
25 .personal_information ul li {
26 width: 30%;
27 display: inline-block;
28 margin-bottom: 10px;
29 cursor: pointer;
30 }
31 .personal_information ul li p {
32 display: inline-block;
33 }
34 /* --------------------业务模块----------------------- */
35 .business_module {
36 margin-top: 10px;
37 overflow: hidden;
38 margin-left: -10px;
39 margin-right: -10px;
40 }
41 .business_module li{
42 width: 20%;
43 height: 160px;
44 text-align: center;
45 line-height: 160px;
46 font-size: 26px;
47 float: left;
48 margin-bottom: 20px;
49 box-sizing: border-box;
50 padding: 0 10px;
51 }
52 .business_module li a {
53 padding-right: 20px;
54 display: block;
55 width: 100%;
56 height: 100%;
57 border: 1px solid #E6E6E6;
58 box-sizing: border-box;
59 }
60 .business_module li:nth-child(5n+5) a{
61 padding-right: 0;
62 }
63 .business_module li a:hover {
64 color: #f46143;
65 }
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <title>个人中心</title>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp"/>
12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico'/>
14 <meta name="description" content=""/>
15 <meta name="keywords" content=""/>
16 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css"/>
17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css"/>
18 <link rel="stylesheet" type="text/css" href="./css/index.css">
19 </head>
20
21 <body>
22 <div class="main">
23 <div class="subject top-logo">
24 <div class="top_logo_content">
25 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台"/></a></h1>
26 <div class="top_logo_search">
27 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
28 autocomplete="off" class="layui-input">
29 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
30 </div>
31 <ul class="login">
32 <li>登录</li>
33 <li>注册</li>
34 </ul>
35 </div>
36 </div>
37 <div class="navigation">
38 <ul class="layui-nav layui-bg-blue" lay-filter="">
39 <li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
40 <li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
41 <li class="layui-nav-item"><a href="">业务办理</a></li>
42 <li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
43 <li class="layui-nav-item">
44 <a href="javascript:;">查验中心</a>
45 <dl class="layui-nav-child">
46 <!-- 二级菜单 -->
47 <dd><a href="">移动模块</a></dd>
48 <dd><a href="">后台模版</a></dd>
49 <dd><a href="">电商平台</a></dd>
50 </dl>
51 </li>
52 <li class="layui-nav-item"><a href="">在线缴费</a></li>
53 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
54 </ul>
55 </div>
56 <div class="navigation_crumbs">
57 <div class="contentBox">
58 <span class="layui-breadcrumb">
59 <a href="../../staticIndex.html">首页</a>
60 <a><cite>个人中心</cite></a>
61 </span>
62 </div>
63 </div>
64 <!-- -----------------------------------个人中心模块---------------------------------------------- -->
65 <div class="personal_center contentBox">
66 <div class="personal_information">
67 <img src="../../staticImages/logo-realestate.png" alt="个人中心">
68 <ul>
69 <li>
70 <span>姓名：</span>
71 <p>任超</p>
72 </li>
73 <li>
74 <span>登录时间：</span>
75 <p>2020-120-2</p>
76 </li>
77 <li>
78 <span>联系方式：</span>
79 <p>1852555224</p>
80 </li>
81 <li>
82 第25次次登录此平台
83 </li>
84 <li>
85 <span>身份证号码：</span>
86 <p>61012419930545464</p>
87 </li>
88 </ul>
89 </div>
90 </div>
91 <!-- ---------------------------业务模块------------------------------- -->
92 <div class="contentBox">
93 <ul class="business_module">
94 <li>
95 <a href="">
96 我的业务
97 </a>
98 </li>
99 <li>
100 <a href="">
101 我的预约
102 </a>
103 </li>
104 <li>
105 <a href="">
106 我的不动产
107 </a>
108 </li>
109 <li>
110 <a href="">
111 业务查询
112 </a>
113 </li>
114 <li>
115 <a href="">
116 我的支付
117 </a>
118 </li>
119 <li>
120 <a href="">
121 档案查询
122 </a>
123 </li>
124 </ul>
125 </div>
126 <div class="footer">
127 <div class="system_service">
128 <ul class="">
129 <li>
130 <a href="">
131 <span>公示公告</span>
132 </a>
133 </li>
134 <li>
135 <a href="">
136 <span>法律法规</span>
137 </a>
138 </li>
139 <li>
140 <a href="">
141 <span>相应政策</span>
142 </a>
143 </li>
144 <li>
145 <a href="">
146 <span>下载服务</span>
147 </a>
148 </li>
149 <li>
150 <a href="">
151 <span>关于我们</span>
152 </a>
153 </li>
154 </ul>
155 </div>
156 <div class="subject">
157 <div class="footer_logo">
158 <a href="">
159 <img src="./../../staticImages/jiguan.png">
160 </a>
161 </div>
162 <ul>
163 <li>
164 西安市自然资源和规划局
165 </li>
166 <li>
167 电话：028-456465
168 </li>
169 <li>
170 地址：西安市丰城8路
171 </li>
172 <li>
173 网站标识吗：87987987
174 </li>
175 <li>
176 备案：陕IPC456465465
177 </li>
178 <li>
179 陕公网备案：456465465
180 </li>
181 </ul>
182 <ol>
183 <li>
184 <img src="./../../staticImages/code.png">
185 <p>扫描关注公众号</p>
186 </li>
187 <li>
188 <img src="./../../staticImages/code.png">
189 <p>扫描关注公众号</p>
190 </li>
191 </ol>
192 </div>
193 </div>
194 </div>
195 </body>
196
197 </html>
198 <!--[if (gte IE 9)|!(IE)]><!-->
199 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
200 <!--<![endif]-->
201 <script type="text/javascript" src="../../staticLib/handlebars/handlebars.min.js"></script>
202 <script type="text/javascript" src="../../staticLib/iscroll/iscroll-probe.js"></script>
203 <script type="text/javascript" src="../../staticLib/amazeui/amazeui.min.js"></script>
204 <script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
205 <script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
206 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
207 <script type="text/javascript">
208 layui.use('element', function () {
209 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
210 //监听导航点击
211 element.on('nav(demo)', function (elem) {
212 //console.log(elem)
213 layer.msg(elem.text());
214 });
215 });
216 </script>
...\ No newline at end of file ...\ No newline at end of file
1 .perinfo {
2
3 }
4 .perinfo_left
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <title>个人中心</title>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8 <meta name="format-detection" content="telephone=no">
9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp"/>
12 <link rel="alternate icon" type="image/png" href="../../staticImages/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico'/>
14 <meta name="description" content=""/>
15 <meta name="keywords" content=""/>
16 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css"/>
17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css"/>
18 <link rel="stylesheet" type="text/css" href="./css/index.css">
19 </head>
20
21 <body>
22 <div class="main">
23 <div class="subject top-logo">
24 <div class="top_logo_content">
25 <h1><a href="index.html"><img src="./../../staticImages/logo.jpg" alt="西安市不动产登记平台"/></a></h1>
26 <div class="top_logo_search">
27 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
28 autocomplete="off" class="layui-input">
29 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
30 </div>
31 <ul class="login">
32 <li>登录</li>
33 <li>注册</li>
34 </ul>
35 </div>
36 </div>
37 <div class="navigation">
38 <ul class="layui-nav layui-bg-blue" lay-filter="">
39 <li class="layui-nav-item"><a href="./../../staticIndex.html">首页</a></li>
40 <li class="layui-nav-item"><a href="./../../staticViews/xwdt/index.html">新闻动态</a></li>
41 <li class="layui-nav-item"><a href="">业务办理</a></li>
42 <li class="layui-nav-item"><a href="./../../staticViews/bszn/index.html">办事指南</a></li>
43 <li class="layui-nav-item">
44 <a href="javascript:;">查验中心</a>
45 <dl class="layui-nav-child">
46 <!-- 二级菜单 -->
47 <dd><a href="">移动模块</a></dd>
48 <dd><a href="">后台模版</a></dd>
49 <dd><a href="">电商平台</a></dd>
50 </dl>
51 </li>
52 <li class="layui-nav-item"><a href="">在线缴费</a></li>
53 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
54 </ul>
55 </div>
56 <div class="navigation_crumbs">
57 <div class="contentBox">
58 <span class="layui-breadcrumb">
59 <a href="../../staticIndex.html">首页</a>
60 <a><cite>个人中心</cite></a>
61 </span>
62 </div>
63 </div>
64 <!-- -----------------个人信息------------------------ -->
65 <div class="perinfo contentBox">
66 <div class="perinfo_left">
67 <img src="../../staticImages/logo-realestate.png" alt="">
68 <ul>
69 <li>
70 <span>上午好：</span>
71 <p>任超</p>
72 </li>
73 <li>
74 <span>身份证号：</span>
75 <p>61012216464646</p>
76 </li>
77 </ul>
78 </div>
79 <a href="">在线预约</a>
80 <div class="time">
81 2088-20-88
82 </div>
83 </div>
84 <div class="footer">
85 <div class="system_service">
86 <ul class="">
87 <li>
88 <a href="">
89 <span>公示公告</span>
90 </a>
91 </li>
92 <li>
93 <a href="">
94 <span>法律法规</span>
95 </a>
96 </li>
97 <li>
98 <a href="">
99 <span>相应政策</span>
100 </a>
101 </li>
102 <li>
103 <a href="">
104 <span>下载服务</span>
105 </a>
106 </li>
107 <li>
108 <a href="">
109 <span>关于我们</span>
110 </a>
111 </li>
112 </ul>
113 </div>
114 <div class="subject">
115 <div class="footer_logo">
116 <a href="">
117 <img src="./../../staticImages/jiguan.png">
118 </a>
119 </div>
120 <ul>
121 <li>
122 西安市自然资源和规划局
123 </li>
124 <li>
125 电话：028-456465
126 </li>
127 <li>
128 地址：西安市丰城8路
129 </li>
130 <li>
131 网站标识吗：87987987
132 </li>
133 <li>
134 备案：陕IPC456465465
135 </li>
136 <li>
137 陕公网备案：456465465
138 </li>
139 </ul>
140 <ol>
141 <li>
142 <img src="./../../staticImages/code.png">
143 <p>扫描关注公众号</p>
144 </li>
145 <li>
146 <img src="./../../staticImages/code.png">
147 <p>扫描关注公众号</p>
148 </li>
149 </ol>
150 </div>
151 </div>
152 </div>
153 </body>
154
155 </html>
156 <!--[if (gte IE 9)|!(IE)]><!-->
157 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
158 <!--<![endif]-->
159 <script type="text/javascript" src="../../staticLib/handlebars/handlebars.min.js"></script>
160 <script type="text/javascript" src="../../staticLib/iscroll/iscroll-probe.js"></script>
161 <script type="text/javascript" src="../../staticLib/amazeui/amazeui.min.js"></script>
162 <script type="text/javascript" src="../../staticLib/raty/jquery.raty.js"></script>
163 <script type="text/javascript" src="../../staticJs/main.min.js?t=1"></script>
164 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
165 <script type="text/javascript">
166 layui.use('element', function () {
167 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
168 //监听导航点击
169 element.on('nav(demo)', function (elem) {
170 //console.log(elem)
171 layer.msg(elem.text());
172 });
173 });
174 </script>
...\ No newline at end of file ...\ No newline at end of file