v2

manifest.json

@@ -71,6 +71,7 @@
         "devServer" : {
             "https" : true,
             "host" : "192.168.124.19"
+        },
         // 暂时关闭开发代理（直接连后端时注释掉）
         // "proxy" : {
         //     "/public" : {
@@ -88,10 +89,9 @@
         //         }
         //     }
         // }
-        },
         "router" : {
             "mode" : "history",
-            "base" : "/h5/"
+            "base" : "/v2/h5/"
         },
         "title" : "印美达POD供应链",
         "optimization" : {

pages/products/components/FilterDrawer.vue

@@ -6,7 +6,7 @@
       :class="{ show: visible }"
       @tap="onClose"
     ></view>
-    <view class="filter-drawer" :class="{ show: visible }">
+    <view class="filter-drawer" :class="{ show: visible }" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="filter-drawer-header">
         <text class="filter-drawer-title">筛选条件</text>
         <text class="filter-drawer-close" @tap="onClose">✕</text>
@@ -77,7 +77,19 @@ export default {
       minPrice: '',
       maxPrice: '',
       minError: false,
-      maxError: false
+      maxError: false,
+      statusBarHeight: 20
+    }
+  },
+  created() {
+    // 状态栏高度：抽屉 fixed top:0，需避开系统状态栏/导航栏区域（与 SearchBar 一致）
+    try {
+      var sysInfo = uni.getSystemInfoSync()
+      var h = sysInfo.statusBarHeight
+      // 获取失败/异常值时用 20px 保底
+      this.statusBarHeight = typeof h === 'number' && h > 0 ? h : 20
+    } catch (e) {
+      this.statusBarHeight = 20
     }
   },
   methods: {

pages/products/components/SearchBar.vue

@@ -1,6 +1,8 @@
 <template>
   <!-- 搜索栏 -->
-  <view class="search-bar" id="searchBar" :style="{ paddingTop: statusBarHeight + 'px' }">
+  <view class="search-bar" id="searchBar">
+    <!-- 状态栏占位盒子：避开系统导航栏，不影响下方 CSS padding -->
+    <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
     <view class="search-input-wrap">
       <image class="search-icon" src="/static/icons/products/icon_search.png" mode="aspectFit" />
       <input
@@ -33,8 +35,10 @@ export default {
   },
   created() {
     try {
-      const sysInfo = uni.getSystemInfoSync()
+      var sysInfo = uni.getSystemInfoSync()
-      this.statusBarHeight = sysInfo.statusBarHeight || 20
+      var h = sysInfo.statusBarHeight
+      // 获取失败/异常值时用 20px 保底
+      this.statusBarHeight = typeof h === 'number' && h > 0 ? h : 20
     } catch (e) {
       this.statusBarHeight = 20
     }
@@ -71,21 +75,32 @@ export default {
 </script>
 
 <style scoped>
-/* 设计稿：左右留白 10px(20rpx)，上下留白 6px(12rpx)，搜索框 209x32px(402x62rpx) */
+/* 设计稿：左右留白 10px(20rpx)，下留白 6px(12rpx)，搜索框 209x32px(402x62rpx)；上边距 56rpx 让搜索栏整体下移 */
 .search-bar {
-  padding: 12rpx 20rpx;
+  padding: 10rpx 20rpx 12rpx;
   background: #ffffff;
   box-sizing: border-box;
 }
+/* 状态栏占位：高度由 JS 内联指定（statusBarHeight） */
+.status-bar-placeholder {
+  width: 100%;
+}
 .search-input-wrap {
   display: flex;
   align-items: center;
-  width: 402rpx;
   height: 62rpx;
   padding: 0 4rpx 0 21rpx;
   background: #f5f5f5;
   border-radius: 31rpx;
   box-sizing: border-box;
+  /* 小程序端：只占左侧大部分宽度（设计稿 402rpx） */
+  /* #ifdef MP */
+  width: 402rpx;
+  /* #endif */
+  /* 非小程序（H5/App）：占整行 */
+  /* #ifndef MP */
+  width: 100%;
+  /* #endif */
 }
 .search-icon {
   width: 31rpx;