|
|
|
|
@ -1,9 +1,42 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
|
|
|
|
|
<template v-if="isSticky">
|
|
|
|
|
<div class="sticky-bar-header">
|
|
|
|
|
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
|
|
|
|
|
<div class="flex flex-middle">
|
|
|
|
|
<img
|
|
|
|
|
class="bar-header-wrap__logo"
|
|
|
|
|
src="@/static/images/layout/logo-sticky.png"
|
|
|
|
|
/>
|
|
|
|
|
<el-menu
|
|
|
|
|
:default-active="tabIndex"
|
|
|
|
|
mode="horizontal"
|
|
|
|
|
@select="handleTabSelect"
|
|
|
|
|
>
|
|
|
|
|
<el-menu-item
|
|
|
|
|
v-for="item in tabList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:index="item.value"
|
|
|
|
|
>{{ item.label }}</el-menu-item
|
|
|
|
|
>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar-header-wrap__icons flex flex-middle">
|
|
|
|
|
<img src="@/static/images/layout/icon-search-sticky.png" />
|
|
|
|
|
<div class="header-wrap-icons__shop">
|
|
|
|
|
<img src="@/static/images/layout/icon-shop-sticky.png" />
|
|
|
|
|
<span class="">3</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-wrap-icons__login">登录</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<HeaderInfoBar />
|
|
|
|
|
<div class="default-header">
|
|
|
|
|
<div class="default-header-box">
|
|
|
|
|
<div class="default-header-box__wrap flex flex-between flex-middle">
|
|
|
|
|
<div class="default-bar-header">
|
|
|
|
|
<div class="bar-header-box">
|
|
|
|
|
<div class="bar-header-box__wrap flex flex-between flex-middle">
|
|
|
|
|
<img
|
|
|
|
|
class="header-box-wrap__logo"
|
|
|
|
|
src="@/static/images/layout/logo.png"
|
|
|
|
|
@ -27,7 +60,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="default-header-box__tab flex flex-middle">
|
|
|
|
|
<div class="bar-header-box__tab flex flex-middle">
|
|
|
|
|
<div class="header-box-tab__category">
|
|
|
|
|
<div class="tab-category__label flex flex-center flex-middle">
|
|
|
|
|
<img src="@/static/images/layout/icon-category.png" />
|
|
|
|
|
@ -40,16 +73,17 @@
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@mouseenter="handleMouEnter(item.id)"
|
|
|
|
|
@mouseleave="categrayHoverVisible = false"
|
|
|
|
|
class="menu-left__item flex felx-middle"
|
|
|
|
|
class="menu-left__item flex flex-middle"
|
|
|
|
|
>
|
|
|
|
|
<img />
|
|
|
|
|
<span>{{ item.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="categrayHoverVisible">
|
|
|
|
|
<div
|
|
|
|
|
v-show="categrayHoverVisible"
|
|
|
|
|
class="tab-category-menu__right flex flex-wrap"
|
|
|
|
|
@mouseenter="categrayHoverVisible = true"
|
|
|
|
|
@mouseleave="categrayHoverVisible = false"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in currentCategrayList"
|
|
|
|
|
@ -61,13 +95,13 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<nuxt-link
|
|
|
|
|
v-for="item in tabList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
class="header-box-tab__common flex flex-center flex-middle"
|
|
|
|
|
:class="{
|
|
|
|
|
'header-box-tab__common--light': item.path === $nuxt.$route.path,
|
|
|
|
|
'header-box-tab__common--light':
|
|
|
|
|
item.path === $nuxt.$route.path,
|
|
|
|
|
}"
|
|
|
|
|
:to="item.path"
|
|
|
|
|
>
|
|
|
|
|
@ -76,6 +110,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
@ -94,19 +129,25 @@ const TAB_TYPE = {
|
|
|
|
|
export default {
|
|
|
|
|
name: "DefaultHeader",
|
|
|
|
|
components: { HeaderInfoBar },
|
|
|
|
|
props: {
|
|
|
|
|
isSticky: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchContent: "",
|
|
|
|
|
activityTab: TAB_TYPE.HOME,
|
|
|
|
|
tabIndex: TAB_TYPE.HOME,
|
|
|
|
|
tabList: [
|
|
|
|
|
{ label: "首页", value: TAB_TYPE.HOME, path: "/" },
|
|
|
|
|
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
|
|
|
|
|
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
|
|
|
|
|
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
|
|
|
|
|
],
|
|
|
|
|
categrayData: [],
|
|
|
|
|
categrayHoverVisible: false,
|
|
|
|
|
currentCategrayId: 0,
|
|
|
|
|
categrayData: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
@ -148,15 +189,84 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.default-header {
|
|
|
|
|
.layout-sticky-bar-header {
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.sticky-bar-header {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
.sticky-bar-header__wrap {
|
|
|
|
|
width: 1200px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
.bar-header-wrap__logo {
|
|
|
|
|
width: 164px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
}
|
|
|
|
|
.bar-header-wrap__icons {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
img {
|
|
|
|
|
width: 23px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
}
|
|
|
|
|
.header-wrap-icons__shop {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 30px 0 14px;
|
|
|
|
|
img {
|
|
|
|
|
width: 30px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -6px;
|
|
|
|
|
top: -4px;
|
|
|
|
|
display: block;
|
|
|
|
|
height: 14px;
|
|
|
|
|
padding: 0 2px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #ff512b;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.header-wrap-icons__login {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/ .el-menu {
|
|
|
|
|
height: 50px;
|
|
|
|
|
color: #666666;
|
|
|
|
|
.is-active {
|
|
|
|
|
color: #ff7f39;
|
|
|
|
|
border-bottom: 2px solid #ff823c;
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item:hover {
|
|
|
|
|
color: #ff7f39;
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin: 0 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.default-bar-header {
|
|
|
|
|
padding-top: 32px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
.default-header-box {
|
|
|
|
|
.bar-header-box {
|
|
|
|
|
width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.default-header-box__wrap {
|
|
|
|
|
.bar-header-box__wrap {
|
|
|
|
|
height: 42px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 38px;
|
|
|
|
|
@ -214,7 +324,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.default-header-box__tab {
|
|
|
|
|
.bar-header-box__tab {
|
|
|
|
|
height: 38px;
|
|
|
|
|
.header-box-tab__category {
|
|
|
|
|
position: relative;
|
|
|
|
|
@ -241,7 +351,7 @@ export default {
|
|
|
|
|
color: #333333;
|
|
|
|
|
.tab-category-menu__left {
|
|
|
|
|
width: 190px;
|
|
|
|
|
padding: 34px 0;
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.menu-left__item:hover {
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
|
ch
3 years ago
