feat: 分类浏览体验优化
- 后端 CategoryItem 新增 sample 字段,每个器械/部位分类附首条动作代表图(720 JPG 海报),前端网格无需点进详情即可预览 - 首页『按器械浏览』『按部位浏览』网格 tile 改为图文卡片,展示分类代表图 - filter-bar 内联改为一行可横滑的分类 chips + 末尾『全部类型』入口;点开面板展开全部,选中项自动置顶
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user