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.
140 lines
3.2 KiB
140 lines
3.2 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>
|
|
|
|
<div v-if="!token" @click="setLoginVisible(true)">登录</div>
|
|
<el-dropdown v-else trigger="click">
|
|
<span class="el-dropdown-link">
|
|
登录
|
|
<el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>OCR识别</el-dropdown-item>
|
|
<el-dropdown-item>优化翻译</el-dropdown-item>
|
|
<el-dropdown-item>翻译文本</el-dropdown-item>
|
|
<el-dropdown-item>翻译文件</el-dropdown-item>
|
|
<el-dropdown-item>推出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-header>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
|
|
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()
|
|
const { setLoginVisible } = useUserInfo()
|
|
const token = computed(()=> useUserInfo().$state.token);
|
|
|
|
onMounted(()=>{
|
|
console.log('token>>>>>', token)
|
|
})
|
|
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>
|