feat: 顺运宝页与采集采购页搜索框收窄 (#34)

跟上 #23 给 PDD 页做的:搜索框收到 30%,「搜索」按钮紧挨输入框。
蝦皮数据页和客户端列表页按用户要求暂不动。

复用 #23 已有的 .search-narrow 类,没有为这两页新写 CSS 规则——
多写一条就多一处将来要同步的地方。全局规则
.toolbar input[type="text"] 一字未动,它被五个页面共用。

搜索按钮靠左没有加对齐样式,是收窄的自然结果:输入框不再伸展之后,
多余空间留在按钮之后。额外加 margin-right:auto 之类会和 grow 叠加出
难预料的结果。两个表单的 grow 都保留,它负责把删除按钮顶到最右侧。

/tasks 的 placeholder 从「任务编号 / 订单号 / PDD 商品 ID」缩成
「任务编号 / 订单号 / 商品 ID」——收到 30% 之后原文案装不下,
会被截断成看不出意思的半截。缩文案而不是调回宽度。

文档把这条规则从 §5.1 提到 §3.1 表格通用规则里,三个页面都指向它。
原来写在 PDD 页那一节,另外两页要用时看不到。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
chengma
2026-08-07 17:13:42 +08:00
co-authored by Claude Opus 5
parent 93beef8b36
commit 6a7cde2ca6
3 changed files with 9 additions and 3 deletions
+2 -1
View File
@@ -63,7 +63,8 @@ body {
/* 搜索表单占据剩余空间,把删除按钮挤到右边 */
.toolbar .grow { flex: 1; }
.toolbar label { color: #555; white-space: nowrap; }
/* 搜索框收窄到 30%(目前只有 PDD 页用)。
/* 搜索框收窄到 30%。目前 PDD 商品页、顺运宝数据页、采集采购页在用;
蝦皮数据页和客户端列表页仍是撑满的。
这样搜索表单里就没有会伸展的元素了,多余空间留在按钮之后,
「搜索」按钮自然贴着输入框,不会被顶到很右边。
用 flex 而不是 width:工具条是 flex 布局,width 会被 flex-grow 盖掉。