refactor:首页头部

任超
Showing 11 changed files with 171 additions and 102 deletions
index.html
staticCss/common.css
staticCss/gsgg.css
staticCss/header.css
staticImages/logo.png
staticImages/remen.png
staticImages/search.png
staticImages/xiaoxi.png
staticJs/login.js
staticJs/pageHome.js
staticViews/gsgg.html
--- a/index.html
View file @66121da
+++ b/index.html
View file @66121da
 <!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>
    <meta charset='UTF-8'>
    <title>网上“一窗办事”登记系统</title>
@@ -16,55 +17,79 @@
    <link type="text/css" rel="stylesheet" href="/staticCss/header.css" />
    <link type="text/css" rel="stylesheet" href="/staticCss/pageHome.css" />
 </head>
 <body>
    <div class='home-sticky'>
        <div class='top-logo'>
            <div class='top_logo_content'>
-                <h1><a href='/index.html'><img src='/staticImages/logo.png' alt='西安市不动产登记平台' /></a></h1>
+                <div class="head-time">今天是2021年1月19日 星期二</div>
-                <div class='top_logo_search'>
-                    <input type='text' name='title' required lay-verify='required' placeholder='请输入关键字搜索'
-                        autocomplete='off' class='layui-input'>
-                    <img class='search_img' src='/staticImages/search.png'>
-                </div>
                <ul class='login layui-nav login-con'>
                    <span class='loginButton' id="login">登录</span>
                    <p class='loginButton register' id='register'><a href='/staticViews/register.html'>注册</a></p>
                </ul>
            </div>
        </div>
-        <div class='layui-nav navigation layui-bg-blue'>
+    </div>
-            <ul class="navigation-content">
+    <!-- 头部搜索区域 -->
-                <li id='index' class='layui-nav-item'><a href='/index.html' title='首页'>首页</a></li>
+    <div class="head-search">
-                <li id='news' class='layui-nav-item'><a href='/staticViews/newsList/1.html' title='新闻动态'>新闻动态</a></li>
+        <div class="head-contentBox">
-                <li id='zwgk' class='layui-nav-item'>
+            <img class="logo-img" src="/staticImages/logo.png" alt="不动产">
-                    <a href='javascript:;'>政务公开</a>
+            <div class="content-search">
-                    <dl class='layui-nav-child'>
+                <input type="text" placeholder="请输入关键字搜索" class="layui-input head-search-input">
-                        <dd><a href='/staticViews/policyList/1.html'>相应政策</a></dd>
+                <p class="search-button">
-                        <dd><a href='/staticViews/lawList/1.html'>法律法规</a></dd>
+                    <img src="/staticImages/search.png" />
-                        <dd><a href='/staticViews/noticeList/1.html'>公示公告</a></dd>
+                    一键查询
-                    </dl>
+                </p>
-                </li>
+                <ul class="search-hint">
-                <li id='bszn' class='layui-nav-item'><a href='/staticViews/bszn.html'
+                    <li class="hot-search">
-                        title='办事指南'>办事指南</a></li>
+                        <img src="/staticImages/remen.png" />
-                <li id='wssq' class='layui-nav-item'><a href='/staticViews/wssq.html'
+                        热门搜索
-                        title='网上申请'>网上申请</a></li>
+                    </li>
-                <li class='layui-nav-item'>
+                    <li>
-                    <a href='javascript:;'>查验中心</a>
+                        在线预约
-                    <dl class='layui-nav-child'>
+                    </li>
-                        <!-- 二级菜单 -->
+                    <li>
-                        <dd><a href='/staticViews/convenienceService/fileQuery.html'>档案查询</a></dd>
+                        网上申请
-                        <dd><a href='/staticViews/convenienceService/recordInquiry.html'>合同备案查询</a>
+                    </li>
-                        </dd>
+                    <li>
-                        <dd><a href='/staticViews/convenienceService/certificateVerification.html'>证书核验</a>
+                        办事指南
-                        </dd>
+                    </li>
-                    </dl>
+                    <li>
-                </li>
+                        档案查询
-                <li id='zxjf' class='layui-nav-item'><a href='/staticViews/zxjf.html'>在线缴费</a></li>
+                    </li>
-                <li id='evaluate' class='layui-nav-item'><a
+                </ul>
-                        href='/staticViews/evaluate.html'>好差评</a></li>
+            </div>
-            </ul>
        </div>
    </div>
+    <div class='layui-nav navigation layui-bg-blue'>
+        <ul class="navigation-content">
+            <li id='index' class='layui-nav-item'><a href='/index.html' title='首页'>首页</a></li>
+            <li id='news' class='layui-nav-item'><a href='/staticViews/newsList/1.html' title='新闻动态'>新闻动态</a></li>
+            <li id='zwgk' class='layui-nav-item'>
+                <a href='javascript:;'>政务公开</a>
+                <dl class='layui-nav-child'>
+                    <dd><a href='/staticViews/policyList/1.html'>相应政策</a></dd>
+                    <dd><a href='/staticViews/lawList/1.html'>法律法规</a></dd>
+                    <dd><a href='/staticViews/gsgg.html'>公示公告</a></dd>
+                </dl>
+            </li>
+            <li id='bszn' class='layui-nav-item'><a href='/staticViews/bszn.html' title='办事指南'>办事指南</a></li>
+            <li id='wssq' class='layui-nav-item'><a href='/staticViews/wssq.html' title='网上申请'>网上申请</a></li>
+            <li class='layui-nav-item'>
+                <a href='javascript:;'>查验中心</a>
+                <dl class='layui-nav-child'>
+                    <!-- 二级菜单 -->
+                    <dd><a href='/staticViews/convenienceService/fileQuery.html'>档案查询</a></dd>
+                    <dd><a href='/staticViews/convenienceService/recordInquiry.html'>合同备案查询</a>
+                    </dd>
+                    <dd><a href='/staticViews/convenienceService/certificateVerification.html'>证书核验</a>
+                    </dd>
+                </dl>
+            </li>
+            <li id='zxjf' class='layui-nav-item'><a href='/staticViews/zxjf.html'>在线缴费</a></li>
+            <li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li>
+        </ul>
+    </div>
    <!-- 轮播 -->
    <div class="homeindex">
        <div class="banner">
@@ -457,7 +482,7 @@
                    </a>
                </li>
            </ul>
-        </div>    
+        </div>
        <div class='subject'>
            <div class='footer_logo'>
                <a href='' title='党政机关'>
@@ -504,4 +529,5 @@
 <script type="text/javascript" src="/staticJs/common.js"></script>
 <script type="text/javascript" src="/staticJs/header.js"></script>
 <script type="text/javascript" src="./staticJs/pageHome.js"></script>
 </html>
\ No newline at end of file
--- a/staticCss/common.css
View file @66121da
+++ b/staticCss/common.css
View file @66121da
@@ -206,7 +206,7 @@ div.footer .system_service ul li a:hover {
    cursor: pointer;
 }
 .layui-nav * {
-    font-size: 16px;
+    font-size: 14px;
 }
 .not-select{
    -moz-user-select:none; /*火狐*/
--- a/staticCss/gsgg.css
View file @66121da
+++ b/staticCss/gsgg.css
View file @66121da
@@ -6,12 +6,7 @@
  line-height: 25px;
  background: #FAFAFA;
  border: 1px solid #E6E6E6;
-  /* box-sizing: border-box;   */
 }
-.navigation_crumbs .layui-breadcrumb a:hover {
-  color: #f46143!important;
-}
 .contentBox {
  width: 1200px;
  margin: 0 auto;
--- a/staticCss/header.css
View file @66121da
+++ b/staticCss/header.css
View file @66121da
@@ -38,51 +38,40 @@ div.subject {
    min-width: 1200px;
 }
 div.top-logo {
-    width: 1178px;
+    width: 100%;
-    height: 70px!important;
+    height: 39px;
-    padding-top: 20px;
+    line-height: 39px;
    margin: 0 auto;
-    background-color: #ffffff;
+    background: #F7F9FB;
+    border: 1px solid #E2EAF1;
    white-space: nowrap;
 }
-div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */
+::-webkit-input-placeholder {
    font-size: 14px;
    color: #9B9B9B;
  }
-  div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */
+::-moz-placeholder {
    font-size: 14px;
    color: #9B9B9B;
  }
-  div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */
+:-ms-input-placeholder {
    font-size: 14px;
    color: #9B9B9B;
  }
 .top_logo_content {
-    height: 40px;
+    width: 1200px;
-    width: 100%;
+    height: 39px;
+    line-height: 39px;
    margin: 0 auto;
 }
-div.top-logo .top_logo_search {
+.top_logo_content .head-time {
    float: left;
-    width: 350px;
+    color: #7A7A7A;
-    position: relative;
+    font-size: 14px;
-    margin-left: 290px;
+    line-height: 39px;
-}
-div.top-logo .top_logo_search input {
-    border-radius: 50px;
-    border: 1.5px solid #CBCBCB;
-    padding-left: 15px;
-    margin-top: 6px;
-}
-.search_img {
-    width: 13px;
-    height: 13px;
-    position: absolute;
-    top: 17px;
-    right: 19px;
 }
 .login li {
    color: #6D7278;
@@ -116,9 +105,11 @@ div.top-logo .top_logo_search i {
 }
 .loginButton {
    display: inline-block;
-    color: #4a4a4a;
+    color:#7A7A7A;
    cursor: pointer;
-    margin-top: -6px;
+}
+.loginButton  a {
+    color: #7A7A7A;
 }
 #cancellation {
    cursor: pointer;
@@ -128,10 +119,10 @@ div.top-logo .top_logo_search i {
    height: 59px;
 }
 .navigation .layui-nav-item {
-    width: 147px!important;
+    width: 149px!important;
    position: relative;
 }
-.navigation .layui-nav-item a {
+/* .navigation .layui-nav-item a {
    border-right: 1px solid rgba(255,255,255, 0.1);
    border-left: 1px solid rgba(255,255,255, 0.1);
    margin-left: -1px;
@@ -141,7 +132,7 @@ div.top-logo .top_logo_search i {
 }
 .navigation .layui-nav-item:nth-child(8) a{
    border-right: 1px solid rgba(255,255,255, 0.2);
-}
+} */
 .navigation-content {
    width: 1200px;
    margin: 0 auto;
@@ -149,7 +140,7 @@ div.top-logo .top_logo_search i {
    font-size: 0;
 }
 .layui-bg-blue {
-    background-color: #006CFF!important;
+    background-color: #2F83F7!important;
 }
 .layui-nav-item a{
    font-size: 18px;
@@ -202,26 +193,32 @@ div.top-logo .top_logo_search i {
    left: -7px;
    height: 10px;
    border-left: 1px solid #b1afaf;
-    top: 6px;
+    top: 14px;
 }
  .login-con {
-      float: right;
+    float: right;
-      background-color: #fff!important;
+    background: #F7F9FB!important;
-      position: relative;
+    position: relative;
-      top: 17px;
+    font-size: 14px;
-      padding-right: 0!important;
+    color: #7A7A7A;
+    padding-right: 0!important;
  }
  .userImage {
    position: relative;
    left: -3px;
    top: -3px;
  }
+  .person-img {
+    position: relative;
+    top: 3px;
+  }
  .loginSelect {
      line-height: 30px!important;
-      margin-top: -11px;
+      margin-top: -5px;
  }
  .loginSelect p {
      display: inline-block;
+      line-height: 42px;
  }
  .userInfo {
      top: 30px;
@@ -240,7 +237,6 @@ div.top-logo .top_logo_search i {
  .personalCenter {
      display: inline-block;
      position: relative;
-      top: -5px;
  }
  .personalCenter a {
      color: #006CFF;
@@ -289,6 +285,7 @@ div.top-logo .top_logo_search i {
    position: relative;
    height: auto;
    float: left;
+    top: 15px;
 }
 .sysNewsItem {
    position: relative;
@@ -301,16 +298,12 @@ div.top-logo .top_logo_search i {
 .sysNewsItem .sysNewsNum {
    position: absolute;
    display: block;
-    color: #fff;
    background-color: #ff0000;
-    width: 14px;
+    width: 6px;
-    height: 14px;
+    height: 6px;
-    border-radius: 50%;
+    border-radius: 6px;
-    line-height: 14px;
+    right: 0;
-    right: -3px;
+    top: -4px;
-    top: -5px;
-    font-size: 12px;
-    text-align: center;
 }
 .sysNews img {
    width: 17px;
@@ -391,4 +384,59 @@ div.top-logo .top_logo_search i {
 }
 .read {
    color: #006CFF!important;
+}
+/* 头部搜索区域 */
+.head-search {
+    padding: 40px 0;
+}
+.head-contentBox {
+    width: 1200px;
+    margin: 0 auto;
+}
+.head-search .logo-img {
+    width: 527px;
+    height: 82px;
+    display: inline-block;
+}
+.head-search .content-search {
+    float: right;
+}
+.head-search .head-search-input {
+    width: 425px;
+    display: inline-block;
+    height: 42px;
+}
+.head-search .search-button {
+    width: 116px;
+    height: 42px;
+    background: #FA6400;
+    border-radius: 2px;
+    color: #ffffff;
+    display: inline-block;
+    font-size: 14px;
+    text-align: center;
+    box-sizing: border-box;
+    line-height: 42px;
+    margin-left: 7px;
+}
+.head-search .search-button img{
+    width: 13px;
+}
+.search-hint {
+    margin-top: 10px;
+}
+.search-hint .hot-search {
+    color: #7A7A7A;
+}
+.search-hint .hot-search img{
+    width: 9px;
+    height: 12px;
+    position: relative;
+    top: 2px;
+}
+.search-hint li {
+    display: inline-block;
+    color: #9B9B9B;
+    font-size: 12px;
+    margin-right: 5px;
 }
\ No newline at end of file
--- a/staticImages/logo.png
View file @66121da
+++ b/staticImages/logo.png
View file @66121da
--- a/staticImages/remen.png 0 → 100644
View file @66121da
+++ b/staticImages/remen.png 0 → 100644
View file @66121da
--- a/staticImages/search.png
View file @66121da
+++ b/staticImages/search.png
View file @66121da
--- a/staticImages/xiaoxi.png
View file @66121da
+++ b/staticImages/xiaoxi.png
View file @66121da
--- a/staticJs/login.js
View file @66121da
+++ b/staticJs/login.js
View file @66121da
@@ -104,7 +104,7 @@ function appendData() {
    '<li class="layui-nav-item sysNews">' +
    '<p class="sysNewsItem">' +
    '<img class="userImage" src="/staticImages/xiaoxi.png">' +
-    '<span class="sysNewsNum">12</span>' +
+    '<span class="sysNewsNum"></span>' +
    '</p>' +
    '<dl class="layui-nav-child sysNewsList">' +
    '<div class="sysNewsTitle">最新消息</div>' +
@@ -115,7 +115,7 @@ function appendData() {
    '</div>'+
    '</dl>' +
    '</li>' +
-    '<img class="userImage" src="/staticImages/user.png">' +
+    '<img class="userImage person-img" src="/staticImages/user.png">' +
    '<p class="personalCenter"><a href="/staticViews/grzx.html">个人中心</a></p>' +
    '<li class="layui-nav-item loginSelect">' +
    '<p class="loginInfo">登录</p>' +
--- a/staticJs/pageHome.js
View file @66121da
+++ b/staticJs/pageHome.js
View file @66121da
@@ -56,9 +56,9 @@ $(function () {
    initData();
    recentlyDay = getDate();
    NewsData();
-    // NoticeData();
+    NoticeData();
-    // LawsData();
+    LawsData();
-    // policiesData();
+    policiesData();
 });
 function initData() {
    $('#appointment_inquiry').click(function () {
--- a/staticViews/gsgg.html
View file @66121da
+++ b/staticViews/gsgg.html
View file @66121da
@@ -21,11 +21,11 @@
    </div>
  </div>
  <div class="mainbody">
-    <div class="layui-tab layui-tab-brief" lay-filter="tabNav">
+    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
-        <li class="layui-this" lay-id="0">全部</li>
+        <li class="layui-this"><a href="">全部</a></li>
-        <li lay-id="1">公示</li>
+        <li><a href="">公示</a></li>
-        <li lay-id="2">公告</li>
+        <li><a href="">公告</a></li>
      </ul>
    </div>
    <!-- 列表区域 -->