Blizzard
15ff59e6db
seg-tabs 合并三套长得像但尺寸各不同的横向切换：plan 的 .inline-tabs
（灰槽白块）、community 的 .feed-tab（白药丸+阴影）、record 的 .rf-chip
（白药丸无阴影，高度还差 10rpx）。variant="solid|pill" 二选一，items
同时支持字符串数组和 {key,label} 数组。
stat-ring 是首页门面用的完成度环。用 SVG data-uri 画，和 record 页的
体重折线图同一套路——canvas 在 scroll-view 里的层级、滚动跟随和截图
行为全是坑。中心内容走 slot。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
22 lines
1000 B
Plaintext
22 lines
1000 B
Plaintext
.st{white-space:nowrap}
|
|
|
|
/* 横滑药丸：数量不定、可滚动（社区分类、记录类型筛选） */
|
|
.st-pill{padding:0 0 var(--sp-4)}
|
|
.st-pill .st-item{
|
|
display:inline-block;height:var(--h-sm);line-height:var(--h-sm);padding:0 var(--sp-4);
|
|
margin-right:var(--sp-2);border-radius:var(--r-full);border:1rpx solid var(--line);
|
|
background:#fff;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-b);
|
|
}
|
|
.st-pill .st-item.on{color:var(--primary-dark);background:var(--primary-soft);border-color:var(--primary-line)}
|
|
|
|
/* 灰槽白块：数量固定的互斥视图（计划页三段） */
|
|
.st-solid{
|
|
display:flex;gap:var(--sp-1);padding:var(--sp-1);border-radius:var(--r-md);
|
|
background:#EFE8DE;margin-bottom:var(--sp-4);
|
|
}
|
|
.st-solid .st-item{
|
|
flex:1;height:var(--h-sm);line-height:var(--h-sm);text-align:center;border-radius:var(--r-sm);
|
|
color:var(--muted);font-size:var(--fs-md);font-weight:var(--fw-b);
|
|
}
|
|
.st-solid .st-item.on{background:#fff;color:var(--primary-dark)}
|