优化首页布局：搜索框和品种选择区域下移，修复重叠问题，调整为文档流布局

pages/index/index.wxml

@@ -1,44 +1,6 @@
 <view class="container">
   <!-- 顶部搜索区域容器 - 始终固定显示 -->
-  <view class="top-section-container {{headerElementsHidden ? 'hidden-elements' : 'show-elements'}}">
+  <view class="top-section-container">
-    
-    <!-- 广告走马灯轮播图 -->
-    <view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
-      <swiper 
-        class="ad-swiper" 
-        indicator-dots="{{true}}" 
-        autoplay="{{true}}" 
-        interval="3000" 
-        duration="500"
-        circular="{{true}}"
-        indicator-color="rgba(255, 255, 255, 0.5)"
-        indicator-active-color="#ffffff"
-      >
-        <swiper-item wx:for="{{adCarouselList}}" wx:key="index">
-          <image 
-            class="ad-image" 
-            src="{{item.imageUrl}}" 
-            mode="aspectFill"
-            bindtap="onAdClick"
-            data-ad="{{item}}"
-            data-index="{{index}}"
-          />
-        </swiper-item>
-      </swiper>
-    </view>
-    
-    <!-- 功能按钮区域 -->
-    <view class="function-buttons" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
-      <view class="function-btn" bindtap="navigateToSettlement">
-        <text class="function-btn-text">入驻</text>
-      </view>
-      <view class="function-btn" bindtap="navigateToCooperation">
-        <text class="function-btn-text">招商</text>
-      </view>
-      <view class="function-btn" bindtap="navigateToGoods">
-        <text class="function-btn-text">管理</text>
-      </view>
-    </view>
     
     <!-- 搜索区域 -->
     <view class="search-section">
@@ -54,7 +16,7 @@
             bindinput="onSearchInput"
           />
         </view>
-                <view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
+        <view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
       </view>
     </view>
     
@@ -112,162 +74,60 @@
     </view>
   </view>
   
-  <!-- 侧边栏弹出层 -->
-  <view wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
-  
-  <!-- 高级筛选弹出层 -->
-  <view wx:if="{{showAdvancedFilter}}" class="sidebar-overlay" bindtap="closeAdvancedFilter"></view>
-  
-  <!-- 回到顶部按钮 -->
-  <view 
-    class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}" 
-    bindtap="scrollToTop"
-  >
-    <text class="back-to-top-text">top</text>
-  </view>
-  
-  <!-- 高级筛选底部弹出层 -->
-  <view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">
-    <view class="sidebar-title">高级筛选</view>
-    
-    <!-- 筛选内容区域 -->
-    <view class="filter-content">
-      <!-- 左侧分类列表 -->
-      <view class="filter-left">
-        <view 
-          wx:for="{{filterCategories}}" 
-          wx:key="index"
-          class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
-          bindtap="selectFilterCategory"
-          data-category="{{item.value}}"
-        >
-          {{item.label}}
-        </view>
-      </view>
-      
-      <!-- 右侧内容区域 -->
-      <view class="filter-right">
-        <!-- 地区选择内容 -->
-        <view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-right-content">
-          <view class="filter-option all-option {{advancedFilters.region === 'all' ? 'active' : ''}}" bindtap="selectRegion" data-region="all">
-            全部
-          </view>
-          <view 
-            wx:for="{{regionOptions}}" 
-            wx:key="index"
-            class="filter-option {{advancedFilters.region === item.value ? 'active' : ''}}"
-            bindtap="selectRegion"
-            data-region="{{item.value}}"
-          >
-            {{item.label}}
-          </view>
-        </view>
-        
-        <!-- 蛋壳颜色内容 -->
-        <view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-right-content">
-          <view class="filter-option all-option {{advancedFilters.shellColor === 'all' ? 'active' : ''}}" bindtap="selectShellColor" data-color="all">
-            全部颜色
-          </view>
-          <view 
-            wx:for="{{shellColorOptions}}" 
-            wx:key="index"
-            class="filter-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
-            bindtap="selectShellColor"
-            data-color="{{item.value}}"
-          >
-            {{item.label}}
-          </view>
-        </view>
-        
-        <!-- 商品名称内容 -->
-        <view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-right-content">
-          <view class="filter-option all-option {{advancedFilters.productName === 'all' ? 'active' : ''}}" bindtap="selectProductName" data-name="all">
-            全部商品
-          </view>
-          <view 
-            wx:for="{{productNameOptions}}" 
-            wx:key="index"
-            class="filter-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
-            bindtap="selectProductName"
-            data-name="{{item.value}}"
-          >
-            {{item.label}}
-          </view>
-        </view>
-        
-        <!-- 规格内容 -->
-        <view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-right-content">
-          <view class="filter-option all-option {{advancedFilters.specification === 'all' ? 'active' : ''}}" bindtap="selectSpecification" data-spec="all">
-            全部规格
-          </view>
-          <view 
-            wx:for="{{specificationOptions}}" 
-            wx:key="index"
-            class="filter-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
-            bindtap="selectSpecification"
-            data-spec="{{item.value}}"
-          >
-            {{item.label}}
-          </view>
-        </view>
-        
-        <!-- 蛋黄类型内容 -->
-        <view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-right-content">
-          <view class="filter-option all-option {{advancedFilters.yolkType === 'all' ? 'active' : ''}}" bindtap="selectYolkType" data-yolk="all">
-            全部蛋黄
-          </view>
-          <view 
-            wx:for="{{yolkTypeOptions}}" 
-            wx:key="index"
-            class="filter-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
-            bindtap="selectYolkType"
-            data-yolk="{{item.value}}"
-          >
-            {{item.label}}
-          </view>
-        </view>
-      </view>
-    </view>
-    
-    <!-- 操作按钮 -->
-    <view class="filter-actions">
-      <view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>
-      <view class="filter-action-btn apply" bindtap="applyAdvancedFilter">应用</view>
-    </view>
-  </view>
-  
-  <!-- 骨架屏加载 - 只在初始加载时显示，筛选时不显示 -->
-  <view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
-    <view class="skeleton-grid">
-      <view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
-        <view class="skeleton-image"></view>
-        <view class="skeleton-title"></view>
-        <view class="skeleton-title short"></view>
-        <view class="skeleton-footer">
-          <view class="skeleton-price"></view>
-        </view>
-      </view>
-    </view>
-  </view>
-  
   <!-- 商品列表区域 -->
-  <view class="goods-section {{headerElementsHidden ? 'with-hidden-header' : ''}}">
+  <view class="goods-section">
     <scroll-view 
       class="goods-list" 
       id="goodsScrollView"
       bindscrolltolower="onReachBottom" 
       bindscroll="onScroll"
       scroll-y="true"
-      scroll-top="{{scrollTop}}"
       refresher-enabled="{{true}}"
       refresher-triggered="{{isRefreshing}}"
       refresher-default-style="black"
       refresher-background="transparent"
       bindrefresherrefresh="onPullDownRefresh"
       bindrefresherrestore="onRestore"
-      style="padding-top: {{headerElementsHidden ? '175rpx' : '580rpx'}}; transition: padding-top 0.3s ease;"
     >
       <view class="goods-list-container">
+        <!-- 功能按钮区域 -->
+        <view class="function-buttons">
+          <view class="function-btn" bindtap="navigateToSettlement">
+            <text class="function-btn-text">入驻</text>
+          </view>
+          <view class="function-btn" bindtap="navigateToCooperation">
+            <text class="function-btn-text">招商</text>
+          </view>
+          <view class="function-btn" bindtap="navigateToGoods">
+            <text class="function-btn-text">管理</text>
+          </view>
+        </view>
+        
+        <!-- 广告走马灯轮播图 -->
+        <view class="ad-carousel">
+          <swiper 
+            class="ad-swiper" 
+            indicator-dots="{{true}}" 
+            autoplay="{{true}}" 
+            interval="3000" 
+            duration="500"
+            circular="{{true}}"
+            indicator-color="rgba(255, 255, 255, 0.5)"
+            indicator-active-color="#ffffff"
+          >
+            <swiper-item wx:for="{{adCarouselList}}" wx:key="index">
+              <image 
+                class="ad-image" 
+                src="{{item.imageUrl}}" 
+                mode="aspectFill"
+                bindtap="onAdClick"
+                data-ad="{{item}}"
+                data-index="{{index}}"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+        
         <!-- 网格布局 -->
         <view class="grid-container">
           <view 
@@ -279,8 +139,6 @@
             wx:if="{{!item.isAd}}"
           >
             <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
-              <!-- 售空商品半透明覆盖层 -->
-              <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay"></view>
               <view class="product-image-wrapper">
                 <!-- 视频处理：根据mediaItems中的类型字段判断 -->
                 <video 
@@ -312,7 +170,9 @@
               </view>
               <view class="product-info">
                 <view class="product-first-row">
-                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
+                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">
+                    {{item.sourceType || ''}}
+                  </view>
                   <text class="product-title {{item.isViewed ? 'viewed' : ''}}">{{item.name}}</text>
                   <text class="product-description {{item.isViewed ? 'viewed' : ''}}">{{item.description || ''}}</text>
                 </view>
@@ -349,92 +209,4 @@
       </view>
     </scroll-view>
   </view>
-  
+</view>
-  <!-- 登录弹窗 -->
-  <view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
-    <view class="auth-modal-container">
-      <view class="auth-modal-title">授权登录</view>
-      <view class="auth-modal-content">授权您的手机号后才能查看商品详情</view>
-      <view class="auth-modal-buttons">
-        <button 
-          class="auth-primary-button" 
-          open-type="getPhoneNumber" 
-          bindgetphonenumber="onPhoneNumberResult"
-        >
-          授权手机号
-        </button>
-        <button 
-          class="auth-cancel-button" 
-          bindtap="closeOneKeyLoginModal"
-        >
-          取消
-        </button>
-      </view>
-    </view>
-  </view>
-  
-  
-  <!-- 用户信息填写弹窗 -->
-  <view wx:if="{{showUserInfoForm}}" class="modal-overlay">
-    <view class="modal-container">
-      <view class="modal-title">
-        <text>完善个人信息</text>
-      </view>
-      
-      <!-- 头像选择 -->
-      <view class="avatar-section">
-        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
-          <image class="avatar" src="{{avatarUrl}}"></image>
-        </button>
-      </view>
-      
-      <!-- 昵称输入 -->
-      <form bindsubmit="getUserName">
-        <view class="form-group">
-          <view class="form-label">昵称</view>
-          <input placeholder="请输入昵称" type="nickname" name="name" maxlength="32" class="form-input"></input>
-        </view>
-        
-        <!-- 提交按钮 -->
-        <view class="form-actions">
-          <button form-type="submit" class="confirm-button">确定</button>
-        </view>
-      </form>
-      
-      <!-- 取消按钮 -->
-      <view class="modal-buttons">
-        <button class="cancel-button" bindtap="cancelUserInfoForm">取消</button>
-      </view>
-    </view>
-  </view>
-  
-  <!-- 图片预览弹窗 -->
-  <view wx:if="{{showImagePreview}}" class="image-preview-mask" catchtouchmove="true" bindtap="closeImagePreview">
-    <swiper 
-      class="image-preview-swiper" 
-      current="{{previewImageIndex}}" 
-      bindchange="onPreviewImageChange"
-      indicator-dots="true"
-      indicator-color="rgba(255, 255, 255, 0.5)"
-      indicator-active-color="#fff"
-      autoplay="false"
-      duration="300"
-    >
-      <block wx:for="{{previewImageUrls}}" wx:key="*this">
-        <swiper-item>
-          <image 
-            class="preview-image" 
-            src="{{item}}" 
-            mode="aspectFit"
-            bindtap="closeImagePreview"
-          ></image>
-        </swiper-item>
-      </block>
-    </swiper>
-    
-    <!-- 关闭按钮 -->
-    <view class="image-preview-close" bindtap="closeImagePreview">
-      <text class="close-icon">✕</text>
-    </view>
-  </view>
-</view>

pages/index/index.wxss

@@ -53,36 +53,18 @@ page {
 
 /* 为整个容器添加修复 */
 .top-section-container {
-  position: fixed;
+  background: #ffffff;
-  top: 0;
+  backdrop-filter: blur(10rpx);
-  left: 0;
+  -webkit-backdrop-filter: blur(10rpx);
-  right: 0;
+  padding: 20rpx 0 30rpx;
-  z-index: 1002;
+  margin-top: 140rpx;
-  background: transparent;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-  backdrop-filter: none;
+  border-bottom: 1rpx solid #e0e0e0;
-  -webkit-backdrop-filter: none;
-  padding: 0 0 10rpx;
-  height: auto;
-  min-height: auto;
-  box-shadow: none;
-  border-bottom: none;
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow: visible;
+  box-sizing: border-box;
-  transition: all 0.3s ease;
+  overflow: hidden;
-}
-
-/* 隐藏广告和功能按钮时的容器样式 */
-.top-section-container.hidden-elements {
-  height: 175rpx;
-  min-height: 175rpx;
-}
-
-/* 显示广告和功能按钮时的容器样式 */
-.top-section-container.show-elements {
-  height: auto;
-  min-height: 580rpx;
 }
 
 /* 广告轮播图样式 */
@@ -171,13 +153,6 @@ page {
   box-shadow: none;
   background: transparent;
   z-index: 1;
-  margin-top: 580rpx;
-  transition: all 0.3s ease;
-}
-
-/* 隐藏广告时商品区域上移 */
-.goods-section.with-hidden-header {
-  margin-top: 175rpx;
 }
 
 /* 标题样式调整 */
@@ -213,10 +188,10 @@ page {
 /* 修复商品列表区域 */
 .goods-list {
   flex: 1;
-  padding-top: 580rpx;
+  padding-top: 0;
   padding-bottom: 20rpx;
   height: auto;
-  min-height: calc(100vh - 600rpx); /* 确保有足够的最小高度 */
+  min-height: calc(100vh - 400rpx); /* 调整最小高度 */
   box-sizing: border-box;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;