<template>
|
<div class="pageHeader">
|
<div class="contentBox logoBox">
|
<div class="logo">
|
<img
|
@click="
|
() => {
|
$router.push({
|
path: '/home',
|
})
|
}
|
"
|
src="@/assets/images/xiehe/home/Group_303.png"
|
/>
|
</div>
|
<div class="searchBox" v-show="!hideSerch">
|
<el-input
|
style="width: 500px; height: 50px"
|
placeholder="请输入内容"
|
@change="gotoSearch"
|
v-model="searchKey"
|
:suffix-icon="Search"
|
>
|
</el-input>
|
<div class="loginInfoBox">
|
<div v-if="!userInfo" class="loginBtnBox">
|
<a
|
@click="
|
() => {
|
$router.push({
|
path: '/register',
|
})
|
}
|
"
|
>注册</a
|
>
|
|
|
<a
|
@click="
|
() => {
|
$router.push({
|
path: '/login',
|
query: {
|
redirectPath: $route.fullPath,
|
},
|
})
|
}
|
"
|
>登录</a
|
>
|
</div>
|
<div v-else class="userInfoBox">
|
<el-dropdown @command="handleCommand">
|
<span style="cursor: pointer">欢迎您，{{ userInfo.name }}！</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item icon="el-icon-user" command="gotoPersonalCenter"
|
>个人中心</el-dropdown-item
|
>
|
<el-dropdown-item icon="el-icon-switch-button" command="logout"
|
>退出登录</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="contentBox navBox" v-show="!hideNav">
|
<div
|
:class="{
|
navItem: true,
|
active: $route.fullPath.indexOf(item.path) > -1,
|
}"
|
v-for="(item, index) in navData"
|
:key="index"
|
@click="gotoPage(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { Search } from '@element-plus/icons-vue'
|
const props = defineProps({
|
hideSerch: {
|
type: Boolean,
|
default: false,
|
},
|
hideNav: {
|
type: Boolean,
|
default: false,
|
},
|
})
|
|
let searchKey = ref('')
|
let userInfo = ref('')
|
const navData = ref([
|
{
|
name: '首页',
|
path: '/home',
|
},
|
{
|
name: '教育出版',
|
path: '/bookStore',
|
},
|
{
|
name: '读者服务',
|
path: '/teachingServices',
|
},
|
{
|
name: '关于我们',
|
path: '/aboutUs',
|
},
|
])
|
|
const gotoSearch = () => {}
|
const handleCommand = () => {}
|
const gotoPage = () => {}
|
</script>
|
|
<style lang="less" scoped>
|
.pageHeader {
|
width: 100%;
|
background-color: #fff;
|
border-bottom: 1px solid #e6e6e6;
|
.topBar {
|
background: #e6e6e6;
|
color: #808080;
|
overflow: hidden;
|
padding: 14px 0;
|
p {
|
float: left;
|
}
|
.loginInfoBox {
|
float: right;
|
.loginBtnBox {
|
a {
|
cursor: pointer;
|
text-decoration: none;
|
color: inherit;
|
margin: 0 4px;
|
}
|
}
|
}
|
}
|
.logoBox {
|
padding: 25px 0;
|
overflow: hidden;
|
max-width: 1200px !important;
|
.logo {
|
float: left;
|
height: 66px;
|
img {
|
height: 100%;
|
cursor: pointer;
|
}
|
}
|
.searchBox {
|
width: 670px;
|
float: right;
|
padding-right: 10px;
|
line-height: 66px;
|
display: flex;
|
justify-content: space-between;
|
.searchItem {
|
width: 120px;
|
vertical-align: initial;
|
}
|
.searchBtn {
|
width: auto;
|
background: #144941;
|
color: #fff;
|
padding: 0 20px;
|
height: 40px;
|
}
|
}
|
}
|
.navBox {
|
.navItem {
|
display: inline-block;
|
width: 120px;
|
height: 50px;
|
text-align: center;
|
line-height: 50px;
|
font-size: 16px;
|
cursor: pointer;
|
&.active {
|
background: #144941;
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
<style>
|
.pageHeader .searchBox .el-input-group__prepend {
|
background: #fff;
|
color: #444;
|
}
|
</style>
|
