refactor(layout): 优化后台布局样式与主题适配
- 优化顶部工具栏、通知入口和页签操作按钮的图标颜色继承 - 调整混合布局菜单激活态与暗黑模式下的视觉表现 - 重构设置面板分组与底部操作区,精简无效配置文案 - 统一列表页公共布局样式,优化表格和页面容器边界 - 优化控制台卡片、图表和暗黑模式背景表现 - 移除布局中重复的页签高度覆盖和无用 mixin
This commit is contained in:
@@ -149,7 +149,7 @@
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: var(--border-color);
|
||||
--el-table-border-color: var(--el-border-color-extra-light);
|
||||
--el-table-header-bg-color: #f8fafc;
|
||||
--el-table-row-hover-bg-color: #f8fbff;
|
||||
--el-table-current-row-bg-color: #eef5ff;
|
||||
@@ -164,27 +164,31 @@
|
||||
}
|
||||
|
||||
&.el-table--border::after {
|
||||
display: block;
|
||||
background-color: var(--border-color);
|
||||
width: 1px;
|
||||
background-color: var(--el-table-border-color);
|
||||
}
|
||||
|
||||
.el-table__inner-wrapper::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-table__inner-wrapper::after {
|
||||
background-color: var(--el-table-border-color);
|
||||
}
|
||||
|
||||
.el-table__header th {
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-regular);
|
||||
background: var(--el-table-header-bg-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--el-table-border-color);
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #eef1f6;
|
||||
border-bottom: 1px solid var(--el-table-border-color);
|
||||
}
|
||||
|
||||
.cell {
|
||||
@@ -192,7 +196,12 @@
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
box-shadow: -1px 0 0 var(--border-color);
|
||||
box-shadow: -1px 0 0 var(--el-table-border-color);
|
||||
}
|
||||
|
||||
.el-table-fixed-column--left.is-last-column::before,
|
||||
.el-table-fixed-column--right.is-first-column::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-empty {
|
||||
|
||||
@@ -4,10 +4,6 @@
|
||||
|
||||
@use "variables" as *;
|
||||
|
||||
@mixin app-main-height-with-tags {
|
||||
height: calc(100vh - $navbar-height - $tags-view-height) !important;
|
||||
}
|
||||
|
||||
@mixin app-main-height {
|
||||
height: calc(100vh - $navbar-height);
|
||||
}
|
||||
|
||||
@@ -68,26 +68,43 @@
|
||||
}
|
||||
|
||||
.page-table-wrapper {
|
||||
--page-table-border-color: var(--el-border-color-extra-light);
|
||||
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--content-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--page-table-border-color);
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
.page-table {
|
||||
--el-table-border-color: var(--page-table-border-color);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&.el-table--border {
|
||||
border: 0;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.el-table__inner-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&.el-table--border::before,
|
||||
&.el-table--border::after,
|
||||
&.el-table--border .el-table__inner-wrapper::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__border-left-patch,
|
||||
.el-table__border-right-patch,
|
||||
.el-table__border-bottom-patch {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-pagination {
|
||||
|
||||
@@ -30,7 +30,7 @@ html.sidebar-color-blue {
|
||||
--menu-background: #304156;
|
||||
--menu-text: #bfcbd9;
|
||||
--menu-active-text: #ffffff;
|
||||
--menu-active-bg: rgb(22 93 255 / 18%);
|
||||
--menu-active-bg: rgb(64 158 255 / 22%);
|
||||
--menu-hover: rgb(255 255 255 / 7%);
|
||||
--menu-border: rgb(15 23 42 / 22%);
|
||||
--sidebar-logo-background: #2d3748;
|
||||
|
||||
Reference in New Issue
Block a user