|
|
@@ -1,75 +1,261 @@
|
|
|
<template>
|
|
|
- <el-container class-name="main-container">
|
|
|
- <el-aside :class="asideClass">
|
|
|
- <LeftAside />
|
|
|
+ <el-container class="admin-layout">
|
|
|
+ <el-aside :width="collapsed ? '64px' : '240px'" class="aside-container">
|
|
|
+ <div class="logo-section">
|
|
|
+ <router-link to="/bg">
|
|
|
+ <img class="logo-img" src="@/assets/img/logo.png" alt="logo">
|
|
|
+ <transition name="el-fade-in">
|
|
|
+ <h1 v-show="!collapsed" class="logo-text">用户后台</h1>
|
|
|
+ </transition>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-menu
|
|
|
+ :default-active="$route.path"
|
|
|
+ router
|
|
|
+ class="admin-menu"
|
|
|
+ background-color="#001529"
|
|
|
+ text-color="rgba(255, 255, 255, 0.65)"
|
|
|
+ active-text-color="#fff"
|
|
|
+ :unique-opened="true"
|
|
|
+ :collapse="collapsed"
|
|
|
+ :collapse-transition="false"
|
|
|
+ >
|
|
|
+ <el-submenu v-for="item in menuList" :key="item.path" :index="item.path">
|
|
|
+ <template slot="title">
|
|
|
+ <i :class="item.icon" />
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
|
|
|
+ <i :class="child.icon" />
|
|
|
+ <span slot="title">{{ child.title }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
</el-aside>
|
|
|
- <el-container>
|
|
|
- <el-header class-name="main-header">
|
|
|
- <TopNav />
|
|
|
+
|
|
|
+ <el-container class="content-container">
|
|
|
+ <el-header class="admin-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <el-button
|
|
|
+ class="toggle-btn"
|
|
|
+ :icon="collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
|
|
|
+ @click="collapsed = !collapsed"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="header-right">
|
|
|
+ <el-dropdown trigger="hover" class="user-dropdown">
|
|
|
+ <div class="user-info">
|
|
|
+ <el-avatar
|
|
|
+ :size="28"
|
|
|
+ :src="user && user.avatarUrl ? user.avatarUrl : ''"
|
|
|
+ icon="el-icon-user-solid"
|
|
|
+ class="mgr-8"
|
|
|
+ />
|
|
|
+ <span class="username">{{ user ? user.username : '管理员' }}</span>
|
|
|
+ <i class="el-icon-arrow-down el-icon--right" />
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item icon="el-icon-s-home" @click.native="backToHome">
|
|
|
+ 回到前台
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="el-icon-switch-button" @click.native="goToLogout" divided>
|
|
|
+ 退出登录
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
</el-header>
|
|
|
- <el-main class-name="main-center">
|
|
|
- <router-view />
|
|
|
+
|
|
|
+ <el-main class="admin-main">
|
|
|
+ <div class="main-content-card">
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TopNav from '@/views/admin/TopNav.vue'
|
|
|
-import LeftAside from '@/views/admin/LeftAside.vue'
|
|
|
+import store from '@/store'
|
|
|
+import { userMixin } from 'assets/js/mixin'
|
|
|
+import { getAuthedUser } from '@/utils/auth'
|
|
|
|
|
|
export default {
|
|
|
name: 'Background',
|
|
|
- components: {
|
|
|
- TopNav,
|
|
|
- LeftAside
|
|
|
- },
|
|
|
+ mixins: [userMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
- collapsed: false
|
|
|
+ collapsed: false,
|
|
|
+ user: null,
|
|
|
+ menuList: []
|
|
|
}
|
|
|
},
|
|
|
- computed: { // 计算属性
|
|
|
- asideClass() { // 如果collapsed属性为true就展开不样式 反之就展开样式
|
|
|
- return this.collapsed ? 'main-aside-collapsed' : 'main-aside'
|
|
|
- }
|
|
|
- },
|
|
|
- created() { // 钩子函数
|
|
|
- this.$root.Bus.$on('HandleSideMenu', value => {
|
|
|
- this.collapsed = value
|
|
|
- })
|
|
|
+ created() {
|
|
|
+ this.user = getAuthedUser()
|
|
|
+ this.initMenus()
|
|
|
},
|
|
|
methods: {
|
|
|
+ initMenus() {
|
|
|
+ const routes = store.getters.addRoutes || []
|
|
|
+ routes.forEach(route => {
|
|
|
+ if (route.path === '/bg') {
|
|
|
+ if (route.children) this.menuList.push(...route.children)
|
|
|
+ } else if (route.path.startsWith('/bg/')) {
|
|
|
+ this.menuList.push(route)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ backToHome() {
|
|
|
+ this.$router.push('/')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.main-container {
|
|
|
- height: 100%;
|
|
|
+.admin-layout {
|
|
|
+ height: 100vh;
|
|
|
width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-/* 不展开样式*/
|
|
|
-.main-aside-collapsed {
|
|
|
- /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
|
|
|
- width: 64px !important;
|
|
|
- height: 100%;
|
|
|
- background-color: #334157;
|
|
|
- margin: 0px;
|
|
|
+/* 侧边栏整体背景 */
|
|
|
+.aside-container {
|
|
|
+ background-color: #001529;
|
|
|
+ transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.admin-menu {
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* Logo 区域优化 */
|
|
|
+.logo-section {
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #002140; /* 比菜单稍微深一点 */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.logo-section a {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.logo-img {
|
|
|
+ height: 32px;
|
|
|
+ width: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.logo-text {
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部导航样式优化 */
|
|
|
+.admin-header {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 64px !important;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-btn {
|
|
|
+ font-size: 20px;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: #333;
|
|
|
+ padding: 8px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-btn:hover {
|
|
|
+ background-color: rgba(0,0,0,0.025);
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 用户区域样式 */
|
|
|
+.user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px;
|
|
|
+ height: 64px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.user-info:hover {
|
|
|
+ background-color: rgba(0, 0, 0, 0.025);
|
|
|
+}
|
|
|
+
|
|
|
+.username {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+}
|
|
|
+
|
|
|
+.mgr-8 { margin-right: 8px; }
|
|
|
+
|
|
|
+/* 主内容区优化 */
|
|
|
+.admin-main {
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content-card {
|
|
|
+ background: #fff;
|
|
|
+ min-height: calc(100vh - 112px); /* 减去 header 和 padding */
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/* --- Element UI Menu 样式重写 (蓝色主题核心) --- */
|
|
|
+
|
|
|
+/* 激活项背景色 */
|
|
|
+::v-deep .el-menu-item.is-active {
|
|
|
+ background-color: #1890ff !important; /* 蓝色高亮 */
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 悬浮背景色 */
|
|
|
+::v-deep .el-submenu__title:hover,
|
|
|
+::v-deep .el-menu-item:hover {
|
|
|
+ color: #fff !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-menu-item:hover {
|
|
|
+ color: #1890ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 菜单项高度与图标间距 */
|
|
|
+::v-deep .el-menu-item, ::v-deep .el-submenu__title {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
}
|
|
|
|
|
|
-/* 展开样式*/
|
|
|
-.main-aside {
|
|
|
- width: 240px !important;
|
|
|
- height: 100%;
|
|
|
- background-color: #334157;
|
|
|
- margin: 0px;
|
|
|
+::v-deep .el-menu-item i, ::v-deep .el-submenu__title i {
|
|
|
+ color: inherit;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 14px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.main-header, .main-center {
|
|
|
- padding: 0px;
|
|
|
- border-left: 2px solid #333;
|
|
|
+/* 侧边栏展开宽度 */
|
|
|
+.admin-menu:not(.el-menu--collapse) {
|
|
|
+ width: 240px;
|
|
|
}
|
|
|
</style>
|
