wm
393157e56b
- 首页『热门器械』由横滑 chips 改为与『按部位浏览』一致的网格 - 分类页 navbar 标题改由本地分类枚举回写，避免外部传入标题乱码 - 分类页新增二级维度多选筛选：器械维度交叉按部位，其余维度交叉按器械 - 后端 exercises.service 支持 equipment/bodyPart 逗号分隔多值 OR 过滤（向后兼容）
39 lines
1.8 KiB
Plaintext
39 lines
1.8 KiB
Plaintext
.page { min-height: 100vh; background: var(--bg-grad); }
|
||
/* 分类横列吸顶：top = 状态栏高度 + 导航栏 88rpx，精确贴在 navbar 下方，不同机型不串位 */
|
||
.filterbar {
|
||
position: sticky;
|
||
z-index: 40;
|
||
padding: 8rpx 0 12rpx;
|
||
background: var(--bg-grad);
|
||
}
|
||
.filterbar__row { white-space: nowrap; }
|
||
.filterbar chip { display: inline-block; margin-right: 16rpx; }
|
||
.filterbar__spacer { display: inline-block; width: 4rpx; }
|
||
/* 二级维度（多维度筛选）：主维度横列下方再叠一条横列，带标签与清除 */
|
||
.filterbar__sub { margin-top: 12rpx; padding-top: 14rpx; border-top: 1rpx solid var(--line); }
|
||
.filterbar__subhead { display: flex; align-items: center; justify-content: space-between; padding: 0 4rpx 10rpx; }
|
||
.filterbar__sublabel { font-size: 24rpx; color: var(--text-2); font-weight: 600; }
|
||
.filterbar__clear { font-size: 22rpx; color: var(--accent); }
|
||
/* 加载 / 空态占位：横列区域常驻，避免加载期间整块消失 */
|
||
.filterbar__loading {
|
||
font-size: 24rpx;
|
||
padding: 22rpx 4rpx 14rpx;
|
||
background: var(--bg-grad);
|
||
}
|
||
.count { font-size: 24rpx; margin: 20rpx 0 8rpx; }
|
||
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; margin-top: 12rpx; }
|
||
.grid__item { width: calc((100% - 18rpx) / 2); }
|
||
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 80rpx 0; }
|
||
|
||
/* 触底加载更多状态条 */
|
||
.loadmore { display: flex; justify-content: center; padding: 36rpx 0 12rpx; }
|
||
.loadmore__loading { display: flex; align-items: center; gap: 12rpx; color: var(--text-3); font-size: 26rpx; }
|
||
.spinner {
|
||
width: 32rpx; height: 32rpx; border-radius: 50%;
|
||
border: 4rpx solid var(--line);
|
||
border-top-color: var(--accent);
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
.loadmore__end, .loadmore__hint { font-size: 26rpx; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|