DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(采购模块): 实现订单选择组件并优化UI交互

Browse Source 
refactor(采购管理): 替换输入框为选择组件提升用户体验
style(表格样式): 调整表格边框和间距优化视觉效果
This commit is contained in:
砂糖
2025-11-19 17:16:19 +08:00
parent 7d0492a545
commit 90f88bc36c
8 changed files with 251 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -318,7 +318,7 @@ body {
.el-table {
background: $--table-bg;
// border: 1px solid $--border-color-light;
border-radius: 8px;
border-radius: 0px;
box-shadow: 0 6px 16px rgba(20, 30, 50, 0.08);
color: $--color-text-regular;
overflow: hidden;
@@ -336,93 +336,16 @@ body {
color: $--color-text-primary;
font-weight: 600;
border-bottom: 1px solid $--border-color-lighter;
padding: 4px !important; // 紧凑 padding
padding: 0 !important; // 紧凑 padding
height: auto;
font-size: 13px;
}
}
// 表体（奇偶行交替 + hover高亮）
.el-table__body-wrapper {
.el-table__row {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: $--color-background-light;
color: $--color-text-regular;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: $--color-background-light;
color: $--color-text-regular;
}
// hover
&:hover .el-table__cell {
background: rgba($--color-primary, 0.12);
color: #4a4a4a;
}
&:hover .el-table__cell {
background: rgba($--color-primary, 0.12);
color: #4a4a4a;
}
// 当前行
&.current-row .el-table__cell {
background: rgba($--color-primary, 0.35);
color: $--color-text-primary;
font-weight: 600;
}
}
// 单元格（统一边框 + 紧凑 padding）
.el-table__cell {
border-bottom: 1px solid $--border-color-lighter;
color: $--color-text-regular;
padding: 2px 4px !important; // 超紧凑
font-size: 13px;
}
}
// 表尾
.el-table__footer-wrapper {
border-top: 1px solid $--border-color-lighter;
td {
background: linear-gradient(0deg, $--color-background-light, $--color-background);
color: $--color-text-secondary;
padding: 4px !important;
}
}
// 列宽调整线
.el-table__column-resize-proxy {
background-color: $--color-primary;
}
// 展开图标
.el-table__expand-icon {
color: $--color-text-secondary;
&.is-expanded,
&:hover {
color: $--color-primary;
}
}
&__empty-block {
background: lighten($--color-background, 8%);
}
// 适配尺寸类（统一紧凑）
&.el-table--medium .el-table__cell,
&.el-table--mini .el-table__cell {
padding: 0 !important;
}
}
.el-table__fixed-right {
.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed-left {
// 表头（深灰黑 + 纯白文字）
.el-table__fixed-header-wrapper {
th.el-table__cell {
@@ -430,35 +353,10 @@ body {
color: $--color-text-primary;
font-weight: 600;
border-bottom: 1px solid $--border-color-lighter;
padding: 4px !important; // 紧凑 padding
padding: 0 !important; // 紧凑 padding
font-size: 13px;
}
}
// 表体（奇偶行交替 + hover高亮）
.el-table__fixed-body-wrapper {
.el-table__row {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: $--color-background-light;
color: $--color-text-regular;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: $--color-background-light;
color: $--color-text-regular;
}
// 当前行
&.current-row .el-table__cell {
background: rgba($--color-primary, 0.35);
color: $--color-text-primary;
font-weight: 600;
}
}
}
}
// ---------------------- 3.2 日期范围选择器 ----------------------