It seemed like that I fixed the bugs of the header
This commit is contained in:
catsworld
Vendored
+53
-25
@@ -1,20 +1,24 @@
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.banner-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 160px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-image: url('/img/banner.jpg');
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 105%;
|
||||
max-width: 150%;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
width: 120%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
@@ -29,8 +33,11 @@ hr {
|
||||
}
|
||||
|
||||
.top-bar-list {
|
||||
display: block;
|
||||
color: #FEFEFE !IMPORTANT;
|
||||
padding: 1.2rem 1rem !IMPORTANT;
|
||||
padding: 0 1rem !IMPORTANT;
|
||||
height: 54px;
|
||||
line-height: 54px !IMPORTANT;
|
||||
transition: background 0.25s ease-out;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@@ -47,6 +54,7 @@ hr {
|
||||
.top-bar,
|
||||
.top-bar-left,
|
||||
.top-bar-right {
|
||||
height: 54px;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
}
|
||||
@@ -71,14 +79,16 @@ hr {
|
||||
}
|
||||
|
||||
.top-bar-bg {
|
||||
background-image: url('/img/banner.jpg');
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
height: 130%;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 105%;
|
||||
background-image: url('/img/banner.jpg');
|
||||
background-position: center 0;
|
||||
background-repeat: no-repeat;
|
||||
height: 74px;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
width: 120%;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
-webki-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
@@ -90,22 +100,40 @@ hr {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#top-bar-avatar {
|
||||
.top-bar-avatar {
|
||||
display: block;
|
||||
color: #FEFEFE !IMPORTANT;
|
||||
padding: 0 1rem !IMPORTANT;
|
||||
height: 54px;
|
||||
transition: background 0.25s ease-out;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0 !IMPORTANT;
|
||||
transition: box-shadow 0.25s;
|
||||
}
|
||||
|
||||
#top-bar-avatar:hover {
|
||||
box-shadow: 0 0 10px white;
|
||||
.top-bar-button {
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0 1rem 0;
|
||||
padding: 0 1rem!IMPORTANT;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||
line-height: 54px!IMPORTANT;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #1779ba;
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
#top-bar-avatar:active {
|
||||
box-shadow: 0 0 20px white;
|
||||
transition: box-shadow 0.15s;
|
||||
.top-bar-button:hover {
|
||||
color: #fefefe;
|
||||
background-color: #14679e;
|
||||
}
|
||||
|
||||
#top-bar-avatar img {
|
||||
margin-right: 0;
|
||||
.search-bar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
|
||||
@@ -6,29 +6,22 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="medium-10 medium-offset-1 columns">
|
||||
<div class="top-bar-left show-for-medium-only show-for-small-only">
|
||||
</div>
|
||||
<div class="top-bar-left">
|
||||
<ul class="dropdown menu hide-for-medium-only hide-for-small-only" data-dropdown-menu>
|
||||
<ul class="dropdown menu hide-for-medium" data-dropdown-menu>
|
||||
<li><a class="top-bar-list" href="/">这可是只有手机才能看得到的</a></li>
|
||||
</ul>
|
||||
<ul class="dropdown menu hide-for-small-only" data-dropdown-menu>
|
||||
<li><a class="top-bar-list" href="/">首页</a></li>
|
||||
<li><a class="top-bar-list" href="/good">市场</a></li>
|
||||
@if(Session::has('user_id'))
|
||||
<li><a class="top-bar-list" href="/good/my">我的商品</a></li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<ul class="dropdown menu hide-for-small-only" data-dropdown-menu>
|
||||
<div class="top-bar-right hide-for-small-only">
|
||||
<ul class="dropdown menu hide-for-small-only top-bar-menu" data-dropdown-menu>
|
||||
@if(Session::has('user_id'))
|
||||
@if(Session::has('is_admin'))
|
||||
<li><a class="top-bar-list" href="/admin">管理员页面</a></li>
|
||||
@endif
|
||||
<li><a class="top-bar-list" id="top-bar-avatar"
|
||||
href="/user/{{Session::get('user_id')}}"><img
|
||||
src="/avatar/{{ Session::get('user_id') }}/54/54"></a></li>
|
||||
<li><a class="top-bar-avatar" href="/user/{{Session::get('user_id')}}"><img src="/avatar/{{ Session::get('user_id') }}/54/54"/></a></li>
|
||||
<li><a class="top-bar-list" href="/message">消息</a></li>
|
||||
<li><a class="top-bar-list" href="/user/fav">收藏夹</a></li>
|
||||
<li><a href="/good/add" class="button">出售</a></li>
|
||||
<li><a class="top-bar-list" href="/good/my">我的商品</a></li>
|
||||
<li><a href="/good/add" class="top-bar-button">出售</a></li>
|
||||
@else
|
||||
<li><a class="top-bar-list" href="/register">注册</a></li>
|
||||
<li><a class="top-bar-list" href="/login">登录</a></li>
|
||||
@@ -39,9 +32,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="banner-back">
|
||||
<div class="banner">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row search-bar">
|
||||
<div class="medium-10 medium-centered columns">
|
||||
@include('layout.search')
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="large-3 large-offset-9 medium-11 medium-centered columns search-bar">
|
||||
<div class="large-3 large-offset-9 medium-11 medium-centered columns">
|
||||
<form action="/good" method="GET">
|
||||
<div class="input-group" id="top-bar-quick-access">
|
||||
<input class="input-group-field" type="search" name="query" placeholder="开始交易吧( '﹃'⑉)"/>
|
||||
|
||||
Reference in New Issue
Block a user