/* 很简单进销存 —— 大白话界面：字大、按钮大、手机也能点 */ :root { --bg: #f5f6f8; --card: #fff; --line: #e3e6ea; --ink: #222; --muted: #777; --brand: #1a66d6; --danger: #d64545; --ok: #2b9e5b; } * { box-sizing: border-box; } /* hidden 属性必须真能藏起来。 `.login { display: flex }` 这类作者样式的优先级高于浏览器默认的 `[hidden] { display: none }`，于是设了 hidden 也照样显示——登录之后 登录卡片还端端正正摆在第一屏，人以为没登进去，又登一次。 （2026-10-30 截图时发现的，肉眼可见，但没有一条测试会报错。） */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--ink); } /* ---- 半透明外壳（2026-11-03）---- 老板要的是「像微信那样能看见自己的桌面」。真透明这件事，Edge/Chrome 的 --app 窗口做不到——客户区整块由 Chromium 自己合成，Win32 的窗口透明度 对它无效。所以走的是**跟微信同一个观感的另一条路**：把桌面壁纸铺成页面 底色，上面盖一层半透白的膜，顶栏和左栏再加真·毛玻璃。 看起来一样，边界不一样，这句要跟人讲清楚：透出来的是**壁纸**，不是 挡在后面的别的窗口。桌面上一张 Excel 挡在后面，我们这边看不见它。 三条设计上的取舍： 1. **只覆盖 --card 这一个变量**，所有卡片、顶栏、左栏跟着一起透。 逐个容器改颜色，改到第 30 个必然漏一个，漏的那个就是一块突兀的白板。 2. **只有顶栏和左栏用 backdrop-filter**。卡片有几十个，每个都挂毛玻璃 是拿显卡换观感，低端办公机上滚表格会掉帧。 3. **表格的冻结列不跟着透**（见下面 .sticky 那条）——那一列是用来挡住 后面滚过去的字的，半透就白挡了。 图从 /api/desktop/backdrop 来，地址由 shell.js 设进 --desk；取不到就 什么都不做，保持原来那块干净的浅灰。 */ body.glass { --card: rgba(255, 255, 255, .88); --line: rgba(203, 212, 224, .85); /* 压在壁纸上的那层白有多浓。**这个数不是调的，是判出来的**： 屏幕上打底的是深色壁纸时，界面这堆深灰字直接糊在里头。所以 shell.js 会把壁纸缩成 32×18 算平均亮度，深底就把膜加到 .78，浅底只给 .44。 不这么干的话，同一个界面在办公室那台浅色壁纸的机器上好看，在车间 那台深色壁纸的机器上是"看不见字"。 */ --veil: .26; background: var(--bg); } body.glass[data-desk="dark"] { --veil: .60; } /* 壁纸自己要先压淡，而且必须做在**单独一层伪元素**上。 第一版直接把壁纸写进 body 的 background，结果一屏红岩底色跟表格里的 红字打成一团——客户第一眼不是"好看"，是"看不清"。压淡分两件事：一层 白膜降对比（下面这条 gradient），一层轻模糊去掉细节（filter）。 模糊只给 4px，**不能更多**：糊到 30px 时背景成了一块渐变色的板子， 跟桌面已经没关系了，客户的原话会是"我桌面呢"。要的是"认出这是我的桌面， 但它退到后面去了"，不是"换成一张好看的渐变"。 这层的膜**故意做得很薄**（--veil .26）。它只负责把照片降成"色块"， 真正挡字的那层白在内容区（见下面 .pagewrap），不在这儿。一开始把厚膜 铺满整屏，结果顶栏和左栏叠了两层白，透出来跟纯白没区别——微信那种 "边上透、中间实"正好是反过来的做法。 inset -40px 是为了吃掉模糊边缘：blur 会把四周往外摊成半透明，贴边铺 会露出一圈发白的描边。 */ body.glass::before { content: ""; position: fixed; inset: -40px; z-index: 0; background: linear-gradient(rgba(250, 251, 253, var(--veil)), rgba(250, 251, 253, calc(var(--veil) + .10))), var(--desk) center / cover no-repeat; filter: blur(4px) saturate(1.1); pointer-events: none; } /* 内容区再压一层：表格里全是小数字，跟照片直接叠在一起是看不清的。 只压中间这一块，边上那圈留给壁纸透——这就是"微信"那个分寸。 */ body.glass .pagewrap { background: linear-gradient(rgba(250, 251, 253, .52), rgba(250, 251, 253, .58)); } body.glass[data-desk="dark"] .pagewrap { background: linear-gradient(rgba(250, 251, 253, .62), rgba(250, 251, 253, .66)); } /* 上面那层糊好的底要压在真内容后面。 **`#loginView` 不能漏**：登录页和主界面是 body 的两个平级孩子，只给 `#mainView` 提层的话，登录页整张卡片会被伪元素盖住——2026-11-03 第一版 就是这样，460 那个小窗打开只剩一个密码框孤零零浮在照片上，标题、 手机号输入、登录按钮全不见。这种错在截图上非常明显，但没人会去看 登录页——上线后客户第一眼就是它。 */ body.glass #loginView, body.glass #mainView { position: relative; z-index: 1; } /* ---- 真玻璃（2026-11-03 晚）---- 只有跑在**自己开的窗口**里才有意义（URL 带 `?rg=1`，见 shell.js）。 那种窗口底下才是 DWM 真磨砂：压在该窗口后面的别的软件、桌面图标， 都会糊着透上来——这才是老板要的"半透看到后面那层东西"。 所以上面那套假底（壁纸 + 白膜）必须**整层关掉**。不关就是两层： 壁纸把磨砂盖住，观感退回到"贴了一张图"，而且后面压着的窗口永远看不见。 留着的只有 `--card` 那一个变量：卡片、顶栏、左栏一起半透。这条是原设计 里唯一可复用的东西——逐个容器改颜色，改到第 30 个必然漏一个。 */ body.glass.real { background: transparent; } body.glass.real::before { display: none; } body.glass.real .pagewrap { background: transparent; } /* ---- 失焦补雾（2026-11-03 深夜）---- 亚克力在窗口失焦后会被 DWM 整块降级成**不透明浅灰**。实测数据（玻璃窗 后面压一块纯蓝 32,64,160）：激活时背景量到 (137,158,221)，蓝色透上来了； 失焦后量到 (211,211,211)，一点蓝成分都没有——不是雾淡了，是材质被关掉了。 Win11 的开始菜单、通知中心失焦也一样变实，这条没有开关。 既然拦不住，就顺着它：铺一层很淡的雾，把这块灰提成"我们的浅色底"。 211 经 α=.72 的白雾 → 约 238，接近 Win11 原生 Mica 失焦的观感，切换读起来 是"暗下来了"而不是"掉色了"。 雾色带一点冷调（248,250,253）而不是纯白：纯白会让这块灰变成一张白纸， 跟周围留白的卡片糊在一起，分不清哪是窗口哪是内容。 状态由壳来打（glass.py 的 WM_ACTIVATE → html.win-blur），不靠浏览器自己的 focus/blur 事件——那个在 WebView2 里可靠不可靠，得另外验，没必要。 ::after 一直存在只改 opacity，所以切换有过渡；一直 display:none 再显示 的话是硬切。 */ body.glass.real::after { content: ""; position: fixed; inset: 0; z-index: 0; background: rgba(248, 250, 253, .72); opacity: 0; pointer-events: none; transition: opacity .16s linear; } html.win-blur body.glass.real::after { opacity: 1; } button { font: inherit; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; } button.primary { background: var(--brand); border-color: var(--brand); color: #fff; } button.danger { color: var(--danger); border-color: var(--danger); } button.ghost { border: none; background: none; color: var(--muted); } button.big { width: 100%; padding: 12px; font-size: 17px; } /* 按钮的"手上有感觉"三件套：滑上去变色、按下去下沉、松手回弹。 2026-11-02 老板原话："颜色定死，鼠标滑倒客户点击是直接弹窗。没有过渡"。 原来全场按钮既没有 hover 也没有 active——鼠标滑上去纹丝不动，点一下弹窗 哐当就盖上来，手感像点在一张图上，不像点在能按的东西上。 0.12s 是"能感觉到"和"不拖沓"之间的位置；再慢就变成卡顿。 `:not(.linkbtn)` 是必须的：表格里那种文字按钮（作废/明细）自带边框色， 被这里刷成灰框会看着像"整行都能点"。 */ button { transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease; } button:hover:not(:disabled):not(.linkbtn) { background: #f7f9fc; border-color: #c9d2dd; } button:active:not(:disabled) { transform: translateY(1px); } button.primary:hover:not(:disabled) { background: #1557b8; border-color: #1557b8; } button.danger:hover:not(:disabled) { background: #fdf1f1; } button.ghost:hover:not(:disabled) { background: #f2f4f7; color: var(--ink); } /* 描边按钮：两个同等重要的动作并排时用（加供应商 / 加客户）。 为什么不用 primary：两个蓝块并排会互相抢，而这一页最主要的动作是看名单， 不是加人。为什么也不用默认白底：老板圈的就是这一处——一个蓝一个白， 在新账套（客户 0 家）里看着像"只有供应商能加"。描边用品牌色， 两个一样重、都看得见、又不抢上面那份名单。 */ button.tint { border-color: var(--brand); color: var(--brand); background: #fff; } button.tint:hover:not(:disabled) { background: #eef3ff; border-color: var(--brand); } input, select, textarea { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; width: 100%; } /* 锁住的下拉要看得出来锁住了。不然它跟能点的一模一样，人点两下没反应， 只会以为软件坏了，看不到底下那句"为什么锁"的说明。 */ input:disabled, select:disabled { background: #f2f2f2; color: #8a8a8a; cursor: not-allowed; } .muted { color: var(--muted); } /* 二维码（qrlib.js 生成的 svg 没有 width/height 属性）。 不撑满的话它会按 SVG 的默认尺寸 300x150 显示，把卡片顶变形。 扫码页和打印标签页用的是同一个生成器，所以这条两边都管用。 */ .qrbox svg { width: 100%; height: 100%; display: block; } .err { color: var(--danger); } .ok { color: var(--ok); } /* 登录 */ .login { display: flex; min-height: 100vh; align-items: center; justify-content: center; } .login-card { background: var(--card); padding: 32px; border-radius: 14px; width: 372px; display: grid; gap: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.06); } .login-card h1 { margin: 0; text-align: center; } /* 顶栏 */ .banner { padding: 8px 14px; background: #fff7e0; color: #8a6d00; font-size: 14px; } .banner.err { background: #fdeaea; color: #a12525; } /* 横幅里的动作：只给一句「有事」不给出路，人只能干着急 */ .banner .linkbtn { margin-left: 8px; padding: 2px 10px; font-size: 13px; } .linkbtn { background: none; border: 1px solid currentColor; color: inherit; border-radius: 8px; cursor: pointer; } .linkbtn[disabled] { opacity: .55; cursor: default; } /* 同步清单：一条一块，手机上不挤 */ .syncrow { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; } .syncrow .h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .syncrow .why { color: var(--danger); font-size: 13px; } .syncrow .pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .syncrow .pick select { flex: 1; min-width: 160px; } /* 打样：一条一块，不用表格。 7 列的表格在 390 宽的手机上会挤成「一个字一行」——客户名竖着排成四行， 按钮摞成两行，看着像坏了。（2026-10-30 截图确认过，不是猜的。） */ .itemlist { display: grid; gap: 8px; margin: 8px 0; } .itemrow { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 5px; } .itemrow .h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .itemrow .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .itemrow .acts button { flex: 0 0 auto; } /* 作废的单还在列表里（要留痕），但整块淡下去，别跟正常单混在一起看 */ .itemrow.voidrow { opacity: .55; } /* 表单：标签在小字上、输入框占满一行，手机上不用瞄着猜哪格填什么 */ .formgrid { display: grid; gap: 10px; margin: 8px 0; } .formgrid .row { margin: 0; } .fld { display: grid; gap: 4px; flex: 1; min-width: 140px; } .fld > label { font-size: 12.5px; } .tabs { display: flex; gap: 6px; padding: 8px 10px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; } .tabs button.on { background: var(--brand); color: #fff; border-color: var(--brand); } /* 顶栏这排页签的 hover（2026-11-02 老板："菜单键颜色固定，鼠标移动没有变色提示"）。 根因不是"没写 hover"，是通用那条只给到 #f7f9fc —— 几乎就是白色，贴在白色顶栏上 看不出来，等于没有。这里给足对比：淡品牌底 + 品牌字。 当前页（.on，蓝底白字）滑上去只许更深一档，**不许被通用规则刷成浅灰** （通用规则是 3 段选择器，会压过 .tabs button.on 的 2 段，滑一下当前页就变白）。 所以这两条都写成 4 段，专门用来压过它。 */ .tabs button:not(.on):hover:not(:disabled) { background: #eef3ff; border-color: var(--brand); color: var(--brand); } .tabs button.on:hover:not(:disabled) { background: #1557b8; border-color: #1557b8; color: #fff; } .tabs .spacer { flex: 1; } /* 顶栏那个版本号（2026-11-02）。刻意做小、做灰：它是给报错时用的，不是给人看的招牌。 数字走 tabular-nums，免得 2026.11.07 和 2026.11.10 宽度不一样、把旁边的按钮挤动。 */ .vertag { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 6px; align-self: center; cursor: pointer; user-select: none; border-bottom: 1px dashed transparent; } .vertag:hover { color: var(--ink); border-bottom-color: var(--line); } /* 「别填金额和客户名」这类提醒。不用红字：红字在这套界面里是「出错了」， 而这句话是「填之前先看一眼」，是提醒不是报错——标红会让人以为已经出问题。 */ .hint-warn { background: #fff8e6; border: 1px solid #f0dfb0; color: #7a5c00; font-size: 12.5px; line-height: 1.55; border-radius: 8px; padding: 7px 10px; margin: 0 0 10px; } /* 「全部功能」：藏起来的页签从这儿进去，不能让人找不着（铁律第二条） */ .tabs button.more { color: var(--muted); border-style: dashed; } .morelist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .moreitem { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; } /* 860 是当初按「登录框一样窄的小窗」定的。2026-11-03 窗口改成按工作区开 （见 app.js 的 mainWindowSize），再卡 860 就变成两边空出两指宽的白边， 窗口大了、内容没大，看着更空。放到 960，配大屏那一档（shell.css 1500 断点）。 */ main { max-width: 960px; margin: 0 auto; padding: 12px; display: grid; gap: 12px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .card h3 { margin: 0 0 8px; } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .row > * { flex: 1; min-width: 120px; } /* 「选个月 → 关账」这种一行只有一个小输入 + 一个按钮的，别让它们平分整张卡。 平分的结果是 40px 高的输入框拉成 265px、按钮拉成 277px 的大蓝块—— 2026-11-02 老板截图里「关账」「保 存」那两块蓝就是这么来的。 只在这一类行上收，不动 .row 的全局规则（那 90 多处靠它排版）。 */ .row.tightrow > input { flex: 0 0 auto; width: 172px; min-width: 0; } .row.tightrow > button, .row.tightrow > span { flex: 0 0 auto; min-width: 0; } @media (max-width: 640px) { .row.tightrow > input { width: 150px; } } /* 单据页的「从…到…」。跟 .row 不一样，这里不许换行：换行会把「到」和 第二个日期拆到下一行，看着像两组日子。所以标签不给最小宽度、 两个日期框平分剩下的地方（390 宽下各约 130px，原生日期框刚好够显示）。 */ .daterow { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin-top: 8px; } .daterow[hidden] { display: none; } /* 本身写了 display:flex，hidden 会被压掉 */ .daterow > label { flex: 0 0 auto; min-width: 0; color: var(--muted); font-size: 13px; } .daterow > input { flex: 1 1 0; min-width: 0; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: normal; } .num { text-align: right; font-variant-numeric: tabular-nums; } .tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eef; } /* 首页「② 今天的单据」那三块：原来是 .row 里的 span，被 `.row > * { flex:1 }` 拉成三条等宽长条——「入库 3 张」四个字左边一杵，右边一大片空底色， 看着像断了的三根色条而不是三个数（2026-11-02 老板截图圈的就是这行）。 现在它们是**按钮**：浅色底不变，按下去颜色变深，点一下直接跳到那一类单据。 */ .pillrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } button.tag { border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 4px 12px; transition: background .12s, color .12s, transform .06s; } button.tag b { font-size: 15px; font-variant-numeric: tabular-nums; } button.tag:hover:not(:disabled) { filter: brightness(.96); } button.tag:active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); } button.tag.mat:hover:not(:disabled) { background: #d7e4fb; } button.tag.fg:hover:not(:disabled) { background: #d3f0de; } button.tag.tool:hover:not(:disabled) { background: #fbe0cf; } /* 卡片标题右边的数量徽章：一眼看出"今天有几件要动手"，浅蓝底不抢内容 */ .badge { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 10px; background: #e8f0fe; color: #1a56c6; font-size: 12px; font-weight: 600; vertical-align: 2px; } /* ---- 定高列表 + 搜索胶囊（2026-11-03 老板要求）---- 原话：「这种不能无限向下加」「不能让下面的功能溢出找不到」。 现在每一页都是把整张表铺开：首页那张「该补料的」一长，下面「今天的单据」 「把数据带走」就被顶到几屏以外——客户找不到，而不是看不到。 一条规则，所有列表都套，别一页一页去调： .cardhead 卡片头：标题 + 条数徽章 + 搜索胶囊，永远一行 .lst 卡片体：高度封顶，自己滚 .more 卡片底：「查看全部 N 条」的出口 封顶用 vh 不是写死 10 行的像素：行高不统一（首页约 40px、物料列表 62px）， 写死像素等于每页单独调一次，迟早有一页漏。42vh 的分寸是"下面那张卡的 标题还露得出来"——看不见下一张卡，客户会以为这页就这些。 */ .lst { --lst-h: 42vh; max-height: var(--lst-h, 42vh); overflow-y: auto; /* 滚到底不要带着整页一起滚：那种"我明明只在翻这张表，怎么整页跑了" 是最容易让人以为自己点错东西的。 */ overscroll-behavior: contain; } /* 表头跟着滚上去之后，第二屏开始就不知道每列是什么数字了。 sticky 必须给底色，不然下面的行从字缝里透上来。 表格大多是 `` 直接写、没有 thead，所以两个都选上。 */ .lst thead th, .lst tr:first-child th { position: sticky; top: 0; z-index: 1; background: var(--card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cardhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; } .cardhead > h3 { margin: 0; flex: 1 1 auto; min-width: 0; } /* 搜索框外面那一圈色环（老板：「像胶囊又不是胶囊」）。 圆角只给 12px，不给 999——全圆是手机搜索框，这个要的是"输入框外面 还套了一层东西"。色环用 box-shadow 而不是 border：border 会挤掉 输入区宽度，聚焦变色时整行会抖一下。 */ .sbox { display: flex; align-items: center; gap: 6px; flex: 0 1 240px; min-width: 150px; padding: 0 10px 0 12px; /* 底不是纯白：卡片本来就是白的，纯白 + 细边在浅色界面上等于没框。 给一点冷白，框自己才浮得出来。 */ background: #fbfcff; border: 1px solid #d5dcea; border-radius: 14px; box-shadow: 0 0 0 3px rgba(26, 102, 214, .12); transition: box-shadow .16s ease, border-color .16s ease, background .16s ease; } .sbox:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(26, 102, 214, .20); } .sbox > input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 7px 0; font-size: 13.5px; } .sbox > input:focus { outline: 0; } .sbox > input::placeholder { color: #9aa4b2; } .sbox > .sico { color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; } /* 放进 .row 里的时候要压过 `.row > * { flex: 1 }`： 不压的话输入区被拉满整行，右边那个「近 30 张」被顶到下一行去。 */ .row > .sbox { flex: 1 1 240px; min-width: 150px; } @media (max-width: 640px) { .sbox { flex: 1 1 100%; } } .more { margin: 10px 0 0; } /* ---- 上下滚动的提示条（2026-11-03 老板：「很空，加些安全提示、备份、操作等， 多做一些提示上下滚动的方式做提示」）---- 一条一条往上滚，鼠标移上去停住——客户正在读的那条不该被抢走。 高度写死 40px，滚的是 transform：改高度会让整张卡跟着抖。 */ .tips { height: 40px; overflow: hidden; margin: 0 0 10px; } .tips-run { transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .tips-line { height: 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tips-line b { color: var(--ink); font-weight: 500; } .tips-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .5; flex: 0 0 auto; } /* 自动备份那个开关。用 checkbox + 自己画的滑轨，不用 原生那个小方框——这一页就这一个开关，原生方框在中文界面里像"打勾问卷"。 */ .sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; flex: 0 0 auto; } .sw > input { position: absolute; width: 0; height: 0; opacity: 0; } .sw .track { width: 42px; height: 23px; border-radius: 12px; background: #cfd6df; position: relative; transition: background .18s; flex: 0 0 auto; } .sw .track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(16, 26, 40, .22); } .sw > input:checked + .track { background: var(--brand); } .sw > input:checked + .track::after { transform: translateX(19px); } .sw > input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(26, 102, 214, .22); } .tag.mat { background: #e8f0fe; color: #1a56c6; } .tag.fg { background: #e6f6ec; color: #1e7a45; } .tag.tool { background: #fdeee6; color: #b45309; } .tag.void { background: #f2f2f2; color: #999; text-decoration: line-through; } .tag.supplier { background: #f3e9fd; color: #6b21a8; } .tag.customer { background: #e6f6ec; color: #1e7a45; } /* 「类型标签 + 名字」的标题。标签一律排最前，且跟着文字流走—— 原来是「名字 + 标签」，名字一长（「温州皮革（龙湾分厂）」这类）在 390 宽里 标签就被推到第二行末尾甚至屏幕外，老板的原话：「谁也看不到是供应商还是客户」。 不用 flex：flex 在窄屏会把标签挤成单独一行，看着像飘在上面。 走文字流最省事——标签占第一行开头，名字接着排，换行后从行首开始。 */ .ttl { display: block; } .ttl > .tag { vertical-align: middle; margin-right: 6px; } .ttl > .nm { overflow-wrap: anywhere; } .low { color: var(--danger); font-weight: bold; } .todo-big { font-size: 26px; font-weight: bold; } /* 手机上表格不许硬挤。 `table { width: 100% }` 在 390 宽、7 列的时候，每列只剩五十来像素—— 「老王皮业」被挤成一个字一行、按钮摞成两层，看着像坏了（2026-10-30 逐页 截图确认过，工单/工具两页都是）。所以手机上给表格一个最小宽度，超出的部分 在卡片里横向滑。滑一下总比一个字一行好读。 kv 表（单据详情那种两列竖排的）不算，它本来就该窄。 */ @media (max-width: 640px) { .card, dialog #dlgBody { overflow-x: auto; } /* 不给表格写死最小宽度：写死会让本来就窄的表也被撑出去，白滑一屏。 `white-space: nowrap` 让表格按内容自然变宽，装不下才滑。 */ .card th, .card td, #dlgBody th, #dlgBody td { white-space: nowrap; } .card th, .card td { padding: 6px 6px; } /* 最后一列基本都是按钮（结单/作废/继续盘/收款）。表格能横滑以后它会滑出屏幕—— 按钮看不见等于没有。把它钉在卡片右边缘，横向滑的时候它不动。 两处细节：①要给 z-index，否则别的单元格会盖在它上面 ②卡片有 14px 右内边距，内容会从那儿漏出来，用一块同色影子盖住 */ .card table:not(.kv) th:last-child, .card table:not(.kv) td:last-child { position: sticky; right: 0; z-index: 2; background: var(--card); box-shadow: -6px 0 6px -6px rgba(0,0,0,.18), 16px 0 0 var(--card); } /* 手机上先别给最不重要的那几列留地方：备注、开单人这类滑过去才看得到， 不如干脆收起来，让关键几列不用滑就看全。 */ .hide-sm { display: none !important; } /* 表单里的长标签别再跟输入框挤一行：390 宽一行装不下十几个字， 硬挤的结果是标签被拦腰截成两行（「业务日期（补录以前／的单才填」）， 看着像软件坏了。让标签独占一行、输入框在下面占满—— 两行都是整整齐齐的字，不是一行断成两截。桌面（>640px）不受影响。 */ .row > label { flex: 1 1 100%; } /* 附件那排控件：「拍 照」独占一行（手指要按得中，也是手机上最常用的那个）， 下面「相册/文件」和「上 传」并排。不这么摆，几个挤在 354px 里会换行成 "拍照 / 相册" 一行、"上传" 单独一行——上传跟选文件分了家，看着别扭。 原生的「选择文件 未选择文件」在手机上是灰小字、还会被截成「未…件」， 所以手机上换成按钮（见 app.js 里的 #filePickBtn）。 */ #fileCamBtn { flex: 1 1 100%; } } /* 平板：触摸屏 + 比手机断点宽。 断点只有 640，平板全走桌面规则，于是出现"鼠标版界面 + 手指"： 实测列表按钮 62×38px、表内小按钮 42×34px，都低于触摸目标下限。 点在「作废」这种不可逆的地方，点偏的代价不是重试一次。 44px 是 Apple / Google 都给的触摸目标建议值。 **为什么不管手机（≤640）**：实测手机上的按钮也是 38px，一样偏小。 但手机是双手捧着、离眼近、屏幕就那么大，把它撑到 44 会挤掉本来就不多的可视行数； 平板常常单手拎着、离得远、还在走动，才是真的需要大目标。 电脑（`pointer: fine`）不受影响；接鼠标的折叠屏自动回到鼠标规则。 */ @media (pointer: coarse) and (min-width: 641px) { button { min-height: 44px; padding: 10px 16px; } /* ghost 原本是 `padding: 8px 14px`——照抄成 10px 12px 会把「作废」这类 无边框按钮压窄 4px，反而更难点了。水平给回 14px。 */ button.ghost { padding: 10px 14px; } input, select, textarea { min-height: 44px; } /* 行高跟着加一点：手指落在两行中间时，别一下点到隔壁那张单上 */ th, td { padding: 9px 8px; } /* 盘点「实数」格：桌面是 88px（内联写的），平板上给到 96px ——仓库里是一列竖着一个个填，戴手套时格子太窄容易填进上一行 */ .ctReal { min-width: 96px; } } dialog { border: none; border-radius: 12px; padding: 0; width: min(720px, 94vw); } /* 弹窗自己不画焦点黑框。showModal 后焦点落在 dialog 上，Chrome 给它描一圈 outline——原本点一下遮罩就关掉了看不见，现在弹窗留着，这圈黑边就一直挂着， 看着像"弹窗坏了/漏了个框"。真正的输入框和按钮仍有各自的焦点样式。 */ dialog:focus, dialog:focus-visible { outline: none; } dialog::backdrop { background: rgba(0,0,0,.35); } /* 弹窗别"啪"地砸出来。0.16s 的轻微下沉 + 淡入，够让人看清"是从这一下点出来的"， 又不至于要等——老板说的"没有过渡"就是这个。时长跟按钮 hover 同一档 （0.12~0.16s），一整套动作才像一个东西，不会有的快有的慢。 遮罩慢一点点（0.2s）压住底色，正文先清楚，眼睛落在字上而不是落在暗下去那一层。 */ @keyframes dlgIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } } @keyframes veilIn { from { opacity: 0; } } dialog[open] { animation: dlgIn .16s ease-out; } dialog[open]::backdrop { animation: veilIn .2s ease-out; } /* 老浏览器没有 showModal()（Safari 15.4 以下、旧 Android WebView）。 openDlg 会给它加上 .noModal 并手工写 open 属性——这里把它摆成普通浮层： 居中的白框 + 自己画一层遮罩（用 box-shadow 的大面积投影，不额外插元素）。 做不到"点了遮罩外才关"那种模态行为（那要重写焦点管理），只保证**看得见、点得着**。 */ dialog.noModal { position: fixed; inset: 0; margin: auto; z-index: 50; height: fit-content; max-height: 88vh; overflow: auto; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.2); } #dlgBody { padding: 18px; display: grid; gap: 10px; } /* 弹窗里标题自带上下 margin，叠上 grid 的 gap 能撑出二十来像素的空白。 手机上这半屏空白很显眼——看着像内容没加载出来。收成紧贴下面那行。 */ #dlgBody h3 { margin: 2px 0 0; font-size: 16px; } /* 单上的话与图纸 */ h4 { margin: 8px 0 0; font-size: 15px; } h4 .muted { font-weight: normal; font-size: 12px; } /* 左列标签**不许折行**：原来写死 92px，「＋ 这个月买进」正好差几个像素， 被挤成「＋ 这个月买 / 进」两行——一张算式表从中间断开，读起来像两件事 （2026-11-02 老板截图圈的就是这处）。改成按内容收：width:1% 让浏览器 取最小内容宽，nowrap 保证一行。手机上标签总共也就 91px，仍放得下。 */ table.kv th { width: 1%; white-space: nowrap; color: var(--muted); font-weight: normal; } /* 数字等宽：不上等宽时 1 和 8 占的宽度不同，同一列上下对不齐。 */ /* `white-space` 必须显式放回 normal：上面 `.card td` 是 nowrap（给数据表用的）， 月结这张两列说明表的右列常常是一句话——多单位时是「148 个 · 3 公斤 · 1,000 条」 这种长串，跟着 nowrap 会被裁到卡片外（2026-11-02 实测 390 宽：右半边整段不见）。 */ table.kv td { font-variant-numeric: tabular-nums; white-space: normal; } /* 右列一个数就是一个跳转，下划线穿过「1,000 条 · 22 片」这种长串只会更脏； 鼠标移上去再给下划线，仍然看得出能点。 */ table.kv td a { text-decoration: none; } table.kv td a:hover { text-decoration: underline; } table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: none; } .notes { display: grid; gap: 8px; max-height: 240px; overflow: auto; } .note { background: #f7f8fa; border-radius: 8px; padding: 8px 10px; } .note .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; } .note .what { white-space: pre-wrap; word-break: break-word; } textarea { resize: vertical; } .preview { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; } .previewFrame { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: 8px; } .fileTable td { font-size: 13px; } .talkMark { white-space: nowrap; font-size: 13px; } input[type=file] { padding: 6px; } /* 选料框：输入即搜（2026-11-02）。原生