feat: 修改样式

src/pages/index/index.vue

@@ -20,7 +20,7 @@
         </view>
 
         <view class="category-container card mt30">
-          <view class="item" v-for="(item, index) in categoryList" :key="index" @tap="toGoodsList(item.categoryId)">
+          <view class="item" :class="categoryList.length > 4 ? 'max':''" v-for="(item, index) in categoryList" :key="index" @tap="toGoodsList(item.categoryId)">
             <image :src="imageUrl + item.imgUrl"></image>
             <view class="name">{{item.categoryName}}</view>
           </view>
@@ -326,12 +326,17 @@
   .category-container {
     display: flex;
     padding: 30rpx 0;
+    overflow-x: scroll;
 
     .item {
       width: 25%;
       display: flex;
       align-items: center;
       flex-direction: column;
+      flex-shrink: 0;
+      &.max {
+        width: 22%;
+      }
 
       image {
         width: 44rpx;

src/styles/common.scss

@@ -82,6 +82,9 @@
         height: 140rpx;
         margin-right: 20rpx;
         margin-top: 20rpx;
+        &:nth-child(4n) {
+          margin-right: 0;
+        }
       }
     }
     .bottom {