20260123new

pages/mall/consumer/category.uvue

@@ -593,7 +593,7 @@ const addToCart = (product: any) => {
 }
 
 // 导航函数
-const navigateToSearch = () => uni.navigateTo({ url: '/pages/medicine/search' })
+const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
 const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
 const navigateToProduct = (product: any) => {
     uni.navigateTo({
@@ -692,6 +692,7 @@ const navigateToProduct = (product: any) => {
 /* 分类内容区 */
 .category-content {
     display: flex;
+    flex-direction: row; /* 强制水平排列 */
     margin-top: 60px;
     padding: 0 16px;
     max-width: 1400px;
@@ -699,31 +700,38 @@ const navigateToProduct = (product: any) => {
     margin-right: auto;
     width: 100%;
     gap: 20px;
+    height: calc(100vh - 60px); /* 设置固定高度，减去头部高度 */
+    overflow: hidden; /* 防止整体滚动 */
 }
 
 /* 左侧一级分类 */
 .primary-category {
     width: 120px;
+    height: 100%; /* 占满父容器高度 */
     background: white;
     border-radius: 12px;
     padding: 12px 0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     flex-shrink: 0;
+    overflow-y: auto; /* 允许内部滚动 */
 }
 
 .primary-item {
     display: flex;
+    flex-direction: column; /* 图标和文字垂直排列 */
     align-items: center;
-    padding: 12px 16px;
+    justify-content: center;
+    padding: 12px 8px;
     margin: 4px 8px;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
     color: #666;
+    text-align: center;
 }
 
 .primary-item:hover {
-    transform: translateX(2px);
+    transform: translateY(-2px); /* 悬停时向上浮动 */
 }
 
 .primary-item.active {
@@ -732,26 +740,34 @@ const navigateToProduct = (product: any) => {
 }
 
 .primary-icon {
-    font-size: 18px;
-    margin-right: 8px;
-    min-width: 24px;
+    font-size: 24px;
+    margin-bottom: 6px;
+    margin-right: 0; /* 移除右边距 */
     text-align: center;
+    display: block;
 }
 
 .primary-name {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1.4;
+    display: block;
 }
 
 /* 右侧内容区 */
 .product-content {
     flex: 1;
-    padding: 16px 0;
+    height: 100%; /* 占满父容器高度 */
+    padding: 0; /* 移除内边距，交给内部元素 */
+    overflow-y: auto; /* 允许内部滚动 */
 }
 
 .category-header {
-    margin-bottom: 20px;
-    padding: 0 8px;
+    margin-bottom: 16px;
+    padding: 16px 8px 0 8px;
+    position: sticky;
+    top: 0;
+    background-color: #f8fafc;
+    z-index: 10;
 }
 
 .category-title {
@@ -949,37 +965,40 @@ const navigateToProduct = (product: any) => {
 /* 小屏手机 (小于414px) */
 @media screen and (max-width: 414px) {
     .category-content {
-        flex-direction: column;
-        padding: 0 12px;
+        /* flex-direction: column; 移除这一行，保持 row 布局 */
+        padding: 0 8px;
+        gap: 10px;
     }
     
     .primary-category {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 8px;
+        width: 80px; /* 减小宽度 */
+        /* display: flex; 移除flex布局，保持默认 */
+        /* flex-wrap: wrap; 移除换行 */
+        padding: 8px 0;
     }
     
     .primary-item {
-        width: calc(25% - 8px);
+        /* width: calc(25% - 8px); 移除百分比宽度 */
+        width: auto; /* 恢复自动宽度 */
         margin: 4px;
-        padding: 10px 8px;
-        text-align: center;
+        padding: 8px 4px;
+        /* text-align: center; 已经在通用样式中设置 */
     }
     
     .primary-icon {
         margin-right: 0;
         margin-bottom: 4px;
-        font-size: 16px;
+        font-size: 20px;
     }
     
     .primary-name {
-        font-size: 12px;
+        font-size: 11px;
     }
     
     .product-grid {
         grid-template-columns: 1fr;
-        gap: 16px;
+        gap: 12px;
+        padding: 0 4px 20px 4px; /* 增加底部内边距 */
     }
     
     .search-container {
@@ -992,7 +1011,7 @@ const navigateToProduct = (product: any) => {
     }
     
     .category-header {
-        padding: 0;
+        padding: 12px 4px 0 4px;
     }
 }