From 89079cd6f458c06b014d2609dcded95600be30a9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 16 五月 2026 14:18:44 +0800
Subject: [PATCH] 浪潮——客户 1.样式修改
---
src/layout/components/Sidebar/index.vue | 46 +++++++++++++++-------------------------------
1 files changed, 15 insertions(+), 31 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 0692dda..47db92b 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,18 +1,12 @@
<template>
- <div :class="{ 'has-logo': showLogo }"
- class="sidebar-container">
- <logo v-if="showLogo"
- :collapse="isCollapse" />
+ <div class="sidebar-container">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu :default-active="activeMenu"
:collapse="isCollapse"
- :background-color="getMenuBackground"
- :text-color="getMenuTextColor"
:unique-opened="true"
:active-text-color="theme"
:collapse-transition="false"
- mode="vertical"
- :class="sideTheme">
+ mode="vertical">
<sidebar-item v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
@@ -23,9 +17,7 @@
</template>
<script setup>
- import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
- import variables from "@/assets/styles/variables.module.scss";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import usePermissionStore from "@/store/modules/permission";
@@ -36,21 +28,8 @@
const permissionStore = usePermissionStore();
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
- const showLogo = computed(() => settingsStore.sidebarLogo);
- const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);
-
- const getMenuBackground = computed(() => "var(--sidebar-bg)");
-
- const getMenuTextColor = computed(() => {
- if (settingsStore.isDark) {
- return "var(--sidebar-text)";
- }
- return sideTheme.value === "theme-dark"
- ? variables.menuText
- : variables.menuLightText;
- });
const activeMenu = computed(() => {
const { meta, path } = route;
@@ -63,12 +42,14 @@
<style lang="scss" scoped>
.sidebar-container {
- background-color: v-bind(getMenuBackground);
+ background-color: var(--sidebar-bg);
border-radius: 22px;
overflow: hidden;
+ transition: background-color 0.3s ease;
.scrollbar-wrapper {
- background-color: v-bind(getMenuBackground);
+ background-color: var(--sidebar-bg);
+ transition: background-color 0.3s ease;
}
.el-menu {
@@ -76,12 +57,15 @@
height: 100%;
width: 100% !important;
border-radius: 22px;
+ background-color: var(--el-menu-bg-color, var(--sidebar-bg)) !important;
+ transition: background-color 0.3s ease;
.el-menu-item,
.el-sub-menu__title {
margin-bottom: 6px;
border-radius: 14px;
- color: v-bind(getMenuTextColor);
+ color: var(--sidebar-text);
+ transition: all 0.3s ease;
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
@@ -90,24 +74,24 @@
}
.el-menu-item {
+ color: var(--sidebar-text);
&.is-active {
- color: v-bind(theme);
+ color: var(--sidebar-text);
background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
font-weight: 600;
}
}
.el-sub-menu__title {
- color: v-bind(getMenuTextColor);
+ color: var(--sidebar-text);
}
:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
- color: v-bind(theme) !important;
+ color: var(--sidebar-text) !important;
font-weight: 600;
background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
border-radius: 14px;
margin: 0 10px 6px !important;
- // width: calc(100% - 20px) !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box;
@@ -130,7 +114,7 @@
:deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
:deep(.el-menu-item.is-active .menu-title),
:deep(.el-menu-item.is-active .svg-icon) {
- color: v-bind(theme) !important;
+ color: var(--sidebar-text) !important;
}
:deep(.el-sub-menu__title:hover),
--
Gitblit v1.9.3