itbaima-study/itbaima-forum-session
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善头像框和导航栏

Browse Source
This commit is contained in:
柏码の讲师 2023-06-01 15:53:00 +08:00
parent 0a3ce5013c
commit 5fb1d37baf
1 changed files with 26 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
study-project-frontend/src/views/IndexView.vue
View File

@ -7,36 +7,27 @@
style="width: 150px"/>
</div>
<el-menu
default-active="2"
default-active="1"
style="border: none">
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-menu-item index="1">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
<span>帖子列表</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-menu-item index="2">
<el-icon><document /></el-icon>
<span>Navigator Three</span>
<span>校园表白墙</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><setting /></el-icon>
<span>帖子管理</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
<span>我的收藏</span>
</el-menu-item>
<el-menu-item index="5">
<el-icon><setting /></el-icon>
<span>个人设置</span>
</el-menu-item>
</el-menu>
</el-aside>
@ -54,19 +45,22 @@
</div>
<div style="display: flex">
<div style="text-align: right;margin: 10px 10px 0 0;line-height: 15px">
<div style="font-weight: bold">{{store.auth.user.username}}</div>
<div style="font-size: 13px">{{store.auth.user.email}}</div>
<div style="font-weight: bold">{{store.auth.user?.username}}</div>
<div style="font-size: 13px">{{store.auth.user?.email}}</div>
</div>
<el-dropdown trigger="click">
<el-avatar class="avatar"
:size="45" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
<el-dropdown-item>
<el-icon><setting /></el-icon>
个人设置
</el-dropdown-item>
<el-dropdown-item @click="logout" style="color: #c43a3a" divided>
<el-icon><Back /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -84,15 +78,15 @@ import {get} from "@/net";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useStore} from "@/stores";
import {Document, Location, Setting, Menu as IconMenu, Search} from "@element-plus/icons-vue";
import {Document, Location, Setting, Menu as IconMenu, Search, Back} from "@element-plus/icons-vue";
const store = useStore()
const logout = () => {
get('/api/auth/logout', (message) => {
ElMessage.success(message)
store.auth.user = null
router.push('/')
store.auth.user = null
})
}
</script>