You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.5 KiB
109 lines
2.5 KiB
<template>
|
|
<el-header height="100px" :class="[prefixCls, 'flex', 'justify-between', store.getMenuTheme === 'dark'? 'is-host' : 'is-white']">
|
|
<ApplicationAppLogo />
|
|
<el-menu
|
|
:default-active="$route.meta.parentPath || $route.path"
|
|
class="el-menu-demo"
|
|
mode="horizontal"
|
|
:ellipsis="false"
|
|
router
|
|
>
|
|
<el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path" :key="item.path">{{ item.name }}</el-menu-item>
|
|
</el-menu>
|
|
</el-header>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {useDesign} from "/composables/useDesign";
|
|
// import {useAppStore} from "/stores/app";
|
|
|
|
const { prefixCls } = useDesign('header-wrap')
|
|
const route = useRoute()
|
|
const router = useRouter();
|
|
const routes = ref(router.getRoutes().filter(it=> !it.meta.hidden));
|
|
routes.value.sort((a,b)=> a.meta.order - b.meta.order);
|
|
const activeRoute = ref(route.path)
|
|
const store = useAppStore()
|
|
|
|
function handleChange(val) {
|
|
activeRoute.value = val.path;
|
|
if(val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
|
|
store.setMenuTheme('dark')
|
|
}else {
|
|
store.setMenuTheme('light')
|
|
}
|
|
}
|
|
|
|
watch(()=> route, (val)=>{
|
|
activeRoute.value = val.path;
|
|
if(val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
|
|
store.setMenuTheme('dark')
|
|
}else {
|
|
store.setMenuTheme('light')
|
|
}
|
|
}, {deep: true})
|
|
|
|
watchEffect(()=>{
|
|
handleChange(route)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$prefix-cls: '#{$name-prefix}-header-wrap';
|
|
.#{$prefix-cls} {
|
|
z-index: 1;
|
|
@apply relative;
|
|
:deep(.el-menu) {
|
|
@apply bg-transparent;
|
|
border-bottom: unset;
|
|
.el-menu-item {
|
|
border-bottom: unset;
|
|
//font-size: 20px;
|
|
transition: font-size .5s;
|
|
background-color: unset;
|
|
@apply relative text-xl;
|
|
&:after{
|
|
content: '';
|
|
width: 50%;
|
|
height: 8px;
|
|
border-radius: 5px;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
@apply bg-transparent absolute;
|
|
}
|
|
&:hover{
|
|
color: unset;
|
|
}
|
|
&.is-active {
|
|
color: #333 !important;
|
|
@apply font-bold text-2xl;
|
|
&:after{
|
|
@apply bg-black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-host{
|
|
:deep(.el-menu) {
|
|
.el-menu-item {
|
|
color: $white !important;
|
|
&:hover{
|
|
color: unset;
|
|
}
|
|
&.is-active {
|
|
&:after{
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.yangliu-app-logo__title){
|
|
color: $white;
|
|
}
|
|
}
|
|
//height: 100px;
|
|
}
|
|
</style>
|