From 22d6e57d2ebd1729efa1ef96cfb55d33dc04513d Mon Sep 17 00:00:00 2001 From: laobinghu Date: Sun, 22 Mar 2026 16:41:43 +0800 Subject: [PATCH] fix: remove duplicate CSS and align sidebar icons Remove duplicate CSS rules, add flex display to menu items for proper icon alignment --- app/layouts/default.vue | 124 +--------------------------------------- 1 file changed, 2 insertions(+), 122 deletions(-) diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 9a9dbd8..bd7246a 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -383,6 +383,8 @@ onMounted(() => { margin: 4px 8px; border-radius: 8px; transition: all 0.2s ease; + display: flex; + align-items: center; } /* ========== 菜单悬停状态 ========== */ @@ -416,128 +418,6 @@ onMounted(() => { .sidebar-menu .el-sub-menu .el-menu-item { padding-left: 20px !important; margin: 2px 8px; - display: flex; - align-items: center; -} - -/* ========== 菜单图标 ========== */ -.sidebar-menu .el-icon { - display: flex; - align-items: center; - justify-content: center; - margin-right: 8px; - font-size: 18px; - flex-shrink: 0; -} - -/* ========== 子菜单箭头 ========== */ -.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow { - margin-left: auto; - display: flex; - align-items: center; -} - -.el-main { - overflow-y: auto; -} - -/* ========== 侧边栏 ========== */ -.sidebar { - background: var(--sidebar-bg); - color: var(--sidebar-text); - transition: width 0.3s ease; - overflow: hidden; - height: 100%; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); -} - -.logo { - height: 60px; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--sidebar-header-bg); - border-bottom: 1px solid var(--sidebar-text); - border-color: color-mix(in srgb, var(--sidebar-text) 10%, transparent); - overflow: hidden; -} - -.logo h2 { - color: var(--sidebar-active-text); - font-size: 18px; - font-weight: 600; - margin: 0; - white-space: nowrap; - letter-spacing: 0.5px; - transition: opacity 0.2s ease; -} - -/* ========== 侧边栏控制按钮 ========== */ -.sidebar-toggle { - display: flex; - justify-content: flex-end; - padding: 8px 12px; - border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent); -} - -.rotate-icon { - transition: transform 0.3s ease; -} - -.rotate-icon:hover { - transform: rotate(180deg); -} - -/* ========== 菜单基础样式 ========== */ -.sidebar-menu { - border-right: none; - background-color: transparent; - width: 100%; -} - -.sidebar-menu .el-menu-item, -.sidebar-menu .el-sub-menu__title { - color: var(--sidebar-text); - height: 48px; - line-height: 48px; - margin: 4px 8px; - border-radius: 8px; - transition: all 0.2s ease; -} - -/* ========== 菜单悬停状态 ========== */ -.sidebar-menu .el-menu-item:hover, -.sidebar-menu .el-sub-menu__title:hover { - background-color: var(--sidebar-hover-bg); - color: var(--sidebar-active-text); -} - -/* ========== 菜单激活状态 ========== */ -.sidebar-menu .el-menu-item.is-active, -.sidebar-menu .el-sub-menu .el-menu-item.is-active { - background-color: var(--sidebar-active-bg); - color: var(--sidebar-active-text); - font-weight: 500; -} - -.sidebar-menu .el-menu-item.is-active::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 24px; - background-color: var(--sidebar-active-text); - border-radius: 0 3px 3px 0; -} - -/* ========== 子菜单样式 ========== */ -.sidebar-menu .el-sub-menu .el-menu-item { - padding-left: 20px !important; - margin: 2px 8px; - display: flex; - align-items: center; } /* ========== 菜单图标 ========== */