From 7863c1ba5732ea9c8839eb577caa3757c2fb46fc Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Thu, 17 Oct 2024 16:34:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/components/nav-bar/index.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/index/components/nav-bar/index.vue b/src/pages/index/components/nav-bar/index.vue
index e78b223..7f05326 100644
--- a/src/pages/index/components/nav-bar/index.vue
+++ b/src/pages/index/components/nav-bar/index.vue
@@ -7,11 +7,18 @@ const ctx = reactive({
   capsuleWidth: 0,
   search: {
     keyword: ""
+  },
+  safeAreaInsets: {
+    top: 0
   }
 })
 
 let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
 let system = uni.getSystemInfoSync(); // 获取设备信息
+let {safeAreaInsets} = system
+console.log(system, safeAreaInsets)
+ctx.safeAreaInsets = safeAreaInsets
+
 ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
 ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离
 ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
@@ -28,15 +35,8 @@ function searchKeyword() {
 </script>
 
 <template>
-  <view class="navbar" :style="{ minHeight: ctx.navHeight + 'px' }" style="background: #1296db">
-    <view
-      class="topInfo"
-      :style="{
-      paddingTop: ctx.statusBarHeight + 'px',
-      paddingRight: ctx.capsuleWidth + 'px',
-    }">
-      <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
-    </view>
+  <view :style="{paddingTop: ctx.safeAreaInsets.top + 'px', paddingRight: ctx.capsuleWidth + 'px'}" style="background: #1296db">
+    <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
   </view>
 </template>