From bfb10b42c5fb6bc9f751f88f9351bfc19c6380a4 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期二, 16 七月 2024 14:57:50 +0800
Subject: [PATCH] 样式调整
---
src/layout/components/Sidebar/index.vue | 95 +++++++++++++++++++++++++----------------------
1 files changed, 50 insertions(+), 45 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 51d0839..056aa5e 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,26 +1,31 @@
<template>
- <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
- <logo v-if="showLogo" :collapse="isCollapse" />
- <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
- <el-menu
- :default-active="activeMenu"
- :collapse="isCollapse"
- :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
- :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
- :unique-opened="true"
- :active-text-color="settings.theme"
- :collapse-transition="false"
- mode="vertical"
- >
- <sidebar-item
- v-for="(route, index) in sidebarRouters"
- :key="route.path + index"
- :item="route"
- :base-path="route.path"
- />
- </el-menu>
- </el-scrollbar>
- </div>
+ <div
+ :class="{ 'has-logo': showLogo }"
+ :style="{
+ backgroundColor:
+ settings.sideTheme === 'theme-dark'
+ ? variables.menuBackground
+ : variables.menuLightBackground,
+ }"
+ >
+ <logo v-if="showLogo" :collapse="isCollapse" />
+ <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+ <el-menu
+ :default-active="activeMenu"
+ :collapse="isCollapse"
+ :unique-opened="true"
+ :collapse-transition="false"
+ mode="vertical"
+ >
+ <sidebar-item
+ v-for="(route, index) in sidebarRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </el-menu>
+ </el-scrollbar>
+ </div>
</template>
<script>
@@ -30,28 +35,28 @@
import variables from "@/assets/styles/variables.scss";
export default {
- components: { SidebarItem, Logo },
- computed: {
- ...mapState(["settings"]),
- ...mapGetters(["sidebarRouters", "sidebar"]),
- activeMenu() {
- const route = this.$route;
- const { meta, path } = route;
- // if set path, the sidebar will highlight the path you set
- if (meta.activeMenu) {
- return meta.activeMenu;
- }
- return path;
- },
- showLogo() {
- return this.$store.state.settings.sidebarLogo;
- },
- variables() {
- return variables;
- },
- isCollapse() {
- return !this.sidebar.opened;
- }
- }
+ components: { SidebarItem, Logo },
+ computed: {
+ ...mapState(["settings"]),
+ ...mapGetters(["sidebarRouters", "sidebar"]),
+ activeMenu() {
+ const route = this.$route;
+ const { meta, path } = route;
+ // if set path, the sidebar will highlight the path you set
+ if (meta.activeMenu) {
+ return meta.activeMenu;
+ }
+ return path;
+ },
+ showLogo() {
+ return this.$store.state.settings.sidebarLogo;
+ },
+ variables() {
+ return variables;
+ },
+ isCollapse() {
+ return !this.sidebar.opened;
+ },
+ },
};
</script>
--
Gitblit v1.8.0