mirror of
https://gitee.com/niucloud-team/niucloud.git
synced 2025-12-13 02:02:47 +00:00
97 lines
3.1 KiB
Vue
97 lines
3.1 KiB
Vue
<template>
|
|
<!-- main-container -->
|
|
<div class="flex h-full min-w-[1200px]">
|
|
<div class="flex items-center ml-[20px]">
|
|
<NuxtLink to="/">
|
|
<div class="w-[132px] mr-[10px]"><img src="@/assets/images/index/logo.jpg" /></div>
|
|
</NuxtLink>
|
|
<div class="hidden text-[14px] text-[#A6B0C8] xl:block">|<span class="ml-[10px]">一款快速开发SAAS通用管理系统后台框架</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto flex-shrink">
|
|
<el-menu :default-active="appStore.route" class="h-full" mode="horizontal" :ellipsis="false" :router="true">
|
|
<el-menu-item index="/" route="/">
|
|
<span class="text-base mx-4">首页</span>
|
|
<span></span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/community/answer" route="/">
|
|
<span class="text-base mx-4">文章</span>
|
|
<span></span>
|
|
</el-menu-item>
|
|
<el-menu-item route="/">
|
|
<span class="text-base mx-4">社区</span>
|
|
<span></span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end mr-[20px] ml-auto whitespace-pre">
|
|
<el-dropdown v-if="info">
|
|
<div>
|
|
<NuxtLink to="/member/center">
|
|
<span class="cursor-pointer">{{info.nickname}}</span>
|
|
</NuxtLink>
|
|
<span class="mx-2">|</span>
|
|
<span class="cursor-pointer" @click="logoutFn">退出</span>
|
|
</div>
|
|
</el-dropdown>
|
|
<NuxtLink to="/auth/login" v-else>
|
|
<el-button type="primary" link>{{ t('login') }} / {{ t('register') }}</el-button>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import useMemberStore from '@/stores/member'
|
|
import useAppStore from '@/stores/app'
|
|
|
|
const memberStore = useMemberStore()
|
|
const info = computed(() => memberStore.info)
|
|
|
|
const logoutFn = ()=>{
|
|
memberStore.logout()
|
|
navigateTo(`/auth/login`)
|
|
}
|
|
|
|
const appStore = useAppStore()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-menu--horizontal) {
|
|
border-bottom: none;
|
|
}
|
|
.el-menu-item{
|
|
padding-left: 0;
|
|
border: none !important;
|
|
color: #000 !important;
|
|
&.is-active{
|
|
border: none !important;
|
|
color: #000 !important;
|
|
span{
|
|
&:first-of-type{
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
&:last-of-type{
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: linear-gradient(to bottom right,#FFFFFF,var(--el-color-primary));
|
|
border-radius: 100px;
|
|
bottom: 15px;
|
|
right: 27px;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
background-color: transparent !important;
|
|
color: var(--el-menu-hover-text-color) !important;
|
|
}
|
|
&:focus{
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
</style> |