|
|
@@ -1,82 +1,91 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
- <el-aside id="aside-style">
|
|
|
- <el-menu
|
|
|
- :default-active="this.$route.path"
|
|
|
- router
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- :collapse="isCollapse"
|
|
|
- @open="handleOpen"
|
|
|
- @close="handleClose"
|
|
|
- >
|
|
|
- <el-menu-item index="/disk/list">
|
|
|
- <i class="el-icon-files" />
|
|
|
- <span slot="title">文件</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="/disk/image">
|
|
|
- <i class="el-icon-picture" />
|
|
|
- <span slot="title">图片</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="/disk/video">
|
|
|
- <i class="el-icon-video-camera" />
|
|
|
- <span slot="title">视频</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="/disk/audio">
|
|
|
- <i class="el-icon-headset" />
|
|
|
- <span slot="title">音频</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
- </el-aside>
|
|
|
- <el-main>
|
|
|
- <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
|
|
|
- </el-breadcrumb>-->
|
|
|
- <router-view />
|
|
|
- </el-main>
|
|
|
+ <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="/disk" style="text-decoration-line: none">
|
|
|
+ <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
|
|
|
+ disk
|
|
|
+ </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-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
|
|
|
+ class="el-menu-vertical-demo"
|
|
|
+ >
|
|
|
+ <el-menu-item index="/disk/list">
|
|
|
+ <i class="el-icon-files" />
|
|
|
+ <span slot="title">文件</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/disk/image">
|
|
|
+ <i class="el-icon-picture" />
|
|
|
+ <span slot="title">图片</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/disk/video">
|
|
|
+ <i class="el-icon-video-camera" />
|
|
|
+ <span slot="title">视频</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/disk/audio">
|
|
|
+ <i class="el-icon-headset" />
|
|
|
+ <span slot="title">音频</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </el-aside>
|
|
|
+ <el-main>
|
|
|
+ <router-view />
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getAuthedUser } from '@/utils/auth'
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'Disk',
|
|
|
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)
|
|
|
+ document.title = '我的网盘'
|
|
|
+ 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>
|
