uniProject/components/custom-navbar/custom-navbar.vue

<template>
  <view class="icon-title-navBar-box">
	  <!-- 状态栏填充（兼容刘海屏） -->
	  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
	  <view class="icon-title-box">
		  <view class="nav-bar-box" v-if="showBackBtn" @click="handleBack">
			  <view class="nav-bar-icon"  :style="{ backgroundImage: 'url(' + imgsArr.navBarJtIcon + ')' }"></view>
		  </view>
		  <!-- 标题区域 -->
		  <view class="nav-bar-title" :style="{fontSize: titleSize + 'rpx', color: titleColor}">
			{{ title }}
		  </view>
	  </view>
  </view>
</template>

<script>
import cacheManager from '@/utils/cacheManager.js';
export default {
  props: {
    title: String,
    titleSize: { type: Number, default: 32 }, // 默认字号
    titleColor: { type: String, default: '#333' },
	showBackBtn:{type:Boolean, default: false}
  },
  data() {
    return {
      statusBarHeight: 0,
	   // 初始化 imgsArr，设置默认空对象
	  imgsArr: { navBarJtIcon: '' }
    };
  },
  methods: {
	  handleBack() {
		  this.$emit('back')
	  }
  },
  mounted() {
    // 获取状态栏高度（兼容不同设备）
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
      }
    });
  },
  created() {
  	this.imgsArr.navBarJtIcon = cacheManager.get('projectImg').nav_bar_jt;
  },
};
</script>

<style>
.custom-nav {
  width: 100%;
  background-color: #FFFFFF; /* 背景色 */
  display: flex;
  flex-direction: column;
}
.status-bar {
  width: 100%;
}
.nav-content {
  height: 44px; /* 导航栏主体高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-title {
  font-weight: bold; /* 可加粗 */
}
</style>