menduner-uniapp/components/Navbar/index copy.vue

<template>
  <view
    class="navbar-box"
    :class="{'gradientBgc': !noBgColor}"
    :style="{
      'height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
      'line-height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
      'paddingTop': statusBarHeight + 'px'
    }"
  >
    <image 
      v-if="showLogo" 
      src="https://minio.menduner.com/dev/fe9890be9b1176f84f2aa282b0f6adce300b133f65eb3d7b45ae057aa5698324.png" 
      class="navbar-box-logo" 
      :style="{'height': defaultLogoHeight + 'px'}"
    ></image>
    <view v-else class="navbar-box-title MiSans-Semibold">{{ title }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

defineProps({
  title: {
    type: String,
    default: '门墩儿'
  },
  showLogo: {
    type: Boolean,
    default: false
  },
  // 是否需要渐变背景
  noBgColor: {
    type: Boolean,
    default: false
  }
})

const defaultLogoHeight = 40
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) + 15
})

defineExpose({
  height: navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value
})
</script>

<style scoped lang="scss">
.gradientBgc {
  background: linear-gradient(180deg, #9bfece, #BCFEDE);
}
.navbar-box {
  width: 100%;
  position: relative;
  &-logo {
    position: absolute;
    left: 10px;
    width: 95px;
  }
  &-title {
    position: absolute;
    left: 10px;
    width: 158px;
    height: 51px;
    font-family: MiSans, MiSans;
    font-weight: 600;
    font-size: 38rpx;
    color: #0E100F;
    font-style: normal;
    text-transform: none;
  }
}
</style>