: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: 0 !important; } .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.04); } .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: 8px; } .avue-crud__search .el-form-item__label { min-width: 88px; //white-space: nowrap; } // 全宽兜底:搜索表单内树形下拉 / 级联选择器占满(覆盖默认搜索项宽度) // 注意:搜索 form 内的 el-tree-select、el-cascader 均走该规则;新增/编辑表单用 span=6 的栅格自然分开,不受影响。 .avue-crud__search .el-form-item__content > .el-tree-select, .avue-crud__search .el-form-item__content > .el-cascader { width: 100%; max-width: 100%; } .avue-crud__search.el-card { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .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: 20px; } /* 全站弹窗:底部操作栏浮动效果(参照 business/project-apply) * - body 超高时内部独立滚动,footer(取消/保存等按钮)始终固定在底部可见 * - footer 加视觉底栏:白底 + 上边框 + 轻阴影,与主内容区分 */ .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; } .el-dialog__footer { margin: 0; padding: 12px 20px; background: #fff; border-top: 1px solid var(--el-border-color-lighter, #ebeef5); //box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); border-radius: 0 0 var(--el-dialog-border-radius, 4px); .el-button + .el-button { margin-left: 12px; } } .el-dialog__title, .dialog-section-title { display: inline-flex; align-items: center; gap: 8px; } // 全站弹窗标题统一带 4px 主色竖条(与 .dialog-section-title 保持一致) // :not(:empty) 避免无标题弹窗出现孤立竖条 .el-dialog__title:not(:empty)::before { content: ''; flex: none; width: 4px; height: 16px; border-radius: 2px; background-color: var(--el-color-primary); } .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 { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; background: #fff; } .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) 所有弹窗内容区统一灰底 + 8px 内边距(全站统一) .el-dialog__body { background-color: #f2f2f2; padding: 12px !important; } // Avue CRUD 弹窗:表单白卡 + 底部按钮区视觉合一(按钮在卡片内部) .el-dialog .avue-form { background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 8px 16px 4px; // 加大内边距,与 customer-archive 对齐 margin-bottom: 0; // 与下方 footer 无缝衔接 } .avue-crud__dialog .avue-dialog__footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; background: #fff; border-radius: 0 0 6px 6px; // 接续白卡底部圆角 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); // 与白卡阴影一致 padding: 16px 24px; // 与白卡 padding 对齐 margin-top: 0; // 消除与上方白卡的灰底间隙 } // 3c) common-route 编辑弹窗:输入框宽度与 customer-archive 对齐(固定 250px + label 固定宽) .avue-dialog--common-route { .el-form-item__label { flex: 0 0 calc(6em + 24px) !important; width: calc(6em + 24px) !important; white-space: normal !important; word-break: break-all; overflow-wrap: anywhere; line-height: 18px; } .el-form-item { align-items: center; } .el-form-item__content > .el-input, .el-form-item__content > .el-select, .el-form-item__content > .el-cascader, .el-form-item__content > .el-input-number, .el-form-item__content > .el-date-editor { width: 250px; max-width: 100%; } } // 3d) 临时额度管理弹窗:label 固定 6 个汉字宽度,超长自动换行 .temporary-credit-limit-dialog { .el-form-item__label { flex: 0 0 calc(6em + 24px) !important; width: calc(6em + 24px) !important; white-space: normal !important; word-break: break-all; overflow-wrap: anywhere; line-height: 18px; } .el-form-item { align-items: center; } } // 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: 16px 24px 4px; font-weight: 500; color: #303133; } .avue-group__item { padding: 16px 24px 4px; } } // 3b) Avue 弹窗内自定义标题分组(formslot + dialog-section-title)渲染为白卡 .el-dialog .avue-form__group:has(.dialog-section-title) { background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); //padding: 16px; margin-bottom: 16px; .avue-form__group--title { padding: 0 !important; margin-bottom: 12px; } .avue-form__row { padding: 0 !important; } } // 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px,与 customer-archive 对齐) .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.06); margin-bottom: 12px; padding-bottom: 8px; 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; } } // 5b) 独立表单页顶部页面标题(与 vehicle/customer-archive 编辑弹窗一致) // 全站统一:18px / 600 / #303133,底部 20px 间距,4px 主色竖条 + 8px 间距 .archive-page-form__title { display: flex; align-items: center; margin-bottom: 20px; color: #303133; font-size: 18px; font-weight: 600; &::before { flex: none; //width: 4px; height: 16px; //margin-right: 8px; border-radius: 2px; //background-color: var(--el-color-primary); content: ''; } } // 6) 弹窗内两列表单栅格工具类(与 project-apply 一致) .form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 0; } // 7) 卡片式弹窗表单标准(与 vehicle/customer-archive 编辑弹窗一致) // 在 el-dialog 上添加 class="dialog-form--carded" 即可生效 .dialog-form--carded { .el-form-item { align-items: center; margin-bottom: 14px; } .el-form-item__label { flex: 0 0 calc(6em + 24px) !important; width: calc(6em + 24px) !important; white-space: normal !important; word-break: break-all; overflow-wrap: anywhere; line-height: 18px; } .el-form-item__content > .el-input, .el-form-item__content > .el-select, .el-form-item__content > .el-cascader, .el-form-item__content > .el-tree-select, .el-form-item__content > .el-input-number, .el-form-item__content > .el-date-editor, .el-form-item__content > .el-textarea { width: 250px; max-width: 100%; } .el-form-item__content > .el-radio-group, .el-form-item__content > .el-checkbox-group { width: auto; } } .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; } // 发货模板新增/编辑弹窗:参照 vehicle/customer-archive 的视觉 // 弹窗体接近全屏(上下各留 20px 边距),内容较少时也保持高大、视觉居中; // 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限, // 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见 .shipping-template-dialog.el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; height: calc(100vh - 40px); max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; } .shipping-template-dialog .el-dialog__header { flex: none; } .shipping-template-dialog .el-dialog__body { flex: 1 1 auto; min-height: 0; max-height: none !important; display: flex; flex-direction: column; overflow-y: auto; } .shipping-template-dialog .avue-dialog__footer { position: sticky; bottom: 0; flex: none; background: #fff; } // 发货模板 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行 .shipping-template-dialog .el-form-item__label { white-space: normal; line-height: 20px; } // 运输计划 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行 .transport-plan-dialog .el-form-item__label { white-space: normal; line-height: 20px; } // 运单管理 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行 .waybill-manage-dialog .el-form-item__label { white-space: normal; line-height: 20px; } // 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体接近全屏(上下各留 20px 边距); // 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限, // 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见 .transport-plan-dialog.el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; height: calc(100vh - 40px); max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; } .transport-plan-dialog .el-dialog__header { flex: none; } .transport-plan-dialog .el-dialog__body { flex: 1 1 auto; min-height: 0; max-height: none !important; display: flex; flex-direction: column; overflow-y: auto; } .transport-plan-dialog .avue-dialog__footer { position: sticky; bottom: 0; flex: none; background: #fff; } // 运单管理新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体接近全屏(上下各留 20px 边距); // 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限, // 并解开 .avue-crud__dialog .el-dialog__body 的 max-height: calc(100vh - 200px) 限制; // 底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见 // (额外用 margin-top: 0 !important 抵消全局 .avue-crud__dialog .avue-dialog__footer 的 -30px 上移) .waybill-manage-dialog.el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; height: calc(100vh - 40px); max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; } .waybill-manage-dialog .el-dialog__header { flex: none; } .waybill-manage-dialog .el-dialog__body { flex: 1 1 auto; min-height: 0; max-height: none !important; display: flex; flex-direction: column; overflow-y: auto; } .waybill-manage-dialog .avue-dialog__footer { position: sticky; bottom: 0; flex: none; margin-top: 0 !important; background: #fff; } // 合同管理新增/编辑弹窗(business-crud-page 封装 → avue-crud,弹窗带 avue-crud__dialog class) // 复刻 waybill-manage 方案:接近全屏、压过库内置 .avue-dialog 的 calc(100% - 200px), // 并解开 body 的 200px 上限、抵消全局 footer 的 -30px 上移 .contract-manage-dialog.el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; height: calc(100vh - 40px); max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; } .contract-manage-dialog .el-dialog__header { flex: none; } .contract-manage-dialog .el-dialog__body { flex: 1 1 auto; min-height: 0; max-height: none !important; display: flex; flex-direction: column; overflow-y: auto; } .contract-manage-dialog .avue-dialog__footer { position: sticky; bottom: 0; flex: none; margin-top: 0 !important; background: #fff; } // 过程配置新增/编辑/查看弹窗(手写 el-dialog,参照 vehicle/credit-score-quantification): // 灰底弹窗体(全站 .el-dialog__body 已统一)内堆叠 分组白卡, // 卡间 12px 间距由 section-card 自身 margin-bottom 保证,与项目其他弹窗风格统一 .process-config-dialog .el-dialog__body { max-height: calc(100vh - 170px); } // 统一表格线条颜色 .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; } // 统一全站 el-table 表头背景色为浅灰 #fafafa(普通表格、avue-crud、固定列均覆盖) .el-table .el-table__header-wrapper th.el-table__cell, .el-table .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table .el-table__header-wrapper tr th.el-table-fixed-column--right { background-color: #fafafa !important; } // 统一全站 el-table 表头文字颜色,避免不同主题/浏览器下颜色不一致(#909399 vs #374151) .el-table .el-table__header-wrapper th.el-table__cell .cell { color: #374151; } // 统一全站 disabled 输入框文字颜色,避免不同主题/浏览器下颜色不一致 .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner, .el-input-number.is-disabled .el-input__inner { color: #909399; -webkit-text-fill-color: #909399; } // 全站统一:表格列内容(表头 + 单元格)居中展示 .el-table th.el-table__cell .cell, .el-table td.el-table__cell .cell { text-align: center; } // 全站统一:el-table 表格列内嵌控件默认拉满 cell(不撞表头) // 适用场景:可编辑表、弹窗内表格(如 pre-settlement-editor 结算明细调整、transport-reconciliation/formal-settlement/settlement-adjustment editor 等)。 // 排除 .el-form-item__content 上下文,与表单内 250px 规则互不冲突。 // 注意:el-autocomplete 根节点是 .el-autocomplete 包装层,内部才是 .el-input, // 直接选 .el-input 会被包装层阻断导致 input 收缩、placeholder 被截断。 .el-table .el-table__body td.el-table__cell .cell > .el-input-number, .el-table .el-table__body td.el-table__cell .cell > .el-input, .el-table .el-table__body td.el-table__cell .cell > .el-select, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor, .el-table .el-table__body td.el-table__cell .cell > .el-cascader, .el-table .el-table__body td.el-table__cell .cell > .el-autocomplete, .el-table .el-table__body td.el-table__cell .cell > .el-autocomplete > .el-input, .el-table .el-table__body td.el-table__cell .cell > .el-input-number .el-input__wrapper, .el-table .el-table__body td.el-table__cell .cell > .el-select .el-select__wrapper, .el-table .el-table__body td.el-table__cell .cell > .el-autocomplete .el-input__wrapper, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor.el-input, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor.el-input .el-input__wrapper { width: 100%; --el-input-number-width: 100%; --el-input-width: 100%; --el-select-width: 100%; --el-date-editor-width: 100%; --el-cascader-width: 100%; } // 统一 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: center; width: 100% !important; text-align: center; } // 全站统一:手写表格操作列中的文字链接保持间距并支持自动换行 // 用后代选择器 :has(.el-link) 而非直接子元素 :has(> .el-link), // 以兼容「el-link 被 div 包裹」的手写操作列(如 pre-settlement 的 .pre-settlement-page__links), // 让无论是否包了一层 div 的操作列按钮都统一居中。 .el-table .el-table__body .cell:not(.avue-crud__menu):has(.el-link) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } // 全站统一:表格普通操作链接使用主色(蓝色),删除等危险操作保持危险色(红色)。 // 选择器同时覆盖 Avue 行菜单(.avue-crud__menu)与任意含 el-link 的表格体单元格(手写操作列)。 .avue-crud__menu .el-link:not(.el-link--danger), .el-table .el-table__body .cell:has(.el-link) .el-link:not(.el-link--danger) { // 覆盖 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); } .avue-crud__menu .el-link.el-link--danger, .el-table .el-table__body .cell:has(.el-link) .el-link.el-link--danger { --el-link-text-color: var(--el-color-danger); --el-link-hover-text-color: var(--el-color-danger-light-3); --el-link-active-text-color: var(--el-color-danger-dark-2); --el-link-disabled-text-color: var(--el-color-danger-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; } } // 全局表格列拖拽:仅对可移动的普通列显示拖拽反馈。 .el-table th.tms-table-column-draggable { cursor: grab; &.is-column-dragging { cursor: grabbing; opacity: 0.55; } } .avue-crud__dialog .avue-dialog__footer{ border-top: 0 !important; margin-top: -30px !important; } // 查看弹窗(avue--detail)footer 不上移,避免遮住详情表格底部边框 .avue-crud__dialog .avue-form.avue--detail ~ .avue-dialog__footer { margin-top: 0 !important; } .el-form-item__label { margin-left: 12px !important; } .el-form-item--default .el-form-item__label { line-height: 14px; } .el-form-item--label-right .el-form-item__label { align-items: center; } // ============ 必填星号 * 与 label 首行齐平(仅换行时生效) ============ // label 为 inline-flex,星号 ::before 与文字是两个独立 flex 子项。 // align-items: normal(= stretch):单行时星号盒子 = 一行高,位置不变; // 折行后星号盒子被拉伸到 label 全高,但其内部按 line-height 从顶部排布 → 星号停在第一行。 // height: auto 覆盖 Element Plus 写死的 32px,让 label 收缩到内容高; // align-self: center 再让收缩后的 label 在表单行内垂直居中(单行与输入框对齐)。 .is-required .el-form-item__label { height: auto; align-self: center; align-items: normal; } .el-form-item--default { margin-bottom: 14px; } // 配套:星号必须保持「高度 auto + 继承行高」,stretch 才会按首行排布; // 写死 height 或 line-height 与 height 相等时效果会退化成居中。 // 注:客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。 .el-form-item.is-required .el-form-item__label::before { display: inline-block; height: auto; line-height: inherit; margin-right: 4px; } // ============ archive-form:label 与控件垂直居中(全站复用) ============ // archive-form class 被 driver / vehicle / ship / credit-score-quantification / loading-manage 等 // 多个页面复用,但「垂直居中」规则原本锁在 customer-archive.vue 的 scoped 样式里, // 其它页面拿不到 → 高控件行(证件上传 151px)label 贴顶。提升为全局统一生效。 .archive-form .el-form-item { align-items: center; } //.el-form-item { // margin-bottom: 15px !important; //} // ============ 业务状态标签:全站统一为普通文字 ============ // 去掉 el-tag 默认背景、边框、颜色圆点,仅保留文本本身,颜色与正文一致。 // 适用于所有业务状态展示:调度状态 / 运单状态 / 审批状态等。 .el-tag.status-text { background-color: transparent !important; border-color: transparent !important; color: var(--el-text-color-regular) !important; padding: 0; margin: 0; font-weight: normal !important; font-size: inherit !important; line-height: inherit; height: auto !important; vertical-align: baseline; &::before { display: none; } } .el-select__tags-text { font-size: var(--el-form-label-font-size); } // ============ 输入框 / 下拉框占位符与选中值颜色 ============ // 客户反馈默认 placeholder 灰色(#a8abb2)太浅,统一加深到 #909399(Element Plus 次级文字标准灰)。 // 同时覆盖原生 input/textarea 与 el-select 的占位文本,保证全站一致。 // 注:.el-select__placeholder.is-transparent 是聚焦未选值时的透明态,无需处理。 .el-input__inner, .el-textarea__inner { &::-webkit-input-placeholder { color: #909399 !important; } &::-moz-placeholder { color: #909399 !important; } &:-ms-input-placeholder { color: #909399 !important; } &::placeholder { color: #909399 !important; } } // 未选中:占位符用次级灰 #909399 .el-select__placeholder { color: #909399 !important; } // 已选中:选中文本用主文字色 #606266,与占位符明显区分。 // 关键:Element Plus 的「选中值文本」与「占位符」共用同一个节点, //
// 只有未选值(或已展开但无搜索输入)时才会带 .is-transparent。 // 因此这里必须排除 .is-transparent,否则未选值的占位符也会被染成选中色,与占位符灰无法区分。 // 仅作用于非禁用态,禁用态保留 Element Plus 的禁用灰(--el-select-disabled-color),避免被覆盖。 .el-select__wrapper:not(.is-disabled) .el-select__selected-item:not(.is-transparent) { color: #606266 !important; } // 多选:选中项渲染为 el-tag,文字色由 tag 自身控制,上面规则覆盖不到,单独处理。 .el-select__wrapper:not(.is-disabled) .el-select__tags-text { color: #606266 !important; } // ============ 全局 el-tree-select 样式:隐藏圆圈/复选框,统一为树形 ▶ 箭头展开风格 ============ // 目标:将所有带 ○/●/☑ 圆圈的 tree-select 下拉改为纯树形展开(▶ 箭头 + 选中蓝字),与截图2一致。 .el-tree-select { // 隐藏下拉面板内的 checkbox / radio 圆圈 .el-tree-node__content > .el-checkbox { display: none; } // 展开箭头始终可见(即使叶子节点也保留占位,保证对齐) .el-tree-node__expand-icon { font-size: 12px; color: #c0c4cc; &.is-leaf { // 叶子节点:透明占位符,保持缩进对齐 color: transparent; &::before { display: none; } } &:not(.is-leaf) { // 可展开节点:hover 加深 &:hover { color: #909399; } } } // 选中节点:蓝色文字高亮(替代原来的 ● 实心圆) .el-tree-node.is-current > .el-tree-node__content { color: var(--el-color-primary, #409eff); font-weight: 600; } // hover 态 .el-tree-node__content:hover { background-color: var(--el-fill-color-light, #f5f7fa); } // 节点标签文字 .el-tree-node__label { font-size: 14px; color: #333333; } // 选中节点的标签颜色继承 is-current 的蓝色 .el-tree-node.is-current > .el-tree-node__content > .el-tree-node__label { color: inherit; } } // ============ 全局 el-cascader(checkStrictly)样式:隐藏 ○/● 单选圆圈 ============ // 当 el-cascader 配置 checkStrictly:true 时,面板内每项前显示 el-radio 圆圈。 // 全局隐藏这些圆圈,改为纯文字选中高亮风格,与 tree-select 统一。 .el-cascader-panel { // 隐藏级联面板内的 radio 单选圆圈 .el-cascader-node__prefix { .el-radio { display: none; } } // 选中项:蓝色文字 + 加粗(替代原来的 ● 实心圆) .el-cascader-node.is-active { .el-cascader-node__label { color: var(--el-color-primary, #409eff); font-weight: 600; } } // hover 态 .el-cascader-node:hover { background-color: var(--el-fill-color-light, #f5f7fa); } // 节点标签默认颜色 .el-cascader-node__label { font-size: 14px; color: #333333; } // 禁用态 .el-cascader-node.is-disabled { color: var(--el-text-color-placeholder, #c0c4cc); cursor: not-allowed; } }