# 2026-06-02

## 修复首页商品分类金刚区在个别手机上排3行的问题

**问题**：`pages/index/index.vue` 中使用 `u-grid :col="5"` 布局商品分类，在某些手机上本应显示2行却变成了3行。

**根因**：
1. `.grid-text` 没有 `white-space: nowrap`，文字在小屏手机上换行导致格子高度不一致
2. `u-grid-item` 默认 padding `30rpx 0` 偏大，叠加图片+文字后总高度较高
3. 小屏手机上5列宽度被 `padding-lr` 占去后，每列实际宽度紧张

**修复方案**：
- 给 `.grid-text` 增加 `white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;` 强制单行显示
- 通过 `:custom-style="{padding:'20rpx 0'}"` 将 grid-item 的内部 padding 从 30rpx 减小到 20rpx
- 给图片添加 `flex-shrink:0` 防止图片被压缩