feat: 分类浏览体验优化

- 后端 CategoryItem 新增 sample 字段,每个器械/部位分类附首条动作代表图(720 JPG 海报),前端网格无需点进详情即可预览
- 首页『按器械浏览』『按部位浏览』网格 tile 改为图文卡片,展示分类代表图
- filter-bar 内联改为一行可横滑的分类 chips + 末尾『全部类型』入口;点开面板展开全部,选中项自动置顶
This commit is contained in:
2026-07-26 12:45:28 +08:00
parent 8d584129ec
commit b6e2093c82
8 changed files with 294 additions and 10 deletions

View File

@@ -94,21 +94,23 @@
.bp {
width: calc((100% - 48rpx) / 4);
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius-sm); padding: 22rpx 12rpx;
display: flex; flex-direction: column; align-items: center;
border-radius: var(--radius-sm); overflow: hidden;
display: flex; flex-direction: column; align-items: stretch;
}
.bp__label { font-size: 26rpx; color: var(--text); font-weight: 600; }
.bp__count { font-size: 20rpx; color: var(--text-3); margin-top: 6rpx; }
.bp__img { width: 100%; height: 132rpx; background: var(--surface-2); display: block; }
.bp__label { font-size: 24rpx; color: var(--text); font-weight: 600; text-align: center; padding: 10rpx 6rpx 2rpx; }
.bp__count { font-size: 20rpx; color: var(--text-3); text-align: center; padding: 0 6rpx 12rpx; }
.eq-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
.eq {
width: calc((100% - 48rpx) / 4);
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius-sm); padding: 22rpx 12rpx;
display: flex; flex-direction: column; align-items: center;
border-radius: var(--radius-sm); overflow: hidden;
display: flex; flex-direction: column; align-items: stretch;
}
.eq__img { width: 100%; height: 132rpx; background: var(--surface-2); display: block; }
.eq:active { background: var(--surface-2); }
.eq__label { font-size: 26rpx; color: var(--text); font-weight: 600; }
.eq__count { font-size: 20rpx; color: var(--text-3); margin-top: 6rpx; }
.eq__label { font-size: 24rpx; color: var(--text); font-weight: 600; text-align: center; padding: 10rpx 6rpx 2rpx; }
.eq__count { font-size: 20rpx; color: var(--text-3); text-align: center; padding: 0 6rpx 12rpx; }
.empty { color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: 40rpx 0; }