// ============================================================
|
// 组件默认外观（静态令牌层）
|
// ------------------------------------------------------------
|
// 目的：不改任何业务页面模板，用全局样式把 Element 的默认观感
|
// 统一成"紧凑、清爽、专业"的一套。
|
// 重点：表格（斑马纹/去竖线/表头底色）、表单、按钮、弹窗、标签。
|
// 顺序：必须晚于 element-ui 与 ruoyi.scss（见 main.js）。
|
// ============================================================
|
|
// ---------- 全局排版 ----------
|
body {
|
font-family: var(--opo-font-family-base);
|
font-size: var(--opo-font-size-base);
|
color: var(--opo-text-primary);
|
background-color: var(--opo-bg-page);
|
}
|
|
// 覆盖 index.scss 里的 label { font-weight: 700 }
|
label {
|
font-weight: 400;
|
}
|
|
.app-container {
|
// 2026-10-22：统一收紧为 8/12/12（原 12/16），全站列表页一致
|
padding: 8px 12px 12px;
|
}
|
|
// 数字类字段（金额/编号/身份证）可用此类获得等宽数字
|
.opo-number {
|
font-family: var(--opo-font-family-number);
|
font-variant-numeric: tabular-nums;
|
}
|
|
// ---------- 表格 ----------
|
// 2026-10-22：数据行字号与表头统一（14px / 常规字重）
|
// 注意：全局 size=small 会让每个表格带上 .el-table--small，
|
// Element 用它把字号写回 12px、单元格 padding 写回 8px，
|
// 所以这里必须同时提高选择器特异性，否则会被压回去。
|
.el-table,
|
.el-table.el-table--small,
|
.el-table.el-table--medium,
|
.el-table.el-table--mini,
|
.el-table.el-table--large {
|
color: var(--opo-text-primary);
|
font-size: var(--opo-font-size-sm);
|
}
|
|
.el-table {
|
th,
|
th.el-table__cell {
|
background-color: var(--opo-bg-thead) !important;
|
color: var(--opo-text-primary);
|
// 表头不加粗（2026-10-22 反馈）
|
font-weight: 400;
|
font-size: var(--opo-font-size-sm);
|
height: 40px;
|
padding: 0;
|
}
|
|
td,
|
td.el-table__cell,
|
&.el-table--small td.el-table__cell,
|
&.el-table--medium td.el-table__cell,
|
&.el-table--mini td.el-table__cell {
|
padding: 9px 0;
|
// 行分隔线（2026-10-22 再加深一档）
|
border-bottom: 1px solid var(--opo-table-border, #c8cfd8);
|
}
|
|
// 表格底部那条线
|
&::before {
|
background-color: var(--opo-table-border, #c8cfd8);
|
}
|
|
// 带边框的表格，外框线
|
&.el-table--border {
|
border-color: var(--opo-table-border, #c8cfd8);
|
}
|
|
.cell {
|
line-height: 23px;
|
}
|
|
// 表头与内容区的分隔线（比行线再深一点，作为分界）
|
.el-table__header-wrapper th {
|
border-bottom: 1px solid var(--opo-table-border-strong, #b7c0cc);
|
}
|
|
// 斑马纹：用 CSS 实现，无需给 162 个表格逐个加 stripe 属性
|
.el-table__body tr:nth-child(2n) > td,
|
.el-table__body tr:nth-child(2n) > td.el-table__cell {
|
background-color: var(--opo-bg-stripe);
|
}
|
|
// 鼠标行高亮（覆盖斑马纹；Element 默认 hover 色偏灰）
|
.el-table__body tr:hover > td,
|
.el-table__body tr:hover > td.el-table__cell {
|
background-color: var(--opo-primary-light-95, #f5f9fd);
|
}
|
|
// 去掉竖线：border 属性仍保留在模板里，这里只让它在视觉上消失
|
&.el-table--border td,
|
&.el-table--border th,
|
&.el-table--border th.el-table__cell,
|
&.el-table--border td.el-table__cell {
|
border-right: none;
|
}
|
|
&.el-table--border::after,
|
&.el-table--group::after {
|
display: none;
|
}
|
|
.el-table__empty-text {
|
color: var(--opo-text-placeholder);
|
font-size: var(--opo-font-size-sm);
|
}
|
}
|
|
// 需要"强网格线"的明细录入表：模板上加 class="table-bordered" 即可恢复
|
.el-table.table-bordered {
|
border: 1px solid var(--opo-table-border, #c8cfd8);
|
|
td,
|
th,
|
td.el-table__cell,
|
th.el-table__cell {
|
border-right: 1px solid var(--opo-table-border, #c8cfd8);
|
}
|
}
|
|
// 表格内按钮更紧凑，避免把行撑高
|
.el-table .el-button--mini,
|
.el-table .el-button--small {
|
padding: 5px 8px;
|
}
|
|
// ---------- 表单 ----------
|
// 查询条件/表单整体收紧：Element 默认 margin-bottom 22px，行距明显偏大
|
.el-form-item {
|
margin-bottom: 12px;
|
|
&__label {
|
font-weight: 400;
|
color: var(--opo-text-regular);
|
// 标签保持 14px：查询区大量使用 label-width="68px"/"70px"，
|
// 标签若随正文升到 16px，4 个字（如"捐献案例"）就会换行、行高翻倍
|
font-size: var(--opo-font-size-sm);
|
padding-right: 8px;
|
line-height: 32px;
|
}
|
|
&__content {
|
line-height: 32px;
|
min-height: 32px;
|
}
|
|
&.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
|
color: var(--opo-danger);
|
}
|
|
&__error {
|
font-size: var(--opo-font-size-xs);
|
line-height: 1.4;
|
padding-top: 2px;
|
}
|
}
|
|
// 横向排列的查询条件再紧凑一档
|
.el-form--inline .el-form-item {
|
margin-right: 12px;
|
margin-bottom: 8px;
|
}
|
|
// ---------- 紧凑查询区（opt-in） ----------
|
// 用法：给查询用的 el-form 加 class="opo-query-form"（列表页统一约定）
|
// 行距 8→4px、标签与控件对齐、最后一行（搜索/重置）去掉下边距
|
.opo-query-form {
|
// 查询条件与下方"新增/导出"工具栏（对表格的操作）之间留出间距
|
margin-bottom: 12px;
|
|
.el-form-item {
|
margin-right: 8px;
|
margin-bottom: 4px;
|
}
|
|
.el-form-item__label {
|
line-height: 32px;
|
padding-right: 6px;
|
}
|
|
.el-form-item__content {
|
line-height: 32px;
|
min-height: 32px;
|
}
|
|
// 最后一行通常是"搜索/重置"，不再额外留白
|
> .el-row:last-child .el-form-item {
|
margin-bottom: 0;
|
}
|
}
|
|
// 紧跟查询区之后的工具栏行（新增/导出）：贴近表格，与查询区由 margin-bottom 隔开
|
.opo-query-form + .el-row.mb8 {
|
margin-bottom: 4px;
|
}
|
|
// 页面里的查询区常包在卡片或 el-row 中，去掉多余的外层留白
|
.el-card__body > .el-form:first-child,
|
.el-card__body > .el-row:first-child .el-form {
|
margin-bottom: 0;
|
}
|
|
.el-input__inner,
|
.el-textarea__inner {
|
border-radius: var(--opo-radius-base);
|
color: var(--opo-text-primary);
|
|
&::placeholder {
|
color: var(--opo-text-placeholder);
|
}
|
}
|
|
// ---------- 按钮 ----------
|
.el-button {
|
border-radius: var(--opo-radius-base);
|
font-weight: 400;
|
|
[class*='el-icon-'] + span {
|
margin-left: 4px;
|
}
|
}
|
|
// 小/迷你按钮的字号在 Element 里是硬编码 12px，随正文一起上调（2026-10-22 再大一号 → 16px）
|
.el-button--small,
|
.el-button--mini {
|
font-size: var(--opo-font-size-base);
|
}
|
|
// ---------- 弹窗 ----------
|
.el-dialog {
|
border-radius: var(--opo-radius-lg);
|
box-shadow: var(--opo-shadow-lg);
|
overflow: hidden;
|
|
&__header {
|
padding: 16px 20px 12px;
|
border-bottom: 1px solid var(--opo-border-light);
|
}
|
|
&__title {
|
font-size: var(--opo-font-size-lg);
|
font-weight: 600;
|
color: var(--opo-text-primary);
|
}
|
|
&__body {
|
padding: 16px 20px;
|
color: var(--opo-text-regular);
|
}
|
|
&__footer {
|
padding: 12px 20px 16px;
|
border-top: 1px solid var(--opo-border-light);
|
}
|
}
|
|
.el-drawer__header {
|
padding: 16px 20px;
|
margin-bottom: 0;
|
border-bottom: 1px solid var(--opo-border-light);
|
color: var(--opo-text-primary);
|
font-weight: 600;
|
}
|
|
// ---------- 标签 ----------
|
.el-tag {
|
border-radius: var(--opo-radius-sm);
|
font-size: var(--opo-font-size-xs);
|
}
|
|
// ---------- 卡片 ----------
|
.el-card {
|
border-radius: var(--opo-radius-lg);
|
border-color: var(--opo-border-light);
|
box-shadow: var(--opo-shadow-sm) !important;
|
|
&__header {
|
padding: 14px 16px 10px;
|
border-bottom: 1px solid var(--opo-border-light);
|
font-weight: 600;
|
color: var(--opo-text-primary);
|
}
|
|
&__body {
|
padding: 12px 16px;
|
}
|
}
|
|
// ---------- 分页 ----------
|
// Element 把分页文字写死 13px、字重 700，和 16px 的表格正文不搭 → 统一 14px/常规
|
.el-pagination {
|
font-weight: 400;
|
color: var(--opo-text-regular);
|
font-size: var(--opo-font-size-sm);
|
|
button,
|
span:not([class*='suffix']) {
|
font-size: var(--opo-font-size-sm);
|
}
|
|
.el-pager li {
|
font-size: var(--opo-font-size-sm);
|
}
|
}
|
|
.pagination-container {
|
margin-top: 12px;
|
height: auto;
|
padding: 8px 16px !important;
|
}
|
|
// ---------- 面包屑 / 页签 ----------
|
.el-breadcrumb {
|
font-size: var(--opo-font-size-sm);
|
|
&__inner,
|
&__inner a {
|
font-weight: 400 !important;
|
color: var(--opo-text-secondary);
|
}
|
|
&__item:last-child .el-breadcrumb__inner {
|
color: var(--opo-text-primary);
|
}
|
}
|
|
// ---------- 提示 / 消息 ----------
|
.el-message {
|
border-radius: var(--opo-radius-base);
|
box-shadow: var(--opo-shadow-md);
|
}
|
|
.el-tooltip__popper {
|
font-size: var(--opo-font-size-xs);
|
}
|
|
// ---------- 滚动条（观感细节） ----------
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: rgba(0, 0, 0, 0.18);
|
border-radius: var(--opo-radius-pill);
|
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.28);
|
}
|
}
|
|
::-webkit-scrollbar-track {
|
background-color: transparent;
|
}
|
