menduner-uniapp/components/Navbar/index.vue

<template>
  <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 {
  width: 100%;
  position: relative;
  background: linear-gradient(90deg, #66BB6A 0, #64FFDA 100%);
  &-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
  }
  // &-title {
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-30%, 0);
  //   color: #fff;
  // }
}
</style>