1

src/pages/assistingAgriculture/index/index.vue

@@ -37,15 +37,17 @@
       </view>
       <view class="sort">
         <view style="display: flex; flex-direction: row">
-          <view
-            class="borderClass"
-            @click="toBuilding(item)"
-            v-for="(item, index) in sortList"
-            :key="index"
-          >
-            <image mode="aspectFill" :src="item.icon" style="width: 96rpx; height: 96rpx" />
-            <view class="sort-text">{{ item.categoryName }}</view>
-          </view>
+          <scroll-view class="box-red" scroll-x="true" @scroll="scroll">
+            <view
+              class="borderClass"
+              @click="toBuilding(item)"
+              v-for="(item, index) in sortList"
+              :key="index"
+            >
+              <image mode="aspectFill" :src="item.icon" style="width: 96rpx; height: 96rpx" />
+              <view class="sort-text">{{ item.categoryName }}</view>
+            </view>
+          </scroll-view>
         </view>
       </view>
       <view class="product-page" v-for="(item, index) in list" :key="index">
@@ -109,7 +111,7 @@ const getList = () => {
     res.data.forEach((item) => {
       item.icon = import.meta.env.VITE_APP_IMG_URL + item.pic;
     });
-    sortList.value = res.data.splice(0, 4);
+    sortList.value = res.data;
   });
 };
 // 筑农严选首页-分类预售商品列表
@@ -205,11 +207,16 @@ page {
   height: 186rpx;
   background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
 }
+.box-red {
+  white-space: nowrap;
+  width: 100%;
+}
 .borderClass {
   width: 96rpx;
   height: 96rpx;
-  margin-left: 75rpx;
+  margin: 0 36rpx;
   margin-top: 22rpx;
+  display: inline-block;
 }
 .sort-text {
   font-size: 24rpx;