优化header在移动端的展示样式
This commit is contained in:
hejin
parent
48a2972383
commit
1e03d9f7c6
@ -50,6 +50,12 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.container, .container-sm, .container-md, .container-lg, .container-xl {
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
BIN
assets/image/icon/menu.png
Normal file
BIN
assets/image/icon/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
assets/image/mob-logo.png
Normal file
BIN
assets/image/mob-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@ -1,32 +1,19 @@
|
||||
<template>
|
||||
<header class="header-box d-flex justify-content-between align-items-center">
|
||||
<b-navbar class="h-100 pb-0" toggleable="lg">
|
||||
<b-navbar-brand href="/" class="mr-md-5 mr-0">
|
||||
<img src="~assets/image/logo.png" width="265px" alt="">
|
||||
</b-navbar-brand>
|
||||
<div>
|
||||
<header class="header-box d-none d-md-flex justify-content-between align-items-center">
|
||||
<img src="~assets/image/logo.png" width="265px" :alt="$t('index.corporateName')">
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
<nav class="d-md-flex align-items-center">
|
||||
<nuxt-link
|
||||
class="nav-link-item d-flex align-items-center"
|
||||
:to="item.href"
|
||||
v-for="(item,index) in menuList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-navbar-nav class="ml-md-5 text-center">
|
||||
<nuxt-link
|
||||
class="nav-link-item d-flex align-items-center"
|
||||
:to="item.href"
|
||||
v-for="(item,index) in menuList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</nuxt-link>
|
||||
|
||||
<b-nav-item-dropdown class="nav-link-item d-flex align-items-center" text="demo" right>
|
||||
<b-dropdown-item href="#">Account</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Settings</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
|
||||
<b-nav-form class="d-none d-md-block">
|
||||
<div class="search-box">
|
||||
<img class="search-icon" src="~assets/image/icon/search.png" alt="search" />
|
||||
<b-form-input
|
||||
@ -36,8 +23,35 @@
|
||||
>
|
||||
</b-form-input>
|
||||
</div>
|
||||
</b-nav-form>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<header class="header-box-mob d-block d-md-none">
|
||||
<div class="header-top">
|
||||
<img class="mr-4" src="~assets/image/mob-logo.png" width="164px" :alt="$t('index.corporateName')">
|
||||
<div class="search-box">
|
||||
<img class="search-icon" src="~assets/image/icon/search.png" :alt="$t('common.search')" />
|
||||
<b-form-input
|
||||
class="search-input"
|
||||
v-model="searchVal"
|
||||
placeholder="SEARCH"
|
||||
>
|
||||
</b-form-input>
|
||||
<img class="ml-2" src="~assets/image/icon/menu.png" :alt="$t('common.menu')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="mob-nav hide_scroll_bar d-flex align-items-center">
|
||||
<nuxt-link
|
||||
class="nav-link-item d-flex align-items-center"
|
||||
:to="item.href"
|
||||
v-for="(item,index) in menuList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -60,81 +74,91 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.search-input {
|
||||
width: 7.5rem;
|
||||
height: 2.75rem;
|
||||
padding-left: 2.5rem;
|
||||
border-color: #015fe8;
|
||||
border-radius: 1.375rem;
|
||||
transition: all 0.5s ease-in-out;
|
||||
&:focus {
|
||||
width: 21.25rem;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin activeNav {
|
||||
&:hover {
|
||||
position: relative;
|
||||
color: #015fe8;
|
||||
background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: .125rem;
|
||||
background: #015fe8;
|
||||
}
|
||||
>a {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
height: 100%;
|
||||
.nav-link-item {
|
||||
height: 100%;
|
||||
padding: 0 1.4375rem;
|
||||
z-index: 99999;
|
||||
>a {
|
||||
color: #151516;
|
||||
}
|
||||
@include activeNav;
|
||||
}
|
||||
.active-item {
|
||||
@include activeNav;
|
||||
}
|
||||
}
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 5.75rem;
|
||||
padding: 0 1.9375rem;
|
||||
.navbar-nav {
|
||||
z-index: 99;
|
||||
}
|
||||
.navbar-collapse, .navbar-nav {
|
||||
height: 100%;
|
||||
@mixin activeNav {
|
||||
&:hover {
|
||||
position: relative;
|
||||
color: #015fe8;
|
||||
background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: .125rem;
|
||||
background: #015fe8;
|
||||
}
|
||||
>a {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .nav-link-item {
|
||||
padding: 0 1.4375rem;
|
||||
>a {
|
||||
color: #151516;
|
||||
}
|
||||
@include activeNav;
|
||||
}
|
||||
.active-item {
|
||||
@include activeNav;
|
||||
}
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
.search-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.search-input {
|
||||
width: 7.5rem;
|
||||
height: 2.75rem;
|
||||
padding-left: 2.5rem;
|
||||
border-color: #015fe8;
|
||||
border-radius: 1.375rem;
|
||||
&::placeholder {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
::v-deep .nav-item {
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
a {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
}
|
||||
::v-deep .dropdown-menu {
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
z-index: 99;
|
||||
.header-box-mob {
|
||||
width: 100%;
|
||||
.header-top {
|
||||
padding: .8125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.search-box {
|
||||
flex: 1;
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 2.1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mob-nav {
|
||||
height: 2.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,9 @@
|
||||
"fax": "Fax",
|
||||
"submit": "SUBMIT",
|
||||
"sendInquiry": "Send Inquiry",
|
||||
"chatNow": "Chat Now"
|
||||
"chatNow": "Chat Now",
|
||||
"menu": "Menu",
|
||||
"search": "Search"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "Home",
|
||||
|
||||
@ -25,7 +25,9 @@
|
||||
"fax": "传真",
|
||||
"submit": "提交",
|
||||
"sendInquiry": "发送咨询",
|
||||
"chatNow": "立即聊天"
|
||||
"chatNow": "立即聊天",
|
||||
"menu": "菜单",
|
||||
"search": "搜索"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "首页",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user