sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: 登录页和首页适配深色模式

Browse Source 
- 将硬编码颜色值替换为Element Plus CSS变量
- 适配Login.vue和Welcome.vue的文字色、背景色、边框色

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
灌糖包子 2026-03-31 23:04:05 +08:00
parent de58ca78be
commit 3656f91370
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Login.vue
View File

@ -195,7 +195,7 @@ async function login() {
.card-right { .card-right {
flex: 1.1; flex: 1.1;
background: #fff; background: var(--el-bg-color);
padding: 52px 48px; padding: 52px 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -204,18 +204,18 @@ async function login() {
.form-title { .form-title {
font-size: 26px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #1d2129; color: var(--el-text-color-primary);
margin: 0 0 8px; margin: 0 0 8px;
} }
.form-subtitle { .form-subtitle {
font-size: 14px; font-size: 14px;
color: #86909c; color: var(--el-text-color-secondary);
margin: 0 0 36px; margin: 0 0 36px;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
font-weight: 600; font-weight: 600;
color: #4e5969; color: var(--el-text-color-regular);
} }
.login-btn { .login-btn {

18
src/views/Welcome.vue
View File

@ -40,12 +40,12 @@ import menus from '../config/menu'
h2 { h2 {
font-size: 26px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #1d2129; color: var(--el-text-color-primary);
margin: 0 0 8px; margin: 0 0 8px;
} }
p { p {
font-size: 14px; font-size: 14px;
color: #86909c; color: var(--el-text-color-secondary);
margin: 0; margin: 0;
} }
} }
@ -57,11 +57,11 @@ import menus from '../config/menu'
} }
.menu-section { .menu-section {
background: #fff; background: var(--el-bg-color);
border-radius: 12px; border-radius: 12px;
padding: 24px; padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0; border: 1px solid var(--el-border-color-lighter);
} }
.section-title { .section-title {
@ -70,10 +70,10 @@ import menus from '../config/menu'
gap: 8px; gap: 8px;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #4e5969; color: var(--el-text-color-regular);
margin-bottom: 16px; margin-bottom: 16px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid var(--el-border-color-light);
.el-icon { .el-icon {
font-size: 17px; font-size: 17px;
@ -93,16 +93,16 @@ import menus from '../config/menu'
justify-content: space-between; justify-content: space-between;
padding: 14px 16px; padding: 14px 16px;
border-radius: 8px; border-radius: 8px;
background: #f7f8fa; background: var(--el-fill-color-light);
text-decoration: none; text-decoration: none;
color: #1d2129; color: var(--el-text-color-primary);
font-size: 14px; font-size: 14px;
transition: all 0.2s; transition: all 0.2s;
border: 1px solid transparent; border: 1px solid transparent;
.item-arrow { .item-arrow {
font-size: 13px; font-size: 13px;
color: #c9cdd4; color: var(--el-text-color-placeholder);
transition: transform 0.2s, color 0.2s; transition: transform 0.2s, color 0.2s;
} }