|
1 | | -<!-- |
| 1 | +<!-- |
2 | 2 | * List - 脸型模块列表页 |
3 | | - * |
| 3 | + * |
4 | 4 | * @description 展示脸型列表，支持推荐列表和全部列表两种模式 |
5 | 5 | * @author Face & Body 模块优化团队 |
6 | 6 | * @version 2.0.0 |
7 | | - * |
| 7 | + * |
8 | 8 | * @features |
9 | 9 | * - 支持按脸型类型分类展示（写实、写意） |
10 | 10 | * - 支持推荐列表和全部列表切换 |
11 | 11 | * - 支持分页加载 |
12 | 12 | * - 支持搜索筛选 |
13 | 13 | * - 响应式布局适配 |
14 | 14 | * - 支持公告展示 |
15 | | - * |
| 15 | + * |
16 | 16 | * @components |
17 | 17 | * - faceTabs: 标签页组件 |
18 | 18 | * - PublicNotice: 公告组件 |
19 | 19 | * - CardBannerList: 卡片轮播列表组件 |
20 | 20 | * - ListItem: 列表项组件 |
21 | | - * |
| 21 | + * |
22 | 22 | * @styles |
23 | 23 | * - 样式文件: assets/css/face/list.less |
24 | 24 | * - 样式文件: assets/css/face/item.less |
|
27 | 27 | <div class="p-pvx-face-list" v-loading="loading" ref="listRef"> |
28 | 28 | <faceTabs :body_types="list" :active="active" :link="link" @change="handleFaceTabChange" /> |
29 | 29 | <PublicNotice bckey="face_ac" /> |
30 | | - <div class="m-pvx-recommend__grid" :style="{ '--pvx-face-grid': `repeat(${per}, 190px) 1fr` }" v-if="active === -1"> |
| 30 | + <div class="m-pvx-recommend__grid" :style="{ '--pvx-face-grid': per > 0 ? `repeat(${per}, 190px) 1fr` : '1fr' }" v-if="active === -1"> |
31 | 31 | <div v-for="(item, index) in recommendList" :key="'l' + index" class="m-pvx-type__box m-pvx-type__container" |
32 | 32 | :class="{ none: !item.list.length }"> |
33 | 33 | <CardBannerList :class="{ search: tabsData.title }" :count="count" :minw="190" |
@@ -158,23 +158,27 @@ export default { |
158 | 158 | } |
159 | 159 |
|
160 | 160 | if (this.active === -1) { |
161 | | - // 全部模式：每个类别最多6个数据 + 1个查看全部 |
162 | | - // .m-pvx-recommend__grid 是 flex 布局，两个分类并排(gap:40px) |
163 | | - // 每个容器宽度 ≈ (整体宽度 - 40) / 2，再减去容器 padding(30*2=60) |
164 | 161 | const totalWidth = this.$refs.listRef?.clientWidth || 1200; |
165 | 162 | const containerWidth = (totalWidth - 40) / 2 - 60; |
166 | | - const cardWidth = 190; // 固定卡片宽度 |
167 | | - const gridGap = 20; // gap = 20px |
| 163 | + const cardWidth = 190; |
| 164 | + const viewAllMinWidth = 80; |
| 165 | + const gridGap = 20; |
168 | 166 |
|
169 | | - // 计算能完整放下多少个190px卡片（含gap），查看全部占用剩余宽度(1fr) |
170 | | - // 不为查看全部预留完整卡片位置，剩余零碎宽度给查看全部即可 |
171 | 167 | const maxSlots = Math.floor((containerWidth + gridGap) / (cardWidth + gridGap)); |
172 | 168 |
|
173 | | - // 每个类别最多6个数据，最少1个，查看全部吸收剩余宽度 |
174 | | - this.per = Math.min(Math.max(maxSlots, 1), 6); |
175 | | -
|
176 | | - // grid列数 = 数据卡片数 + 查看全部(1fr吸收剩余空间) |
177 | | - this.count = this.per + 1; |
| 169 | + const remainingAfterCards = containerWidth - maxSlots * cardWidth - (maxSlots - 1) * gridGap; |
| 170 | +
|
| 171 | + if (remainingAfterCards >= viewAllMinWidth) { |
| 172 | + this.per = Math.min(Math.max(maxSlots, 1), 6); |
| 173 | + this.count = this.per + 1; |
| 174 | + } else { |
| 175 | + this.per = Math.min(Math.max(maxSlots - 1, 0), 6); |
| 176 | + if (this.per === 0) { |
| 177 | + this.count = 1; |
| 178 | + } else { |
| 179 | + this.count = this.per + 1; |
| 180 | + } |
| 181 | + } |
178 | 182 | } else { |
179 | 183 | // 非全部模式：按容器宽度动态计算 |
180 | 184 | const containerPadding = 60; |
|
0 commit comments