v2

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()
-      this.statusBarHeight = sysInfo.statusBarHeight || 20
+      var sysInfo = uni.getSystemInfoSync()
+      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;