修复搜索框隐藏时商品列表未完全往上拉和商品信息被隔断的问题

pages/index/index.wxss

@@ -26,7 +26,7 @@ page {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+  background: transparent; /* 透明背景，与页面背景保持一致 */
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transform: translateY(0);
   will-change: transform; /* iOS性能优化 */
@@ -84,30 +84,36 @@ page {
 
 /* 商品列表添加顶部内边距 */
 .goods-list {
-  padding-top: 240rpx; /* 与搜索区域高度匹配 */
+  padding-top: 260rpx; /* 增加内边距，确保商品不被筛选区域遮挡 */
   transition: padding-top 0.3s ease;
+  min-height: calc(100vh - 260rpx); /* 最小高度，确保占满屏幕 */
 }
 
 /* 当搜索框隐藏时调整内边距 */
 .top-section-container.top-hidden ~ .goods-list {
-  padding-top: 100rpx; /* 减少内边距 */
+  padding-top: 0; /* 完全移除内边距，让商品列表紧贴筛选区域 */
+  min-height: calc(100vh - 0rpx); /* 调整最小高度 */
 }
 
 /* 品种筛选区域调整 */
 .category-section {
   position: fixed;
-  top: 200rpx; /* 根据搜索区域高度调整 */
+  top: 180rpx; /* 根据搜索区域高度调整 */
   left: 0;
   right: 0;
   z-index: 999;
   background: white;
   transition: top 0.3s ease;
-  padding: 20rpx 0;
+  padding: 16rpx 0;
   border-bottom: 2rpx solid #f0f0f0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影，与搜索框风格一致 */
+  height: 80rpx; /* 固定高度，避免内容变化导致跳动 */
+  box-sizing: border-box;
 }
 
 .top-section-container.top-hidden ~ .category-section {
-  top: 60rpx; /* 搜索区域隐藏后上移 */
+  top: 0; /* 搜索区域隐藏后直接固定在顶部 */
+  position: fixed; /* 保持固定定位，确保始终在顶部 */
 }
 
 /* iOS专用修复 */
@@ -130,13 +136,16 @@ page {
 
 /* 确保滚动视图有正确的容器高度 */
 .goods-section {
-  height: 100vh;
+  height: auto;
+  min-height: calc(100vh - 60rpx); /* 最小高度，确保占满屏幕 */
   position: relative;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); /* 与页面背景保持一致 */
 }
 
 .goods-list {
-  height: 100%;
+  height: auto; /* 自动高度，适应内容 */
   box-sizing: border-box;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); /* 与页面背景保持一致 */
 }
 
 /* 标题样式 */
@@ -1145,20 +1154,12 @@ wx-button:not([size=mini]) {
   }
 }
 
-/* 商品区域样式 */
+
-.goods-section {
-  background-color: #f8f8f8;
-  padding: 16rpx;
-  margin: 0;
-  flex: 7;
-  overflow-y: auto;
-  width: 100%;
-  box-sizing: border-box;
-}
 
 .goods-list-container {
-  padding: 0;
+  padding: 0 20rpx;
   padding-bottom: 20rpx;
+  min-height: calc(100% - 40rpx);
 }
 
 /* 瀑布流容器 */
@@ -1205,6 +1206,9 @@ wx-button:not([size=mini]) {
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  /* 移除固定最小高度，让卡片高度根据内容自动调整 */
 }
 
 .product-card:active {
@@ -1257,6 +1261,9 @@ wx-button:not([size=mini]) {
 /* 商品信息区域 */
 .product-info {
   padding: 16rpx;
+  flex: 1; /* 自动拉伸，占据剩余空间 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 商品标题 */