: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 { 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; } }