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
<!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,22 +17,50 @@
<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='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>
<div class="head-time">今天是2021年1月19日 星期二</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>
<!-- 头部搜索区域 -->
<div class="head-search">
<div class="head-contentBox">
<img class="logo-img" src="/staticImages/logo.png" alt="不动产">
<div class="content-search">
<input type="text" placeholder="请输入关键字搜索" class="layui-input head-search-input">
<p class="search-button">
<img src="/staticImages/search.png" />
一键查询
</p>
<ul class="search-hint">
<li class="hot-search">
<img src="/staticImages/remen.png" />
热门搜索
</li>
<li>
在线预约
</li>
<li>
网上申请
</li>
<li>
办事指南
</li>
<li>
档案查询
</li>
</ul>
</div>
</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>
......@@ -41,13 +70,11 @@
<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/noticeList/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 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'>
......@@ -60,11 +87,9 @@
</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>
<li id='evaluate' class='layui-nav-item'><a href='/staticViews/evaluate.html'>好差评</a></li>
</ul>
</div>
</div>
<!-- 轮播 -->
<div class="homeindex">
<div class="banner">
......@@ -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
......
......@@ -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; /*火狐*/
......
......@@ -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;
......
......@@ -38,51 +38,40 @@ div.subject {
min-width: 1200px;
}
div.top-logo {
width: 1178px;
height: 70px!important;
padding-top: 20px;
width: 100%;
height: 39px;
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: 100%;
width: 1200px;
height: 39px;
line-height: 39px;
margin: 0 auto;
}
div.top-logo .top_logo_search {
.top_logo_content .head-time {
float: left;
width: 350px;
position: relative;
margin-left: 290px;
}
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;
color: #7A7A7A;
font-size: 14px;
line-height: 39px;
}
.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,13 +193,14 @@ div.top-logo .top_logo_search i {
left: -7px;
height: 10px;
border-left: 1px solid #b1afaf;
top: 6px;
top: 14px;
}
.login-con {
float: right;
background-color: #fff!important;
background: #F7F9FB!important;
position: relative;
top: 17px;
font-size: 14px;
color: #7A7A7A;
padding-right: 0!important;
}
.userImage {
......@@ -216,12 +208,17 @@ div.top-logo .top_logo_search i {
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;
height: 14px;
border-radius: 50%;
line-height: 14px;
right: -3px;
top: -5px;
font-size: 12px;
text-align: center;
width: 6px;
height: 6px;
border-radius: 6px;
right: 0;
top: -4px;
}
.sysNews img {
width: 17px;
......@@ -392,3 +385,58 @@ 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
......

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() {
'<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>' +
......
......@@ -56,9 +56,9 @@ $(function () {
initData();
recentlyDay = getDate();
NewsData();
// NoticeData();
// LawsData();
// policiesData();
NoticeData();
LawsData();
policiesData();
});
function initData() {
$('#appointment_inquiry').click(function () {
......
......@@ -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 lay-id="1">公示</li>
<li lay-id="2">公告</li>
<li class="layui-this"><a href="">全部</a></li>
<li><a href="">公示</a></li>
<li><a href="">公告</a></li>
</ul>
</div>
<!-- 列表区域 -->
......