style: 蝦皮商品名称列再收窄到 18% (#41)

30% → 18%(初版的六成)。蝦皮标题普遍很长,实测最长 60+ 字且全是
关键词堆砌,不收窄的话这一列会把后面的颜色/尺码/SKU/待补几个数字
挤出屏幕——而那几个数字才是这个页面要看的东西。

数值只写在 app.css 一处,模板注释不再重复具体百分比,
免得下次改了数值忘了同步注释。title 属性保留,悬停看完整标题。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
chengma
2026-08-08 11:16:44 +08:00
co-authored by Claude Opus 5
parent 64d5e74d0d
commit ccc146cfbe
2 changed files with 11 additions and 5 deletions
+8 -3
View File
@@ -151,12 +151,17 @@ tr.empty small { color: #aaa; }
text-overflow: ellipsis;
}
/* 蝦皮数据页商品名称列收窄到 30%,配合 .truncate 一起用(见工单 #41)。
/* 蝦皮数据页商品名称列收窄,配合 .truncate 一起用(见工单 #41)。
用独立类设 max-width,不用 flex——.search-narrow 那套是给工具条用的,
表格单元格不是 flex 布局,flex 在这里不生效。放在 .truncate 之后,
同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。 */
同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。
18% = 初版 30% 的六成。蝦皮标题普遍很长(实测最长 60+ 字,
全是关键词堆砌),不收窄的话这一列会把后面的颜色/尺码/SKU/待补
几个关键数字挤出屏幕——而那几个数字才是这个页面要看的东西。
完整标题靠悬停的 title 属性看。 */
.col-title {
max-width: 30%;
max-width: 18%;
}
/* ── 弹窗 ─────────────────────────────── */