79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<!--前端样式1-->
|
|
<template>
|
|
<el-row justify="space-between">
|
|
<el-col :span="6">
|
|
<div class="grid-content ep-bg-purple" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-menu
|
|
:default-active="nav.frontPath"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
router
|
|
>
|
|
<el-menu-item
|
|
class="nav-name"
|
|
v-for="r of getFrontList()" :key="r.path"
|
|
:index="r.path">
|
|
{{ r.name }}
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-button v-if="userStore().frontUserInfo" style="margin-top: 12px" type="primary" round @click="router.push('/login')">登录</el-button>
|
|
<el-dropdown v-else>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<!-- <el-avatar :src="userStore().frontUserInfo.avatar" />-->
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<h6>{{ userStore().frontUserInfo.username }}</h6>
|
|
</el-col>
|
|
</el-row>
|
|
<template #dropdown>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getFrontList } from '~/utils/utils'
|
|
import { useRouter } from 'vue-router'
|
|
import { logoutFront } from '~/api/user/frontUserApi'
|
|
const router = useRouter()
|
|
const nav = navStore()
|
|
const handleSelect = (key: string, keyPath: string[]) => {
|
|
nav.frontPath = key.fullPath
|
|
}
|
|
/**
|
|
* 退出登录
|
|
*/
|
|
const logout = () => {
|
|
logoutFront().then(() => {
|
|
toast.success('退出成功~')
|
|
router.push('/login')
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
:deep(.el-menu--horizontal) {
|
|
border-bottom: none;
|
|
}
|
|
h6 {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
padding-top: 15px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.nav-name{
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
color: #303133;
|
|
}
|
|
</style>
|