2026-06-02

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

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

根因：

.grid-text 没有 white-space: nowrap，文字在小屏手机上换行导致格子高度不一致
u-grid-item 默认 padding 30rpx 0 偏大，叠加图片+文字后总高度较高
小屏手机上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 防止图片被压缩