调整部分前端布局和后端增删改逻辑
This commit is contained in:
焦龙言
@@ -86,15 +86,16 @@
|
||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9 !important;
|
||||
color: #515a6e;
|
||||
height: 40px !important;
|
||||
background-color: var(--el-fill-color-light, #f5f7fa) !important;
|
||||
color: var(--el-text-color-regular, #606266);
|
||||
height: 46px !important;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*="el-icon-"] + span {
|
||||
margin-left: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -306,3 +307,177 @@
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background-color: var(--splitpanes-default-bg) !important;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 全局工作区与现代化容器体系
|
||||
// ==========================================
|
||||
.app-container {
|
||||
min-height: 100%;
|
||||
padding: 18px 20px 24px;
|
||||
background: var(--el-bg-color-page, #f5f7fb);
|
||||
color: var(--el-text-color-primary, #303133);
|
||||
box-sizing: border-box;
|
||||
|
||||
// 顶部内联检索卡片 (排除弹窗内部表单)
|
||||
& > .el-form--inline,
|
||||
.splitpanes .el-form--inline {
|
||||
margin: 0 0 14px;
|
||||
padding: 14px 16px 2px;
|
||||
border: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
border-radius: 12px;
|
||||
background: var(--el-bg-color, #fff);
|
||||
box-shadow: var(--el-box-shadow-lighter, 0 3px 14px rgba(31, 55, 88, 0.04));
|
||||
transition: box-shadow 0.25s ease, border-color 0.25s ease;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 12px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-input-number,
|
||||
.el-date-editor {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
// 统一操作工具栏
|
||||
& > .el-row.mb8,
|
||||
.splitpanes .el-row.mb8 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 38px;
|
||||
margin: 0 0 12px !important;
|
||||
|
||||
.el-col {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 统一现代化数据表格卡片容器
|
||||
& > .el-table,
|
||||
.splitpanes .el-table {
|
||||
width: 100%;
|
||||
border: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: var(--el-bg-color, #fff);
|
||||
box-shadow: var(--el-box-shadow-lighter, 0 3px 14px rgba(31, 55, 88, 0.04));
|
||||
|
||||
.el-table__header th {
|
||||
height: 46px !important;
|
||||
background: var(--el-fill-color-light, #f5f7fa) !important;
|
||||
color: var(--el-text-color-regular, #606266) !important;
|
||||
font-weight: 650;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
}
|
||||
|
||||
.el-table__body td {
|
||||
height: 50px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter, #f0f2f5);
|
||||
}
|
||||
|
||||
.el-table__body tr:nth-child(even) > td {
|
||||
background: var(--el-fill-color-lighter, #fafafa);
|
||||
}
|
||||
|
||||
.el-table__body tr:hover > td {
|
||||
background-color: var(--el-fill-color-light, #f5f7fa) !important;
|
||||
}
|
||||
|
||||
.el-table__inner-wrapper::before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 14px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗现代化规范
|
||||
.el-dialog {
|
||||
border-radius: 14px !important;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
box-shadow: 0 20px 60px rgba(15, 34, 58, 0.16) !important;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 16px 22px 14px;
|
||||
margin-right: 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
color: var(--el-text-color-primary, #303133);
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 22px 16px;
|
||||
border-top: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片现代化规范
|
||||
.el-card {
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid var(--el-border-color-lighter, #e4e7ed) !important;
|
||||
box-shadow: var(--el-box-shadow-lighter, 0 3px 14px rgba(31, 55, 88, 0.04)) !important;
|
||||
|
||||
.el-card__header {
|
||||
padding: 16px 20px !important;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter, #e4e7ed) !important;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 18px 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 分割面板与树结构卡片化
|
||||
.splitpanes.default-theme {
|
||||
.splitpanes__pane {
|
||||
background-color: var(--el-bg-color, #fff) !important;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
padding: 16px;
|
||||
box-shadow: var(--el-box-shadow-lighter, 0 3px 14px rgba(31, 55, 88, 0.04));
|
||||
}
|
||||
|
||||
.splitpanes__splitter {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
width: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框与按钮微调
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper {
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
border-right: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
box-shadow: 2px 0 10px 0 rgba(15, 34, 58, 0.05);
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@@ -68,6 +68,24 @@
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
font-weight: 600;
|
||||
background-color: rgba(0, 133, 150, 0.12) !important;
|
||||
color: var(--current-color, #008596) !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item, .menu-title {
|
||||
@@ -92,9 +110,18 @@
|
||||
color: vars.$base-menu-color-active !important;
|
||||
}
|
||||
|
||||
& .theme-dark .el-menu:not(.el-menu--collapse) .el-menu-item.is-active {
|
||||
background-color: rgba(0, 133, 150, 0.26) !important;
|
||||
color: #38bdf8 !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
@@ -108,6 +135,11 @@
|
||||
&:hover {
|
||||
background-color: vars.$base-sub-menu-hover !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba(0, 133, 150, 0.28) !important;
|
||||
color: #38bdf8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user