Blizzard
6a132d13bd
截图那个真的丑：.quick 是 128rpx 的大方块，整格铺 tone-N 的浅色底， 四个排一行就是一片肥色块，还直接浮在页面渐变上、没有卡片收纳， 不完整的行还留大缺口，整体像一张配色测试表。 改成 preview-v3（你当时认可的那版）的做法： 每组一张白卡收纳（.card） 颜色只集中在图标那个 96rpx 小圆角块上（.rec-ic + tone-N） 标签用纯深色，不跟 tone 变 —— 四组底下的字统一深灰，才不花 组标题一根同色系竖条 + 组名 .quick / .quick-grid / .tg 现在只有记录页用，直接换成 record 页私有的 .rec-* 类，不动全局。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
39 lines
1.7 KiB
Plaintext
39 lines
1.7 KiB
Plaintext
/* 记录页只有这一页在用这套分组宫格，样式就放这里（不进 app.wxss）。
|
||
原来是整格铺 tone 浅色底 + 直接浮在页面渐变上，四个一行是一片肥色块。
|
||
改成：每组一张白卡收纳，颜色只集中在图标那个小圆角块上，标签用纯深色。 */
|
||
|
||
/* .card 自带 --sp-5 padding 和 margin-bottom，这里只把上下内边距收紧一点，
|
||
底部留白靠 card 的 margin-bottom，不再叠 margin-top */
|
||
.rec-group{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
|
||
|
||
/* 组标题：一根同色系竖条 + 组名。颜色由外层 .g-N 决定 */
|
||
.rec-ghead{
|
||
display:flex;align-items:center;gap:var(--sp-2);
|
||
font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
|
||
margin-bottom:var(--sp-3);
|
||
}
|
||
.rec-bar{width:6rpx;height:28rpx;border-radius:3rpx;background:currentColor}
|
||
.g-1 .rec-bar{color:var(--primary)}
|
||
.g-2 .rec-bar{color:var(--green)}
|
||
.g-3 .rec-bar{color:var(--purple)}
|
||
.g-4 .rec-bar{color:var(--blue)}
|
||
|
||
.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4) var(--sp-2)}
|
||
|
||
.rec-item{
|
||
display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
|
||
padding-bottom:var(--sp-2);border-radius:var(--r-md);
|
||
transition:transform .06s;
|
||
}
|
||
.rec-item-hover{transform:scale(.94)}
|
||
|
||
/* 图标的小圆角色块。tone-N（app.wxss）给它浅色底 + 深色 ink，
|
||
pt-icon 走 currentColor 正好染成 ink 色 */
|
||
.rec-ic{
|
||
width:96rpx;height:96rpx;border-radius:26rpx;
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
|
||
/* 标签用纯深色，不跟着 tone 变 —— 四组底下的字统一是深灰，才不花 */
|
||
.rec-label{font-size:var(--fs-sm);color:var(--text-2);line-height:1.2}
|