julian/win-cleaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

change ui color

Browse Source
This commit is contained in:
Julian Freeman
2026-03-03 11:04:26 -04:00
parent 588f7740a1
commit 39e36fb4e1
1 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/App.vue
View File

@@ -516,74 +516,88 @@ body {
height: 100%; height: 100%;
} }
/* --- 侧边栏优化 --- */ /* --- 侧边栏优化 (清爽浅蓝重构) --- */
.sidebar { .sidebar {
width: 250px; width: 240px;
background-color: var(--sidebar-bg); background-color: #F8FAFD;
border-right: 1px solid var(--border-color); border-right: 1px solid #E9EFF6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 32px 0; padding: 40px 0 32px;
z-index: 10; z-index: 10;
} }
.sidebar-header { padding: 0 28px 36px; } .sidebar-header { padding: 0 28px 36px; }
.brand { font-size: 20px; font-weight: 700; color: var(--text-main); letter-spacing: -0.3px; } .brand { font-size: 20px; font-weight: 700; color: var(--text-main); letter-spacing: -0.3px; }
.sidebar-nav { flex: 1; } .sidebar-nav { flex: 1; }
.nav-item, .nav-item-header { .nav-item, .nav-item-header {
padding: 10px 24px; padding: 12px 20px;
margin: 2px 12px; margin: 4px 12px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
color: #424245; color: #4A5568;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-radius: 8px; border-radius: 12px;
} }
.nav-item:hover, .nav-item-header:hover { .nav-item:hover, .nav-item-header:hover {
background-color: #F5F5F7; background-color: #EDF2F7;
color: #2D3748;
} }
.nav-item.active { .nav-item.active {
background-color: #F0F7FF; background-color: #EBF4FF;
color: var(--primary-color); color: #04448a;
font-weight: 600; font-weight: 600;
} }
.icon { margin-right: 10px; font-size: 16px; width: 20px; text-align: center; } .icon { margin-right: 12px; font-size: 18px; width: 24px; text-align: center; }
.arrow { .arrow {
margin-left: auto; margin-left: auto;
transition: transform 0.3s; transition: transform 0.3s;
font-size: 10px; font-size: 10px;
color: #C1C1C1; color: #A0AEC0;
} }
.arrow.open { transform: rotate(180deg); } .arrow.open { transform: rotate(180deg); color: #4A5568; }
.nav-sub-items { margin-bottom: 8px; } .nav-sub-items { margin-bottom: 8px; }
.nav-sub-item { .nav-sub-item {
padding: 8px 24px 8px 54px; padding: 10px 20px 10px 52px;
margin: 1px 12px; margin: 2px 12px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: #6E6E73; color: #718096;
transition: all 0.2s; transition: all 0.2s;
border-radius: 6px; border-radius: 10px;
}
.nav-sub-item:hover { background-color: #F5F5F7; color: var(--text-main); }
.nav-sub-item.active {
color: var(--primary-color);
font-weight: 600;
background-color: #F0F7FF;
} }
.sidebar-footer { padding: 16px 28px; border-top: 1px solid var(--border-color); } .nav-sub-item:hover {
.version { font-size: 11px; color: var(--text-sec); font-weight: 500; } background-color: #EDF2F7;
color: #2D3748;
}
.nav-sub-item.active {
color: #007AFF;
font-weight: 600;
background-color: #EBF4FF;
}
.sidebar-footer {
padding: 20px 24px;
border-top: 1px solid #E9EFF6;
}
.version {
font-size: 11px;
color: #A0AEC0;
font-weight: 600;
letter-spacing: 0.5px;
}
/* --- 内容区 --- */ /* --- 内容区 --- */
.content { .content {