/* 数据表页（/table/{key}）。视觉与交互借鉴 Ant Design Table 与飞书多维表格的成熟做法： 固定表头 + 固定首列、行号列、单元格省略、密度切换、列宽拖拽、筛选标签化、 行详情抽屉、骨架屏与空状态、完整分页器。 色值一律走 tokens.css 的语义 token（UI 门禁 test_no_bare_hex / test_single_root / test_undefined_var），本文件不定义 :root、不写裸色值（白与黑除外）。 */ body { background: var(--canvas); } /* 本文件给 .dt-chips / .dt-state / .dt-col-menu 都设了 display，作者样式会盖掉 浏览器给 [hidden] 的 display:none —— 于是「隐藏」的浮层照样显示。统一兜住。 */ [hidden] { display: none !important; } /* 行高/行号列宽本想做成组件内的 CSS 变量，但 UI 门禁要求 var() 名字必须在 tokens.css 里 有定义（tests/test_ui_standard.py::test_compat_covers_legacy_names），而这两个是组件内部 的布局尺寸、不是设计 token，不该往 tokens.css 里塞。于是写成显式规则 + 密度覆盖。 行号列宽 46px 是常量，改它要同时改下面 .dt-freeze 的 left。 */ .dt-app { height: 100vh; display: flex; flex-direction: column; background: #fff; } /* ---------- 页头 ---------- */ .dt-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; } .dt-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .dt-title h1 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; } .dt-back { flex: none; height: 26px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; white-space: nowrap; transition: var(--dur-fast) var(--ease); } .dt-back:hover { border-color: var(--green); color: var(--green); } /* 2026-10-01 嵌在控制台里时 common.css 把 header h1 藏了，外壳标题只写「数据表」——看不出开的是哪张表：表名留着 */ html[data-embedded] .dt-title h1 { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dt-kind { font-size: 11px; border-radius: var(--radius-sm); padding: 2px 7px; background: var(--green-soft); color: var(--green); white-space: nowrap; } .dt-total { color: var(--muted); font-size: 12px; white-space: nowrap; } .dt-edit-hint { color: var(--green); background: var(--green-soft); border-radius: var(--radius-full); padding: 1px 9px; font-size: 12px; white-space: nowrap; cursor: help; } .dt-edit-hint[hidden] { display: none; } .dt-th-edit { font-style: normal; color: var(--green); margin-right: 3px; font-size: 11px; } .dt-edit-block { border-bottom: 2px solid var(--green-soft); background: var(--surface); } .dt-edit-tip { margin: 0; padding: 9px 16px; font-size: 12px; color: var(--green); background: var(--green-soft); line-height: 1.6; } .dt-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* 「字段」按钮排在工具栏最右边（老板 10-15「把图中的字段放右边」）；别的按钮是脚本后加的，用 order 不用挪 DOM */ #dt-btn-columns { order: 99; } .dt-search { position: relative; display: flex; align-items: center; } .dt-search-icon { position: absolute; left: 9px; font-size: 11px; opacity: .5; pointer-events: none; } .dt-search input { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 26px 6px 27px; width: 210px; font-size: 13px; background: #fff; color: var(--ink); transition: var(--dur-fast) var(--ease); } .dt-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .dt-search input::-webkit-search-cancel-button { display: none; } .dt-search-clear { position: absolute; right: 6px; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; } .dt-tool { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: var(--radius-md); padding: 6px 12px; font-size: 13px; cursor: pointer; transition: var(--dur-fast) var(--ease); white-space: nowrap; } .dt-tool:hover { border-color: var(--green); color: var(--green); } .dt-tool.on { border-color: var(--green); color: var(--green); background: var(--green-soft); } /* 「重置」（10-23）：什么条件都没加时灰着、点不动 */ .dt-tool:disabled { opacity: .45; cursor: default; } .dt-tool:disabled:hover { border-color: var(--line); color: var(--ink-2); } .dt-icon-tool { padding: 6px 10px; font-size: 14px; } .dt-chip { min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--radius-full); background: var(--green); color: var(--text-on-accent); font-size: 11px; line-height: 16px; text-align: center; } .dt-chip-plain { background: transparent; color: var(--muted); padding: 0; } /* ---------- 筛选标签条 ---------- */ .dt-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--canvas); } .dt-fchip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-full); padding: 3px 5px 3px 11px; font-size: 12px; color: var(--ink); } .dt-fchip b { font-weight: 500; } .dt-fchip i { font-style: normal; color: var(--muted); } .dt-fchip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; border-radius: var(--radius-full); } .dt-fchip button:hover { color: var(--danger-fg); } .dt-chips-clear { border: 0; background: none; color: var(--blue); font-size: 12px; cursor: pointer; } /* ---------- 浮层面板 ---------- */ .dt-panel { position: absolute; right: 16px; top: 52px; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 14px 16px 16px; width: min(94vw, 580px); } .dt-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; } .dt-panel-x { border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; } .dt-panel-x:hover { color: var(--ink); } .dt-panel select, .dt-panel input[type="text"], .dt-panel input[type="search"] { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 9px; font-size: 13px; background: #fff; color: var(--ink); min-width: 0; } .dt-panel select:focus, .dt-panel input:focus { outline: none; border-color: var(--green); } .dt-panel-actions { display: flex; gap: 8px; margin-top: 12px; } .dt-btn-primary { border: 0; background: var(--green); color: var(--text-on-accent); border-radius: var(--radius-sm); padding: 7px 18px; font-size: 13px; cursor: pointer; } .dt-btn-ghost { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; cursor: pointer; } .dt-btn-ghost:hover { border-color: var(--green); color: var(--green); } .dt-add { border: 0; background: none; color: var(--blue); cursor: pointer; font-size: 13px; padding: 4px 0; } .dt-filter-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 118px 1fr 28px; gap: 6px; margin-bottom: 6px; align-items: center; } .dt-filter-row .dt-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; } .dt-filter-row .dt-del:hover { color: var(--danger-fg); } .dt-sort-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dt-sort-row select { flex: 1; min-width: 180px; } .dt-seg { display: inline-flex; flex: none; } .dt-seg button { border: 1px solid var(--line); background: #fff; padding: 6px 14px; font-size: 12px; cursor: pointer; color: var(--ink-2); } .dt-seg button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .dt-seg button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; } .dt-seg button.on { background: var(--green-soft); color: var(--green); border-color: var(--green); z-index: 1; } .dt-check { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--ink-2); margin-top: 10px; line-height: 1.5; } .dt-panel-cols { width: min(94vw, 620px); } .dt-col-search { width: 100%; margin-bottom: 8px; } .dt-col-summary { font-style: normal; color: var(--muted); } .dt-col-tier { padding: 8px 10px 4px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); } .dt-col-tier:first-child { border-top: 0; } .dt-col-tiers { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--muted); } .dt-kv-fold { border-bottom: 1px solid var(--line); } .dt-kv-fold > summary { padding: 9px 16px; font-size: 12px; color: var(--muted); cursor: pointer; } .dt-kv-fold > summary:hover { color: var(--ink); } .dt-kv-fold[open] > summary { border-bottom: 1px solid var(--line); } /* 「还没填的」：能改的空格子带「改」，不能改的只列名字（10-22） */ .dt-empty-fold > summary small { margin-left: 6px; color: var(--muted); font-size: 11px; } .dt-empty-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 16px; } .dt-empty-names span { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 1px 8px; font-size: 12px; color: var(--muted); } /* 单列铺开：一行一个字段，左边一个可拖的手柄——列的先后顺序就按这里的上下顺序来 （用户 2026-09-23 要的）。双列排版没法表达「顺序」，所以改单列。 */ .dt-columns-list { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 1px; } .dt-col-row { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: center; padding: 3px 6px; border-radius: var(--radius-sm); background: #fff; } .dt-col-row:hover { background: var(--canvas); } .dt-col-row.dt-can-drag { cursor: grab; } .dt-col-row.dt-dragging { opacity: .5; background: var(--green-soft); cursor: grabbing; } /* 拖动期间整列表禁选，否则指针一划就把字段名刷成蓝色选区 */ .dt-columns-list.dt-dragging-on { user-select: none; cursor: grabbing; } .dt-grip { color: var(--n-300); font-size: 13px; line-height: 1; text-align: center; user-select: none; } .dt-col-row.dt-can-drag:hover .dt-grip { color: var(--ink-2); } .dt-columns-list label { /* 第 4 格给列归属的色点；没有色点的行这一列宽 0，不占地方 */ display: grid; grid-template-columns: 16px 18px 1fr auto; gap: 7px; align-items: center; font-size: 13px; color: var(--ink); padding: 3px 0; cursor: pointer; min-width: 0; } .dt-columns-list span.dt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-col-row.dt-off span.dt-name { color: var(--muted); } /* 子表的列前面带一截淡色「子表名 ›」 */ .dt-name-sub { font-style: normal; color: var(--muted); } .dt-ftype { width: 18px; height: 18px; border-radius: var(--radius-sm); background: var(--canvas); color: var(--muted); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* ---------- 列头菜单 ---------- */ .dt-col-menu { position: absolute; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 4px; min-width: 156px; display: flex; flex-direction: column; } .dt-col-menu button { border: 0; background: none; text-align: left; padding: 7px 10px; font-size: 13px; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; } .dt-col-menu button:hover { background: var(--canvas); color: var(--green); } /* 子表的列菜单头上写「子表名 › 列名」（普通列不出这一行）；width:0 + min-width:100% 让它不撑宽菜单，太长就省略 */ .dt-col-menu-title { width: 0; min-width: 100%; box-sizing: border-box; padding: 5px 10px 6px; margin-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 表格 ---------- */ .dt-grid-wrap { flex: 1; overflow: auto; position: relative; background: #fff; } /* 表格必须有「确定宽度」，table-layout:fixed 才真的生效。宽度是 auto（shrink-to-fit）时 Chrome 会回退到自动表格布局，th 上的 width 全部降级成建议值、由单元格内容重新推算 —— 这就是「列宽拖了不动」的全部原因（实测：spec 300px 的五列渲染成 177/216/224/115/115， 拖一次鼠标 spec 从 150 变 88、渲染宽 216 纹丝不动）。min-width:100% 不构成确定宽度。 fixed 布局下表宽取「width 与各列宽之和的较大者」（CSS 2.1 §17.5.2.1），所以 width:0 的实际含义是「表宽 = 各列宽之和」，浏览器自己做这道加法：拖拽过程中列宽天然跟手， 不需要任何 JS 同步表宽，也不用在 JS 里复刻 46px 这个行号列常量。 列宽之和小于一屏时再由 min-width:100% 撑满，撑出来的富余交给表尾的 .dt-pad 空列。 */ .dt-grid { border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; width: 0; min-width: 100%; } /* 表尾空列：全表唯一不带宽度的列。没有它，min-width 撑出来的富余会被 fixed 布局按比例 摊回每一条有指定宽度的列（实测 190→354、150→280，连 min/max-width 都写死 46px 的行号列 都被拉到 86 —— fixed 布局下单元格的 min/max-width 是被忽略的），用户拖的宽度又白拖了。 顺带把 .dt-freeze 那个硬编码的 left:46px 和行号列真实宽度重新对齐。 不画右边框，否则每行最右侧会多出一条竖线。 别给它写 padding:0：紧凑模式那条 .dt-app[data-density="compact"] .dt-grid td 特指度更高， 会把它盖掉；格子本来就是空的，写一条不成立的规则只会误导下一个人。 */ .dt-grid th.dt-pad, .dt-grid td.dt-pad { width: auto; border-right: 0; } .dt-grid th { position: sticky; top: 0; z-index: 6; background: var(--canvas); color: var(--ink-2); font-weight: 500; text-align: left; padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; user-select: none; } .dt-th-inner { display: flex; align-items: center; gap: 4px; padding: 8px 10px; height: 100%; cursor: pointer; } .dt-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* 列归属的色点（颜色是数据，由 JS 写进 inline style；这里只有形状）。 列的淡底同理走 inline 的 background-image 叠加，不占 background-color—— 与行悬停/冻结列/选中行的底色互不打架。 */ .dt-own-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; } .dt-arrow { color: var(--green); font-size: 11px; flex: none; } .dt-th-menu { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: var(--radius-sm); opacity: 0; transition: var(--dur-fast) var(--ease); } .dt-grid th:hover .dt-th-menu { opacity: 1; } .dt-th-menu:hover { background: var(--n-100); color: var(--ink); } /* 列宽拖拽手柄：贴在列右边界，双击回默认宽 */ /* 抓手必须完全落在自己 th 的 border-box 里。原来是 right:-3px/width:7px，往外溢 3px —— 而 th 是 position:sticky;z-index:6，每个 th 自成层叠上下文，抓手的 z-index:7 只在本 th 内部排序，溢出去那几像素会被**后一个 th** 盖住命中。结果 7px 的抓手实际只剩 5px 能点， 而且能点的部分整个落在那条可见分隔线的左边：用户照着线点，点到的是邻列的排序。 right:-1px 让抓手右边缘正好压在 th 的 border-box 右边缘（th padding:0、border-right:1px）， 恰好盖住分隔线、一个像素都不外溢 —— 也顺手消掉了最后一列外溢造成的 2px 幽灵横向滚动 （scrollWidth 比 clientWidth 多 2，会让固定列那条「右边还有内容」的投影在不用滚的表上亮起来）。 宽度上限 10px：.dt-th-inner 的 padding 是 8px 10px，再宽就开始吃列头的 ⋮ 菜单。 */ .dt-resize { position: absolute; top: 0; right: -1px; width: 9px; height: 100%; cursor: col-resize; z-index: 7; } .dt-resize:hover { background: var(--green); opacity: .25; } /* 两层表头：子表名在上、列名在下（老板 10-10「像简道云……先从表单名开始，然后才到列」）。 只有表里看得到子表的列时才画两层（datatable.js renderHead），没有时表头和以前一字不差。 子表名那格高 28px（含 1px 底线，就是它和下面列名之间那条分隔线）；第二层吸顶的 top 这里写 28px 兜底， JS 量出第一层实际高度再写一次（字号放大时第一层会变高）。层叠不另起：表头 6、冻结列表头 8、表体冻结格 5， 两层横竖滚都盖在表体上面；首列是子表的列时，它上面那格子表名单独一格、带 .dt-freeze 一起冻结。 */ .dt-grid th.dt-gh { height: 28px; box-sizing: border-box; cursor: default; } /* 子表名和列名一样大（简道云就是这样），靠上下两层分主次，不靠字号 */ .dt-gh-inner { padding: 0 10px; line-height: 27px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 子表名横滚时贴着冻结列右边走：一段子表五六列宽，滚到后几列时名字还在（left 由 JS 量了写，见 syncHeadSticky）。 要能在格子里挪，宽度得收成字那么宽；冻结的那格本来就不动，不用 */ .dt-gh:not(.dt-freeze) .dt-gh-inner { position: sticky; width: fit-content; max-width: 100%; box-sizing: border-box; } .dt-grid thead tr + tr th { top: 28px; } .dt-grid td { padding: 9px 10px; height: 38px; box-sizing: border-box; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; background: #fff; } .dt-app[data-density="compact"] .dt-grid td { padding: 5px 10px; height: 30px; } .dt-app[data-density="compact"] .dt-grid td img { height: 20px; } .dt-grid tbody tr:hover td { background: var(--canvas); } .dt-grid tbody tr.on td { background: var(--green-soft); } .dt-grid td.dt-num { text-align: right; font-variant-numeric: tabular-nums; } .dt-grid td img { height: 24px; border-radius: 3px; display: block; object-fit: cover; } .dt-grid td mark { background: var(--warning-bg); color: var(--warning-fg); border-radius: 2px; padding: 0 1px; } /* 行号列 + 首列固定：几十列横滚时不丢失“这是哪一行” */ .dt-grid th.dt-idx, .dt-grid td.dt-idx { position: sticky; left: 0; z-index: 5; width: 46px; min-width: 46px; max-width: 46px; text-align: center; color: var(--muted); font-size: 11px; padding-left: 0; padding-right: 0; background: var(--canvas); } .dt-grid th.dt-idx { z-index: 8; } .dt-grid tbody tr:hover td.dt-idx { background: var(--n-100); color: var(--ink-2); } .dt-grid th.dt-freeze, .dt-grid td.dt-freeze { position: sticky; left: 46px; z-index: 5; } .dt-grid th.dt-freeze { z-index: 8; } .dt-grid td.dt-freeze { background: #fff; } .dt-grid tbody tr:hover td.dt-freeze { background: var(--canvas); } .dt-grid tbody tr.on td.dt-freeze { background: var(--green-soft); } /* 固定列右侧投影：告诉眼睛“右边还有可横滚的区域”。 用 box-shadow 而不是 ::after——单元格自身 overflow:hidden（省略号要它），伪元素会被裁掉。 */ .dt-grid th.dt-freeze, .dt-grid td.dt-freeze { box-shadow: 6px 0 6px -6px rgb(0 0 0 / 16%); } .dt-grid-wrap.at-left .dt-freeze { box-shadow: none; } /* ---------- 子表「多行」（老板 10-10：一条记录占几行、子表每行单独一行，像简道云） ---------- 一条记录还是一个 （不用 rowspan，整块粘贴 / 点行 / 选中照旧）；子列格子里叠等高小行，横着跨列对齐。 高度对账：第一小行 37 + 往后每行 38（含 1px 分隔线）+ 格子底线 1 = N × 38，正好是 N 个普通行高；紧凑同理 30。 格子 padding 清零、小行自己留左右 10px，分隔线才能顶到竖线、和隔壁子列连成一条。 两条都写一份紧凑的：紧凑那条 .dt-app[data-density="compact"] .dt-grid td 特指度更高，会把 padding 盖回来。 */ .dt-app .dt-grid td.dt-ml, .dt-app[data-density="compact"] .dt-grid td.dt-ml { padding: 0; vertical-align: top; } .dt-grid tbody tr.dt-ml-row td { vertical-align: top; } .dt-ml-line { height: 37px; line-height: 37px; padding: 0 10px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-ml-line + .dt-ml-line { height: 38px; border-top: 1px solid var(--line); } .dt-ml-line.dt-num { text-align: right; font-variant-numeric: tabular-nums; } .dt-grid td .dt-ml-line img { display: inline-block; vertical-align: middle; } .dt-ml-more { color: var(--muted); font-size: 12px; } .dt-app[data-density="compact"] .dt-ml-line { height: 29px; line-height: 29px; } .dt-app[data-density="compact"] .dt-ml-line + .dt-ml-line { height: 30px; } /* 工具栏「子表：拆开成列 | 多行」：和工具按钮一样高 */ .dt-subview { display: inline-flex; align-items: center; gap: 10px; } .dt-subview-one { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; } .dt-subview-label { cursor: help; } .dt-subview .dt-seg button { padding: 6px 10px; font-size: 13px; line-height: normal; } /* 「恢复默认」（10-10）：这个人点过行高 / 子表才出，小字链接样，不抢工具栏按钮的眼 */ .dt-view-reset { border: 0; background: none; padding: 4px 2px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; } .dt-view-reset:hover { color: var(--green); } .dt-view-reset[hidden] { display: none; } .dt-open { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; opacity: 0; transition: var(--dur-fast) var(--ease); } .dt-grid tbody tr:hover .dt-open { opacity: 1; } .dt-open:hover { color: var(--green); } .dt-cell-empty { color: var(--n-300); } /* ---------- 空状态 / 骨架屏 ---------- */ .dt-state { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #fff; } .dt-state .dt-state-icon { font-size: 30px; opacity: .3; margin-bottom: 8px; } .dt-state b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .dt-state small { color: var(--muted); font-size: 12px; line-height: 1.7; } .dt-state .dt-btn-ghost { margin: 12px auto 0; } .dt-skeleton td > span { display: block; height: 10px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--n-100), var(--canvas), var(--n-100)); background-size: 200% 100%; animation: dt-shimmer 1.1s linear infinite; } @keyframes dt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- 页脚分页 ---------- */ .dt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: #fff; } .dt-range { white-space: nowrap; } .dt-foot-right { display: flex; align-items: center; gap: 14px; } .dt-pagesize { display: inline-flex; align-items: center; gap: 5px; } .dt-pagesize select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 6px; font-size: 12px; background: #fff; color: var(--ink-2); } .dt-pager { display: flex; gap: 3px; align-items: center; } .dt-pager button { min-width: 28px; height: 26px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; padding: 0 6px; } .dt-pager button:hover:not(:disabled) { border-color: var(--green); color: var(--green); } .dt-pager button.on { background: var(--green); border-color: var(--green); color: var(--text-on-accent); } .dt-pager button:disabled { opacity: .4; cursor: default; } .dt-pager .dt-gap { color: var(--muted); padding: 0 2px; } /* ---------- 行详情抽屉 ---------- */ .dt-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 440px); background: #fff; z-index: 50; border-left: 1px solid var(--line); box-shadow: var(--shadow-3); display: flex; flex-direction: column; } .dt-drawer[hidden] { display: none; } .dt-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } .dt-drawer-who { min-width: 0; } .dt-drawer-who b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-drawer-who small { color: var(--muted); font-size: 11px; } .dt-drawer-nav { display: flex; gap: 4px; flex: none; } .dt-drawer-nav button { width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); color: var(--ink-2); cursor: pointer; font-size: 13px; } .dt-drawer-nav button:hover:not(:disabled) { border-color: var(--green); color: var(--green); } .dt-drawer-nav button:disabled { opacity: .4; cursor: default; } .dt-drawer-only { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); padding: 9px 16px; border-bottom: 1px solid var(--line); } .dt-drawer-body { flex: 1; overflow: auto; padding: 4px 0 24px; } /* ---------- 打开方式（老板 10-07，照简道云的三种）：小窗 / 靠边（可拖宽）/ 全屏 ---------- 宽了就自动分栏（容器查询，按面板实际宽度，不看窗口）：靠边拖到 680px 以上也会分栏。 */ .dt-drawer { container-type: inline-size; } .dt-drawer-grip { position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; } .dt-drawer-grip::after { content: ''; position: absolute; top: 50%; left: 3px; width: 3px; height: 40px; margin-top: -20px; border-radius: 2px; background: var(--line-strong); opacity: .6; transition: opacity .15s, background .15s; } .dt-drawer-grip:hover::after, .dt-drawer.resizing .dt-drawer-grip::after { opacity: 1; background: var(--green); } .dt-drawer.resizing { user-select: none; } .dt-drawer.resizing .dt-drawer-body { pointer-events: none; } .dt-drawer.mode-modal { top: 4vh; bottom: 4vh; right: auto; left: 50%; transform: translateX(-50%); width: min(94vw, 920px); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 0 0 100vmax rgba(20, 35, 29, .38), var(--shadow-3); } /* 超大投影当遮罩，点遮罩 = 点外面关 */ .dt-drawer.mode-full { left: 0; width: auto; border-left: 0; } .dt-drawer.mode-modal .dt-drawer-grip, .dt-drawer.mode-full .dt-drawer-grip { display: none; } .dt-mode { margin-left: auto; } .dt-mode button { height: 26px; padding: 0 9px; font-size: 12px; line-height: 24px; } .dt-drawer-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); } .dt-drawer-actions:empty { display: none; } .dt-act { height: 26px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 12px; cursor: pointer; } .dt-act:hover { border-color: var(--green); color: var(--green); } .dt-act.primary { border-color: var(--green); color: var(--green); font-weight: 600; } .dt-act-chip { font-size: 12px; padding: 0 9px; line-height: 24px; border-radius: var(--radius-full); white-space: nowrap; } .dt-act-chip.ok { background: var(--success-bg); color: var(--success-fg); } .dt-act-chip.lock { background: var(--n-100); color: var(--muted); cursor: help; } @container (min-width: 680px) { #dt-drawer-body:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 20px; align-content: start; padding: 4px 16px 24px; } #dt-drawer-body > .dt-kv, .dt-fold-body > .dt-kv, .dt-edit-block > .dt-kv { padding-left: 0; padding-right: 0; } #dt-drawer-body > .dt-kv-wide, #dt-drawer-body > p, .dt-edit-block, .dt-kv-fold, .dt-rel, .dt-edit-why { grid-column: 1 / -1; } .dt-edit-block, .dt-fold-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 20px; } .dt-edit-block > .dt-edit-tip, .dt-edit-block > .dt-kv-wide, .dt-fold-body > .dt-kv-wide { grid-column: 1 / -1; } .dt-edit-tip, .dt-kv-fold > summary, .dt-rel, .dt-edit-why { padding-left: 0; padding-right: 0; } } @media (max-width: 760px) { .dt-drawer.mode-modal { top: 0; bottom: 0; left: 0; transform: none; width: 100vw; border-radius: 0; border: 0; } .dt-drawer-grip { display: none; } } /* 「打印」只印这一条：头上的按钮、标签页、改按钮都不印；折着的段在 beforeprint 里先展开 */ @media print { body > :not(#dt-drawer) { display: none !important; } .dt-drawer, .dt-drawer.mode-modal, .dt-drawer.mode-full { position: static; width: auto !important; transform: none; box-shadow: none; border: 0; border-radius: 0; height: auto; } .dt-drawer-grip, .dt-drawer-nav, .dt-mode, .dt-drawer-actions, .dt-drawer-tabs, .dt-drawer-only, .dt-kv-edit, .dt-kv-lock, .dt-edit-why, .dt-edit-tip, .sq-new-tag { display: none !important; } .dt-drawer-body { overflow: visible; } .dt-sub-scroll { max-height: none; overflow: visible; } } .dt-kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13px; } .dt-kv dt { color: var(--muted); font-size: 12px; line-height: 1.6; word-break: break-word; } .dt-kv dd { margin: 0; color: var(--ink); line-height: 1.6; word-break: break-word; } .dt-kv img { max-width: 100%; border-radius: var(--radius-sm); } .dt-kv-wide { grid-template-columns: 1fr; gap: 6px; } .dt-kv-wide dd { padding-right: 0; } .dt-sub-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 360px; } .dt-sub table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; } .dt-sub th, .dt-sub td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .dt-sub th { color: var(--muted); font-weight: 500; background: var(--canvas); position: sticky; top: 0; } .dt-sub tr:last-child td { border-bottom: 0; } .dt-sub img { width: 36px; height: 36px; object-fit: contain; } .dt-sub-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); } .dt-sub-all { margin-top: 6px; border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; } .dt-sub-all:hover { color: var(--ink); } @media (max-width: 760px) { .dt-search input { width: 130px; } .dt-filter-row { grid-template-columns: 1fr 1fr; } .dt-columns-list { grid-template-columns: 1fr; } .dt-panel { right: 8px; left: 8px; width: auto; } } /* ---------- 字段类型着色（下拉 / 成员 / 关联） ---------- 用户 2026-09-24 要「像简道云一样带颜色」。**颜色不是简道云那一套**—— 开放接口不返回选项与配色（widget/list 只有 name/label/type）， 这里是我们按取值稳定哈希出来的 8 档软色板（色值在 tokens.css 的「选项色板」段）。 只给下拉/成员/关联上色：全上色等于没上色，文本和数字保持素净才看得出重点。 */ .dt-tag { display: inline-block; max-width: 100%; border-radius: var(--radius-sm); padding: 1px 7px; margin: 0 4px 0 0; font-size: 12px; line-height: 18px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-tag:last-child { margin-right: 0; } .dt-tag-0 { background: var(--tag-0-bg); color: var(--tag-0-fg); } .dt-tag-1 { background: var(--tag-1-bg); color: var(--tag-1-fg); } .dt-tag-2 { background: var(--tag-2-bg); color: var(--tag-2-fg); } .dt-tag-3 { background: var(--tag-3-bg); color: var(--tag-3-fg); } .dt-tag-4 { background: var(--tag-4-bg); color: var(--tag-4-fg); } .dt-tag-5 { background: var(--tag-5-bg); color: var(--tag-5-fg); } .dt-tag-6 { background: var(--tag-6-bg); color: var(--tag-6-fg); } .dt-tag-7 { background: var(--tag-7-bg); color: var(--tag-7-fg); } /* 成员与关联不参与哈希：它们各自固定一档，一眼能和「选项」区分开 */ .dt-tag-person { background: var(--tag-person-bg); color: var(--tag-person-fg); } /* 状态词按意思上色（shared/fields.js statusTone）：未结清 / 未完成 红色警示，待办 橙，已完成 绿，作废 灰 */ .dt-tag-st-danger { background: var(--danger-bg); color: var(--danger-fg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--danger-border); } .dt-tag-st-warn { background: var(--warning-bg); color: var(--warning-fg); } .dt-tag-st-ok { background: var(--success-bg); color: var(--success-fg); } .dt-tag-st-mute { background: var(--n-100); color: var(--muted); } .dt-tag-link { background: var(--tag-link-bg); color: var(--tag-link-fg); } .dt-tag mark { background: var(--warning-bg); color: var(--warning-fg); } /* 行详情抽屉里的标签稍微松一点，那边是竖排不抢位置 */ .dt-kv .dt-tag { line-height: 20px; padding: 2px 8px; } /* ---------- 行详情抽屉：改一格 + 修改日志（2026-09-24） ---------- */ .dt-drawer-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); } .dt-drawer-tabs button { border: 0; background: none; padding: 7px 12px; font-size: 13px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; } .dt-drawer-tabs button:hover { color: var(--ink); } .dt-drawer-tabs button.on { color: var(--green); border-bottom-color: var(--green); font-weight: 600; } /* 铅笔一直看得见（淡着），悬停才实心：藏起来靠 hover 才出现的按钮，不熟的人根本不知道能改 */ .dt-kv dd { position: relative; padding-right: 40px; } /* 10-07 老板找不到改的地方：从半透明铅笔改成一直看得见的绿色「改」 */ .dt-kv-edit { position: absolute; top: -1px; right: 0; border: 1px solid var(--green); background: var(--surface); cursor: pointer; color: var(--green); font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: var(--radius-sm); opacity: 1; } .dt-kv:hover .dt-kv-edit, .dt-kv-edit:focus-visible { opacity: 1; } .dt-kv-edit:hover { color: var(--green); background: var(--surface-hover); } .dt-kv-lock { position: absolute; top: 0; right: 0; font-size: 11px; opacity: .35; cursor: help; } .dt-kv.editing { background: var(--surface-hover); } .dt-editor-input { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; } .dt-editor-input:focus { outline: 2px solid var(--green); outline-offset: -1px; } select.dt-editor-input[multiple] { min-height: 108px; } .dt-editor-loading { font-size: 12px; color: var(--muted); } .dt-editor-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .dt-editor-bar button { font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); } .dt-editor-bar .dt-btn-primary { background: var(--green); border-color: var(--green); color: var(--text-on-accent); } .dt-editor-bar small { color: var(--muted); font-size: 11px; } .dt-edit-why { padding: 12px 16px; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; } .dt-log { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; } .dt-log-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .dt-log-head span { font-size: 11px; color: var(--muted); white-space: nowrap; } .dt-log-diff { margin-top: 4px; color: var(--ink-2); line-height: 1.6; word-break: break-word; } .dt-log-diff s { color: var(--muted); } .dt-log-diff em { font-style: normal; color: var(--ink); font-weight: 600; } .dt-log.bad { background: var(--danger-bg); } .dt-log-err { margin-top: 4px; font-size: 11px; color: var(--danger-fg); } /* 一张单的全貌（同一个 PI 在别的表里的记录） */ .dt-rel { padding: 10px 16px 14px; border-top: 1px solid var(--line); } .dt-rel h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); } .dt-rel-t { margin: 0 0 12px; } .dt-rel-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 13px; } .dt-rel-h span { color: var(--muted); font-size: 12px; } .dt-rel-h a { margin-left: auto; font-size: 12px; } .dt-rel table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; } .dt-rel th, .dt-rel td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .dt-rel th { color: var(--muted); font-weight: 500; background: var(--canvas); } .dt-rel-note { margin: 2px 0 0; font-size: 12px; color: var(--muted); } /* 老板 10-04 可视化：空状态换成全站的 sqv-empty（图标 + 一句话 + 按钮），宽度收一点好读 */ .dt-state .sqv-empty { max-width: 420px; } .dt-state .sqv-empty b { margin-bottom: 0; } /* 富文本（简道云 {html}）在抽屉里照排版显示，10-08。字号跟着 .dt-kv 走，标题别比字段名大太多 */ .dt-rich { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; } .dt-rich > :first-child { margin-top: 0; } .dt-rich > :last-child { margin-bottom: 0; } .dt-rich p, .dt-rich ul, .dt-rich ol, .dt-rich blockquote, .dt-rich pre, .dt-rich table { margin: 0 0 6px; } .dt-rich h1, .dt-rich h2, .dt-rich h3, .dt-rich h4, .dt-rich h5, .dt-rich h6 { margin: 10px 0 4px; font-size: 14px; line-height: 1.5; } .dt-rich ul, .dt-rich ol { padding-left: 1.4em; } .dt-rich li { margin: 2px 0; } .dt-rich a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } .dt-rich img { display: block; max-width: 100%; max-height: 320px; margin: 4px 0; border-radius: var(--radius-sm); } .dt-rich blockquote { padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); } .dt-rich pre, .dt-rich code { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 12px; } .dt-rich table { border-collapse: collapse; display: block; overflow-x: auto; } .dt-rich td, .dt-rich th { border: 1px solid var(--line); padding: 3px 6px; } .dt-rich hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; } .dt-rich mark { background: color-mix(in srgb, var(--amber) 30%, transparent); color: inherit; } .dt-rich-files { display: flex; flex-wrap: wrap; gap: 4px 12px; } /* 富文本编辑器（10-08）：工具条 + 可编辑区；锁住的 TC 段灰底只读；被拦下时把他改的版本摆在下面 */ .dt-rt { display: flex; flex-direction: column; gap: 8px; } .dt-rt-bar { display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: 0; z-index: 2; padding: 4px 0; background: var(--surface); } .dt-rt-bar button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; line-height: 20px; cursor: pointer; color: var(--ink); } .dt-rt-bar button:hover { background: var(--surface-hover); } .dt-rt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: 1px; } .dt-rt-dot.red { background: var(--danger-solid); } .dt-rt-dot.green { background: var(--green); } .dt-rt-dot.grey { background: var(--muted); } .dt-rt-area { min-height: 160px; max-height: 60vh; overflow: auto; padding: 8px 10px; border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--surface); outline: none; } .dt-rt-area:focus { box-shadow: 0 0 0 3px var(--green-soft); } .dt-rt-locked, .dt-rt-draft { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px dashed var(--line); background: var(--surface-hover); } .dt-rt-locked .dt-rich { opacity: .75; max-height: 180px; overflow: auto; } .dt-rt-draft { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); } .dt-rt-tip { margin: 0 0 6px; font-size: 12px; color: var(--muted); } /* 🔒 改成按钮（点一下提示「该字段不能修改：原因」，老板 10-08），去掉按钮外观 */ button.dt-kv-lock { border: 0; background: none; padding: 0; line-height: 1.6; cursor: pointer; } button.dt-kv-lock:hover { opacity: .8; } /* ---------- 产品表「看图」（老板 10-21：「这个产品表能不能换一种方式……在这里怎么呈现会更好」，datatable.js 搜「产品表「看图」」） ---------- 卡片 = 主图（白底 contain，整台产品看得全）+ 编码 + 品名两行 + 英文名 + 电压功率尺寸 + 进价（看得到才有）； 详情顶上「这款产品」= 大图和附件图、品名、备注（重点）黄框、规格 / 包装 / 价格 / 工厂、中台里这款的其他资料。 */ .dt-viewseg button { padding: 6px 12px; white-space: nowrap; } .dt-pcats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px 2px; } .dt-pcats-k { font-size: 12px; color: var(--muted); margin-right: 2px; white-space: nowrap; } .dt-pcats > button { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-2); font-size: 12px; cursor: pointer; white-space: nowrap; } .dt-pcats > button small { margin-left: 4px; color: var(--muted); font-size: 11px; } .dt-pcats > button:hover { border-color: var(--green); color: var(--green); } .dt-pcats > button.on { background: var(--green); border-color: var(--green); color: var(--text-on-accent); font-weight: 600; } .dt-pcats > button.on small { color: inherit; } .dt-pparts { margin-left: auto; } .dt-pparts button { padding: 0 10px; height: 26px; white-space: nowrap; } .dt-pparts button + button { margin-left: -1px; } .dt-pparts button:not(:first-child):not(:last-child) { border-radius: 0; } .dt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; padding: 12px 16px 20px; align-content: start; } .dt-cards-on .dt-grid { display: none; } .dt-cards-on .dt-grid-wrap { background: var(--canvas); } .dt-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .dt-card:hover { border-color: var(--green); box-shadow: var(--shadow-2); } .dt-card.on { border-color: var(--green); box-shadow: 0 0 0 2px var(--accent-soft-border); } .dt-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .dt-card-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 4px; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; } .dt-card-img img { width: 100%; height: 100%; object-fit: contain; } .dt-card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--surface-sunken); color: var(--muted); font-size: 12px; } .dt-card-tags, .dt-ptags { display: flex; flex-wrap: wrap; gap: 4px; } .dt-card-tags { position: absolute; top: 6px; left: 6px; } .dt-ptags { margin-top: 6px; } .dt-card-tags i, .dt-ptags i { font-style: normal; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: var(--radius-full); white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-fg); border: 1px solid var(--neutral-border); } .dt-card-tags i.stop, .dt-ptags i.stop { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); } .dt-card-tags i.new, .dt-ptags i.new { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); } .dt-card-tags i.st, .dt-ptags i.st { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); } .dt-card-code { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-card-name { font-size: 13px; color: var(--ink-2); line-height: 1.4; min-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dt-card-name em { color: var(--muted); font-style: normal; } .dt-card-facts { font-size: 11px; line-height: 16px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .dt-card-price { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-card mark { background: color-mix(in srgb, var(--amber) 30%, transparent); color: inherit; } .dt-card-sk { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); } .dt-card-sk span { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: var(--skeleton-base); } .dt-card-sk i { height: 12px; border-radius: var(--radius-sm); background: var(--skeleton-base); } .dt-card-sk i + i { width: 60%; } .dt-phint { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; } .dt-phint a { color: var(--green); } /* 几个词 0 条：去掉哪个词有几条（10-22） */ .dt-qdrop { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 13px; color: var(--ink-2); } .dt-qdrop span { flex-basis: 100%; text-align: center; } .dt-qdrop button { border: 1px solid var(--green); color: var(--green); background: #fff; border-radius: var(--radius-full); padding: 3px 12px; font-size: 13px; cursor: pointer; } .dt-qdrop button:hover { background: var(--green); color: #fff; } .dt-phead { display: grid; gap: 12px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); } .dt-pbig { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: zoom-in; } .dt-pbig img { display: block; width: 100%; height: 260px; object-fit: contain; } .dt-pths { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .dt-pth { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; overflow: hidden; } .dt-pth img { width: 100%; height: 100%; object-fit: contain; } .dt-pth.on, .dt-pth:hover { border-color: var(--green); } .dt-pnoimg { display: flex; align-items: center; justify-content: center; height: 96px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--muted); font-size: 12px; } .dt-pname { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); } .dt-pen { margin-top: 2px; font-size: 12px; color: var(--muted); } /* 一句话特点（AI 每晚写，app/product_summary.py；老板 10-22「说明这个产品有什么特点」）：品名下面一行 */ .dt-psum { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .dt-psum > b { margin-right: 6px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); font-size: 11px; font-weight: 600; } .dt-pnote { margin: 10px 0 2px; padding: 8px 10px; border: 1px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warning-bg); font-size: 13px; line-height: 1.6; } .dt-pnote > b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--warning-fg); } .dt-pfacts { margin-top: 10px; } .dt-pfacts h5 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); } .dt-pfacts dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; margin: 0; } .dt-pfacts dl > div { min-width: 0; } .dt-pfacts dt { font-size: 11px; color: var(--muted); } .dt-pfacts dd { margin: 0; font-size: 13px; color: var(--ink); word-break: break-word; } .dt-pobj { padding-top: 10px; border-top: 1px dashed var(--line); } .dt-pobj:empty { display: none; } .dt-pobj h5 { margin: 0 0 4px; font-size: 13px; color: var(--ink); } .dt-pobj h5 small { margin-left: 4px; font-weight: 400; font-size: 12px; color: var(--muted); } .dt-porow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .dt-porow:last-child { border-bottom: 0; } .dt-porow-w { min-width: 0; color: var(--ink-2); } .dt-porow-w b { color: var(--ink); } .dt-porow small { display: block; font-size: 12px; color: var(--muted); } .dt-porow ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); } .dt-porow ul i { font-style: normal; color: var(--muted); } .dt-porow ul span { color: var(--muted); } .dt-porow.muted { opacity: .75; } .dt-pgo { flex: none; font-size: 12px; color: var(--green); white-space: nowrap; text-decoration: none; } .dt-pgo:hover { text-decoration: underline; } .dt-pwarn { margin: 4px 0 6px; padding: 6px 10px; border: 1px solid var(--danger-border); border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger-fg); font-size: 12px; } .dt-pmsg { margin: 4px 0; font-size: 12px; color: var(--muted); } .dt-pall { margin: 12px 16px 2px; font-size: 12px; font-weight: 600; color: var(--muted); } .dt-pzoom { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: var(--overlay); cursor: zoom-out; } .dt-pzoom img { max-width: 94vw; max-height: 90vh; object-fit: contain; background: var(--surface); border-radius: var(--radius-sm); } .dt-pzoom-x { position: absolute; top: 12px; right: 12px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; } @container (min-width: 680px) { .dt-phead, .dt-pall { grid-column: 1 / -1; } .dt-phead { grid-template-columns: minmax(240px, 340px) 1fr; padding-left: 0; padding-right: 0; } .dt-pobj { grid-column: 1 / -1; } .dt-pall { margin-left: 0; margin-right: 0; } } @media (max-width: 640px) { .dt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; } .dt-pcats { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px 2px; } .dt-pparts { margin-left: 0; } .dt-pbig img { height: 220px; } } @media print { .dt-pobj, .dt-pths { display: none !important; } } /* 看图时搜索框是主入口，放宽；「子表 拆 / 不拆」只管表格，藏起来 */ .dt-cards-on .dt-search input { width: 300px; } .dt-cards-on #dt-subview { display: none !important; } @media (max-width: 760px) { .dt-cards-on .dt-search input { width: 200px; } } /* 备注（重点）长的（热卖款常有几屏）先露 5 行，点「展开全部」看全，别把规格和中台资料挤到最底下 */ .dt-pnote.clamp:not(.open) .dt-pnote-body { max-height: 8.2em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent); mask-image: linear-gradient(to bottom, black 65%, transparent); } .dt-pnote-more { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--warning-fg); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-pnote-more:hover { text-decoration: underline; } /* 手机上看图：工具栏只留搜索框和「看图 | 表格」，筛选 / 排序这些到电脑上用（老板 10-01「手机上只露重点」） */ @media (max-width: 640px) { .dt-cards-on .dt-toolbar > :not(.dt-search):not(.dt-viewseg) { display: none; } .dt-cards-on .dt-search input { width: calc(100vw - 190px); min-width: 140px; font-size: 16px; } } .dt-pdeep { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border: 1px solid var(--info-border); border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); font-size: 13px; } /* ---------- 产品表第二版（老板 10-22：以搜索为主、重点标签拎出来、结合销量标热卖、常见售后信息直接看到） ---------- datatable.js 搜「rowTags」「renderQTags」「常见问题」。颜色只用 tokens.css 的语义色，五种牌子： red 控价·包销 / gray 停产·不推荐 / amber 好卖 / green 新品 / blue 配件用在哪台整机 */ .dt-card-tags { right: 6px; } .dt-card-tags i, .dt-ptags i, .dt-gtags i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .dt-gtags { display: inline-flex; gap: 4px; vertical-align: middle; } .dt-gtags i { font-style: normal; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: var(--radius-full); white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-fg); border: 1px solid var(--neutral-border); } :is(.dt-card-tags, .dt-ptags, .dt-gtags) i.b-red { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); font-weight: 600; } :is(.dt-card-tags, .dt-ptags, .dt-gtags) i.b-gray { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); } :is(.dt-card-tags, .dt-ptags, .dt-gtags) i.b-amber { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); font-weight: 600; } :is(.dt-card-tags, .dt-ptags, .dt-gtags) i.b-green { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); } :is(.dt-card-tags, .dt-ptags, .dt-gtags) i.b-blue { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); } .dt-grid th.dt-tagcol .dt-th-inner { cursor: default; } .dt-grid td.dt-tagcol { text-overflow: clip; } /* 卡片上的编码：点一下复制，闪一下「已复制」 */ button.dt-card-code { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); cursor: copy; border-radius: var(--radius-sm); } button.dt-card-code:hover { color: var(--green); text-decoration: underline dotted; text-underline-offset: 3px; } button.dt-card-code:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } button.dt-card-code.copied { color: var(--success-fg); background: var(--success-bg); padding: 0 4px; text-decoration: none; } /* 搜框下的小条：第 1.5 批起标签词 / 不要的词都是搜索框里的小块（见文件末尾 .dt-qchip），这里只剩「热卖榜还在算」那一句 */ .dt-qtags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 16px 0; } .dt-qcold { font-size: 12px; color: var(--muted); } /* 详情最上面一条「注意」：红条 = 内部提醒（控价 / 包销），黄框 = 备注（重点） */ .dt-pattn { display: grid; gap: 6px; min-width: 0; } .dt-pwarn-top:empty { display: none; } .dt-pwarn-top .dt-pwarn { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.6; } .dt-pwarn-top .dt-pwarn > b { display: block; margin-bottom: 2px; font-size: 12px; } .dt-pattn .dt-pnote { margin: 0; } /* 「卖得怎样」一行：只写档位和趋势 */ .dt-psell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; font-size: 13px; color: var(--ink); } .dt-psell:empty { display: none; } .dt-psell > b, .dt-pstock-w > b { font-size: 12px; font-weight: 600; color: var(--muted); } .dt-psell .dt-pgo { margin-left: auto; } /* 价格块下面的库存行 */ .dt-pstock { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; } .dt-pstock:empty { display: none; } .dt-pinfo > .dt-pstock { margin-top: 10px; } .dt-pstock-w { min-width: 0; color: var(--ink); } .dt-pstock-w > span { margin-left: 6px; } .dt-pstock-w small { display: block; font-size: 12px; color: var(--muted); } .dt-pstock-w.bad > span { color: var(--danger-fg); } .dt-pstock-w.now > span { color: var(--warning-fg); } /* 常见问题（产品百科搬过来的，开得了产品百科的人才有） */ .dt-pfaq { padding-top: 10px; border-top: 1px dashed var(--line); min-width: 0; } .dt-pfaq:empty { display: none; } .dt-pfaq-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 6px; } .dt-pfaq-h h5 { margin: 0; font-size: 13px; color: var(--ink); } .dt-pfaq-h h5 small { margin-left: 4px; font-weight: 400; font-size: 12px; color: var(--muted); } .dt-pfaq-side button { padding: 3px 10px; white-space: nowrap; } .dt-pfaq-side button + button { margin-left: -1px; } .dt-pfaq-side button:not(:first-child):not(:last-child) { border-radius: 0; } .dt-pfaq-side button b { margin-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; } .dt-pfaq-sym { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .dt-pfaq-sym span { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: var(--radius-full); background: var(--neutral-bg); color: var(--neutral-fg); border: 1px solid var(--neutral-border); white-space: nowrap; } .dt-pfaq-sym b { margin-left: 3px; font-weight: 600; } .dt-pfaq-list { margin: 0; padding: 0; list-style: none; } .dt-pfaq-list > li { border-bottom: 1px solid var(--line); } .dt-pfaq-list > li:last-child { border-bottom: 0; } .dt-pfaq-it { display: block; padding: 6px 0; font-size: 13px; line-height: 1.55; } .dt-pfaq-it > summary { cursor: pointer; list-style: none; } .dt-pfaq-it > summary::-webkit-details-marker { display: none; } .dt-pfaq-it > summary:hover .dt-pfaq-q { color: var(--green); } .dt-pfaq-q { display: block; color: var(--ink); font-weight: 500; } .dt-pfaq-a { display: block; color: var(--ink-2); } .dt-pfaq-it .f { display: none; } .dt-pfaq-it[open] .f { display: inline; } .dt-pfaq-it[open] > summary .s { display: none; } .dt-pfaq-full { margin: 2px 0 0; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; } .dt-pfaq-m { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); } .dt-pfaq-m:empty { display: none; } .dt-pfaq-part { font-style: normal; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); } .dt-pfaq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; } .dt-pfaq-foot .dt-pmsg { margin: 0; } .dt-pfaq-foot .dt-pgo { margin-left: auto; } .dt-pfaq-all { padding: 0; border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-pfaq-all:hover { text-decoration: underline; } @container (min-width: 680px) { .dt-pattn, .dt-pfaq { grid-column: 1 / -1; } } @media print { .dt-pfaq, .dt-qtags { display: none !important; } } /* ---------- 产品表在 1080p 上（C · 10-22，老板截图：「前面给产品、型号和图片，不用这么宽」「第一时间关注的应该是价格」 「弹出的侧边栏占一半还是三分之二」）。datatable.js 搜「1080p」 ---------- */ /* 表格最前面一格「产品」：主图 + 型号 + 品名 + 标签（冻结；不是字段）。 老板 10-23（语音）「产品大一点，最主要是关键词……品名就可以弱化一些，下面的型号也可以弱一点；产品名称这里要限制长度，太长了就不用显示完」： 主图 40 → 44px，和右边「卖点 · 卖给谁 · 出单」那三排一样高（这格上下边距 4 → 2px，行高还是 48）；编码、品名都小一号、淡一点、不加粗； 品名一行放不下省略（悬停看全名）；编码不截、标签也不缩（一行放不下标签挪到第二行，见下面 .t2），手机上编码放不下就折行（认货最要紧）； 编码点一下复制（同看图卡片） */ .dt-grid th.dt-prodcol .dt-th-inner, .dt-grid th.dt-pricecol .dt-th-inner { cursor: default; } .dt-grid td.dt-prodcol, .dt-app[data-density="compact"] .dt-grid td.dt-prodcol { padding-top: 2px; padding-bottom: 2px; } .dt-prod { display: flex; align-items: center; gap: 8px; min-width: 0; } .dt-prod-img { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sunken); } .dt-grid td.dt-prodcol .dt-prod-img img, .dt-app[data-density="compact"] .dt-grid td.dt-prodcol .dt-prod-img img { width: 100%; height: 100%; object-fit: contain; } .dt-prod-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .dt-prod-code { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .dt-prod-code b, .dt-prod-copy { flex: 0 0 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--ink-2); } .dt-prod-copy { margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: copy; } .dt-prod-copy:hover { color: var(--green); text-decoration: underline dotted; text-underline-offset: 3px; } .dt-prod-copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .dt-prod-copy.copied { color: var(--success-fg); background: var(--success-bg); padding: 0 4px; text-decoration: none; } .dt-prod-code .dt-gtags { flex: none; } .dt-prod-txt .dt-gtags i { flex-shrink: 0; } .dt-prod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); } .dt-prod-name em { font-style: normal; color: var(--muted); } /* 标签不许被压没（10-23 第二轮审查：产品格收到 260、编码又不缩，1366 上「控价·包销」「停产」被截成「控价·…」或整个看不见， 375 宽一半的款标签不到 14px）：标签不缩；编码 + 标签一行放不下的那几行（datatable.js fitProdTags 量了加 .t2；手机宽度有标签的一律 .t2） 编码自己占第一行，标签挪到第二行、排在品名前面，品名用剩下的宽、放不下省略。两行合计 36px，放得进 44px 主图那么高，行高不变。 桌面上第二行一整行都放不下标签（三个长标签，很少）才一起缩、各带省略号，最窄 2.6em（一个字加省略号），不会没了； 手机上（只有 94px 宽，两个标签常常就放不下）标签不缩、折到下一行（那一行高一点），不截成「控…」 */ .dt-prod-txt.t2 { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: center; column-gap: 6px; } .dt-prod-txt.t2 > .dt-prod-code { display: contents; } .dt-prod-txt.t2 .dt-prod-copy, .dt-prod-txt.t2 .dt-prod-code > b { grid-column: 1 / -1; justify-self: start; } .dt-prod-txt.t2 .dt-gtags { min-width: 0; max-width: 100%; overflow: hidden; } .dt-prod-txt.t2 .dt-gtags i { flex-shrink: 1; min-width: 2.6em; } /* 手机上「产品」格只有 170 宽：编码不缩（flex-shrink 0），自己比整格还宽才折行（max-width 100%），不截；标签在第二行（.t2）。 编码要是也能缩，它就少一两个像素、在「IT-」后面折成两行（10-23 375 宽实测） */ @media (max-width: 640px) { .dt-prod-code b, .dt-prod-copy { flex: 0 0 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } .dt-prod-txt.t2 .dt-gtags { flex-wrap: wrap; row-gap: 2px; } .dt-prod-txt.t2 .dt-gtags i { flex-shrink: 0; min-width: 0; max-width: 100%; } } /* 详情开着时表格只剩「产品」和「进价」 */ .dt-grid td.dt-pricecol { text-align: right; line-height: 1.3; } .dt-pricecol b { display: block; font-size: 14px; font-weight: 700; color: var(--coral); font-variant-numeric: tabular-nums; } .dt-pricecol small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--muted); } /* 详情靠边开着：不盖住表格，把表格挤到左边（右边距由 datatable.js syncSplit 按详情的宽写在 .dt-app 上） */ .dt-drawer.dt-pdrawer.mode-side { box-shadow: var(--shadow-1); } /* 详情里的价格块：专票价大字，其余一排小字，库存挂在下面 */ .dt-pprice { margin-top: 10px; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .dt-pprice h5 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); } .dt-pprice-main { display: flex; align-items: baseline; gap: 8px; } .dt-pprice-main span { font-size: 13px; color: var(--ink-2); } .dt-pprice-main b { font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--coral); font-variant-numeric: tabular-nums; } .dt-pprice dl { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 2px 0 0; } .dt-pprice dl > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .dt-pprice dt { font-size: 12px; color: var(--muted); } .dt-pprice dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .dt-pprice > .dt-pstock { margin-top: 8px; } .dt-pfirst { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink); } .dt-pfirst b { font-size: 12px; font-weight: 600; color: var(--muted); } @media print { .dt-pprice { border: 0; padding: 0; } } .dt-grid td .dt-money { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } /* 详情开着、左边变窄时：工具栏只留搜索、看图 | 表格、筛选、排序；「子表 拆 / 不拆」「字段」只管全部列，这时用不上；表名后的小牌子收起来 */ .dt-split #dt-subview, .dt-split #dt-btn-columns, .dt-split #dt-btn-refresh, .dt-split .dt-kind, .dt-split #dt-edit-hint, .dt-split .dt-src-btn { display: none !important; } .dt-split .dt-search input { width: 180px; } /* 产品表详情头上少占两排：复制编号 / 打印那排并进标题排，「只看有值」并进「字段 | 修改日志」那排 */ .dt-pdrawer .dt-drawer-head { align-items: center; padding-top: 10px; padding-bottom: 8px; } .dt-pdrawer .dt-drawer-head .dt-drawer-actions { flex: 0 1 auto; padding: 0; border: 0; } .dt-pdrawer .dt-drawer-only { align-self: flex-end; width: fit-content; margin-top: -37px; padding: 9px 16px 10px; border-bottom: 0; position: relative; z-index: 1; } .dt-pdrawer .dt-drawer-tabs { padding-right: 160px; } /* 备注（重点）在详情最上面先露 3 行（价格要在第一屏），点「展开全部」看全 */ .dt-pdrawer .dt-pnote.clamp:not(.open) .dt-pnote-body { max-height: 5em; } /* 详情开着时左边只剩「产品」「进价」：行号不摆，「产品」贴左冻结 */ .dt-split .dt-grid th.dt-idx, .dt-split .dt-grid td.dt-idx { display: none; } .dt-split .dt-grid th.dt-freeze, .dt-split .dt-grid td.dt-freeze { left: 0; } /* 详情开着、左边窄：大类按钮排成一行横着滑（不折成好几排把表格挤没了），「整机 / 配件」挪到最前 */ .dt-split .dt-pcats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .dt-split .dt-pcats > * { flex: none; } .dt-split .dt-pcats-k { display: none; } .dt-split .dt-pparts { order: -1; margin-left: 0; margin-right: 4px; } /* 表格最前面拼出来的「特点 · 出单」（老板 10-22：零散字段并起来；10-23 原来的「工厂问答」换成出货记录 + 库存，再和「特点」并成一格，datatable.js mixTd）。 行高不超过「产品」格那张主图（10-23 起 44px、那格上下 2px 边距 = 48px）：这格上下 2px 边距 + 上面两行 30px（小标签 14px 高、隔 2px，或一句话两行 15px） + 出单那行 14px = 48px。上面那块的小标签同看图卡片（浅底细边方角），字小一号；出单那行再小一号，出货深一点、库存浅一点，都比标签字浅 */ .dt-grid th.dt-mixcol .dt-th-inner { cursor: default; } .dt-grid th.dt-pricecol .dt-th-inner { cursor: pointer; } .dt-grid td.dt-mixcol, .dt-app[data-density="compact"] .dt-grid td.dt-mixcol { padding-top: 2px; padding-bottom: 2px; white-space: normal; font-size: 12px; line-height: 15px; color: var(--ink); } .dt-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dt-mix-top { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .dt-mix.has-line .dt-mix-top { height: 30px; } .dt-mix-sell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 3px; min-width: 0; max-height: 30px; overflow: hidden; } .dt-mix-sell i { flex: 0 1 auto; box-sizing: border-box; min-width: 0; max-width: 100%; height: 14px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); font-style: normal; font-size: 11px; line-height: 12px; } .dt-mix-spec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .dt-mix-sale { display: flex; min-width: 0; height: 13px; margin-top: 1px; overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 13px; } .dt-mix-sale .dt-sale-ship { flex: 0 0 auto; max-width: 100%; color: var(--ink-2); } .dt-mix-sale .dt-sale-stock { flex: 0 1 auto; min-width: 0; color: var(--muted); } .dt-mix-sale .dt-sale-ship + .dt-sale-stock::before { content: '·'; margin: 0 5px; color: var(--muted); } .dt-sale-ship, .dt-sale-stock { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-sale-ship { color: var(--ink); } .dt-sale-stock { color: var(--ink-2); font-variant-numeric: tabular-nums; } .dt-sale-stock.out, .dt-mix-sale .dt-sale-stock.out { color: var(--danger-fg); } /* 销售要点（老板 10-23「最大卖点 / 卖给什么人 / 跟别人不一样，一两秒看懂」，datatable.js 搜 BRIEF_TIP）：有「卖给 · 不一样」的款， 上面那块（固定 30px）改成一行卖点标签（14px）+ 一行小字（1px + 15px），行高不变（还是「产品」格主图那么高，1366×768 一屏行数不变）； 出货那句后面的「咖啡设备第 2」加粗一点 */ .dt-mix-sell.one { max-height: 14px; flex-wrap: nowrap; } /* 那一行不折行：放不下时几个标签一起缩短、各带省略号（每个 i 本来就 min-width:0 + ellipsis），3 个卖点都看得到（10-23 审查： 折行时第 3 个整个掉进看不见的第二行）；搜索补上来的那一段（.seg）缩得快、最宽 4 成 */ .dt-mix-sell.one i.seg { flex-shrink: 3; max-width: 40%; } .dt-mix-sum.one { -webkit-line-clamp: 1; } .dt-mix-who { display: block; height: 15px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--ink-2); } .dt-mix-who b, .dt-pbrief dt { font-weight: 600; color: var(--muted); } .dt-mix-who b { margin-right: 3px; } .dt-mix-who i, .dt-pbrief dd > i { font-style: normal; margin: 0 5px; color: var(--muted); } /* 没有出单那行（只看得到特点、看不到出货和库存的人；这一页有销售要点时格子放宽到 340，datatable.js BRIEF_SPEC_COL_W）： 卖点标签放回两行（30px，一行放得下两个 12 字的），下面接「卖给 · 不一样」（14px），合计 44px，行高不变 */ .dt-mix:not(.has-line) .dt-mix-sell.one { max-height: 30px; flex-wrap: wrap; } .dt-mix:not(.has-line) .dt-mix-sell.one + .dt-mix-who { height: 14px; margin-top: 0; line-height: 14px; } .dt-sale-rank { font-weight: 600; color: var(--ink); } /* 详情顶上卡片里同样四样一块：卖点（小标签）/ 卖给谁 / 不一样 / 卖得怎样 */ .dt-pbrief { display: grid; gap: 3px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; line-height: 1.5; } .dt-pbrief > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; align-items: baseline; } .dt-pbrief dt { font-size: 12px; white-space: nowrap; } .dt-pbrief dd { margin: 0; min-width: 0; color: var(--ink); } .dt-pbrief-tags { display: flex; flex-wrap: wrap; gap: 4px; } .dt-pbrief-tags i { font-style: normal; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; line-height: 20px; } .dt-pbrief-stock { color: var(--ink-2); font-variant-numeric: tabular-nums; } .dt-pbrief-stock.out { color: var(--danger-fg); } /* 特点里的关键参数（10-23「做一些荧光之类的」）：下半截淡黄的荧光笔道，和搜索命中的 （整块黄底 + 深色字）分得开； 不加粗、不改字色，一格最多 3 处（datatable.js penSpans；.dt-pen 是详情里的英文名，别撞）。笔色是 tokens.css 的 --fluo-bg / --fluo-line（不许裸色值，tests/test_ui_standard.py） */ .dt-fluo { background: linear-gradient(transparent 58%, var(--fluo-bg) 58%, var(--fluo-bg) 92%, transparent 92%); border-radius: 1px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @media print { .dt-fluo { background: none; text-decoration: underline; text-decoration-color: var(--fluo-line); } } /* 常用标签（大类上面一排；可多选，亮着的再点去掉） */ .dt-pquick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px 0; } .dt-pquick[hidden] { display: none; } .dt-pquick-k { font-size: 12px; color: var(--muted); margin-right: 2px; white-space: nowrap; } .dt-pquick > button { height: 26px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-2); font-size: 12px; cursor: pointer; white-space: nowrap; } .dt-pquick > button:hover { border-color: var(--green); color: var(--green); } .dt-pquick > button.on { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 600; } .dt-split .dt-pquick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .dt-split .dt-pquick > * { flex: none; } @media (max-width: 640px) { .dt-pquick { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px 0; } .dt-pquick > * { flex: none; } } @media print { .dt-pquick { display: none !important; } } /* ---------- 搜索框里的条件小块（C 产品表第 1.5 批；老板 10-22 截图批注「输入 808 按 Enter 就形成一个条件，再输入咖啡机按 Enter 又是一个条件」） datatable.js 搜「renderQBox」。边框画在整个框（form.dt-qbox）上：左边是已确定的小块，输入框只放正在打的那个词，块多了在框里换行。 块的颜色同常用标签 / 「标签」小牌子：普通词绿、标签词琥珀、不要灰（前面写「不要」）、引号里照字找蓝、冷标签虚线；超出 8 个词的变淡 ---------- */ .dt-search.dt-qbox { flex-wrap: wrap; gap: 4px; box-sizing: border-box; width: 210px; min-height: 31px; padding: 3px 24px 3px 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; cursor: text; transition: var(--dur-fast) var(--ease); } .dt-search.dt-qbox:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .dt-search.dt-qbox input { flex: 1 1 64px; width: 64px; min-width: 64px; height: 23px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .dt-search.dt-qbox input:focus { box-shadow: none; } .dt-qbox .dt-search-icon { top: 6px; } .dt-qbox .dt-search-clear { top: 5px; } .dt-qchips { display: contents; } .dt-qchip { display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box; max-width: 100%; min-width: 0; height: 23px; padding: 0 1px 0 8px; border: 1px solid var(--green); border-radius: var(--radius-full); background: var(--green-soft); color: var(--green); font-size: 12px; line-height: 21px; white-space: nowrap; cursor: default; } .dt-qchip b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .dt-qchip i { flex: none; font-style: normal; font-size: 11px; opacity: .85; } .dt-qchip-x { flex: none; border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 1px 5px; border-radius: var(--radius-full); } .dt-qchip-x:hover { color: var(--danger-fg); background: var(--surface); } .dt-qchip-x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; } .dt-qchip.tag { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); } .dt-qchip.no, .dt-qchip.notag { border-color: var(--neutral-border); background: var(--neutral-bg); color: var(--neutral-fg); } .dt-qchip.no b, .dt-qchip.notag b { font-weight: 500; } .dt-qchip.quote { border-color: var(--info-border); background: var(--info-bg); color: var(--info-fg); } .dt-qchip.cold { border-style: dashed; border-color: var(--border-control); background: var(--surface); color: var(--neutral-fg); cursor: help; } .dt-qchip.over { opacity: .5; } /* 有块了框跟着变宽（到顶就在框里换行）；看图时搜索是主入口、宽一些；详情靠边开着、左边窄时收着 */ .dt-qbox.has-chips { width: auto; min-width: 210px; max-width: min(520px, calc(100vw - 32px)); } .dt-cards-on .dt-search.dt-qbox { width: 300px; } .dt-cards-on .dt-qbox.has-chips { width: auto; min-width: 300px; max-width: min(640px, calc(100vw - 32px)); } .dt-split .dt-search.dt-qbox, .dt-split .dt-qbox.has-chips { width: auto; min-width: 180px; max-width: 320px; } .dt-split .dt-search.dt-qbox:not(.has-chips) { width: 180px; } @media (max-width: 760px) { .dt-search.dt-qbox { width: 150px; } .dt-cards-on .dt-search.dt-qbox { width: 200px; } .dt-qbox.has-chips, .dt-cards-on .dt-qbox.has-chips { min-width: 150px; max-width: calc(100vw - 32px); } } /* 手机上看图：工具栏只剩搜索框和「看图 | 表格」。没块时和以前一样并排；有块了框占满一排（一行能摆两三块），「看图 | 表格」换到下一排 */ @media (max-width: 640px) { .dt-cards-on .dt-search.dt-qbox { width: calc(100vw - 190px); min-width: 140px; max-width: none; } .dt-qbox.has-chips, .dt-cards-on .dt-qbox.has-chips { width: calc(100vw - 32px); min-width: 0; max-width: none; } .dt-qchip { height: 26px; line-height: 24px; } .dt-qchip-x { padding: 3px 7px; } } @media print { .dt-qchip-x { display: none; } } /* ---------- 产品表第 2 批（老板 10-22「接着做」：系列与配件、维修视频和错误码并进常见问题、按「我是」排顺序、 空搜框最近看过 + 最好卖、编码宽松认）。datatable.js 搜「第 2 批」。只在产品表里，不开新页 ---------- */ /* 「我是」排顺序：data-pblk 那几块由 applyPersona 在右栏和下面通栏之间挪；挪到通栏里的一律占满两栏，上沿一条虚线隔开 */ @container (min-width: 680px) { .dt-phead > [data-pblk], .dt-phead > .dt-pback { grid-column: 1 / -1; } } .dt-phead > .dt-pfacts, .dt-phead > .dt-pprice, .dt-phead > .dt-pstock { margin-top: 0; } .dt-phead > .dt-pfacts { padding-top: 10px; border-top: 1px dashed var(--line); } .dt-phead > .dt-pfacts + .dt-pfacts { padding-top: 0; border-top: 0; } .dt-pinfo > .dt-pfaq { margin-top: 12px; } /* 「← 回到上一款」（从系列与配件点过来时） */ .dt-pback { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px; border: 1px solid var(--green); border-radius: var(--radius-full); background: var(--green-soft); color: var(--green); font-size: 12px; cursor: pointer; white-space: nowrap; } .dt-pback:hover { background: var(--green); color: var(--text-on-accent); } .dt-pback b { font-weight: 600; } /* 抽屉头上「我是：销售 / 跟单 | 售后 / 客服」，挨着「1/2 2/3 全屏」 */ .dt-persona { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } .dt-persona + .dt-mode { margin-left: 0; } .dt-persona-k { font-size: 12px; color: var(--muted); white-space: nowrap; cursor: help; } .dt-persona button { height: 26px; padding: 0 9px; font-size: 12px; line-height: 24px; white-space: nowrap; } @container (max-width: 820px) { .dt-persona .x, .dt-persona-k { display: none; } } @container (max-width: 560px) { .dt-pdrawer .dt-drawer-head { flex-wrap: wrap; row-gap: 6px; } } /* 系列与配件 */ .dt-prel { padding-top: 10px; border-top: 1px dashed var(--line); min-width: 0; } .dt-prel:empty { display: none; } .dt-prel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; } .dt-prel-h h5 { margin: 0; font-size: 13px; color: var(--ink); } .dt-prel-h small { font-size: 12px; color: var(--muted); } .dt-prel-up { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; } .dt-prel-upb { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 2px 12px 2px 3px; border: 1px solid var(--info-border); border-radius: var(--radius-full); background: var(--info-bg); color: var(--info-fg); font-size: 13px; text-align: left; cursor: pointer; } .dt-prel-upb:hover { border-color: var(--green); } .dt-prel-upb .dt-prel-img { width: 24px; height: 24px; border-radius: var(--radius-full); } .dt-prel-how { font-size: 11px; color: var(--muted); } .dt-prel-sec { margin-bottom: 4px; } .dt-prel-k { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } .dt-prel-k b { color: var(--ink); } .dt-prel-k small { margin-left: 6px; font-size: 11px; font-weight: 400; } .dt-prel-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 4px 0; padding: 0; list-style: none; } .dt-prel-it { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: left; font: inherit; cursor: pointer; } .dt-prel-it:hover, .dt-prel-chip:hover { border-color: var(--green); } .dt-prel-img { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sunken); } .dt-prel-img img { width: 100%; height: 100%; object-fit: contain; } .dt-prel-t { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; } .dt-prel-t b { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-prel-t span { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-prel-it em, .dt-prel-chip em, .dt-prel-upb em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--coral); font-variant-numeric: tabular-nums; } .dt-prel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; } .dt-prel-line > .dt-prel-k { margin-right: 2px; cursor: help; } .dt-prel-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 24px; padding: 1px 9px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font-size: 12px; cursor: pointer; } .dt-prel-chip .dt-prel-img { width: 20px; height: 20px; margin-left: -6px; border-radius: var(--radius-full); } .dt-prel-chip small { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; } .dt-prel-chip.plug { cursor: copy; } .dt-prel-chip.copied, .dt-pcopy.copied { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); } .dt-pref { font-style: normal; font-weight: 500; font-size: 11px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--neutral-fg); } /* 常见问题底下那行「售后资料」：默认收起，点开才取 */ .dt-pmedia { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .dt-pmedia-tg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; padding: 7px 10px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-2); text-align: left; cursor: pointer; border-radius: var(--radius-md); } .dt-pmedia-tg:hover { background: var(--surface-hover); } .dt-pmedia-tg > b { font-size: 12px; font-weight: 600; color: var(--ink); } .dt-pmedia-n { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .dt-pmedia-n > i { font-style: normal; color: var(--muted); } .dt-pmedia-n b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .dt-pmedia-n .z { color: var(--muted); } .dt-pmedia-n .z b { color: var(--muted); font-weight: 400; } .dt-pmedia-tg > em { margin-left: auto; font-style: normal; color: var(--green); font-weight: 600; white-space: nowrap; } .dt-pmedia-body { padding: 2px 10px 8px; border-top: 1px solid var(--line); } .dt-pmedia-sec { padding-top: 8px; } .dt-pmedia-sec h6 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); } .dt-pmedia-sec h6 b { color: var(--ink); } .dt-pmedia-sec ul { margin: 0; padding: 0; list-style: none; } .dt-pmedia-more > summary { margin-top: 4px; font-size: 12px; color: var(--green); font-weight: 600; cursor: pointer; } .dt-pv { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .dt-pv:last-child { border-bottom: 0; } .dt-pv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .dt-pv-play { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--green); border-radius: var(--radius-full); background: var(--green-soft); color: var(--green); font-size: 10px; line-height: 20px; cursor: pointer; } .dt-pv-play:hover { background: var(--green); color: var(--text-on-accent); } .dt-pv-t { min-width: 0; color: var(--ink); } .dt-pv-stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; white-space: nowrap; cursor: help; } .dt-pv-lock { font-size: 11px; padding: 0 6px; border-radius: var(--radius-full); background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); white-space: nowrap; } .dt-pv-keys { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0 30px; } .dt-pv-keys button { height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; } .dt-pv-keys button:hover { border-color: var(--green); color: var(--green); } .dt-pv-player { margin: 6px 0 2px 30px; } .dt-pv-player video { display: block; width: 100%; max-width: 560px; max-height: 320px; border-radius: var(--radius-sm); background: #000; } .dt-pcopy { flex: none; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-2); font-size: 11px; cursor: copy; white-space: nowrap; } .dt-pcopy:hover { border-color: var(--green); color: var(--green); } .dt-pcode-list > li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .dt-pcode-list > li:last-child { border-bottom: 0; } .dt-pcode { flex: none; padding: 0 5px; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning-fg); font-weight: 700; font-family: var(--font-mono); } .dt-pcode-w { flex: 1; min-width: 0; color: var(--ink); } .dt-pcode-w small { display: block; font-size: 12px; color: var(--ink-2); } .dt-pcode-src { flex: none; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; } .dt-pfile-list > li { padding: 3px 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-pfile-list a, .dt-plink-list a { color: var(--green); text-decoration: none; } .dt-pfile-list a:hover, .dt-plink-list a:hover { text-decoration: underline; } .dt-plink-list > li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; min-width: 0; } .dt-plink-list > li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-pmedia .dt-pths { margin-top: 2px; } .dt-pcat { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; } .dt-pfaq-foot + .dt-pmedia { margin-top: 10px; } @media print { .dt-persona, .dt-pback, .dt-prel, .dt-ptop { display: none !important; } } /* 搜索框空着时最上面「我最近看过」「最好卖」：看图 = 一排小卡片，表格 = 一条紧凑的小条；横着滑，不跟表格一起横滚 */ .dt-ptop { position: sticky; left: 0; z-index: 3; display: grid; gap: 8px; padding: 12px 16px 0; min-width: 0; } .dt-ptop-g { display: flex; align-items: center; gap: 10px; min-width: 0; } .dt-ptop-k { flex: none; width: 5.6em; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: help; } .dt-ptop-list { display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .dt-ptop-it { flex: none; display: flex; align-items: center; gap: 8px; width: 184px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font: inherit; text-align: left; cursor: pointer; } .dt-ptop-it:hover { border-color: var(--green); box-shadow: var(--shadow-1); } .dt-ptop-img { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sunken); } .dt-ptop-img img { width: 100%; height: 100%; object-fit: contain; } .dt-ptop-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .dt-ptop-t b { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-ptop-t span { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-ptop.bar { display: flex; gap: 6px 18px; padding: 6px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; } .dt-ptop.bar .dt-ptop-g { flex: none; gap: 6px; } .dt-ptop.bar .dt-ptop-k { width: auto; font-weight: 500; } .dt-ptop.bar .dt-ptop-list { overflow: visible; gap: 4px; padding: 0; } .dt-ptop.bar .dt-ptop-it { width: auto; max-width: 160px; gap: 4px; height: 24px; padding: 0 9px 0 2px; border-radius: var(--radius-full); } .dt-ptop.bar .dt-ptop-it:hover { box-shadow: none; } .dt-ptop.bar .dt-ptop-img { width: 20px; height: 20px; border-radius: var(--radius-full); } .dt-ptop.bar .dt-ptop-t span { display: none; } @media (max-width: 640px) { .dt-ptop.cards { padding: 8px 8px 0; } .dt-ptop.cards .dt-ptop-g { flex-direction: column; align-items: stretch; gap: 4px; } .dt-ptop.cards .dt-ptop-it { width: 156px; } } /* 0 条时「你是不是找」 */ .dt-pdid { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 13px; color: var(--ink-2); } .dt-pdid button { border: 1px solid var(--green); color: var(--green); background: #fff; border-radius: var(--radius-full); padding: 3px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } .dt-pdid button small { font-weight: 400; color: var(--ink-2); } .dt-pdid button:hover { background: var(--green); color: #fff; } .dt-pdid button:hover small { color: inherit; } /* 售后资料：存放位置里有工厂信息、后端不给链接的（nolink，审查 10-22）只出名字 */ .dt-pnolink { margin-left: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } /* ---------- 看图卡片 c25（老板 10-22 截图批注：英文名不要了、列 3 到 5 个卖点加上价格、出货记录挑亮眼的写一句）。datatable.js 搜「c25」 ---------- 卖点 = rows[i].sell：浅底灰字、细边框的方角小块（和图上圆角彩色的徽章分开），最多两行，多的藏起来，悬停看整句；没有卖点的照旧一行规格。 固定行数：这一页有卖点（.has-sell）时卖点 / 规格那块都留两行高；有价格（.has-price）/ 出货记录（.has-ship）时每张都留那一行，没有的留空 */ .dt-card-sell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-width: 0; height: 18px; overflow: hidden; } .dt-cards.has-sell .dt-card-sell, .dt-cards.has-sell .dt-card-facts { height: 40px; } .dt-card-sell i { flex: 0 1 auto; box-sizing: border-box; min-width: 0; max-width: 100%; height: 18px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-2); font-style: normal; font-size: 11px; line-height: 16px; } .dt-card-price { margin-top: auto; min-height: 18px; } .dt-card-ship { height: 16px; font-size: 11px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 这一页有放不下一行的出货记录（带「（一单为主）」的）：每张都留两行，折行不截断 */ .dt-cards.ship2 .dt-card-ship { height: 32px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dt-cards:not(.has-price) .dt-card-price, .dt-cards:not(.has-ship) .dt-card-ship { display: none; } .dt-cards:not(.has-price) .dt-card-ship { margin-top: auto; } /* 详情「卖得怎样」那行：档位后面接出货记录 */ .dt-pship { color: var(--ink-2); } .dt-psell > span + .dt-pship::before { content: '·'; margin-right: 8px; color: var(--muted); } /* ---------- 产品详情按简道云的版式（B · 10-23，老板截图：标题行 + 关键信息条 / 产品状态阶段条 / 标签页 / 字段名在上值在灰框 / 右栏数据日志）。 datatable.js 搜「简道云版式」 ---------- */ .dt-phead.dt-pjdy { grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; } .dt-pmeta { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 2px 0 8px; border-bottom: 1px solid var(--line); } .dt-pmeta > div { display: grid; gap: 2px; min-width: 0; } .dt-pmeta small { font-size: 11px; color: var(--muted); } .dt-pmeta b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); } .dt-pav { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--tag-person-fg); color: var(--text-on-accent); font-style: normal; font-size: 11px; font-weight: 600; } .dt-ptabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); overflow-x: auto; } .dt-ptabs button { flex: none; border: 0; background: none; padding: 8px 14px; margin-bottom: -2px; font-size: 13px; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; } .dt-ptabs button:hover { color: var(--green); } .dt-ptabs button.on { color: var(--green); border-bottom-color: var(--green); font-weight: 600; } .dt-ptabs button small { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--muted); } .dt-ptabs button small:empty { display: none; } .dt-ptabs button[hidden] { display: none; } .dt-ppanel { display: grid; gap: 12px; min-width: 0; } .dt-ppanel[hidden] { display: none; } .dt-pjdy .dt-pfaq { padding-top: 0; border-top: 0; } .dt-pjdy .dt-pfacts:first-child { margin-top: 0; } /* 全部字段：名在上、值在灰框 */ .dt-pfields { padding: 8px 16px 24px; } .dt-pfields[hidden] { display: none; } .dt-pfields .dt-kv { grid-template-columns: 1fr; gap: 3px; padding: 6px 0; border-bottom: 0; } .dt-pfields .dt-kv dt { font-size: 12px; } .dt-pfields .dt-kv dd { padding: 6px 10px; min-height: 32px; border-radius: var(--radius-sm); background: var(--surface-sunken); } .dt-pfields .dt-kv.editing dd { background: transparent; padding: 0; } .dt-pfields .dt-kv-fold { border-bottom: 0; } .dt-pfields .dt-kv-fold > summary, .dt-pfields .dt-edit-tip, .dt-pfields .dt-edit-why { padding-left: 0; padding-right: 0; } .dt-pfields .dt-edit-block { border-bottom: 0; } /* 右栏数据日志：详情够宽（≥ 900）才出，窄的收在「修改日志」标签 */ .dt-plog { display: none; } .dt-plog h5 { display: inline-block; margin: 0 0 10px; padding-bottom: 3px; font-size: 13px; color: var(--green); border-bottom: 2px solid var(--green); } .dt-plog-it { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin-bottom: 10px; font-size: 12px; } .dt-plog-it b { font-weight: 600; } .dt-plog-it small { margin-left: 4px; color: var(--muted); } .dt-plog-chg { margin-top: 3px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); word-break: break-word; } .dt-plog-chg s { color: var(--muted); } .dt-plog-chg em { font-style: normal; color: var(--ink); } .dt-plog-it.bad .dt-plog-chg { border-color: var(--danger-border); } .dt-plog-note { font-size: 12px; color: var(--muted); } .dt-plog-all { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer; } .dt-plog-all:hover { text-decoration: underline; } @container (min-width: 680px) { #dt-drawer-body > .dt-pfields { grid-column: 1 / -1; } .dt-pfields, .dt-pfields .dt-edit-block, .dt-pfields .dt-fold-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; align-content: start; } .dt-pfields[hidden] { display: none; } .dt-pfields > .dt-kv-wide, .dt-pfields > p, .dt-pfields > .dt-edit-block, .dt-pfields > .dt-kv-fold, .dt-pfields > .dt-rel, .dt-pfields > .dt-edit-why, .dt-pfields > .dt-sub, .dt-pfields > section, .dt-pfields .dt-edit-block > .dt-edit-tip, .dt-pfields .dt-edit-block > .dt-kv-wide, .dt-pfields .dt-fold-body > .dt-kv-wide, .dt-pfields .dt-fold-body > p { grid-column: 1 / -1; } .dt-ppanel[data-ppanel="sell"] { grid-template-columns: minmax(240px, 340px) 1fr; } } @container (min-width: 900px) { #dt-drawer-body:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0; padding: 0; align-content: start; } #dt-drawer-body > .dt-phead, #dt-drawer-body > .dt-pfields { grid-column: 1; padding-left: 16px; padding-right: 16px; } #dt-drawer-body > .dl-root, #dt-drawer-body > .dt-edit-why, #dt-drawer-body > .dt-state-icon { grid-column: 1; } .dt-plog { display: block; grid-column: 2; grid-row: 1 / span 400; padding: 12px 14px; border-left: 1px solid var(--line); background: var(--surface-sunken); } } @media print { .dt-ptabs, .dt-plog { display: none !important; } .dt-ppanel[hidden], .dt-pfields[hidden] { display: block !important; } } /* ---------- 10-23 第二轮：登录简道云看了产品表的真实界面再对一遍（B）。颜色仍走 tokens（绿色不改成简道云的蓝），对的是版式和尺寸 ---------- */ /* 列表页：工具栏按钮 28 高、4px 圆角；搜索框同高；表头浅灰、行高 36；翻页「共 N 条 · ‹ [页码] / 总页 ›」 */ .dt-head { padding: 8px 16px; } .dt-back { border: 0; padding: 0 4px; color: var(--muted); } .dt-back:hover { color: var(--green); } .dt-tool { height: 28px; padding: 0 10px; border-radius: 4px; font-size: 13px; } .dt-tool:hover { background: var(--canvas); } .dt-icon-tool { width: 28px; padding: 0; justify-content: center; font-size: 14px; } .dt-tool.jf-add, .dt-tool.pn-open { background: var(--green); border-color: var(--green); color: var(--text-on-accent); font-weight: 600; } .dt-tool.jf-add:hover, .dt-tool.pn-open:hover { color: var(--text-on-accent); filter: brightness(.94); } .dt-search input { height: 28px; padding: 0 26px 0 28px; border-radius: 4px; width: 240px; } .dt-grid th { font-weight: 500; } .dt-th-inner { padding: 0 12px; height: 36px; } .dt-grid td { padding: 7px 12px; height: 36px; } .dt-app[data-density="compact"] .dt-grid td { padding: 4px 10px; height: 30px; } .dt-grid tbody tr:hover td { background: var(--surface-sunken); } .dt-grid tbody tr:hover td.dt-freeze { background: var(--surface-sunken); } .dt-foot { padding: 6px 16px; } .dt-foot-right { gap: 10px; } .dt-pager button { min-width: 26px; height: 26px; border-radius: 4px; } .dt-page-in { width: 46px; height: 26px; border: 1px solid var(--line); border-radius: 4px; text-align: center; font-size: 12px; color: var(--ink); background: #fff; -moz-appearance: textfield; } .dt-page-in::-webkit-outer-spin-button, .dt-page-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .dt-page-in:focus { outline: none; border-color: var(--green); } .dt-pager .dt-gap { color: var(--ink-2); padding: 0 4px; } .dt-panel { border-radius: 6px; padding: 12px 14px 14px; box-shadow: var(--shadow-3); } .dt-btn-primary, .dt-btn-ghost { height: 28px; padding: 0 14px; border-radius: 4px; } /* 详情顶上的卡片（简道云的详情头）：大编码 + 品名 / 特点 / 标签 / 关键信息，右边主图框 */ .dt-pcard { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .dt-pcard-main { min-width: 0; display: grid; gap: 6px; align-content: start; } .dt-pcard-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .dt-pcard-title b { font-size: 20px; font-weight: 700; color: var(--ink); } .dt-pcard-name { font-size: 14px; font-weight: 500; color: var(--ink-2); } .dt-pcard .dt-pen, .dt-pcard .dt-psum, .dt-pcard .dt-ptags { margin-top: 0; } .dt-pcard .dt-pmeta { padding: 6px 0 0; border-bottom: 0; } .dt-pmeta-price b { color: var(--coral); font-size: 15px; } .dt-pcard-side { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--muted); font-size: 12px; overflow: hidden; } .dt-pcard-side .dt-pbig { border: 0; background: none; width: 100%; height: 100%; border-radius: 0; } .dt-pcard-side .dt-pbig img { height: 150px; } /* 字段分组标题：和页面设计（shared/detail-layout.css .dl-b-title）同一种绿条斜纹，简道云的分组线也是这样 */ .dt-pgh { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--ink); position: relative; height: 20px; line-height: 20px; grid-column: 1 / -1; } .dt-pgh > span { display: inline-block; background: var(--green); color: var(--text-on-accent); padding: 0 10px 0 8px; position: relative; z-index: 1; } .dt-pgh::before { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 2px solid var(--green); } .dt-pgh::after { content: ''; position: absolute; top: 0; height: 20px; width: 46px; margin-left: -1px; background: repeating-linear-gradient(115deg, var(--green) 0 7px, transparent 7px 13px); } .dt-pgh.dt-pgh-plain { height: auto; font-size: 14px; margin-top: 18px; } .dt-pgh.dt-pgh-plain::before, .dt-pgh.dt-pgh-plain::after { display: none; } .dt-pbase { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; font-size: 12px; grid-column: 1 / -1; padding-bottom: 8px; } .dt-pbase small { color: var(--muted); margin-right: 8px; } .dt-pbase b { font-weight: 500; color: var(--ink); } @container (min-width: 680px) { .dt-pcard-side .dt-pbig img { height: 150px; } } @container (min-width: 900px) { .dt-pfields { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container (max-width: 560px) { .dt-pcard { grid-template-columns: 1fr; } .dt-pcard-side { min-height: 90px; } } /* ---------- 产品封面图 cv2（老板 10-23「先在产品表详情里加『AI 建议封面：用 / 不用』（只给能改资料的人）……美工点过的才上卡片」）。 datatable.js 搜「cv2」：详情注意条下面「AI 建议封面」一块、看图卡片角上「封面待确认」、头部「AI 建议了 N 款封面等你确认」 ---------- */ /* 修 4（审查 10-23：1366×768 下这块 292px 高、把大图推到 y=571）：紧凑横排——左边两张 96px 小图（现在 → 建议）， 右边标题、理由（最多两行）、按钮；块高约 130px，窄了（手机）右边那列折到图下面 */ .dt-pcov { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--info-border); border-radius: var(--radius-sm); background: var(--info-bg); } .dt-pcov-pair { display: flex; flex: none; align-items: center; gap: 6px; } .dt-pcov-pair figure { display: grid; justify-items: center; gap: 2px; width: 96px; margin: 0; } .dt-pcov-pair figcaption { max-width: 100%; overflow: hidden; font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; } .dt-pcov-img { display: block; width: 96px; height: 96px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: zoom-in; overflow: hidden; } .dt-pcov-img:hover { border-color: var(--green); } .dt-pcov-img img { display: block; width: 100%; height: 100%; object-fit: contain; } .dt-pcov-none { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--muted); font-size: 12px; } .dt-pcov-arrow { flex: none; color: var(--muted); font-size: 16px; } .dt-pcov-side { display: grid; flex: 1 1 170px; align-content: start; gap: 6px; min-width: 0; } .dt-pcov h5 { margin: 0; font-size: 13px; line-height: 18px; color: var(--info-fg); } .dt-pcov h5 small { margin-left: 4px; font-weight: 400; font-size: 11px; color: var(--muted); } .dt-pcov-why { display: -webkit-box; margin: 0; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--ink-2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dt-pcov-why b { margin-right: 6px; font-weight: 600; color: var(--muted); } .dt-pcov-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .dt-pcov-act button { height: 28px; padding: 0 14px; border-radius: var(--radius-full); font-size: 13px; cursor: pointer; } .dt-pcov-use { border: 1px solid var(--green); background: var(--green); color: var(--text-on-accent, #fff); font-weight: 600; } .dt-pcov-skip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); } .dt-pcov-skip:hover:not(:disabled) { border-color: var(--danger-border); color: var(--danger-fg); } .dt-pcov-act button:disabled { opacity: .55; cursor: not-allowed; } .dt-pcov button[aria-disabled="true"] { opacity: .7; cursor: progress; } .dt-pcov-ro { font-size: 12px; color: var(--warning-fg); } .dt-pcov-msg { font-size: 12px; color: var(--danger-fg); } /* 修 9：已用的 AI 封面一行小字「封面是 AI 建议的，××10-23 定的 · 改成不用」；定完的那句结果也摆这里（焦点落在这行） */ .dt-pcov-done { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; margin: 0; padding: 5px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 12px; line-height: 18px; color: var(--ink-2); } .dt-pcov-done b { font-weight: 600; color: var(--ink); } .dt-pcov-done > [aria-hidden] { color: var(--muted); } .dt-pcov-undo { padding: 0; border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-pcov-undo:hover:not(:disabled) { color: var(--danger-fg); text-decoration: underline; } .dt-pcov-undo:disabled { color: var(--muted); cursor: not-allowed; } .dt-pcov-done:focus-visible, .dt-pcov-done:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; } @container (min-width: 680px) { .dt-pcov, .dt-pcov-done { grid-column: 1 / -1; } } @container (max-width: 300px) { /* 抽屉被拖得很窄：两张小图缩到 72px，别撑出框 */ .dt-pcov-pair figure, .dt-pcov-img, .dt-pcov-none { width: 72px; } .dt-pcov-img, .dt-pcov-none { height: 72px; } } .dt-card-cvq { position: absolute; left: 6px; bottom: 6px; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); white-space: nowrap; } .dt-pcovhint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 16px 0; padding: 6px 12px; border: 1px solid var(--info-border); border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); font-size: 13px; } .dt-pcovhint b { font-variant-numeric: tabular-nums; } .dt-pcovhint button { padding: 2px 12px; border: 1px solid var(--info-border); border-radius: var(--radius-full); background: var(--surface); color: var(--info-fg); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-pcovhint button:hover { border-color: var(--green); color: var(--green); } .dt-pcovhint small { font-size: 12px; color: var(--muted); } @media (max-width: 640px) { .dt-pcovhint { margin: 6px 8px 0; } } @media print { .dt-pcov, .dt-pcov-done, .dt-pcovhint, .dt-card-cvq { display: none !important; } } /* ---------- 10-23 第三轮：简道云版式铺到所有表的详情（老板发订单表截图「这些地方都没改」） ---------- */ .dt-drawer.mode-modal { width: min(94vw, 1180px); } .dt-pcard.dt-pcard-noimg { grid-template-columns: 1fr; } a.dt-pcard-side { text-decoration: none; } a.dt-pcard-side img { max-height: 150px; max-width: 100%; object-fit: contain; } .dt-ghead { padding-top: 12px; } .dt-pfields > .dt-edit-tip { grid-column: 1 / -1; margin: 0 0 4px; padding: 7px 10px; border-radius: 4px; } .dt-pfields .dt-kv-edit { top: 5px; right: 6px; } .dt-pfields .dt-kv-lock { top: 9px; right: 8px; } .dt-pfields .dt-kv.editing { background: transparent; } /* 「更多 / 平时用不到 / 还没填的」：折叠条画成简道云那种绿条分组标题（和 .dt-pgh 一样），右边小箭头 */ .dt-pfields .dt-kv-fold { grid-column: 1 / -1; border: 0; } .dt-pfields .dt-kv-fold > summary { position: relative; display: flex; align-items: center; margin: 10px 0 4px; padding: 0; height: 20px; line-height: 20px; font-size: 12px; font-weight: 600; color: var(--ink); list-style: none; cursor: pointer; border: 0; } .dt-pfields .dt-kv-fold > summary::-webkit-details-marker { display: none; } .dt-pfields .dt-kv-fold > summary::before { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 2px solid var(--green); } .dt-pfields .dt-kv-fold > summary > span { position: relative; z-index: 1; display: inline-block; background: var(--green); color: var(--text-on-accent); padding: 0 10px 0 8px; } .dt-pfields .dt-kv-fold > summary > small { margin-left: 10px; font-weight: 400; color: var(--muted); } .dt-pfields .dt-kv-fold > summary::after { content: '▾'; margin-left: auto; font-size: 12px; color: var(--muted); } .dt-pfields .dt-kv-fold[open] > summary::after { content: '▴'; } .dt-pgh-tail { width: 46px; height: 20px; margin-left: -1px; background: repeating-linear-gradient(115deg, var(--green) 0 7px, transparent 7px 13px); } .dt-pfields .dt-kv-fold[open] > summary { margin-bottom: 6px; } .dt-pfields .dt-fold-body { padding: 0; } .dt-pfields .dt-empty-names { grid-column: 1 / -1; } /* 重置显眼（10-23 第二版） */ /* 老板 10-23 截图「这个重置，你帮我明显一点，换种颜色」：有条件能重置时琥珀色实心、白字加粗，一眼看得到； 全是默认（按钮 disabled）时照旧灰着。用 id 压过 .dt-tool 的 hover / on 和新功能绿框 */ #dt-btn-reset:not(:disabled) { background: var(--a-600); border-color: var(--a-600); color: var(--text-on-accent); font-weight: 600; box-shadow: none; } #dt-btn-reset:not(:disabled):hover { background: var(--a-700); border-color: var(--a-700); color: var(--text-on-accent); } #dt-btn-reset:not(:disabled):focus-visible { outline: 2px solid var(--a-200); outline-offset: 1px; } /* ---------- dq1（Edmond 10-24 截图批注产品详情 CGFL250）：详情里的网址成短链接、附件小图点开看原图、工厂问答精选、工厂问答那一格收成一截。 datatable.js 搜「dq1」：linkText / filesHtml / richLinks / qaBlockHtml。颜色都走 tokens ---------- */ .dt-link { color: var(--green); text-decoration: none; overflow-wrap: anywhere; } .dt-link b { font-weight: 600; } .dt-link span { color: var(--ink-2); } .dt-link i { margin-left: 3px; font-style: normal; font-size: 11px; color: var(--muted); } .dt-link:hover b, .dt-link:hover span { text-decoration: underline; text-underline-offset: 2px; } .dt-rich a.dt-link { text-decoration: none; } /* 能改的格右上角有「改」按钮（绝对定位）：带链接的格右边让出位置，别压住第一条链接 */ .dt-pfields .dt-kv dd:has(> .dt-kv-edit):has(> .dt-link) { padding-right: 40px; } .dt-kv-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .dt-kv-pic { display: inline-block; max-width: 100%; line-height: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); cursor: zoom-in; } .dt-kv-pic img { display: block; max-width: 100%; max-height: 128px; object-fit: contain; border-radius: 0; } .dt-kv-pic:hover { border-color: var(--green); } .dt-kv-file { color: var(--green); font-size: 12px; text-decoration: none; overflow-wrap: anywhere; } .dt-kv-file:hover { text-decoration: underline; } .dt-kv-file i { margin-left: 2px; font-style: normal; color: var(--muted); } .dt-kv-file.off { color: var(--muted); } .dt-kv-file small { margin-left: 4px; } .dt-kv-clampable:not(.open) .dt-kv-clamp { max-height: 18em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent); mask-image: linear-gradient(to bottom, black 72%, transparent); } .dt-kv-more { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-kv-more:hover { text-decoration: underline; } .dt-kv.dt-flash dd { box-shadow: 0 0 0 2px var(--green); transition: box-shadow .3s; } /* 工厂问答精选：「产品信息」页最上面一块（.dt-pfields > section 已经通栏） */ .dt-pqa { margin: 4px 0 10px; padding: 10px 12px 8px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; } .dt-pqa-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 2px; } .dt-pqa-h h5 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); } .dt-pqa-h small { font-size: 12px; color: var(--muted); cursor: help; } .dt-pqa-list { margin: 0; padding: 0; list-style: none; } .dt-pqa-it > div, .dt-pqa-it summary { display: block; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.55; min-width: 0; } .dt-pqa-it:last-child > div, .dt-pqa-it:last-child summary, .dt-pqa-it:last-child .dt-pqa-full { border-bottom: 0; } .dt-pqa-it summary { cursor: pointer; list-style: none; } .dt-pqa-it summary::-webkit-details-marker { display: none; } .dt-pqa-it summary:hover .dt-pqa-q { color: var(--green); } .dt-pqa-q { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-pqa-a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); overflow-wrap: anywhere; } .dt-pqa-m { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); } .dt-pqa-it summary .dt-pqa-m::after { content: '点开看全 ▾'; margin-left: 6px; color: var(--green); font-weight: 600; } .dt-pqa-it details[open] summary .dt-pqa-m::after { content: '收起 ▴'; } .dt-pqa-it details[open] summary { border-bottom: 0; padding-bottom: 2px; } .dt-pqa-it details[open] .dt-pqa-q { white-space: normal; } .dt-pqa-it details[open] .dt-pqa-a { display: none; } .dt-pqa-full { padding: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; border-bottom: 1px dashed var(--line); } .dt-pqa-all { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; } .dt-pqa-all:hover { text-decoration: underline; } @media print { .dt-kv-clampable .dt-kv-clamp { max-height: none !important; -webkit-mask-image: none; mask-image: none; } .dt-kv-more, .dt-pqa-all { display: none !important; } } /* ---------- dt1（Edmond 10-24 回 1「按样稿做，动态标签替换详情顶上那条，手填的产品状态缩成小标，不回写简道云」）：详情顶上的动态标签条 ---------- 上面一行 headline，下面最多 6 个标签 + 条尾描边小标（简道云手填的产品状态）。颜色：好绿 / 一般灰 / 注意橙（warning）/ 控价红照旧 / 停产·不推荐实心深色 / 卖点深字白底；悬停（手机点一下）那个说明框挂在条里、按条宽夹住（375 宽不横滚），走势那格里画 12 段小柱图 */ .dt-dyn { position: relative; display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .dt-dyn-h { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; } .dt-dyn-h .sq-q { margin-left: 4px; font-weight: 400; } .dt-dyn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .dt-dtag { flex: none; max-width: 100%; margin: 0; padding: 1px 9px; border: 1px solid transparent; border-radius: var(--radius-full); font: inherit; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; } .dt-dtag.t-good { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); } .dt-dtag.t-mid { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); } .dt-dtag.t-warn { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); font-weight: 600; } .dt-dtag.t-red { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); font-weight: 600; } .dt-dtag.t-dead { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; } .dt-dtag.t-feat { background: var(--surface); color: var(--ink); border-color: var(--ink); } .dt-dtag.t-feat small { margin-right: 4px; font-size: 11px; color: var(--ink-2); } /* 条尾小标：描边、小一号；对不上（warn）字和边变橙，底还是白 */ .dt-dtag.dt-dman { padding: 0 8px; font-size: 11px; line-height: 18px; font-weight: 400; background: var(--surface); color: var(--neutral-fg); border-color: var(--line-strong); } .dt-dtag.dt-dman.t-warn { color: var(--warning-fg); border-color: var(--warning-border); font-weight: 600; } .dt-dtag:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } .dt-dtag[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--green-soft); } .dt-dpop { position: absolute; z-index: 30; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-2); font-size: 12px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; } .dt-dpop[hidden] { display: none; } .dt-dpop b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--ink); } .dt-dbars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; padding: 0 2px 1px; border-bottom: 1px solid var(--line-strong); } .dt-dbars i { display: block; flex: none; width: 10px; border-radius: 1px 1px 0 0; background: var(--green-2); } .dt-dbars i.now { background: var(--green); } .dt-dbars i.zero { background: var(--line); } .dt-dbars-cap { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); } .dt-sale-quiet { font-weight: 600; color: var(--warning-fg); white-space: nowrap; } /* 「近7个月没出货」不从「近7 / 个月」中间断（上线后核查 10-24） */ .dt-dbars i.now.zero { background: var(--line); } /* 新改标记头 7 天给 div 铺米黄底（shared/new-mark.js），和橙色标签的底一样，橙标签就不显眼了：这条只留虚线框（复查 10-24） */ .dt-dyn.sq-new { background-color: var(--surface) !important; } @media (max-width: 600px) { .dt-dyn { padding: 8px 10px; } .dt-dyn-h { font-size: 13px; } } @media print { .dt-dpop { display: none; } .dt-dtag { border-color: var(--line-strong); } }