Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
66121dac by 任超
Options

refactor:首页头部

1 parent 9c76df91
Inline Side-by-side
Showing 11 changed files with 144 additions and 75 deletions
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 <meta charset='UTF-8'> 6 <meta charset='UTF-8'>
6 <title>网上“一窗办事”登记系统</title> 7 <title>网上“一窗办事”登记系统</title>
...@@ -16,22 +17,50 @@ ...@@ -16,22 +17,50 @@
16 <link type="text/css" rel="stylesheet" href="/staticCss/header.css" /> 17 <link type="text/css" rel="stylesheet" href="/staticCss/header.css" />
17 <link type="text/css" rel="stylesheet" href="/staticCss/pageHome.css" /> 18 <link type="text/css" rel="stylesheet" href="/staticCss/pageHome.css" />
18 </head> 19 </head>
20
19 <body> 21 <body>
20 <div class='home-sticky'> 22 <div class='home-sticky'>
21 <div class='top-logo'> 23 <div class='top-logo'>
22 <div class='top_logo_content'> 24 <div class='top_logo_content'>
23 <h1><a href='/index.html'><img src='/staticImages/logo.png' alt='西安市不动产登记平台' /></a></h1> 25 <div class="head-time">今天是2021年1月19日 星期二</div>
24 <div class='top_logo_search'>
25 <input type='text' name='title' required lay-verify='required' placeholder='请输入关键字搜索'
26 autocomplete='off' class='layui-input'>
27 <img class='search_img' src='/staticImages/search.png'>
28 </div>
29 <ul class='login layui-nav login-con'> 26 <ul class='login layui-nav login-con'>
30 <span class='loginButton' id="login">登录</span> 27 <span class='loginButton' id="login">登录</span>
31 <p class='loginButton register' id='register'><a href='/staticViews/register.html'>注册</a></p> 28 <p class='loginButton register' id='register'><a href='/staticViews/register.html'>注册</a></p>
32 </ul> 29 </ul>
33 </div> 30 </div>
34 </div> 31 </div>
32 </div>
33 <!-- 头部搜索区域 -->
34 <div class="head-search">
35 <div class="head-contentBox">
36 <img class="logo-img" src="/staticImages/logo.png" alt="不动产">
37 <div class="content-search">
38 <input type="text" placeholder="请输入关键字搜索" class="layui-input head-search-input">
39 <p class="search-button">
40 <img src="/staticImages/search.png" />
41 一键查询
42 </p>
43 <ul class="search-hint">
44 <li class="hot-search">
45 <img src="/staticImages/remen.png" />
46 热门搜索
47 </li>
48 <li>
49 在线预约
50 </li>
51 <li>
52 网上申请
53 </li>
54 <li>
55 办事指南
56 </li>
57 <li>
58 档案查询
59 </li>
60 </ul>
61 </div>
62 </div>
63 </div>
35 <div class='layui-nav navigation layui-bg-blue'> 64 <div class='layui-nav navigation layui-bg-blue'>
36 <ul class="navigation-content"> 65 <ul class="navigation-content">
37 <li id='index' class='layui-nav-item'><a href='/index.html' title='首页'>首页</a></li> 66 <li id='index' class='layui-nav-item'><a href='/index.html' title='首页'>首页</a></li>
...@@ -41,13 +70,11 @@ ...@@ -41,13 +70,11 @@
41 <dl class='layui-nav-child'> 70 <dl class='layui-nav-child'>
42 <dd><a href='/staticViews/policyList/1.html'>相应政策</a></dd> 71 <dd><a href='/staticViews/policyList/1.html'>相应政策</a></dd>
43 <dd><a href='/staticViews/lawList/1.html'>法律法规</a></dd> 72 <dd><a href='/staticViews/lawList/1.html'>法律法规</a></dd>
44 <dd><a href='/staticViews/noticeList/1.html'>公示公告</a></dd> 73 <dd><a href='/staticViews/gsgg.html'>公示公告</a></dd>
45 </dl> 74 </dl>
46 </li> 75 </li>
47 <li id='bszn' class='layui-nav-item'><a href='/staticViews/bszn.html' 76 <li id='bszn' class='layui-nav-item'><a href='/staticViews/bszn.html' title='办事指南'>办事指南</a></li>
48 title='办事指南'>办事指南</a></li> 77 <li id='wssq' class='layui-nav-item'><a href='/staticViews/wssq.html' title='网上申请'>网上申请</a></li>
49 <li id='wssq' class='layui-nav-item'><a href='/staticViews/wssq.html'
50 title='网上申请'>网上申请</a></li>
51 <li class='layui-nav-item'> 78 <li class='layui-nav-item'>
52 <a href='javascript:;'>查验中心</a> 79 <a href='javascript:;'>查验中心</a>
53 <dl class='layui-nav-child'> 80 <dl class='layui-nav-child'>
...@@ -60,11 +87,9 @@ ...@@ -60,11 +87,9 @@
60 </dl> 87 </dl>
61 </li> 88 </li>
62 <li id='zxjf' class='layui-nav-item'><a href='/staticViews/zxjf.html'>在线缴费</a></li> 89 <li id='zxjf' class='layui-nav-item'><a href='/staticViews/zxjf.html'>在线缴费</a></li>
63 <li id='evaluate' class='layui-nav-item'><a 90 <li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li>
64 href='/staticViews/evaluate.html'>好差评</a></li>
65 </ul> 91 </ul>
66 </div> 92 </div>
67 </div>
68 <!-- 轮播 --> 93 <!-- 轮播 -->
69 <div class="homeindex"> 94 <div class="homeindex">
70 <div class="banner"> 95 <div class="banner">
...@@ -504,4 +529,5 @@ ...@@ -504,4 +529,5 @@
504 <script type="text/javascript" src="/staticJs/common.js"></script> 529 <script type="text/javascript" src="/staticJs/common.js"></script>
505 <script type="text/javascript" src="/staticJs/header.js"></script> 530 <script type="text/javascript" src="/staticJs/header.js"></script>
506 <script type="text/javascript" src="./staticJs/pageHome.js"></script> 531 <script type="text/javascript" src="./staticJs/pageHome.js"></script>
532
507 </html> 533 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -206,7 +206,7 @@ div.footer .system_service ul li a:hover { ...@@ -206,7 +206,7 @@ div.footer .system_service ul li a:hover {
206 cursor: pointer; 206 cursor: pointer;
207 } 207 }
208 .layui-nav * { 208 .layui-nav * {
209 font-size: 16px; 209 font-size: 14px;
210 } 210 }
211 .not-select{ 211 .not-select{
212 -moz-user-select:none; /*火狐*/ 212 -moz-user-select:none; /*火狐*/
......
...@@ -6,12 +6,7 @@ ...@@ -6,12 +6,7 @@
6 line-height: 25px; 6 line-height: 25px;
7 background: #FAFAFA; 7 background: #FAFAFA;
8 border: 1px solid #E6E6E6; 8 border: 1px solid #E6E6E6;
9 /* box-sizing: border-box; */
10 } 9 }
11 .navigation_crumbs .layui-breadcrumb a:hover {
12 color: #f46143!important;
13 }
14
15 .contentBox { 10 .contentBox {
16 width: 1200px; 11 width: 1200px;
17 margin: 0 auto; 12 margin: 0 auto;
......
...@@ -38,51 +38,40 @@ div.subject { ...@@ -38,51 +38,40 @@ div.subject {
38 min-width: 1200px; 38 min-width: 1200px;
39 } 39 }
40 div.top-logo { 40 div.top-logo {
41 width: 1178px; 41 width: 100%;
42 height: 70px!important; 42 height: 39px;
43 padding-top: 20px; 43 line-height: 39px;
44 margin: 0 auto; 44 margin: 0 auto;
45 background-color: #ffffff; 45 background: #F7F9FB;
46 border: 1px solid #E2EAF1;
46 white-space: nowrap; 47 white-space: nowrap;
47 } 48 }
48 49
49 div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */ 50 ::-webkit-input-placeholder {
50 font-size: 14px; 51 font-size: 14px;
51 color: #9B9B9B; 52 color: #9B9B9B;
52 } 53 }
53 54
54 div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */ 55 ::-moz-placeholder {
55 font-size: 14px; 56 font-size: 14px;
56 color: #9B9B9B; 57 color: #9B9B9B;
57 } 58 }
58 59
59 div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */ 60 :-ms-input-placeholder {
60 font-size: 14px; 61 font-size: 14px;
61 color: #9B9B9B; 62 color: #9B9B9B;
62 } 63 }
63 .top_logo_content { 64 .top_logo_content {
64 height: 40px; 65 width: 1200px;
65 width: 100%; 66 height: 39px;
67 line-height: 39px;
66 margin: 0 auto; 68 margin: 0 auto;
67 } 69 }
68 div.top-logo .top_logo_search { 70 .top_logo_content .head-time {
69 float: left; 71 float: left;
70 width: 350px; 72 color: #7A7A7A;
71 position: relative; 73 font-size: 14px;
72 margin-left: 290px; 74 line-height: 39px;
73 }
74 div.top-logo .top_logo_search input {
75 border-radius: 50px;
76 border: 1.5px solid #CBCBCB;
77 padding-left: 15px;
78 margin-top: 6px;
79 }
80 .search_img {
81 width: 13px;
82 height: 13px;
83 position: absolute;
84 top: 17px;
85 right: 19px;
86 } 75 }
87 .login li { 76 .login li {
88 color: #6D7278; 77 color: #6D7278;
...@@ -116,9 +105,11 @@ div.top-logo .top_logo_search i { ...@@ -116,9 +105,11 @@ div.top-logo .top_logo_search i {
116 } 105 }
117 .loginButton { 106 .loginButton {
118 display: inline-block; 107 display: inline-block;
119 color: #4a4a4a; 108 color:#7A7A7A;
120 cursor: pointer; 109 cursor: pointer;
121 margin-top: -6px; 110 }
111 .loginButton a {
112 color: #7A7A7A;
122 } 113 }
123 #cancellation { 114 #cancellation {
124 cursor: pointer; 115 cursor: pointer;
...@@ -128,10 +119,10 @@ div.top-logo .top_logo_search i { ...@@ -128,10 +119,10 @@ div.top-logo .top_logo_search i {
128 height: 59px; 119 height: 59px;
129 } 120 }
130 .navigation .layui-nav-item { 121 .navigation .layui-nav-item {
131 width: 147px!important; 122 width: 149px!important;
132 position: relative; 123 position: relative;
133 } 124 }
134 .navigation .layui-nav-item a { 125 /* .navigation .layui-nav-item a {
135 border-right: 1px solid rgba(255,255,255, 0.1); 126 border-right: 1px solid rgba(255,255,255, 0.1);
136 border-left: 1px solid rgba(255,255,255, 0.1); 127 border-left: 1px solid rgba(255,255,255, 0.1);
137 margin-left: -1px; 128 margin-left: -1px;
...@@ -141,7 +132,7 @@ div.top-logo .top_logo_search i { ...@@ -141,7 +132,7 @@ div.top-logo .top_logo_search i {
141 } 132 }
142 .navigation .layui-nav-item:nth-child(8) a{ 133 .navigation .layui-nav-item:nth-child(8) a{
143 border-right: 1px solid rgba(255,255,255, 0.2); 134 border-right: 1px solid rgba(255,255,255, 0.2);
144 } 135 } */
145 .navigation-content { 136 .navigation-content {
146 width: 1200px; 137 width: 1200px;
147 margin: 0 auto; 138 margin: 0 auto;
...@@ -149,7 +140,7 @@ div.top-logo .top_logo_search i { ...@@ -149,7 +140,7 @@ div.top-logo .top_logo_search i {
149 font-size: 0; 140 font-size: 0;
150 } 141 }
151 .layui-bg-blue { 142 .layui-bg-blue {
152 background-color: #006CFF!important; 143 background-color: #2F83F7!important;
153 } 144 }
154 .layui-nav-item a{ 145 .layui-nav-item a{
155 font-size: 18px; 146 font-size: 18px;
...@@ -202,13 +193,14 @@ div.top-logo .top_logo_search i { ...@@ -202,13 +193,14 @@ div.top-logo .top_logo_search i {
202 left: -7px; 193 left: -7px;
203 height: 10px; 194 height: 10px;
204 border-left: 1px solid #b1afaf; 195 border-left: 1px solid #b1afaf;
205 top: 6px; 196 top: 14px;
206 } 197 }
207 .login-con { 198 .login-con {
208 float: right; 199 float: right;
209 background-color: #fff!important; 200 background: #F7F9FB!important;
210 position: relative; 201 position: relative;
211 top: 17px; 202 font-size: 14px;
203 color: #7A7A7A;
212 padding-right: 0!important; 204 padding-right: 0!important;
213 } 205 }
214 .userImage { 206 .userImage {
...@@ -216,12 +208,17 @@ div.top-logo .top_logo_search i { ...@@ -216,12 +208,17 @@ div.top-logo .top_logo_search i {
216 left: -3px; 208 left: -3px;
217 top: -3px; 209 top: -3px;
218 } 210 }
211 .person-img {
212 position: relative;
213 top: 3px;
214 }
219 .loginSelect { 215 .loginSelect {
220 line-height: 30px!important; 216 line-height: 30px!important;
221 margin-top: -11px; 217 margin-top: -5px;
222 } 218 }
223 .loginSelect p { 219 .loginSelect p {
224 display: inline-block; 220 display: inline-block;
221 line-height: 42px;
225 } 222 }
226 .userInfo { 223 .userInfo {
227 top: 30px; 224 top: 30px;
...@@ -240,7 +237,6 @@ div.top-logo .top_logo_search i { ...@@ -240,7 +237,6 @@ div.top-logo .top_logo_search i {
240 .personalCenter { 237 .personalCenter {
241 display: inline-block; 238 display: inline-block;
242 position: relative; 239 position: relative;
243 top: -5px;
244 } 240 }
245 .personalCenter a { 241 .personalCenter a {
246 color: #006CFF; 242 color: #006CFF;
...@@ -289,6 +285,7 @@ div.top-logo .top_logo_search i { ...@@ -289,6 +285,7 @@ div.top-logo .top_logo_search i {
289 position: relative; 285 position: relative;
290 height: auto; 286 height: auto;
291 float: left; 287 float: left;
288 top: 15px;
292 } 289 }
293 .sysNewsItem { 290 .sysNewsItem {
294 position: relative; 291 position: relative;
...@@ -301,16 +298,12 @@ div.top-logo .top_logo_search i { ...@@ -301,16 +298,12 @@ div.top-logo .top_logo_search i {
301 .sysNewsItem .sysNewsNum { 298 .sysNewsItem .sysNewsNum {
302 position: absolute; 299 position: absolute;
303 display: block; 300 display: block;
304 color: #fff;
305 background-color: #ff0000; 301 background-color: #ff0000;
306 width: 14px; 302 width: 6px;
307 height: 14px; 303 height: 6px;
308 border-radius: 50%; 304 border-radius: 6px;
309 line-height: 14px; 305 right: 0;
310 right: -3px; 306 top: -4px;
311 top: -5px;
312 font-size: 12px;
313 text-align: center;
314 } 307 }
315 .sysNews img { 308 .sysNews img {
316 width: 17px; 309 width: 17px;
...@@ -392,3 +385,58 @@ div.top-logo .top_logo_search i { ...@@ -392,3 +385,58 @@ div.top-logo .top_logo_search i {
392 .read { 385 .read {
393 color: #006CFF!important; 386 color: #006CFF!important;
394 } 387 }
388 /* 头部搜索区域 */
389 .head-search {
390 padding: 40px 0;
391 }
392 .head-contentBox {
393 width: 1200px;
394 margin: 0 auto;
395 }
396 .head-search .logo-img {
397 width: 527px;
398 height: 82px;
399 display: inline-block;
400 }
401 .head-search .content-search {
402 float: right;
403 }
404 .head-search .head-search-input {
405 width: 425px;
406 display: inline-block;
407 height: 42px;
408 }
409 .head-search .search-button {
410 width: 116px;
411 height: 42px;
412 background: #FA6400;
413 border-radius: 2px;
414 color: #ffffff;
415 display: inline-block;
416 font-size: 14px;
417 text-align: center;
418 box-sizing: border-box;
419 line-height: 42px;
420 margin-left: 7px;
421 }
422 .head-search .search-button img{
423 width: 13px;
424 }
425 .search-hint {
426 margin-top: 10px;
427 }
428 .search-hint .hot-search {
429 color: #7A7A7A;
430 }
431 .search-hint .hot-search img{
432 width: 9px;
433 height: 12px;
434 position: relative;
435 top: 2px;
436 }
437 .search-hint li {
438 display: inline-block;
439 color: #9B9B9B;
440 font-size: 12px;
441 margin-right: 5px;
442 }
...\ No newline at end of file ...\ No newline at end of file
......

30.8 KB | W: | H:

48.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.17 KB | W: | H:

828 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.35 KB | W: | H:

735 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -104,7 +104,7 @@ function appendData() { ...@@ -104,7 +104,7 @@ function appendData() {
104 '<li class="layui-nav-item sysNews">' + 104 '<li class="layui-nav-item sysNews">' +
105 '<p class="sysNewsItem">' + 105 '<p class="sysNewsItem">' +
106 '<img class="userImage" src="/staticImages/xiaoxi.png">' + 106 '<img class="userImage" src="/staticImages/xiaoxi.png">' +
107 '<span class="sysNewsNum">12</span>' + 107 '<span class="sysNewsNum"></span>' +
108 '</p>' + 108 '</p>' +
109 '<dl class="layui-nav-child sysNewsList">' + 109 '<dl class="layui-nav-child sysNewsList">' +
110 '<div class="sysNewsTitle">最新消息</div>' + 110 '<div class="sysNewsTitle">最新消息</div>' +
...@@ -115,7 +115,7 @@ function appendData() { ...@@ -115,7 +115,7 @@ function appendData() {
115 '</div>'+ 115 '</div>'+
116 '</dl>' + 116 '</dl>' +
117 '</li>' + 117 '</li>' +
118 '<img class="userImage" src="/staticImages/user.png">' + 118 '<img class="userImage person-img" src="/staticImages/user.png">' +
119 '<p class="personalCenter"><a href="/staticViews/grzx.html">个人中心</a></p>' + 119 '<p class="personalCenter"><a href="/staticViews/grzx.html">个人中心</a></p>' +
120 '<li class="layui-nav-item loginSelect">' + 120 '<li class="layui-nav-item loginSelect">' +
121 '<p class="loginInfo">登录</p>' + 121 '<p class="loginInfo">登录</p>' +
......
...@@ -56,9 +56,9 @@ $(function () { ...@@ -56,9 +56,9 @@ $(function () {
56 initData(); 56 initData();
57 recentlyDay = getDate(); 57 recentlyDay = getDate();
58 NewsData(); 58 NewsData();
59 // NoticeData(); 59 NoticeData();
60 // LawsData(); 60 LawsData();
61 // policiesData(); 61 policiesData();
62 }); 62 });
63 function initData() { 63 function initData() {
64 $('#appointment_inquiry').click(function () { 64 $('#appointment_inquiry').click(function () {
......
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
21 </div> 21 </div>
22 </div> 22 </div>
23 <div class="mainbody"> 23 <div class="mainbody">
24 <div class="layui-tab layui-tab-brief" lay-filter="tabNav"> 24 <div class="layui-tab layui-tab-brief">
25 <ul class="layui-tab-title"> 25 <ul class="layui-tab-title">
26 <li class="layui-this" lay-id="0">全部</li> 26 <li class="layui-this"><a href="">全部</a></li>
27 <li lay-id="1">公示</li> 27 <li><a href="">公示</a></li>
28 <li lay-id="2">公告</li> 28 <li><a href="">公告</a></li>
29 </ul> 29 </ul>
30 </div> 30 </div>
31 <!-- 列表区域 --> 31 <!-- 列表区域 -->
......