/* ============================================================================ 歌手库 artists.php —— 这一页自己的 CSS2。 原版 src/app/artists/page.tsx（外壳 InfoLayout）→ other-views.tsx 的 ArtistsView。 本页一共三块，其中两块不重复写，直接用 style.css 里现成的共享件（都已在参照版上 量过，是歌单广场那次建的）： 根 div.space-y-4.pb-6 → .pl-root（下内边距 24 + 子项之间 16） 标题区 div.flex.items-center.gap-2 → .pl-head / .pl-head-ico （整行 32，图标 24 落在 +4） 空态框 rounded-2xl border-dashed … py-20 → .empty-box（它的注释里点名说 artists 这一页要用它，别再写一份） ★ 这几个类名带 pl- 前缀是因为当初建在歌单广场那一节里；要提成通用件（比如 .ui-head / .ui-root）由上层定，改的时候这几处一起改。 ★ 标题行里**没有计数那一句**：原版这一页只有图标 + 标题（歌单广场才有「共 N 个 歌单」）。曾经照抄歌单广场多输出过一句「共 N 位歌手 · 全部为华语作品」， 文本比对报「我们有、参照版没有」，已删 —— 要加回去得先确认原版有。 ★ 卡片是原版 ArtistsView 那张六列网格卡（tplArtistCard：头像 120 + 名称 + 两行统计 + 关注），**不是**发现页那张 tplArtistItem（整卡 100 宽 / 头像 88 / 头像右下角挂地区角标）。两张卡长得不一样，别互相替换。 ========================================================================== */ /* ---- 歌手网格：2 / 3 / 4 / 6 列，列距 16、行距 16 ---- IE 没有 grid：float + 整行左右各 -8 的负外边距把 16 的间隙做出来（容器内容宽 1184 → 网格 1200、六列各 200，卡片盒 200−16 = 184，跟原版逐列重合）。 这套写法同 style.css 的 .pl-grid（那边有实测记录），**但没有直接复用它**： 两页的列数断点不一样 —— 歌单广场是 5 列起、这一页是 6 列起，共用一套百分比 会在 1024～1279 这一段错出一列。 ★ 只能写左右下三个长写，**一个字都不能碰 margin-top**：.pl-root > * + * 给标题区到网格的 16 跟本段权重一样都是 (0,1,0)，靠源码顺序分胜负，而本文件 在 style.css 之后 —— 写简写 `margin: 0 -8px -16px` 就把那 16 顶掉了 （.pl-grid 在那边踩过同一个坑，有记录）。 ★ :after 清浮动是必须的 —— 浮动不撑父高，不清的话网格高 0，下面的空态块和页脚 会跑到网格上面去（.pl-grid / .dsc-ranks 都是这个写法）。 ★ margin-bottom:-16 吃掉末行多出来的那 16：每列都带下内边距，而原版的间隙只在 行与行之间留 16、末行之后不留。 */ .ats-grid { margin-left: -8px; margin-right: -8px; margin-bottom: -16px; } .ats-grid:after { content: ""; display: table; clear: both; } /* 列（格子）：16 的间隙全走左右内边距，卡片盒自己不带外边距。 ★ 外面这层是必须的：gutter 的 8 和卡片自己的 16 内边距是两回事，合成一层的话 悬浮底色会铺到 gutter 上（原版的底色只铺在卡片盒里，缝里是透的）。 */ .ats-col { float: left; width: 50%; padding: 0 8px 16px; } @media (min-width: 640px) { .ats-col { width: 33.3333%; } } @media (min-width: 768px) { .ats-col { width: 25%; } } @media (min-width: 1024px) { .ats-col { width: 16.6667%; } } /* ---- 卡片盒：内边距 16、圆角 16、1px 透明边框、整卡居中、鼠标手型 ---- ★ 边框平时是透明的、不是 0：原版的 1px 边框一直在，悬浮只换颜色 —— 写成「悬浮才加边框」卡片会横向跳 1px。 ★ 圆角 16 = 原版 rounded-xl（--radius 12 再加 4），不是 12（刻度见 style.css 头部）。 */ .ats-card { padding: 16px; border: 1px solid transparent; border-radius: 16px; text-align: center; cursor: pointer; -ms-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ats-card:hover { border-color: #D9DFE2; background-color: rgba(230, 236, 239, 0.3); } /* 头像 120（尺寸在行内样式上），水平居中。.av 自己就是块级 + 圆形 + 裁切， 所以只要 margin auto；悬浮放大照 .dsc-art-av 那套（变换要带 -ms- 孪生）。 */ .ats-card-av { margin: 0 auto; -ms-transition: -ms-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ats-card:hover .ats-card-av { -ms-transform: scale(1.05); transform: scale(1.05); } /* 名称：上边距 12、字重 600、超长截断。 ★ 16/24 写出来、不靠继承：原版这一行没有任何字号类，值就等于 body 的 16px / 无单位 1.5；明写是为了将来 body 一动这里不会悄悄跟着漂。 */ .ats-card-name { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 600; color: #111C22; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 第一行统计「语种 · N 首作品」：上边距 4、12/16、次色。 ★ 整串必须在**一个文本节点**里 —— 理由见 tplArtistCard 的注释。 */ .ats-card-l1 { margin-top: 4px; font-size: 12px; line-height: 16px; color: #616B70; } /* 第二行统计「N 首 · M 张专辑」：上边距 2、字号 11。 ★ 行高 16.5 不是笔误：原版这一行只有字号类、没有行高类，继承来的无单位 1.5 → 11 × 1.5 = 16.5（同 .dsc-art-cnt 那条）。 */ .ats-card-l2 { margin-top: 2px; font-size: 11px; line-height: 16.5px; color: #616B70; } /* 「关注」按钮：整宽、高 28、12 号字、圆角 10、1px 边框、浅底、带阴影，悬浮转 accent。 几何全部走公共的按钮档位（.ui-btn-xs + .ui-btn-with-ic + 那颗 12 的图标 .ui-btn-ic3， 内边距 10、图标落点 7、间距 4 都在 style.css 里按 28 高的盒子算好了）， 这里只补两件事：上边距 12、撑满整行。 ★ 别改成 inline-block + 手动定宽：原版是整宽，宽度要跟着列走。 */ .ats-follow { display: block; width: 100%; margin-top: 12px; }