包裹 el-table，或给表格外层容器加此类。 * 列宽超出时出现横向滚动条，避免被 body 的 overflow-x:hidden 裁切。 * 同时提供 ≤991px 全局安全网：el-table 强制 100% 宽、内部 body 始终可横滚， * 覆盖绝大多数窄屏表格，无需逐页包壳。 */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1199px) { .el-table { width: 100% !important; } .el-table__body-wrapper, .el-table__header-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* ── 卡片化工具类（跨框并行重构 Step 2 基建，对齐 AppCard 视觉） ────────── * .app-card —— 标准卡片壳：背景 + 边框 + 圆角 + 弱阴影（消费 --app-* 双模式变量） * .app-card-hover —— 悬停微抬升（卡片化列表/磁贴通用，与 StatTile hover 同手感） * .card-gradient —— 渐变底容器：配合 --grad-from/--grad-to 自定义色（可选，默认品牌色） * 用途：129 页卡片化重构的统一容器，避免每页重写一遍 card 壳样式。 */ .app-card { background: var(--app-card-bg); border: 1px solid var(--app-border); border-radius: var(--durian-radius-lg); box-shadow: var(--durian-shadow-sm); } .app-card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease; } .app-card-hover:hover { transform: translateY(-2px); box-shadow: var(--durian-shadow-md); } .card-gradient { position: relative; overflow: hidden; } .card-gradient::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, var(--grad-from, var(--durian-brand-pine)) 0%, var(--grad-to, var(--durian-accent-gold)) 100% ); opacity: 0.06; pointer-events: none; } .card-gradient:hover::before { opacity: 0.14; } /* ── 四档断点显隐工具类（对齐 useBreakpoint BREAKPOINT：768/1200/1600） ── * .bp-*-only —— 仅在该档显示（其他档隐藏） * .bp-hide-* —— 在该档隐藏（其他档显示） * 用途：响应式布局的声明式显隐（如手机端隐藏次要操作、桌面端隐藏折叠入口）， * 与 useBreakpoint 组件内逻辑互补；CSS 层实现，组件内无需 JS 判断。 */ .bp-mobile-only { display: none; } .bp-tablet-only { display: none; } .bp-desktop-only { display: none; } .bp-wide-only { display: none; } @media (max-width: 767px) { .bp-mobile-only { display: initial; } .bp-hide-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1199px) { .bp-tablet-only { display: initial; } .bp-hide-tablet { display: none !important; } /* ── 平板档布局基线（2026-09-13 补，F1 落地方案）────────────── * 背景：手机档（<768）已有完整基线（mobile-form.css ①~⑪ + base.css Wave0）， * 但平板档 768-1199 长期「零感知」——仓管/冷库现场主力设备是平板， * 表格列硬挤、筛选表单多条件挤爆、触控目标偏小。 * 策略：仅做「不改变信息架构」的全局兜底（表格横滚已在 max-width:1199 兜住）， * 本块补筛选表单换行 + 触控目标，桌面/手机档零感知。 */ /* ① 筛选表单：多条件在平板档允许换行、控件给足最小宽，避免挤压溢出 */ .filter-form { flex-wrap: wrap; } .filter-form .el-form-item { margin-right: var(--durian-space-md); margin-bottom: var(--durian-space-sm); } .filter-form .el-form-item__content { min-width: 160px; } /* ② 触控目标 ≥44px（对齐 F2 现场作业：戴手套/光线差/弱网） */ .el-button { min-height: 44px; } .el-button--small, .el-button--mini { min-height: 36px; } .el-input__wrapper, .el-select__wrapper { min-height: 44px; } } @media (min-width: 1200px) and (max-width: 1599px) { .bp-desktop-only { display: initial; } .bp-hide-desktop { display: none !important; } } @media (min-width: 1600px) { .bp-wide-only { display: initial; } .bp-hide-wide { display: none !important; } } /* ── [Phase C 移动卡片] CardList 卡片公共字段类（与 InventoryRowList 样板同款，全局复用）── */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--durian-space-tight); } .card-title { font-size: 15px; color: var(--durian-text-primary); } .card-line { color: var(--durian-text-muted); font-size: 12px; margin-bottom: var(--durian-space-xs); } .card-dims { font-size: 12px; color: var(--durian-text-muted); margin-bottom: var(--durian-space-tight); word-break: break-all; } .card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--durian-text-muted); } .card-amt { font-size: 15px; color: var(--durian-text-primary); font-variant-numeric: tabular-nums; } .card-money { margin-top: var(--durian-space-xs); font-size: 12px; color: var(--durian-text-muted); } /* ── [Phase C 全局移动基线] 手机档（<768px）全站基础可用性，一次撬动所有页面 ── 覆盖目标：83 页 .filter-form 内联筛选自动堆叠全宽（!important 压过页面内联 style 宽度）、页面容器收距、分页换行。未做 CardList 的页面由此从「破版」变「可用」；已做 CardList/FilterDrawer 的页面不受影响（抽屉内表单同样受益于堆叠）。 */ @media (max-width: 767px) { .app-page { padding: 10px !important; } .filter-form .el-form-item { display: flex; width: 100% !important; margin-right: 0 !important; } .filter-form .el-form-item__label { flex: 0 0 auto; margin-right: var(--durian-space-sm); } .filter-form .el-form-item__content { flex: 1 1 auto; width: auto !important; } .filter-form .el-form-item__content > div, .filter-form .el-form-item__content > .el-input, .filter-form .el-form-item__content > .el-select, .filter-form .el-form-item__content > .el-date-editor, .filter-form .el-date-editor--daterange { width: 100% !important; } .pagination-wrapper .el-pagination { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; } .pagination-wrapper .el-pagination .el-pagination__jump { display: none; } } /* ── [a11y 共享工具类] 屏幕阅读器专用文本（视觉隐藏、可被朗读）── 用途：给「图标按钮 / 无文字的 el-checkbox / el-radio」补可访问名。注意：el-checkbox / el-radio 的 aria-label 只会落到外层，内部拿不到可访问名（实测 element-plus），所以这两类必须用本类包一段隐藏文字，而不是加 aria-label。el-input / el-select / el-switch / el-date-picker / el-input-number / el-button 则直接用 aria-label（实测可落到内部控件）。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 榴莲 ERP V2 —— Element Plus 主题覆盖 * 主色/语义色全部引用 main.ts 注入的 --durian-* 变量（来自 packages/shared tokens.ts）。 * 禁止在组件内零散 :deep() 修改 EP 颜色。 * * [2026-08-27] 明暗双模式： * :root / [data-theme="light"] → 亮色（默认，纸白内容区 + 深松绿侧栏） * [data-theme="dark"] → 暗色（深绿/黑底内容区 + 浅色文字） * 切换即全局换肤；品牌主色（--durian-brand-pine）与强调色 * （--durian-accent-gold）在两种模式下保持一致（品牌识别优先）。 */ :root { /* 主色（深松绿 brand.pine） */ --el-color-primary: var(--durian-brand-pine); --el-color-primary-light-3: var(--durian-brand-pine700); --el-color-primary-light-5: var(--durian-brand-pine700); --el-color-primary-light-7: var(--durian-surface-canvas); --el-color-primary-light-8: var(--durian-surface-canvas); --el-color-primary-light-9: var(--durian-surface-canvas); --el-color-primary-dark-2: var(--durian-brand-pineDark); /* 强调色（榴莲金 accent.gold） */ --el-color-warning: var(--durian-accent-gold); --el-color-warning-light-3: var(--durian-accent-goldSoft); --el-color-warning-light-5: var(--durian-accent-goldSoft); --el-color-warning-light-7: var(--durian-accent-goldSoft); --el-color-warning-light-8: var(--durian-accent-goldSoft); --el-color-warning-light-9: var(--durian-accent-goldSoft); --el-color-warning-dark-2: var(--durian-accent-gold); /* 成功/错误（语义色，涨跌同色相） */ --el-color-success: var(--durian-semantic-success); --el-color-error: var(--durian-semantic-error); --el-color-danger: var(--durian-semantic-error); /* 文字与边框（亮色） */ --el-text-color-primary: var(--durian-text-primary); --el-text-color-regular: var(--durian-text-primary); --el-text-color-secondary: var(--durian-text-muted); --el-border-color: var(--durian-border-line); --el-border-color-light: var(--durian-border-line); --el-border-color-lighter: var(--durian-border-line); --el-bg-color: #ffffff; --el-bg-color-page: var(--durian-surface-canvas); /* 应用级语义变量（亮色）：供 DefaultLayout 等骨架消费 */ --app-aside-bg: var(--durian-brand-pine); --app-aside-text: var(--durian-text-primaryDark); --app-header-bg: #ffffff; --app-header-border: var(--durian-border-line); --app-main-bg: var(--durian-surface-canvas); --app-text-primary: var(--durian-text-primary); --app-text-muted: var(--durian-text-muted); --app-border: var(--durian-border-line); --app-card-bg: #ffffff; /* 圆角（② 现代轻盈：随 --durian-radius-* 上调 sm→8 / md→12 / lg→16； tokens.ts 是运行时真源，这里只做 EP 变量桥接，改 tokens.ts 即全站生效） */ --el-border-radius-base: var(--durian-radius-md); --el-border-radius-small: var(--durian-radius-sm); --el-border-radius-round: var(--durian-radius-full); --el-border-radius-circle: 100%; } /* ── 暗色模式层 ─────────────────────────────────────────────── */ [data-theme="dark"] { /* 主色浅变体在深底上需重映射（避免白块） */ --el-color-primary-light-3: var(--durian-brand-pine700); --el-color-primary-light-5: var(--durian-surface-panelBorder); --el-color-primary-light-7: var(--durian-surface-panel); --el-color-primary-light-8: var(--durian-surface-panel); --el-color-primary-light-9: var(--durian-surface-panel); --el-color-warning-light-7: var(--durian-accent-goldSoftDark); --el-color-warning-light-8: var(--durian-accent-goldSoftDark); --el-color-warning-light-9: var(--durian-accent-goldSoftDark); /* 中性变量覆盖（背景 / 文字 / 边框转暗） */ --el-bg-color: var(--durian-surface-panel); --el-bg-color-page: var(--durian-surface-canvasDark); --el-bg-color-overlay: var(--durian-surface-panel); --el-text-color-primary: var(--durian-text-primaryDark); --el-text-color-regular: var(--durian-text-primaryDark); --el-text-color-secondary: var(--durian-text-mutedDark); --el-border-color: var(--durian-border-lineDark); --el-border-color-light: var(--durian-border-lineDark); --el-border-color-lighter: var(--durian-border-lineDark); --el-fill-color-blank: var(--durian-surface-panel); /* 应用级语义变量（暗色） */ --app-aside-bg: var(--durian-brand-pineDark); --app-aside-text: var(--durian-text-primaryDark); --app-header-bg: var(--durian-surface-panel); --app-header-border: var(--durian-border-lineDark); --app-main-bg: var(--durian-surface-canvasDark); --app-text-primary: var(--durian-text-primaryDark); --app-text-muted: var(--durian-text-mutedDark); --app-border: var(--durian-border-lineDark); --app-card-bg: var(--durian-surface-panel); } /* 榴莲 ERP V2 —— 全局 UI 精修层（表格 / 标签 / 控件 / 弹层） * ----------------------------------------------------------------------------- * 定位：只做「视觉与交互一致性」的全局收敛，不碰任何业务逻辑， * 不改任何 .vue 页面 —— 全站 338 个页面、222 张 el-table 自动受益。 * * 背景（为什么需要这一层）： * 1. 全项目 222 个页面直接裸用，element-overrides.css 里 * **一条表格样式都没有** → 全部跑 Element Plus 出厂默认观感 * （表头浅灰无层级、行高松垮、hover 反馈弱、网格线偏重、空状态简陋）。 * 2. 「草稿 / 已审核 / 已驳回」这类状态标签，各模块各自写一份颜色映射， * 同一个状态在不同模块颜色不一致，大量页面甚至没设颜色（全都是默认蓝）。 * 3. 控件圆角、弹窗、分页同样缺统一收敛。 * * ⚠️ 特异性纪律（踩过坑，务必遵守） * Element Plus 的表格变量定义在 `.el-table { --el-table-xxx: ... }` —— 是 * **元素自身**的声明，而 CSS 自定义属性的继承值（来自 :root）优先级低于 * 元素自身匹配的规则。因此只写在 :root 上的 --el-table-* 不会生效。 * 同时 el-table 的组件 CSS 是异步 chunk（index.html 只引入口 CSS）， * 动态插入的晚于入口 CSS → 同名同特异性规则 EP 反而后胜。 * 故本文件统一用「双写 class」提升特异性（.el-table.el-table = 0,2,0）， * 既高于 EP 的 .el-table（0,1,0），又不使用 !important，页面级 :deep() * 定制仍可正常覆盖。:root 级变量统一写成 html:root（0,1,1 > 0,1,0）。 * * 颜色一律引用 --durian-* / --app-* 令牌，亮/暗双模式同步生效。 * * 引入位置：main.ts 中 element-overrides.css 之后、mobile-form.css 之前。 */ /* ══════════════════════════════════════════════════════════════════════════ * 1. 表格（覆盖 222 个裸用 el-table 的页面） * ══════════════════════════════════════════════════════════════════════════ */ /* 变量必须挂在 .el-table 自身（双写 class 提特异性），挂 :root 会被 EP 自身的 `.el-table{...}` 声明压掉 —— 详见文件头「特异性纪律」。 */ .el-table.el-table { /* 网格线：从 EP 默认偏重的灰蓝改为品牌调浅灰绿，降低"表格压迫感" */ --el-table-border-color: var(--durian-border-line); --el-table-border: 1px solid var(--durian-border-line); /* 表头：极浅的品牌绿底（区别于纯白内容区，建立层级），文字用主文字色 */ --el-table-header-bg-color: #f4f7f3; --el-table-header-text-color: var(--durian-text-primary); /* 正文：纯白底 + 主文字色（EP 默认 regular 偏浅，长列表易疲劳） */ --el-table-tr-bg-color: #ffffff; --el-table-text-color: var(--durian-text-primary); /* 行悬停：浅绿底（比 EP 默认浅蓝更贴品牌色），给足"指到哪一行"的反馈 */ --el-table-row-hover-bg-color: #eaf1ea; /* 当前行高亮：榴莲金极浅底 */ --el-table-current-row-bg-color: var(--durian-accent-goldSoft); } /* EP 的 :root 级变量用 html:root 覆盖（0,1,1 > 0,1,0） */ html:root { /* 斑马纹：极淡，仅在页面显式 stripe 时生效，避免干扰阅读 */ --el-fill-color-lighter: #fafbfa; /* 圆角统一到设计令牌（tokens.ts 运行时注入；②现代轻盈=8/12/16） */ --el-border-radius-base: var(--durian-radius-md, 12px); --el-border-radius-small: var(--durian-radius-sm, 8px); --el-border-radius-round: var(--durian-radius-full, 9999px); } /* 表头：建立清晰的"标题 vs 数据"层级 * [2026-09-12 ②现代轻盈] 表头字号入刻度(compact 13px)，行高整体放宽一档。 */ .el-table.el-table th.el-table__cell { font-weight: 500; font-size: var(--durian-font-size-compact, 13px); letter-spacing: 0.2px; padding: 11px 0; /* 表头下沿加一条分隔线，替代 EP 默认的等重网格线 */ box-shadow: inset 0 -1px 0 var(--durian-border-line); } /* 单元格：②现代轻盈放宽留白（舒适档行高≈44px，由 --durian-layout-rowHeight 记录）。 * 此前 7px 偏紧凑，是「密集但局促」的观感来源之一。 */ .el-table.el-table td.el-table__cell { padding: 10px 0; } /* 紧凑密度档（settings/theme.ts 的 data-density="compact"）收紧，但不再压到局促 */ [data-density='compact'] .el-table.el-table td.el-table__cell { padding: 6px 0; } [data-density='compact'] .el-table.el-table th.el-table__cell { padding: 8px 0; } /* 数字列：等宽数字（tabular-nums），保证金额 / 数量列上下对齐。注意：不做自动右对齐 —— 各页列定义已写死 align，CSS 强行改动有破坏布局风险，右对齐应通过列 align="right" 收敛，属后续改造项。 */ .el-table.el-table .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* 空数据：EP 默认空态高度不足、文字过淡，这里给足留白与可读对比度 */ .el-table.el-table .el-table__empty-block { min-height: 160px; } .el-table.el-table .el-table__empty-text { color: var(--durian-text-muted); font-size: 13px; line-height: 1.6; } /* 固定列（操作列 / 首列）：补一道纵向阴影，滚动时明确"这一列是钉住的" */ .el-table.el-table .el-table-fixed-column--right, .el-table.el-table .el-table-fixed-column--left { background: var(--el-table-tr-bg-color); } .el-table.el-table .el-table-fixed-column--right::before { box-shadow: -6px 0 8px -6px rgba(15, 46, 37, 0.12); } /* 排序箭头：默认灰箭头在浅绿底上对比度不足，提亮一档；激活态用品牌色 */ .el-table.el-table .sort-caret.ascending { border-bottom-color: var(--durian-text-muted); } .el-table.el-table .sort-caret.descending { border-top-color: var(--durian-text-muted); } .el-table.el-table .ascending .sort-caret.ascending { border-bottom-color: var(--durian-brand-pine); } .el-table.el-table .descending .sort-caret.descending { border-top-color: var(--durian-brand-pine); } /* 展开行 / 树形表格：缩进箭头颜色跟随文字色，避免 EP 默认灰蓝 */ .el-table.el-table .el-table__expand-icon { color: var(--durian-text-muted); } /* ══════════════════════════════════════════════════════════════════════════ * 2. 状态标签（el-tag） * 目标：让"草稿/待审/已通过/已驳回"在任何模块看起来都是同一套视觉语言。 * 做法：统一字重 / 内距 / 圆角 / 描边，颜色仍由各页 type 决定 * （避免误改业务语义），但收敛为"浅底 + 同色描边 + 同色文字"的 * 克制风格，去掉 EP 默认的深底块。 * ══════════════════════════════════════════════════════════════════════════ */ .el-tag.el-tag { --el-tag-border-radius: 4px; font-weight: 500; font-size: 12px; line-height: 18px; padding: 0 8px; border-width: 1px; border-style: solid; } /* 浅底 + 同色描边 + 同色文字：比 EP 默认的深底块更轻，长列表不抢视线 */ .el-tag.el-tag.el-tag--light { background: var(--el-tag-bg-color); border-color: var(--el-tag-border-color); color: var(--el-tag-text-color); } /* 纯文字态（无底无框）：用于表格内密集状态列，进一步降噪 */ .el-tag.el-tag.el-tag--plain { background: transparent; border-color: var(--el-tag-border-color); } /* ══════════════════════════════════════════════════════════════════════════ * 3. 控件一致性（按钮 / 输入框 / 选择器） * ══════════════════════════════════════════════════════════════════════════ */ /* 默认按钮：补一条描边，避免浅灰底按钮在纸白画布上"糊成一片" */ .el-button.el-button--default { border-color: var(--durian-border-line); } .el-button.el-button--default:hover, .el-button.el-button--default:focus { border-color: var(--durian-brand-pine); color: var(--durian-brand-pine); background: #ffffff; } /* 文字按钮：hover 给浅绿底，明确可点 */ .el-button.is-text:not(.is-disabled):hover { background: #eaf1ea; } /* 输入框聚焦：品牌色描边（比 EP 默认的发光更克制） */ .el-input__wrapper:focus-within, .el-textarea__inner:focus, .el-select__wrapper:focus-within { box-shadow: 0 0 0 1px var(--durian-brand-pine) inset; } /* ══════════════════════════════════════════════════════════════════════════ * 4. 弹层（弹窗 / 抽屉）：统一头部层级与圆角 * ══════════════════════════════════════════════════════════════════════════ */ .el-dialog.el-dialog { --el-dialog-border-radius: var(--durian-radius-lg, 12px); overflow: hidden; } .el-dialog.el-dialog .el-dialog__header { padding: 16px 20px; margin-right: 0; border-bottom: 1px solid var(--durian-border-line); } .el-dialog .el-dialog__title { font-size: 15px; font-weight: 500; color: var(--durian-text-primary); } .el-dialog.el-dialog .el-dialog__body { padding: var(--durian-space-xl); } .el-dialog.el-dialog .el-dialog__footer { padding: 12px 20px; border-top: 1px solid var(--durian-border-line); background: var(--durian-surface-canvas); } .el-drawer .el-drawer__header { margin-bottom: 0; padding: 16px 20px; border-bottom: 1px solid var(--durian-border-line); color: var(--durian-text-primary); font-weight: 500; } .el-drawer .el-drawer__body { padding: var(--durian-space-xl); } /* 确认弹窗（ElMessageBox）：圆角与内距统一 */ .el-message-box.el-message-box { --el-messagebox-border-radius: var(--durian-radius-lg, 12px); padding-bottom: var(--durian-space-lg); } .el-message-box .el-message-box__content { padding: 16px 20px; } /* ══════════════════════════════════════════════════════════════════════════ * 5. 分页：与表格形成一体化观感 * ══════════════════════════════════════════════════════════════════════════ */ .el-pagination.el-pagination { --el-pagination-font-size: 13px; padding: 12px 0 0; font-weight: 400; } .el-pagination .el-pagination__total { color: var(--durian-text-muted); } .el-pagination.is-background .el-pager li:not(.is-disabled).is-active { background: var(--durian-brand-pine); } /* ══════════════════════════════════════════════════════════════════════════ * 6. 暗色模式：上述自定义色在深底上的重映射 * ══════════════════════════════════════════════════════════════════════════ */ [data-theme='dark'] .el-table.el-table { --el-table-header-bg-color: var(--durian-surface-panelBorder); --el-table-tr-bg-color: var(--durian-surface-panel); --el-table-row-hover-bg-color: var(--durian-brand-pineDark700); --el-table-current-row-bg-color: var(--durian-accent-goldSoftDark); } html[data-theme='dark'] { --el-fill-color-lighter: var(--durian-surface-panelBorder); } [data-theme='dark'] .el-dialog.el-dialog .el-dialog__footer, [data-theme='dark'] .el-drawer .el-drawer__header, [data-theme='dark'] .el-dialog.el-dialog .el-dialog__header { border-color: var(--durian-border-lineDark); } [data-theme='dark'] .el-dialog.el-dialog .el-dialog__footer { background: var(--durian-surface-canvasDark); } /* ══════════════════════════════════════════════════════════════════════════ * 8. 层级三件套（2026-09-12 第二步）：0.5px 细边 + 三档阴影 + 12px 圆角 * ----------------------------------------------------------------------------- * 背景：全站卡片/弹层此前是 EP 默认 1px 灰边 + 单档弱阴影 → 「平贴」在画布上， * 没有悬浮层级。本节建立「常态 shadow-sm / 悬浮 shadow-md / 弹层 shadow-lg」 * 三档阴影节奏，边线统一 0.5px（高分屏上更精致），容器圆角统一 12px。 * * ⚠️ --durian-shadow-lg 暂定义在本文件（html:root 级），稳定后可晋升到 base.css * 令牌区。改「边线/圆角」不改布局尺寸（border-width 1px→0.5px 视觉减半， * 盒模型上仍是 1px 高度，不影响行高与栅格）。 * ══════════════════════════════════════════════════════════════════════════ */ html:root { /* 第三档：弹层专用（dialog / drawer / message-box），两层叠加出「悬浮在页面上」 */ --durian-shadow-lg: 0 8px 24px rgba(15, 46, 37, 0.10), 0 2px 6px rgba(15, 46, 37, 0.06); } /* 卡片：细边 + 常态微阴影 + 悬浮加深（transition 让 hover 不突兀） */ .el-card.el-card { --el-card-border-radius: var(--durian-radius-lg, 12px); --el-card-border-color: var(--durian-border-line); border-width: 0.5px; box-shadow: var(--durian-shadow-sm); transition: box-shadow 150ms ease; } .el-card.el-card:hover { box-shadow: var(--durian-shadow-md); } /* 弹窗 / 消息框：12px 圆角 + 0.5px 细边 + 第三档阴影 */ .el-dialog.el-dialog { --el-dialog-border-radius: var(--durian-radius-lg, 12px); border: 0.5px solid var(--durian-border-line); box-shadow: var(--durian-shadow-lg); } .el-message-box.el-message-box { border-radius: var(--durian-radius-lg, 12px); border: 0.5px solid var(--durian-border-line); box-shadow: var(--durian-shadow-lg); } /* 抽屉：贴边滑出，补第三档阴影即可 */ .el-drawer.el-drawer { box-shadow: var(--durian-shadow-lg); } /* 浮层（下拉 / 日期选择 / 气泡）：8px 圆角 + 细边 + 中档阴影 */ .el-popper.el-popper.is-light { border-radius: var(--durian-radius-md, 8px); border: 0.5px solid var(--durian-border-line); box-shadow: var(--durian-shadow-md); } /* 暗色：阴影在深底无效 → 降为纯黑深影，边线换深色系 */ [data-theme='dark'] .el-card.el-card { border-color: var(--durian-border-lineDark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } [data-theme='dark'] .el-dialog.el-dialog, [data-theme='dark'] .el-message-box.el-message-box, [data-theme='dark'] .el-drawer.el-drawer { border-color: var(--durian-border-lineDark); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } [data-theme='dark'] .el-popper.el-popper.is-light { border-color: var(--durian-border-lineDark); } /* ══════════════════════════════════════════════════════════════════════════ * 9. 品牌色穿透（2026-09-12 第三步）：中性区补品牌调 * ----------------------------------------------------------------------------- * 前提：`--el-color-primary` 早已指向 --durian-brand-pine（见 element-overrides.css）， * 侧栏也是 brand 深底 + 金色选中（DefaultLayout），所以「按钮/单选/滑块/tabs 下划线」 * 本体已品牌化。真正没穿透的是**中性色区**：聚焦环、下拉项、面包屑、卡片头、空状态。 * 本节只填这些缺口；金色维持「只给 KPI / 侧栏选中」的克制用法，不扩散。 * * 新增两个软色令牌（亮色），暗色复用既有 --durian-brand-pineDark700。 * 后续可晋升到 base.css 令牌区。 * ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ * 10. 控件精修下半场（2026-09-12 第四步）：按钮 / 输入框 / 分页 / 遮罩 * ----------------------------------------------------------------------------- * 前四节把「容器的形」做完了，本节做「控件的手感」： * · 主按钮：品牌投影 + hover 上浮 1px + active 回弹（150ms，干脆不拖沓） * · 次按钮：hover 转品牌色（此前是 EP 默认描边反馈，与品牌无关） * · 输入框：hover 描边品牌化、focus 加 3px 品牌软环（比单描边更"2026"） * · 分页：圆角 + hover 品牌色 * · 遮罩：由 EP 默认近黑改为带品牌调的柔化黑，弹层更通透 * 一律 150ms（对齐 --durian-motion-duration-fast），EP 默认 300ms 偏"慢动作"。 * ══════════════════════════════════════════════════════════════════════════ */ html:root { /* focus 软环：品牌绿低透明度，套在描边外侧（不占布局，白底/浅画布均可见） */ --durian-focus-ring: 0 0 0 3px rgba(47, 125, 92, 0.15); /* 遮罩：带品牌调的柔化黑（EP 默认偏纯黑，弹窗显得"沉"） */ --el-overlay-color-lighter: rgba(15, 46, 37, 0.38); } /* ① 按钮：统一 150ms；主按钮上浮 + 品牌投影 */ .el-button.el-button { transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .el-button--primary.el-button--primary { font-weight: 600; box-shadow: 0 1px 2px rgba(15, 46, 37, 0.14); } .el-button--primary.el-button--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 46, 37, 0.18); } .el-button--primary.el-button--primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 46, 37, 0.14); } /* 次按钮 hover：描边与文字转品牌色 + 极浅绿底（原为 EP 中性反馈） */ .el-button.el-button:not(.el-button--primary):not(.el-button--danger):not(.is-disabled):hover { color: var(--durian-brand-pineDark, #235f46); border-color: var(--durian-brand-pine); background: var(--durian-brand-pineSoft, #eef4f0); } /* ② 输入框 / 文本域：hover 描边品牌化，focus 加软环 */ .el-input.el-input .el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--durian-brand-pine700) inset; } .el-input.el-input .el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--durian-brand-pine) inset, var(--durian-focus-ring); } .el-textarea.el-textarea .el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--durian-brand-pine) inset, var(--durian-focus-ring); } .el-input.el-input .el-input__inner::placeholder, .el-textarea.el-textarea .el-textarea__inner::placeholder { color: var(--durian-text-tertiary); } /* ③ 分页：页码圆角 + hover 品牌色（此前是直角 + 中性 hover） */ .el-pagination .el-pager li { border-radius: var(--durian-radius-sm, 4px); transition: color 150ms ease, background-color 150ms ease; } .el-pagination .el-pager li:hover { color: var(--durian-brand-pineDark, #235f46); } /* ④ 暗色重映射：软环/投影/次按钮底全部换深绿系 */ [data-theme='dark'] .el-button--primary.el-button--primary { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } [data-theme='dark'] .el-button--primary.el-button--primary:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } [data-theme='dark'] .el-button.el-button:not(.el-button--primary):not(.el-button--danger):not(.is-disabled):hover { color: var(--durian-brand-pine700); border-color: var(--durian-brand-pine700); background: var(--durian-brand-pineDark700); } [data-theme='dark'] .el-input.el-input .el-input__wrapper.is-focus, [data-theme='dark'] .el-textarea.el-textarea .el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--durian-brand-pine700) inset, 0 0 0 3px var(--durian-brand-pineDark700); } /* ① 全站键盘焦点统一品牌绿（可访问性 + 精致感） */ .el-button.el-button:focus-visible, .el-input.el-input:focus-visible, .el-select.el-select:focus-visible, .el-textarea:focus-visible, a:focus-visible, button:focus-visible, [role='button']:focus-visible { outline: 2px solid var(--durian-brand-pine); outline-offset: 2px; } /* ② 下拉 / 选择器候选项：hover 浅绿底，选中项品牌绿加粗 */ .el-select-dropdown__item.is-hovering, .el-cascader-node:not(.is-disabled):hover, .el-dropdown-menu__item:not(.is-disabled):hover { background: var(--durian-brand-pineSoft); } .el-select-dropdown__item.is-selected { color: var(--durian-brand-pineDark, #235f46); font-weight: 600; background: var(--durian-brand-pineSoftStrong); } /* ③ 面包屑 / 文字链接：品牌绿，末级加深（层级更清楚） */ .el-breadcrumb.el-breadcrumb .el-breadcrumb__inner.is-link:hover, .el-link.el-link:not(.el-link--danger):not(.el-link--primary):hover { color: var(--durian-brand-pine); } .el-link.el-link--primary { color: var(--durian-brand-pine); } .el-link.el-link--primary:hover { color: var(--durian-brand-pineDark, #235f46); } .el-breadcrumb.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner { color: var(--durian-brand-pineDark, #235f46); font-weight: 500; } /* ④ 卡片头：标题 600 + 分隔线走令牌（此前是 EP 默认字重与色） */ .el-card.el-card .el-card__header { font-weight: 600; color: var(--durian-text-primary); border-bottom-color: var(--durian-border-line); } /* ⑤ 空状态：图标与说明文字用品牌浅调，替代 EP 的纯灰（"空"也是页面状态） */ .el-table.el-table .el-table__empty-text, .el-empty.el-empty .el-empty__description { color: var(--durian-text-muted); } .el-empty.el-empty .el-empty__image svg { fill: var(--durian-brand-pineSoftStrong); } /* ⑥ 暗色重映射：软底换深绿，强调文字用亮一档的 pine700 */ [data-theme='dark'] .el-select-dropdown__item.is-hovering, [data-theme='dark'] .el-cascader-node:not(.is-disabled):hover, [data-theme='dark'] .el-dropdown-menu__item:not(.is-disabled):hover { background: var(--durian-brand-pineDark700); } [data-theme='dark'] .el-select-dropdown__item.is-selected { color: var(--durian-brand-pine700); background: var(--durian-brand-pineDark700); } [data-theme='dark'] .el-link.el-link--primary, [data-theme='dark'] .el-breadcrumb.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner { color: var(--durian-brand-pine700); } /* ══════════════════════════════════════════════════════════════════════════ * 7. 字重层级（2026-09-12）：600/700 真字重切片到位后启用 * ----------------------------------------------------------------------------- * 背景：自托管字体此前只有 400/500，所有 font-weight:600/700（含 base.css * 的 h1-h4、DefaultLayout 品牌/用户名）都在跑「合成加粗」（faux-bold）—— * 笔画糊、字面挤，是「观感平」的直接成因之一。fonts.css 已补真切片， * 上述既有声明自动受益，无需改动。 * * 本节只补 Element Plus 组件标题层：这些位置 EP 默认 400/500， * 与 h1-h4 / 品牌区不在一个字重节奏上。双写 class 提特异性，同文件头纪律。 * ══════════════════════════════════════════════════════════════════════════ */ /* 弹窗 / 抽屉 / 消息框标题：从 EP 默认的普通字重提到 600，建立「容器 vs 内容」层级 */ .el-dialog.el-dialog .el-dialog__title, .el-message-box.el-message-box .el-message-box__title { font-weight: 600; } .el-drawer.el-drawer .el-drawer__title { font-weight: 600; } /* 描述列表标签：500（次强调，不与标题抢层级） */ .el-descriptions.el-descriptions .el-descriptions__label { font-weight: 500; } /* 表单必填场景：label 维持 500，避免全表单加粗后的视觉噪音（EP 默认即 500，显式固化） */ .el-form.el-form .el-form-item__label { font-weight: 500; } /* ══════════════════════════════════════════════════════════════════════════ * 11. 统一筛选栏 + 圆角刻度收敛（2026-09-12 全站一致性） * ---------------------------------------------------------------------------- * 背景：全量审计 340 个页面发现两类不统一 —— * ① 筛选栏 `.filter-form` 在两套视觉标准间分裂： * 「surface-canvas 底 + 4px 圆角」（51 处） vs 「surface-panel 底 + 8px 圆角」（8 处） * → 同一功能在 59 个页面里长得不一样，是"拼装感"的直接来源。 * ② 野圆角值 30 处（2/3/5/6/9/10/11/13/16/99/999/9999px），系统刻度只有 4/8/12。 * 策略：全局层统一（不动 .vue，避免与并行框在途文件冲突）。 * · 筛选栏：**双写 class 提特异性**（.filter-form.filter-form = 0,2,0）压过 * 页面 scoped 里的 .filter-form[data-v-xxx]（0,1,0 + 属性 = 0,2,0 同级， * 但本文件在入口后加载故胜出）；用 0.5px 描边 + 12px 圆角 + shadow-sm 对齐卡片体系。 * · 移动端表单项宽度：37 处页面各自写 `width:100% !important`（因 EP 的 * --el-input-width 走内联样式优先级更高），此处收敛成一条，页面写法可逐步清理。 * 注意：一律不用 !important（保住页面 :deep() 覆盖能力），靠特异性取胜。 * ══════════════════════════════════════════════════════════════════════════ */ /* ① 筛选栏统一：表面容器规格与 el-card 对齐 */ .el-form.filter-form.filter-form { margin-bottom: var(--durian-space-md); padding: var(--durian-space-md) var(--durian-space-lg); background: var(--durian-surface-panel); border: 0.5px solid var(--durian-border-subtle); border-radius: var(--durian-radius-lg, 12px); box-shadow: var(--durian-shadow-sm); } /* 行内表单项的底部外边距在容器内会撑高筛选栏，收紧一档 */ .el-form.filter-form.filter-form .el-form-item { margin-bottom: var(--durian-space-sm); } /* ② 圆角刻度收敛：把野值统一到系统三档（4 小控件 / 8 中容器 / 12 大容器） * 仅收敛到以「命名 class 结尾」的常见容器，不碰像素级微调（避免误伤圆形/药丸）。 */ .el-card.el-card, .el-dialog.el-dialog .el-dialog__body .app-surface { border-radius: var(--durian-radius-lg, 12px); } /* 药丸/圆形类：明确保留全圆角（覆盖野值 99px / 999px / 9999px 的不一致写法） */ .el-tag.el-tag, .el-button.el-button.is-round, .el-avatar.el-avatar, .el-badge.el-badge .el-badge__content { border-radius: var(--durian-radius-full, 9999px); } /* ③ 移动端表单控件宽度收敛（替代 37 处页面级 `width:100% !important`） * 用 .is-inline 无关的通用选择器：仅在窄屏生效，且只针对筛选栏内的控件。 */ @media (max-width: 768px) { .filter-form .el-input, .filter-form .el-select, .filter-form .el-date-editor, .filter-form .el-cascader, .filter-form .search-control { width: 100%; } .filter-form.filter-form { padding: var(--durian-space-md); } } /* ④ 暗色重映射 */ [data-theme='dark'] .el-form.filter-form.filter-form { background: var(--durian-surface-panel); border-color: var(--durian-surface-panelBorder); box-shadow: var(--durian-shadow-sm); } /* ══════════════════════════════════════════════════════════════════════════ * 12. 统一容器规格（2026-09-12 设计体系 v1 · ② 现代轻盈） * ----------------------------------------------------------------------------- * 背景（全量实测）：全站 **90 种**自定义卡片类名（.kpi-card / .detail-card / * .stat-card / .filter-card / .table-card / .info-card / .dist-card …） * 共定义 214 次，另有 319 处。90 个盒子各写各的边框 / 圆角 / * 阴影 / 内距，是「拼装感」的直接来源；成熟产品的容器规格通常只有 2–3 种。 * * 目标：**3 种规格**，全部落在 .app-* 前缀（延续 base.css 既有约定，不新造前缀）： * .app-card —— panel 规格：默认面板 / 卡片（覆盖绝大多数场景） * .app-section —— section 规格：面板内的次级分组（无边框、纯色底） * .app-hero —— hero 规格：首屏首要指标（更大内距 + 32px 大数字） * 页头**不走类名**，走 components/layout/AppToolbar.vue（结构组件，见其本体）。 * * 迁移纪律（M3）：90 种类名按「这个盒子装几行内容 + 是否要边框」机械归到 * 三者之一；其中 60+ 种只是 1px 边改 0.5px、圆角归 8/12 的机械替换。 * ⚠️ 配对标签 / 插槽结构一律手工 Edit，禁止批量脚本改结构（历史已踩坑）。 * ⚠️ 本节**不给 .app-card 设 padding** —— 页面 scoped 内距与本规则特异性同级、 * 本文件后加载会赢，强设会破坏既有布局；内距归 M3 逐页收敛。 * ══════════════════════════════════════════════════════════════════════════ */ /* panel 规格（默认容器）：0.5px 细描边 + 16px 圆角 + 静置 shadow-sm */ .app-card.app-card { border-width: 0.5px; border-color: var(--durian-border-subtle); border-radius: var(--durian-radius-lg, 16px); box-shadow: var(--durian-shadow-sm); } /* section 规格：面板内次级分组 —— 无边框、纯色底、小一号圆角 */ .app-section { background: var(--durian-surface-canvas, #f5f7fa); border-radius: var(--durian-radius-md, 12px); padding: var(--durian-space-lg, 16px); } /* hero 规格：首屏首要指标 —— 更大内距 + 32px 大数字（等宽数字） */ .app-hero { background: var(--durian-surface-panel, #fff); border: 0.5px solid var(--durian-border-subtle); border-radius: var(--durian-radius-lg, 16px); box-shadow: var(--durian-shadow-sm); padding: var(--durian-space-2xl, 24px); } .app-hero .app-hero__label { color: var(--durian-text-muted, #5a6862); font-size: var(--durian-font-size-xs, 12px); } .app-hero .app-hero__value { font-family: var(--durian-font-num, 'Sora', sans-serif); font-variant-numeric: tabular-nums; font-size: var(--durian-font-size-display, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin-top: var(--durian-space-tight, 6px); } .app-hero .app-hero__foot { color: var(--durian-text-muted, #5a6862); font-size: var(--durian-font-size-xs, 12px); margin-top: var(--durian-space-tight, 6px); } /* 暗色重映射（②现代轻盈：暗色下描边与分组底转深色族） */ [data-theme='dark'] .app-card.app-card, [data-theme='dark'] .app-hero { border-color: var(--durian-surface-panelBorder); } [data-theme='dark'] .app-section { background: var(--durian-surface-panelBorder, #2a3530); } /* ── 12.1 全量对齐 panel 规格（M3 第一批，零页面改动） ────────── * 全站 319 处（157 个文件）——逐页改结构风险高、耗时长； * 与 §11 统一 .filter-form（59 页）同一策略：在全局层用双写 class 压过 EP 出厂值。 * EP 把卡片变量挂在组件自身选择器 → 必须用 .el-card.el-card 提特异性（同文件头纪律）。 * 收益：319 个盒子瞬间获得同一套 0.5px 描边 / 16px 圆角 / 柔和阴影 / 统一内距。 */ .el-card.el-card { --el-card-border-color: var(--durian-border-subtle, #e4e7ed); --el-card-border-radius: var(--durian-radius-lg, 16px); --el-card-padding: var(--durian-space-xl, 20px); border-width: 0.5px; box-shadow: var(--durian-shadow-sm); } [data-theme='dark'] .el-card.el-card { --el-card-border-color: var(--durian-surface-panelBorder); --el-card-bg-color: var(--durian-surface-panel); } /* apps/web/src/styles/mobile-form.css * [Wave4 复杂表单移动基线] 手机档（≤767px）表单 / 详情 / 弹窗精修 * 引入位置：main.ts 中 element-overrides.css 之后（EP 组件样式在前，本文件在后 → 同特异性本文件胜） * 断点：max-width: 767px（对齐 useBreakpoint BREAKPOINT.tablet=768 与 base.css Wave0 基线） * 原则：桌面/平板（≥768px）零感知；仅 !important 用于对抗「EP 内联 style」与「页面 scoped[data-v]」 * 依据：deliverables/v2-dim-mobile-spec-2026-09-06/07-复杂表单移动端精修方案-2026-09-08.md §3.1 */ @media (max-width: 767px) { /* ── ① 表单标签改「上标签下控件」（P-2 / P-7）───────────────────── * 证据：label-width 全站 136 处；EP 把 label-width 编译为 label 内联 width + content 内联 margin-left * 排除 .filter-form：Wave0（base.css L265-276）已给筛选表单做过"标签在左控件在右"，勿重复覆盖 */ .el-form:not(.filter-form) .el-form-item { display: block !important; margin-right: 0 !important; } .el-form:not(.filter-form) .el-form-item__label { display: block; float: none; width: auto !important; /* 对抗 EP 内联 width:120px */ height: auto; line-height: 1.4; text-align: left; padding: 0 0 4px; margin-bottom: 2px; font-size: 13px; color: var(--el-text-color-secondary); } .el-form:not(.filter-form) .el-form-item__content { margin-left: 0 !important; /* 对抗 EP 内联 margin-left:120px */ width: 100%; line-height: 1.4; } /* inline 表单的兜底：EP 给 .el-form--inline .el-form-item 加了 display:inline-flex + margin-right */ .el-form--inline:not(.filter-form) .el-form-item { display: block !important; } .el-form--inline:not(.filter-form) .el-form-item__content { width: 100% !important; /* 对抗 --el-form-inline-content-width:220px */ } /* ── ② 弹窗近全屏化（P-1，覆盖 67/67 页）──────────────────────── * 证据：.el-dialog { width: var(--el-dialog-width,50%); margin: var(--el-dialog-margin-top,15vh) auto 50px } * width="560px" / top="6vh" 由 EP 写成内联 CSS 变量，需 !important 覆盖 * 决策点②：默认「近全屏」；内容多的弹窗可挂 .dlg-full 转「真全屏」（见 ②-b） */ .el-dialog { --el-dialog-width: calc(100vw - 24px) !important; --el-dialog-margin-top: 6vh !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 6vh auto 24px !important; max-height: 88vh; display: flex; flex-direction: column; border-radius: 12px; } /* ②-b opt-in 真全屏：给内容多的表单弹窗（如 OrderDetail 的 900px 弹窗）挂 .dlg-full */ .el-dialog.dlg-full { width: 100vw !important; max-width: 100vw !important; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; } .el-dialog__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 8px !important; padding-bottom: 8px !important; } .el-dialog__header { flex: 0 0 auto; padding-right: var(--durian-space-3xl); } .el-dialog__footer { flex: 0 0 auto; position: sticky; bottom: 0; background: var(--el-bg-color); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--el-border-color-lighter); } /* 弹窗内若还有子表，确保它是"自己滚"而不是"撑破弹窗" */ .el-dialog__body .el-table__body-wrapper { overflow-x: auto !important; } /* ── ③ 底部操作栏 sticky + 安全区（P-5，覆盖 42 页 .form-actions）── * 注意：.form-actions 在 42 个页面里是 scoped 样式（带 [data-v-xxx]，特异性 0,2,0） * → 这里每一条都必须 !important */ .form-actions { position: sticky !important; bottom: 0 !important; z-index: 5; display: flex !important; gap: 8px; justify-content: flex-end; text-align: left !important; margin: 12px -10px 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; background: var(--el-bg-color); border-top: 1px solid var(--el-border-color-lighter); } .form-actions .el-button { flex: 1 1 0; min-height: 40px; } /* 同类钩子：dialog footer 里的按钮也提高度 */ .dialog-footer .el-button, .el-dialog__footer .el-button { min-height: 40px; } /* ── ④ 子表明细：把"能缓解的先缓解"（P-3 缓解层 + P-4）──────────── * 说明：CSS 只做"滚动更顺滑 + 控件自适应列宽"，不能替代 P1 的卡片化 */ .el-form-item .el-table__body-wrapper, .el-form-item .el-table__header-wrapper { overflow-x: auto !important; overscroll-behavior-x: contain; /* 横滑到底不把整页带着走 */ -webkit-overflow-scrolling: touch; } .el-table .el-input-number, .el-table .el-input, .el-table .el-select { width: 100% !important; } .el-table .el-input-number { min-width: 88px; } /* fixed="right" 的删除列在窄屏挡内容 → 取消吸附，改为随表滚动 */ .el-table .el-table-fixed-column--right { position: static !important; } /* 表格单元格内边距收紧，给控件让宽 */ .el-table .cell { padding-left: var(--durian-space-tight); padding-right: var(--durian-space-tight); } /* ── ⑤ 日期/时间弹层宽度约束（P-6）─────────────────────────────── * 证据：.el-date-range-picker { width: 646px } * .el-date-range-picker .el-picker-panel__body { min-width: 513px } ← 只改 width 无效，min-width 必须一起打 * .el-date-range-picker__content { width: 50%; display: table-cell } */ .el-picker__popper.el-popper { max-width: calc(100vw - 16px) !important; } .el-date-picker, .el-picker-panel { width: 100% !important; max-width: calc(100vw - 16px) !important; } .el-date-range-picker { width: 100% !important; min-width: 0 !important; } .el-date-range-picker .el-picker-panel__body { min-width: 0 !important; display: block !important; } .el-date-range-picker__content { display: block !important; width: 100% !important; box-sizing: border-box; } .el-date-range-picker__content.is-left { border-right: none !important; border-bottom: 1px solid var(--el-border-color-light); } /* 下拉选择弹层同理（科目等长文本选项会撑宽） */ .el-select__popper.el-popper, .el-select-dropdown { max-width: calc(100vw - 16px) !important; } /* ── ⑥ 栅格兜底：手机档一律单列（P-8，覆盖 14 页无 :xs 的 el-col）── */ .el-col { flex: 0 0 100% !important; max-width: 100% !important; } /* ── ⑦ 触控目标最小高度（P-9）───────────────────────────────── * 样板：FilterDrawer.vue:59 已用 .fd-trigger { min-height: 44px } */ .el-button { min-height: 40px; } .el-button--small { min-height: 32px; } .el-input__wrapper { min-height: 40px; } .el-select__wrapper { min-height: 40px; } /* ── ⑧ 长表单节奏：区块之间给足呼吸感 ───────────────────────── */ .entity-form { max-width: 100% !important; } .el-divider--horizontal { margin: 16px 0; } /* ── ⑨ 表格兜底（P-10，2026-09-10 补）────────────────────────── * 背景：②③（见上方 .el-dialog__body / .el-form-item 规则）只覆盖了 * **弹窗内**与**表单内**的表格；页面主区域的独立 el-table * （详情页明细、列表页主表）在手机上列被硬挤、无法查读。 * 实测：294 个一级页面中 105 个含裸 el-table 且无任何断点（finance 19 / report 18 / * system 9 / production 8 / stock 5 / sales 5 ...）。 * 策略：本条为**全局兜底**，让这类表格在手机档可横向滚动 + 字号缩放 + 头部不换行， * 保证「可读可查」；需要「可操作」的列表页仍应改用 CardTable/CardList 双形态组件 * （见 components/CardTable.vue 注释：解决 129 页手机端横向溢出问题）。 * 不改桌面档（整条规则在 @media (max-width:767px) 内）。 */ .el-table { font-size: 12px; } .el-table__body-wrapper, .el-table__header-wrapper, .el-table__footer-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .el-table .cell { padding: 0 6px; word-break: keep-all; } .el-table__header .cell { white-space: nowrap; } .el-table .el-button--small, .el-table .el-button.is-link { padding: 4px 6px; } /* ── ⑩ 抽屉宽度钳制（2026-09-10 审计补）──────────────────────── * 证据：WarehouseList.vue 柜号管理抽屉 size="560px"，375px 屏横向溢出 ~200px。 * SearchBar(min(320px,88vw)) / FilterDrawer(86%) 已自适应不受影响； * max-width 恒胜内联 width（EP size 写在 style attr），加 !important 仅为口径一致。 */ .el-drawer { max-width: calc(100vw - 24px) !important; } /* ── ⑪ 描述列表改「标签上、值下」堆叠（2026-09-10 审计补）───────── * 证据：76 个页面用 el-descriptions，详情页普遍 :column="3"（标签+值=6 格/行）， * 375px 屏每格仅 ~60px，内容硬截断；18 个 info-descriptions 详情页无任何页面级适配。 * 策略：与 ①「上标签下控件」同哲学——手机档把三列信息表整体改纵向堆叠， * 桌面档（≥768px）零感知（整条规则在 max-width:767px 内）。 */ .el-descriptions__body .el-descriptions__table { display: block; width: 100% !important; table-layout: auto; } .el-descriptions__body .el-descriptions__table colgroup { display: none; } .el-descriptions__body .el-descriptions__table tbody { display: block; } .el-descriptions__body .el-descriptions__table tr { display: block; border: none; } .el-descriptions__body .el-descriptions__table td.el-descriptions__cell { display: block; width: auto !important; min-width: 0 !important; } /* 标签行弱化为次要色小字，值行贴其下（与表单上标签样式对齐） */ .el-descriptions__body .el-descriptions__table td.el-descriptions__label { font-size: 12px; color: var(--el-text-color-secondary); } } /* ── ⑨ 明细卡片字段行（CardList / CardEditor 的 #card / #row slot 内通用）── * [2026-09-11 评审整改] 第七批 production 14 页曾在各自