style: 优化蝦皮列表关键信息展示 (#214)
This commit is contained in:
@@ -240,17 +240,17 @@ tr.empty small { color: #aaa; }
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 蝦皮数据页商品名称列收窄,配合 .truncate 一起用(见工单 #41)。
|
||||
/* 蝦皮数据页商品名称列收窄,配合 .truncate 一起用(见工单 #214)。
|
||||
用独立类设 max-width,不用 flex——.search-narrow 那套是给工具条用的,
|
||||
表格单元格不是 flex 布局,flex 在这里不生效。放在 .truncate 之后,
|
||||
同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。
|
||||
|
||||
18% = 初版 30% 的六成。蝦皮标题普遍很长(实测最长 60+ 字,
|
||||
全是关键词堆砌),不收窄的话这一列会把后面的颜色/尺码/SKU/待补
|
||||
几个关键数字挤出屏幕——而那几个数字才是这个页面要看的东西。
|
||||
固定 120px 约等于原 18% 宽度的 45%,同时避免百分比列宽随浏览器
|
||||
表格算法和窗口宽度大幅波动。蝦皮标题普遍很长(实测最长 60+ 字),
|
||||
完整标题靠悬停的 title 属性看。 */
|
||||
.col-title {
|
||||
max-width: 18%;
|
||||
width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
.col-shop { max-width: 150px; }
|
||||
.thumb-placeholder, .thumb-fallback { color: #6b7280; font-size: 12px; white-space: nowrap; }
|
||||
|
||||
Reference in New Issue
Block a user