|
|
@@ -1,12 +1,35 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
- <el-main>
|
|
|
- <my-bar />
|
|
|
- <el-aside id="aside-style">
|
|
|
- <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
|
|
|
- <el-radio-button :label="false">展开</el-radio-button>
|
|
|
- <el-radio-button :label="true">收起</el-radio-button>
|
|
|
- </el-radio-group>-->
|
|
|
+ <el-container style="height: 650px; border: 1px solid #eee">
|
|
|
+ <el-header style="text-align: right; font-size: 12px">
|
|
|
+ <el-col :md="2">
|
|
|
+ <ul class="el-menu--horizontal el-menu">
|
|
|
+ <li class="el-menu-item">
|
|
|
+ <a href="/my" style="text-decoration-line: none">
|
|
|
+ <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
|
|
|
+ my
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
+ <el-dropdown>
|
|
|
+ <img
|
|
|
+ :src="user.avatarUrl"
|
|
|
+ class="el-avatar--circle el-avatar--medium"
|
|
|
+ style="margin-right: 10px; margin-top: 15px"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ icon="el-icon-error"
|
|
|
+ class="size"
|
|
|
+ @click.native="goToLogout"
|
|
|
+ >退出</el-dropdown-item>
|
|
|
+ <el-dropdown-item>查看</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </el-header>
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
|
|
<el-menu
|
|
|
:default-active="this.$route.path"
|
|
|
router
|
|
|
@@ -143,59 +166,40 @@
|
|
|
</el-submenu>
|
|
|
</el-menu>
|
|
|
</el-aside>
|
|
|
- <div>
|
|
|
- <h3>我的后台</h3>
|
|
|
- </div>
|
|
|
- <router-view />
|
|
|
- </el-main>
|
|
|
+ <el-main>
|
|
|
+ <router-view />
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import MyBar from 'components/layout/MyBar'
|
|
|
+import { getAuthedUser } from '@/utils/auth'
|
|
|
|
|
|
export default {
|
|
|
- name: 'My',
|
|
|
- components: {
|
|
|
- MyBar
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- isCollapse: false,
|
|
|
- navList: [
|
|
|
- { path: '/my/account', name: '我的帐号', icon: 'el-icon-upload' }
|
|
|
- ]
|
|
|
+ user: null
|
|
|
}
|
|
|
},
|
|
|
- /* watch: {
|
|
|
- // 地址栏 url 发生变化时重新加载本页面
|
|
|
- $route() {
|
|
|
- this.$router.go()
|
|
|
- }
|
|
|
- },*/
|
|
|
created() {
|
|
|
document.title = '我的帐号'
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleOpen(key, keyPath) {
|
|
|
- console.log(key, keyPath)
|
|
|
- },
|
|
|
- handleClose(key, keyPath) {
|
|
|
- console.log(key, keyPath)
|
|
|
+ const userInfo = getAuthedUser()
|
|
|
+ if (userInfo !== null) {
|
|
|
+ this.user = userInfo
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- min-height: 800px;
|
|
|
+.el-header {
|
|
|
+ background-color: #B3C0D1;
|
|
|
+ color: #333;
|
|
|
+ line-height: 60px;
|
|
|
}
|
|
|
|
|
|
-#aside-style {
|
|
|
- min-width: 120px;
|
|
|
- max-width: 240px;
|
|
|
- width: 30%;
|
|
|
+.el-aside {
|
|
|
+ color: #333;
|
|
|
}
|
|
|
</style>
|
