自定义导航栏调整

components/Navbar/index.vue

@@ -1,39 +1,49 @@
 <template>
-  <view class="navbar-box">
-    <image src="https://minio.citupro.com/dev/menduner/poster.png" class="navbar-box-logo"></image>
-    <view class="navbar-box-title">{{ title }}</view>
+  <view class="navbar-box" :style="{'height': navbarHeight + 'px', 'paddingTop': statusBarHeight + 'px'}">
+    <image src="https://minio.citupro.com/dev/menduner/poster.png" class="navbar-box-logo" :style="{'height': (navbarHeight - 10) + 'px'}"></image>
+    <!-- <view class="navbar-box-title">{{ title }}</view> -->
   </view>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
 defineProps({
   title: {
     type: String,
     default: '门墩儿'
   }
 })
+
+const navbarHeight = ref(0)
+const statusBarHeight = ref(0)
+onLoad(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight
+  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+  navbarHeight.value = menuButtonInfo.height + ((menuButtonInfo.top - statusBarHeight.value) * 2) + 10
+
+})
 </script>
 
 <style scoped lang="scss">
 .navbar-box {
-  height: 80px;
   width: 100%;
   position: relative;
   background: linear-gradient(90deg, #66BB6A 0, #64FFDA 100%);
   &-logo {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100px;
-    height: 42px;
-    margin-left: 10px;
-  }
-  &-title {
-    position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-30%, 0);
-    color: #fff;
+    transform: translateX(-50%);
+    width: 100px;
   }
+  // &-title {
+  //   position: absolute;
+  //   top: 50%;
+  //   left: 50%;
+  //   transform: translate(-30%, 0);
+  //   color: #fff;
+  // }
 }
 </style>