fix:兼容所有大小页面

wisdom-app/src/app/tab3/tab3.page.html

@@ -16,23 +16,30 @@
   (ionInput)="searchProducts($event)">
 </ion-searchbar>
 
-  <!-- 分类区域（可横向滑动） -->
-  <div class="category-scroll">
-    <div class="category-scroll-inner">
-      <ion-grid>
-        <ion-row class="category-row">
-          <ion-col size="3" *ngFor="let category of categories" class="category-col">
-            <div class="category-item" (click)="onCategoryClick(category)">
-              <div class="category-image-wrapper">
-                <img [src]="category.image" alt="{{category.name}}" class="category-image">
-              </div>
-              <div class="category-text">{{ category.name }}</div>
+ <!-- 分类区域（可横向滑动） -->
+<div class="category-scroll">
+  <div class="category-scroll-inner">
+    <ion-grid>
+      <ion-row class="category-row">
+        <ion-col 
+          size="3" 
+          size-sm="3" 
+          size-md="3" 
+          size-lg="3" 
+          size-xl="3" 
+          *ngFor="let category of categories" 
+          class="category-col">
+          <div class="category-item" (click)="onCategoryClick(category)">
+            <div class="category-image-wrapper">
+              <img [src]="category.image" alt="{{category.name}}" class="category-image">
             </div>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </div>
+            <div class="category-text">{{ category.name }}</div>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </div>
+</div>
 
 <!-- 热销模块 -->
 <div class="marketing-section">

wisdom-app/src/app/tab3/tab3.page.scss

@@ -1,10 +1,10 @@
-// 整体背景渐变，可以根据需要调整或移除
+/* 整体背景渐变，可以根据需要调整或移除 */
 .content-background {
   background: linear-gradient(to bottom, #e0f7fa, #ffffff);
   --padding-bottom: 0;
 }
 
-// 标题栏相关样式
+/* 标题栏相关样式 */
 .custom-toolbar {
   --background: transparent;
   display: flex;
@@ -23,7 +23,7 @@
   font-family: "微软雅黑", sans-serif;
 }
 
-// 搜索栏区域样式
+/* 搜索栏区域样式 */
 .search-container {
   padding: 0 16px;
   margin-top: 8px;
@@ -35,7 +35,16 @@
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
-// 分类区域（可横向滚动）
+/* 分类区域（可横向滚动） */
+.category-scroll {
+  overflow-x: auto; /* 如果需要横向滚动 */
+  width: 100%;
+}
+
+.category-scroll-inner {
+  width: 100%;
+}
+
 .category-row {
   margin: 0;
 }
@@ -46,6 +55,8 @@
   align-items: center;
   text-align: center;
   margin-bottom: 16px; 
+  max-width: 25%; /* 确保每个列最大宽度为25%，即四个一行 */
+  flex: 0 0 25%; /* 防止列自动扩展 */
 }
 
 .category-item {
@@ -55,11 +66,17 @@
   justify-content: center;
   text-align: center;
   cursor: pointer; /* 可选：让鼠标移上去有点击手势 */
+  width: 100%; /* 占满整个列 */
+}
+
+.category-image-wrapper {
+  width: 80px; /* 设定一个固定的宽度和高度 */
+  height: 80px;
 }
 
 .category-image {
-  max-width: 90%;
-  max-height: 90%;
+  width: 100%;
+  height: 100%;
   object-fit: contain; 
 }
 
@@ -72,7 +89,7 @@
   max-width: 100%;
 }
 
-// 商品列表区域样式
+/* 商品列表区域样式 */
 .product-container {
   padding: 0 16px;
   margin-top: 16px;
@@ -116,7 +133,7 @@
 .product-image {
   width: 100%;
   height: 100%;
-  // object-fit: cover;
+  /* object-fit: cover; */
 }
 
 .product-info {
@@ -141,7 +158,7 @@
   font-weight: bold;
 }
 
-// 底部弹窗(modal)样式
+/* 底部弹窗(modal)样式 */
 .bottom-modal {
   --height: 75vh;
   --width: 100%;