refactor: 使用 CSS 变量定制 Element Plus 主题,优化 Welcome 页样式
- 重构 common.less,使用 Element Plus CSS 变量覆盖组件样式: - Menu: --el-menu-bg-color, --el-menu-hover-bg-color 等 - Table: --el-table-header-bg-color, --el-table-row-hover-bg-color 等 - Dialog: --el-dialog-border-radius, --el-dialog-padding-primary - 保留无对应变量的直接样式,添加注释说明 - 优化 Welcome.vue: - 调整 max-width 从 900px 到 1000px - 添加 box-sizing: border-box Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
83731771a1
commit
5b9dc0ccb9
@ -35,24 +35,29 @@ html, body, #app, .layout {
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
// CSS 变量覆盖
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-border-color: transparent;
|
||||
--el-menu-hover-bg-color: var(--el-fill-color);
|
||||
--el-menu-active-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
// 圆角/间距/宽度无对应 CSS 变量,保留直接样式
|
||||
border-radius: var(--el-border-radius-base);
|
||||
margin: 2px 8px;
|
||||
width: calc(100% - 16px);
|
||||
|
||||
&.is-active {
|
||||
// 激活背景色无对应 CSS 变量,保留直接样式
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
font-weight: var(--el-font-weight-primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu__title:hover {
|
||||
// Element Plus 子菜单标题 hover 使用 --el-menu-bg-color 而非 --el-menu-hover-bg-color
|
||||
// 因此无法通过变量覆盖,保留直接样式
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
}
|
||||
@ -91,6 +96,14 @@ html, body, #app, .layout {
|
||||
position: relative;
|
||||
|
||||
.el-table {
|
||||
// CSS 变量覆盖:表头背景/文字色、行悬停色、边框色、正文色
|
||||
--el-table-header-bg-color: var(--el-fill-color-light);
|
||||
--el-table-header-text-color: var(--el-text-color-regular);
|
||||
--el-table-row-hover-bg-color: var(--el-color-primary-light-9);
|
||||
--el-table-border-color: var(--el-border-color-lighter);
|
||||
--el-table-text-color: var(--el-text-color-primary);
|
||||
|
||||
// 圆角/外边框/溢出裁剪无对应 CSS 变量,保留直接样式
|
||||
border-radius: var(--el-border-radius-base);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
@ -98,24 +111,18 @@ html, body, #app, .layout {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: var(--el-font-weight-primary);
|
||||
font-size: var(--el-font-size-small);
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
border-bottom: 1px solid var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
// 行分隔线比表头边框更浅,与 --el-table-border-color 不同,需直接覆盖
|
||||
border-bottom-color: var(--el-fill-color);
|
||||
font-size: var(--el-font-size-small);
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
.el-table__row--striped > td {
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
|
||||
.el-button.is-link {
|
||||
font-size: 16px;
|
||||
padding: 4px 6px;
|
||||
@ -145,9 +152,12 @@ html, body, #app, .layout {
|
||||
|
||||
/* ===== 表单弹窗 ===== */
|
||||
.el-dialog {
|
||||
border-radius: 12px;
|
||||
// CSS 变量覆盖:圆角、清除 element-plus 2.x 新增的根元素 padding
|
||||
--el-dialog-border-radius: 12px;
|
||||
--el-dialog-padding-primary: 0;
|
||||
|
||||
// overflow:hidden 无对应 CSS 变量,保留直接样式(使圆角裁剪生效)
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
|
||||
.el-dialog__header {
|
||||
background: var(--el-fill-color-light);
|
||||
|
||||
@ -31,7 +31,8 @@ import menus from '../config/menu'
|
||||
<style lang="less" scoped>
|
||||
.welcome-page {
|
||||
padding: 32px;
|
||||
max-width: 900px;
|
||||
max-width: 1000px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user