laobinghu/SportMeetingAdminSys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove duplicate CSS and align sidebar icons

Browse Source 
Remove duplicate CSS rules, add flex display to menu items for proper icon alignment
This commit is contained in:
烧瑚烙饼 2026-03-22 16:41:43 +08:00
parent 4df5c13976
commit 22d6e57d2e
1 changed files with 2 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
app/layouts/default.vue
View File

@ -383,6 +383,8 @@ onMounted(() => {
margin: 4px 8px; margin: 4px 8px;
border-radius: 8px; border-radius: 8px;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex;
align-items: center;
} }
/* ========== 菜单悬停状态 ========== */ /* ========== 菜单悬停状态 ========== */
@ -416,128 +418,6 @@ onMounted(() => {
.sidebar-menu .el-sub-menu .el-menu-item { .sidebar-menu .el-sub-menu .el-menu-item {
padding-left: 20px !important; padding-left: 20px !important;
margin: 2px 8px; 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;
} }
/* ========== 菜单图标 ========== */ /* ========== 菜单图标 ========== */