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:42:54 +08:00
parent d739d4fefd
commit 0a3ce5013c
1 changed files with 81 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,81 @@
<template>
<div>
欢迎{{store.auth.user.username}}进入到学习平台
</div>
<div>
<el-button @click="logout()" type="danger" plain>退出登录</el-button>
<div style="height: 100vh">
<el-container style="height: 100%">
<el-aside style="border-right: solid 1px #d3d3d3" width="250px">
<div style="text-align: center;padding: 15px 0">
<el-image src="https://element-plus.gitee.io/images/element-plus-logo.svg"
style="width: 150px"/>
</div>
<el-menu
default-active="2"
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-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header style="border-bottom: solid 1px #d3d3d3">
<div style="display: flex;padding: 7px 0">
<div style="flex: 1">
<el-input
placeholder="搜索论坛内容..."
style="width: 400px;margin-top: 6px">
<template #prefix>
<el-icon><Search/></el-icon>
</template>
</el-input>
</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>
<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-menu>
</template>
</el-dropdown>
</div>
</div>
</el-header>
<el-main style="">Main</el-main>
</el-container>
</el-container>
</div>
</template>
@ -12,6 +84,7 @@ 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";
const store = useStore()
@ -25,5 +98,7 @@ const logout = () => {
</script>
<style scoped>
.avatar:hover {
cursor: pointer;
}
</style>