Files
tms-erp-web/src/styles/element-ui.scss
赵忠林 5aefa23f50 fix(system): 修复部门管理操作列错位问题并统一客商档案弹窗风格
- 修复/system/dept页面操作列竖排错位问题,通过提升CSS选择器特异性并强制inline-flex布局
- 在department页面添加scoped样式,双保险保证操作列横排显示及间距正确
- 将客商档案/vehicle/customer-archive中的表单分组和弹窗内容统一改为section-card组件风格
- 清理废弃旧样式类,提升界面一致性及可维护性
- 调整相关弹窗中卡片内容结构,消除双层灰色背景,使弹窗风格与/business/project-apply一致
- 对评分、联系人、收款信息、发票信息、客商材料、变更记录和证明材料等模块使用全局section-card组件包裹
- 优化样式细节,确保按钮组进入卡头右侧,保证操作体验一致
- 验证构建成功及热更新生效,提醒用户发布需清除旧CSS缓存
2026-08-07 12:47:19 +08:00

652 lines
16 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
--el-color-primary: #409eff;
--el-color-primary-light-1: #53a8ff;
--el-color-primary-light-2: #66b1ff;
--el-color-primary-light-3: #79bbff;
--el-color-primary-light-4: #8cc5ff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-6: #b3d8ff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;
}
.el-card.is-always-shadow {
box-shadow: none;
border: none !important;
}
.el-menu {
border-right: none;
}
.el-message__icon,
.el-message__content {
display: inline-block;
}
.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
height: auto;
overflow: hidden;
}
.el-dialog__wrapper {
z-index: 2048;
}
.el-col {
margin-bottom: 8px;
}
.el-main {
padding: 0 !important;
}
.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
background-color: transparent;
}
.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
background-color: transparent !important;
}
.el-collapse-item__header {
height: auto;
overflow: hidden;
}
.el-button.is-text:not(.is-disabled):active {
background-color: transparent;
}
.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover {
background-color: transparent;
}
.el-dropdown {
display: inline-block;
line-height: inherit;
.el-button.is-text:not(.is-disabled):focus-visible {
outline: none;
}
}
.avue-icon i,
.avue-icon svg {
line-height: 20px;
}
.avue--detail .el-form-item {
background-color: #fafafa;
}
.basic-container__card .avue-crud > .el-card,
.basic-container__card .avue-crud__pagination.el-card {
border: none;
background: transparent;
box-shadow: none;
}
.basic-container__card .avue-crud__search.el-card {
border: none;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.basic-container__card .avue-crud > .el-card > .el-card__body,
.basic-container__card .avue-crud__pagination.el-card > .el-card__body {
padding: 0;
}
.basic-container__card .avue-crud__search.el-card > .el-card__body {
padding: 18px 18px 8px;
}
.basic-container__card .avue-crud__header {
background-color: transparent;
}
.avue-crud__header,
.avue-crud .el-table th .cell,
.avue-crud .el-table td .cell {
white-space: nowrap;
}
.avue-crud__search .el-form-item,
.avue-crud__search .el-form-item--default.el-form-item,
.avue-crud__search .el-form-item--small.el-form-item,
.avue-crud__search .el-form-item--large.el-form-item,
.avue-crud__search .el-form-item--medium.el-form-item {
margin-bottom: 1px;
}
.avue-crud__search .el-form-item__label {
min-width: 160px;
white-space: nowrap;
}
.avue-crud__search.el-card {
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.avue-crud__search.el-card > .el-card__body {
padding: 12px 12px 4px;
}
.avue-crud__search {
margin-top: 4px;
margin-bottom: 8px;
}
.avue-crud__search .avue-form__menu,
.avue-crud__search .avue-form__menu--right {
display: flex;
flex: 0 0 100%;
justify-content: flex-end;
//max-width: 100%;
width: 100%;
}
.el-dialog .el-form-item__label {
justify-content: flex-end;
text-align: right;
white-space: nowrap;
}
.el-dialog .el-col {
margin-bottom: 0;
}
.el-dialog .el-form-item,
.el-dialog .el-form-item--default.el-form-item,
.el-dialog .el-form-item--small.el-form-item,
.el-dialog .el-form-item--large.el-form-item,
.el-dialog .el-form-item--medium.el-form-item {
margin-bottom: 16px;
}
.el-dialog__title,
.dialog-section-title {
display: inline-flex;
align-items: center;
gap: 8px;
}
.el-dialog__title:not(:empty)::before,
.dialog-section-title::before {
content: '';
flex: none;
width: 4px;
height: 16px;
border-radius: 2px;
background-color: var(--el-color-primary);
}
.avue-crud__dialog .avue-dialog__footer {
display: flex;
align-items: center;
justify-content: flex-end;
}
.avue-crud__dialog .avue-dialog__footer--left {
justify-content: flex-start;
}
.avue-crud__dialog .avue-dialog__footer--center {
justify-content: center;
}
// =====================================================================
// 弹窗标准(与 business/project-apply 弹窗视觉一致)
// 灰底弹窗体 + 分组白卡标题融入卡头4px 主色竖条 + 8px 间距)
// =====================================================================
// 1) 所有弹窗内容区统一灰底 + 16px 内边距(与 project-apply 一致,避免内容贴边)
.el-dialog__body {
background-color: #f5f6fa;
padding: 16px;
}
// 2) Avue 默认弹窗表单自动包成白卡,无需逐页改 option 即统一标准
.el-dialog .avue-form {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
padding: 16px;
}
// 3) Avue 弹窗内分组option.group渲染为白卡标题在卡内
.el-dialog .avue-form__group {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
margin-bottom: 16px;
overflow: hidden;
.avue-group__header {
border-bottom: none;
padding: 14px 16px 4px;
font-weight: 500;
color: #303133;
}
.avue-group__item {
padding: 14px 16px 4px;
}
}
// 4) 弹窗内表单项默认上下间距 16px覆盖默认 18px / 22px
.el-dialog .el-form-item {
margin-bottom: 16px;
}
// 5) 通用分组白卡组件(<section-card>):标题融入卡头
.section-card {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
margin-bottom: 16px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
&__header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px 4px;
font-weight: 500;
color: #303133;
}
&__bar {
flex: none;
width: 4px;
height: 16px;
border-radius: 2px;
background-color: var(--el-color-primary);
}
&__title {
flex: 1;
min-width: 0;
}
&__extra {
margin-left: auto;
flex: none;
}
&__body {
padding: 14px 16px 4px;
}
}
// 6) 弹窗内两列表单栅格工具类(与 project-apply 一致)
.form-grid-2 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 72px;
row-gap: 0;
}
.avue-crud__dialog .avue-dialog__footer > .el-button {
margin-left: 12px;
}
.avue-crud__dialog .avue-dialog__footer > .el-button:last-of-type {
order: 1;
margin-left: 0;
}
.avue-crud__dialog .avue-dialog__footer > .el-button.el-button--primary {
order: 2;
}
// 统一 avue-crud 弹窗内部可滚动高度:内容超出时在窗内滚动,避免弹窗被整体撑爆
// @smallwei/avue 3.9.2 无 dialogHeight 属性,故用全局样式统一所有 CRUD 弹窗)
.avue-crud__dialog .el-dialog__body {
max-height: calc(100vh - 200px);
overflow-y: auto;
//background: #f5f6fa;
}
// 统一表格线条颜色
.el-table {
--el-table-border-color: #eff1f7;
--el-table-border: 1px solid var(--el-table-border-color);
}
.el-table,
.el-table th.el-table__cell,
.el-table td.el-table__cell {
border-color: #eff1f7;
}
// 统一 avue-crud 表头背景色
.avue-crud .el-table th.el-table__cell,
.avue-crud .el-table__header-wrapper tr th.el-table-fixed-column--left,
.avue-crud .el-table__header-wrapper tr th.el-table-fixed-column--right {
background-color: #fafafa;
}
// 统一 avue-crud 偶数行背景色
.avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table__cell,
.avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table-fixed-column--left,
.avue-crud
.el-table__body-wrapper
tr.el-table__row:nth-child(even)
td.el-table-fixed-column--right {
background-color: #fafafa;
}
// 统一 avue-crud 行 hover 背景色
.avue-crud .el-table__body-wrapper tr.hover-row td.el-table__cell,
.avue-crud .el-table__body-wrapper tr.hover-row td.el-table-fixed-column--left,
.avue-crud .el-table__body-wrapper tr.hover-row td.el-table-fixed-column--right {
background-color: var(--el-table-row-hover-bg-color);
}
.avue-crud__header {
margin-top: 12px;
}
// 统一 CRUD 顶部新增按钮为蓝底白字,保留其他工具按钮的描边样式
.avue-crud__header .el-button--primary.is-plain:has(.el-icon-plus) {
--el-button-bg-color: #409eff;
--el-button-border-color: #409eff;
--el-button-hover-bg-color: #66b1ff;
--el-button-hover-border-color: #66b1ff;
--el-button-active-bg-color: #337ecc;
--el-button-active-border-color: #337ecc;
--el-button-text-color: #fff;
--el-button-hover-text-color: #fff;
--el-button-active-text-color: #fff;
}
// 统一分页为按钮样式并靠右展示
.avue-crud__pagination,
.empty-pagination {
display: flex;
justify-content: flex-end;
width: 100%;
box-sizing: border-box;
padding: 16px 0 !important;
}
.avue-crud__pagination .el-pagination,
.empty-pagination .el-pagination,
.el-pagination {
--el-pagination-button-width: 36px;
--el-pagination-button-height: 32px;
--el-pagination-border-radius: 4px;
--el-pagination-button-bg-color: #fff;
--el-pagination-bg-color: #fff;
--el-pagination-hover-color: var(--el-color-primary);
justify-content: flex-end;
width: 100%;
gap: 6px;
color: #303133;
font-size: 14px;
font-weight: 400;
}
.el-pagination__total {
display: inline-flex !important;
align-items: center;
margin-right: 6px;
}
.el-pagination__sizes {
display: inline-flex !important;
margin: 0 6px 0 0;
align-items: center;
}
.el-pagination__sizes .el-select {
width: 112px;
}
.el-pagination__sizes .el-select__wrapper {
min-height: 32px;
border-radius: 4px;
box-shadow: 0 0 0 1px #dcdfe6 inset;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li,
.erp-pagination-button {
min-width: 36px;
height: 32px;
margin: 0 !important;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
color: #303133;
line-height: 30px;
font-size: 14px;
font-weight: 400;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
// 上一页 / 下一页 箭头按钮与页码按钮等宽,不再单独加宽
.el-pagination .el-pager {
gap: 6px;
margin: 0;
padding: 0;
}
// 上一页 / 下一页 改为原生箭头图标:不再隐藏原生图标,也不再注入「上一页 / 下一页」文字
.el-pagination.is-background .el-pager li.is-active,
.el-pagination .el-pager li.is-active {
border-color: var(--el-color-primary);
background-color: var(--el-color-primary);
color: #fff;
font-weight: 500;
}
.el-pagination.is-background .btn-prev:hover,
.el-pagination.is-background .btn-next:hover,
.el-pagination.is-background .el-pager li:hover,
.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover,
.el-pagination .el-pager li:hover,
.erp-pagination-button:hover {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
.el-pagination.is-background .el-pager li.is-active:hover,
.el-pagination .el-pager li.is-active:hover,
.erp-pagination-jump:hover {
color: #fff;
}
.el-pagination .btn-prev:disabled,
.el-pagination .btn-prev.is-disabled,
.el-pagination .btn-next:disabled,
.el-pagination .btn-next.is-disabled,
.erp-pagination-button:disabled {
border-color: #ebeef5;
background: #fff;
color: #c0c4cc;
box-shadow: none;
cursor: not-allowed;
}
.el-pagination__jump {
margin-left: 6px;
color: #606266;
gap: 6px;
}
.el-pagination__goto {
margin-right: 0;
font-size: 0;
}
.el-pagination__goto::before {
content: '';
font-size: 14px;
}
.el-pagination__editor.el-input {
width: 48px;
}
.el-pagination__editor .el-input__wrapper {
height: 32px;
padding: 0 6px;
border-radius: 4px;
box-shadow: 0 0 0 1px #dcdfe6 inset;
}
.el-pagination__editor .el-input__inner {
height: 30px;
line-height: 30px;
}
.el-pagination__classifier {
margin-left: 0;
}
.erp-pagination-button {
cursor: pointer;
}
.erp-pagination-jump {
min-width: 60px;
border-color: var(--el-color-primary);
background: var(--el-color-primary);
color: #fff;
}
// 全站统一:分页展示「上一页 / 下一页」原生箭头图标(不再隐藏;首页 / 尾页仍不注入)
// 全站统一:隐藏操作栏按钮前的图标
.avue-crud__menu .el-button--text i,
.avue-crud__menu .el-button i {
display: none !important;
}
// 全站统一Avue 操作列文字链接保持间距并支持自动换行
// 注意Avue 自带 .avue-crud .avue-crud__menu{display:block}(特异性同为 0,2,0
// 此处重复类名升至 0,3,0 并强制 display:inline-flex !important彻底压过 Avue 内置样式,
// 避免 dev 模式下 CSS 注入顺序导致 .avue-crud__menu 退化成 block 而让操作项竖排错位。
.avue-crud .avue-crud__menu.avue-crud__menu {
display: inline-flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: start;
width: 100% !important;
text-align: left;
}
// 全站统一:手写表格操作列中的文字链接保持间距并支持自动换行
.el-table .el-table__body .cell:not(.avue-crud__menu):has(> .el-link) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
// 全站统一:表格操作列文字链接统一为主色(蓝色)
// 覆盖 Avue #menu 槽位与手写表格操作列中 el-link 的 warning / success / danger 等类型,
// 同时统一 hover / active / disabled 态,保证全站操作列风格一致。
// 选择器同时覆盖 Avue 行菜单(.avue-crud__menu与任意含 el-link 的表格体单元格(手写操作列)。
.avue-crud__menu .el-link,
.el-table .el-table__body .cell:has(.el-link) .el-link {
// 覆盖 Element Plus el-link 默认的 font-weight: var(--el-font-weight-primary)500 中等粗),
// 操作列文字统一为常规字重,避免「查看/编辑/删除」等链接显得加粗。
font-weight: normal;
--el-link-text-color: var(--el-color-primary);
--el-link-hover-text-color: var(--el-color-primary-light-3);
--el-link-active-text-color: var(--el-color-primary-dark-2);
--el-link-disabled-text-color: var(--el-color-primary-light-5);
}
// 全站统一:去除操作列 el-link 默认 margin避免与 8px gap 叠加导致文字间距过宽
.avue-crud .avue-crud__menu .el-link,
.el-table .el-table__body .cell:not(.avue-crud__menu):has(> .el-link) .el-link {
margin: 0;
}
.avue-crud__menu > .el-button,
.avue-crud__menu > .el-dropdown {
margin: 0;
}
.avue-crud__menu .el-button {
padding-left: 4px;
padding-right: 4px;
font-weight: normal;
}
// 全站统一Element Plus 全局开启 show-overflow-tooltip 后,
// 操作列单元格会被加上 .el-tooltip 类并写死宽度,导致内部 el-link 换行后被裁切。
// 此处豁免操作列单元格:让 Avue 行菜单与手写表格操作列保持原有 flex 自动换行,不被固定宽度裁切。
.el-table .cell.avue-crud__menu,
.el-table .el-table__body .cell.el-tooltip:has(> .el-link) {
width: auto !important;
overflow: visible;
text-overflow: clip;
}
// 全站统一Avue 内置行操作按钮(查看 / 编辑 / 删除 / 复制等)视觉对齐为 el-link 链接样式。
// 选择器仅命中表格行操作列 .avue-crud__menu 内的 is-text 按钮,不误伤顶部工具栏(.avue-crud__header
// 与弹窗按钮(.avue-crud__dialog__menu。事件rowView/rowEdit/rowDel与权限permission 指令)
// 由 Avue 自带,此处只改外观,零功能影响。
.avue-crud__menu > .el-button.is-text {
height: auto;
padding: 0;
border: none;
background: transparent;
color: var(--el-color-primary);
font-weight: normal;
&:hover,
&:focus,
&:active {
background: transparent;
color: var(--el-color-primary-light-3);
text-decoration: underline;
}
&.is-disabled,
&.is-disabled:hover {
background: transparent;
color: var(--el-color-primary-light-5);
text-decoration: none;
}
}
@media (max-width: 768px) {
.avue-crud__pagination .el-pagination,
.empty-pagination .el-pagination,
.el-pagination {
flex-wrap: wrap;
gap: 6px;
}
}