/* ============================================================ * GVA Admin — 业务局部样式（layuiAdmin 之外的最小补丁）。 * Chrome / 顶栏 / 侧栏 / 主题全由 /static/adminui/adminui/dist/css/admin.css * 接管，本文件不再覆盖任何 .layui-layout-admin / .layui-side / .layui-header。 * ============================================================ */ /* ---------- 子页 iframe body 边距 ---------- 子页 (layouts/base.gohtml) 是独立 document，原本紧贴 iframe 边沿。给 .gva-content 留 14px 内边距，避免 layui-card 直接贴 iframe 滚动条；同时给 body 一个浅灰底，避免内容短时露出白边。各主题可在 themes/*.css 里覆盖 body bg。 */ body.gva-iframe-page { margin: 0; background: #f2f3f5; } .gva-iframe-page .gva-content { padding: 14px; box-sizing: border-box; } /* 卡片之间统一上间距（业务模板里有些没写 margin-top） */ .gva-iframe-page .gva-content > .layui-card + .layui-card, .gva-iframe-page .gva-content > .layui-row + .layui-card, .gva-iframe-page .gva-content > .layui-card + .layui-row { margin-top: 12px; } /* ---------- 通用辅助文案 ---------- */ .layui-word-aux-12 { color: #909399; font-size: 12px; } .layui-word-aux-11 { color: #909399; font-size: 11px; } /* 空数据态：自有静态表 .layui-empty-row 与 layui.table 渲染的 .layui-none 统一——居中弱化文字 + 上方一个淡图标（layui-icon-survey \e6b2），比纯灰字更"完成"。图标用 iconfont ::before，不引外部资源。 */ .layui-empty-row, .layui-table-view .layui-none { text-align: center; color: #a6abb3; padding: 48px 0; font-size: 13px; } .layui-empty-row::before, .layui-table-view .layui-none::before { content: "\e6b2"; font-family: 'layui-icon' !important; display: block; font-size: 44px; line-height: 1; color: #dfe2e7; margin-bottom: 10px; } /* ---------- 列表主表最低高度（防加载抖动） ---------- renderOpts 未设 height → layui 让表体随内容收缩；首屏/翻页/重载的瞬间表体高度≈0，分页条直接贴到列头下方，数据回来后整块又往下跳一截。给「列表页主表体」一个适度最低高度撑住加载态，布局不抖；高度取 260px，够放空数据提示又不至于撑出浏览器滚动条。作用域严格限定 .gva-content 内 .layui-card-body 的直接 table-view — 弹层 / 选择器(.layui-layer 内) 的小表不受影响。只命中 .layui-table-main（中间滚动体），左右固定列体不动，避免错位。注意：不可用 flex 居中 .layui-table-main —— 该体内层 table 宽度=所有列宽之和，常宽于视口，flex 会把「暂无数据」按超宽内容居中而跑到视口右侧。 layui 的 .layui-none 本身 width=容器宽 + text-align:center，已在视口内居中。 */ .gva-content .layui-card-body > .layui-table-view .layui-table-body.layui-table-main { min-height: 480px; } /* 无数据时（done 回调按本页实际渲染行数为 0 打 .biz-table-empty）：隐藏吸底分页条，空表不再拖一条空的分页框。 */ .gva-content .layui-card-body > .layui-table-view.biz-table-empty .layui-table-page { display: none; } /* ---------- 过滤条网格 ---------- simple_list.gohtml 的搜索卡片现在用 layui-row + layui-col-* 排列： .biz-filter-grid → 外层 layui-row 容器 .biz-filter-cell → 每个 filter（已带 layui-col-xs12 / sm6 / md4 / xl3） .biz-filter-cell > label + .biz-filter-control（flex 左右对齐）保证： - 每行各 filter 同高同行，上下对齐 - 输入控件随列宽自适应 - daterange / numrange 占双倍宽（md6 / xl6） */ .biz-filter-grid { margin-bottom: 8px; } .biz-filter-cell { display: flex; align-items: center; padding-bottom: 10px; } .biz-filter-cell > .layui-form-label { flex: 0 0 78px; width: 78px; min-width: 0; padding: 0 8px 0 0; text-align: right; font-size: 13px; line-height: 34px; height: 34px; } .biz-filter-cell > .biz-filter-control { flex: 1; min-width: 0; position: relative; } .biz-filter-cell > .biz-filter-control .layui-input, .biz-filter-cell > .biz-filter-control select, .biz-filter-cell > .biz-filter-control .layui-select-title input { width: 100%; } /* 操作按钮单独一行，右对齐 */ .biz-filter-actions { text-align: right; margin-top: 4px; padding-top: 8px; border-top: 1px dashed #ebeef5; clear: both; } .biz-filter-actions .layui-btn + .layui-btn { margin-left: 8px; } /* 紧跟在折叠开关之后时，操作行不再画虚线（折叠开关自带左右两条灰线，重复了） */ .biz-filter-collapse + .biz-filter-actions { border-top: 0; padding-top: 4px; margin-top: 0; } /* 展开/收起 toggle —— 独占一行，居中 */ .biz-filter-collapse { text-align: center; margin-top: 6px; padding: 2px 0; position: relative; } .biz-filter-collapse::before, .biz-filter-collapse::after { content: ''; position: absolute; top: 50%; width: calc(50% - 50px); height: 1px; background: #ebeef5; } .biz-filter-collapse::before { left: 0; } .biz-filter-collapse::after { right: 0; } .biz-filter-toggle { display: inline-block; position: relative; padding: 2px 12px; background: #fff; color: #909399; font-size: 13px; line-height: 22px; text-decoration: none; cursor: pointer; border-radius: 12px; transition: color .15s; } .biz-filter-toggle:hover { color: #1e9fff; } .biz-filter-toggle .layui-icon { font-size: 14px; margin-right: 4px; vertical-align: middle; } /* 收起态：响应式按列数截断到「约 2 行」高度 */ @media (min-width: 1200px) { /* xl: 普通 cell 占 col-xl3（4 列/行），2 行 = 8 个 */ .biz-filter-grid.is-collapsed > .biz-filter-cell:nth-child(n+9) { display: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { /* md: 普通 cell 占 col-md4（3 列/行），2 行 = 6 个 */ .biz-filter-grid.is-collapsed > .biz-filter-cell:nth-child(n+7) { display: none; } } @media (min-width: 768px) and (max-width: 991.98px) { /* sm: 2 列/行，2 行 = 4 个 */ .biz-filter-grid.is-collapsed > .biz-filter-cell:nth-child(n+5) { display: none; } } @media (max-width: 767.98px) { /* xs: 1 列/行，2 行 = 2 个 */ .biz-filter-grid.is-collapsed > .biz-filter-cell:nth-child(n+3) { display: none; } } /* 窄屏：label 左对齐避免文字被截 */ @media (max-width: 768px) { .biz-filter-cell > .layui-form-label { text-align: left; } } /* ---------- 批量操作工具条（贴在表格左上角） ---------- simple_list.gohtml：BatchOps 不再混在主工具栏，单独放在表格卡片内部、表格上方。按钮在上、"已选 N 行"小字在下，靠左对齐。 */ .biz-batch-toolbar { padding: 10px 16px 8px; border-bottom: 1px solid #ebeef5; background: #fff; } /* 窄屏自动换行（按钮组内仍 nowrap 整体不被拆开） */ .biz-batch-toolbar-actions { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px 12px; margin-bottom: 4px; } /* 直接子项不允许被挤压 */ .biz-batch-toolbar-actions > .layui-btn, .biz-batch-toolbar-actions > .layui-btn-group { margin: 0 !important; flex: 0 0 auto !important; flex-shrink: 0 !important; white-space: nowrap !important; vertical-align: middle; } /* 组内按钮也不允许换行 / 缩小 */ .biz-batch-toolbar-actions > .layui-btn-group { display: inline-flex !important; flex-wrap: nowrap !important; } .biz-batch-toolbar-actions > .layui-btn-group > .layui-btn { margin: 0 !important; flex: 0 0 auto !important; flex-shrink: 0 !important; white-space: nowrap !important; } .biz-batch-toolbar-selected { font-size: 12px; color: #909399; line-height: 1.4; } .biz-batch-toolbar-selected #biz-selected-count { font-weight: 500; } /* ---------- 含图片的 cell：撑高、垂直对齐、允许多图换行 ---------- 单元格高度自适应由下方通用 .layui-table-cell 规则统一处理；这里只额外把含 .biz-img-thumb 的 cell 拉到 min-height 56px + flex 居中，让 40×40 缩略图四周有 padding 不贴边。多图列（imgs 数组）也走这条规则换行排列。 :has() 选择器 Chrome 105+/Safari 15.4+/Firefox 121+ 支持，老浏览器退化到纯文本对齐显示。 */ .layui-table-view .layui-table-cell:has(.biz-img-thumb), .layui-table-view .layui-table-cell:has(img.biz-img-thumb) { height: auto !important; min-height: 56px; padding-top: 8px !important; padding-bottom: 8px !important; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; white-space: normal; } /* 多图列 imgs（数组）— 允许换行排列 */ .biz-img-thumb { vertical-align: middle; } /* ---------- 业务列表表格（stats/page.gohtml 静态表） ---------- */ .biz-list-table { table-layout: auto; } .biz-list-table th, .biz-list-table td { white-space: normal; vertical-align: middle; word-break: break-word; } .biz-list-table .biz-img-thumb { display: inline-block; } /* ---------- 表格内容完整展示（不再 nowrap + ellipsis，按列宽自动换行） ---------- 原本 .layui-table td 强制 nowrap+ellipsis+悬停 title，长名称必须 hover 才能看全；现在让 cell 内容按列宽换行，长字符串（hex ID、URL、备注）也整段展示。 */ /* layui 默认 .layui-table-cell { height: 28px; overflow: hidden; padding: 0 15px; white-space: nowrap } —— 全部解除，让单元格按内容自适应高度且允许文字换行。 syncFixedRowHeight 会把同一行所有 cell 拉到一致高度。 text-overflow 与 overflow:visible 互斥不写；K-V 多行列由下方独立规则负责 ellipsis。 */ .layui-table-view .layui-table-cell { height: auto !important; min-height: 36px; line-height: 1.6; padding-top: 8px; padding-bottom: 8px; white-space: normal !important; word-break: break-word; } /* 表头单元格保持单行：上面的 white-space:normal 会让可排序列的排序三角（layui-table-sort）掉到标题下一行换行。表头恢复 nowrap + 排序图标与标题同行，并收紧左右内边距让窄列（点击/点赞/收藏等 60~70px）放得下。 */ .layui-table-view .layui-table-header .layui-table-cell { white-space: nowrap !important; word-break: keep-all !important; padding-left: 8px !important; padding-right: 8px !important; } .layui-table-view .layui-table-header .layui-table-cell .layui-table-sort { display: inline-block; vertical-align: middle; width: 10px; margin-left: 2px; } /* 业务文本包装类 — 默认 inline，跟随父级（cell 或 K-V 内层 div）的 white-space。单值列：父级 cell 是 white-space: normal → 内容按列宽自动换行。 K-V 多行列：父级 inner div 是 white-space: nowrap → 内容单行 + ellipsis。 span 自身不再 inline-block 撑宽度，避免在窄列里被自己的 max-width 推出列边界。 */ .biz-list-table td .biz-cell-text, .biz-cell-text { display: inline; word-break: break-word; vertical-align: middle; } /* 列表模糊筛选命中关键字高亮（标题/内容列 Highlight:true）。 */ .biz-hl { background: #fff3a0; color: #d4380d; padding: 0 1px; border-radius: 2px; font-weight: 600; } /* td 不再强制 max-width / nowrap：让 layui colgroup 的列宽决定 td 宽度。原 max-width:300px 会反向把 td 缩到 300，导致 thead/tbody 列宽错位。长文本换行展示由 .layui-table-cell 的 word-break 接管。 */ .layui-table td:has(.layui-form-checkbox), .layui-table td:has(input[type="checkbox"]) { vertical-align: middle; } /* 多行 K-V 列：内层「label + value」一行 — 超出列宽用 ellipsis 截断； value 上的 .biz-cell-text 已带 title="<原值>"，hover 显示全文。旧选择器 `.layui-table td > div[..]` 没匹配上 — 实际结构多一层 `.layui-table-cell`，这里改写匹配后者。 */ .layui-table-view .layui-table-body .layui-table-cell > div[style*="line-height"] { max-width: 100%; } .layui-table-view .layui-table-body .layui-table-cell > div[style*="line-height"] > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 操作列（最后一列）不截断，按钮想几个有几个 */ .layui-table tr td:last-child { max-width: none; overflow: visible; white-space: nowrap; } /* 操作列（最后一列）保持按钮不换行的子元素行为 */ .layui-table tr td:last-child .layui-table-cell { white-space: normal !important; } /* 复选框 cell 保留 layui 默认尺寸，不参与上方 cell 自适应。 */ .layui-table-view .layui-table-body .laytable-cell-checkbox { height: 30px !important; min-height: 0; } /* 数值范围过滤：[min] - [max] 在一行内排齐 simple_list.gohtml 输出 .biz-numrange-block 容器内两个 .layui-input + 一个分隔 span。 layui .layui-input 默认 width:100% block，会导致换行，这里用 flex 把它们挤回一行。 */ .biz-numrange-block { display: flex; align-items: center; gap: 6px; } .biz-numrange-block > .layui-input { flex: 1; min-width: 0; } .biz-numrange-sep { color: #c0c4cc; flex: 0 0 auto; } /* 固定操作列允许按钮多行均匀排布 */ .layui-table-view td[data-field="__actions"] .layui-table-cell, .layui-table-view .layui-table-fixed-r td .layui-table-cell { white-space: normal !important; overflow: visible !important; height: auto !important; padding: 6px 6px !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; } .layui-table-view td[data-field="__actions"] .layui-table-cell > a, .layui-table-view .layui-table-fixed-r td .layui-table-cell > a { margin: 0; } /* flash 提示由 gva.js 转成 layer toast，先隐藏避免闪烁 */ .gva-flash { display: none; } /* ---------- 导航箭头风格 ---------- layui element 模块给可展开的 nav 项自动注入，默认是 CSS 三角。这里按 body 上的开关类替换成 chevron / plus 风格。存档：localStorage.gva_nav_arrow（在 shell.gohtml 引导脚本里读写）。 */ /* 关键三步： 1) 抵消 layui 默认的 transform: rotate(180deg) —— 不然我的两态字符会被反转 2) 用 descendant 选择器（> a .layui-nav-more）匹配 layui 实际注入的 DOM 3) 不动 width/height/border：让 layui 自己的位置/font-size 接管，只换 ::before 字符 */ body.nav-arrow-chevron .layui-nav-tree .layui-nav-more, body.nav-arrow-chevron .layui-nav-tree .layui-nav-itemed > a .layui-nav-more, body.nav-arrow-plus .layui-nav-tree .layui-nav-more, body.nav-arrow-plus .layui-nav-tree .layui-nav-itemed > a .layui-nav-more { transform: none !important; border: 0 !important; background: transparent !important; font-size: 14px !important; } /* ::before 通用样式：layui-icon 字体 + 居中 */ body.nav-arrow-chevron .layui-nav-tree .layui-nav-more::before, body.nav-arrow-plus .layui-nav-tree .layui-nav-more::before { display: inline-block; font-family: layui-icon !important; font-style: normal; font-size: 14px; line-height: 1; color: inherit; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* chevron：› 折叠 / ⌄ 展开 */ body.nav-arrow-chevron .layui-nav-tree .layui-nav-more::before { content: '\e602'; /* layui-icon-right */ } body.nav-arrow-chevron .layui-nav-tree .layui-nav-itemed > a .layui-nav-more::before { content: '\e61a'; /* layui-icon-down */ } /* plus：+ 折叠 / − 展开 */ body.nav-arrow-plus .layui-nav-tree .layui-nav-more::before { content: '\e654'; /* layui-icon-add-1 */ } body.nav-arrow-plus .layui-nav-tree .layui-nav-itemed > a .layui-nav-more::before { content: '\e67e'; /* layui-icon-subtraction */ } /* ---------- 用户头像下拉菜单图标对齐 ---------- shell.gohtml 顶栏右上角"用户名"展开后的菜单：每项 a 内首个 .layui-icon 固定宽度，保证「角色 / 切换 / 修改密码 / 退出」前缀图标列对齐。 */ .gva-user-menu dd a .layui-icon:first-child { display: inline-block; width: 18px; text-align: center; margin-right: 4px; font-size: 14px; color: inherit; vertical-align: middle; } .gva-user-menu dd a { padding-left: 14px !important; padding-right: 14px !important; } .gva-user-menu hr { margin: 4px 0; border-color: #ebeef5; } /* iframe 切换/加载过场 spinner —— shell.gohtml 在每个 tab body 内 append 一个， iframe load 事件触发后隐藏。z-index 必须高于 iframe，否则被遮住。 */ .gva-iframe-loading { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 32px; line-height: 32px; color: #16baaa; z-index: 10; pointer-events: none; } .gva-iframe-loading.gva-iframe-loading--hidden { display: none; } /* ============================================================ biz-form 双列 / 节内分组 / 折叠文档面板 - form.biz-form-grid 用 CSS Grid 两列布局 - .biz-form-half 半行 form-item（占一列） - 其它直接子节点（section / 整行 form-item / hidden / 注释）跨两列 - .biz-form-section 分组横线 + 标题 - .biz-form-doc / .biz-form-help-html HelpHTML 折叠面板 ============================================================ */ .biz-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 2px; align-items: start; } /* layui-tab-item 默认 display:none，被 .biz-form-grid 的 display:grid 覆盖会导致两个 tab-item 同时显示。这里按 layui-show 状态切换：未激活 tab → none，激活 tab → grid。注意：layui.css 里 `.layui-show { display:block !important }` 用了 !important，会把激活 tab 强制成 display:block，使 grid 两列失效。所以激活态规则也加 !important。 */ .layui-tab-item.biz-form-grid { display: none; } .layui-tab-item.biz-form-grid.layui-show { display: grid !important; } .biz-form-grid > .layui-form-item { margin-bottom: 6px; } .biz-form-grid > .layui-form-item:not(.biz-form-half), .biz-form-grid > .biz-form-section, .biz-form-grid > input[type="hidden"] { grid-column: 1 / -1; } .biz-form-grid > .layui-form-item.biz-form-half { grid-column: span 1; min-width: 0; /* 让 grid 单元真正约束子元素宽度，避免 textarea/input 溢出 */ } .biz-form-grid > .layui-form-item.biz-form-half .layui-input-block { margin-right: 0; } @media (max-width: 720px) { .biz-form-grid { grid-template-columns: 1fr; } .biz-form-grid > .layui-form-item.biz-form-half { grid-column: 1 / -1; } } /* 必填字段 label 前的红 * — 对齐 PHP admin.css，layui-form-label 上加 .layui-form-required 即自动渲染。post/detail.gohtml 等自定义 form 直接复用。 */ .layui-form-required:before { content: "*"; display: inline-block; font-family: SimSun; margin-right: 4px; font-size: 14px; line-height: 1; color: #ed4014; } /* ---------- 图标按钮单选（biz-iconradio：所属板块等）---------- 原生 radio + label 伪装按钮：选择走浏览器原生（必可点、值随 FormData 提交）；选中高亮用 :has(input:checked)，.on 为 JS 兜底。!important 压过 layui 对