frontend-uniapp/src/components/TitleBar.vue

<script setup lang="ts">
import back from '@/static/image/nav-bar/chevron-left.png'

const props = defineProps<{
  titleName: string
}>()
// 获取胶囊高度
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
function handleBack() {
  uni.navigateBack()
}
</script>

<template>
  <view class="w-full flex items-center bg-white justify-center relative" :style="{ marginTop: `${menuButtonInfo.top}px`, height: `${menuButtonInfo.height}px` }">
    <image :src="back" class="absolute  left-3 w-6 h-6" @tap="handleBack" />
    <text class="text-[18px]">
      {{ props.titleName }}
    </text>
  </view>
</template>

<style scoped>

</style>