小程序自定义导航栏设置背景图片并在正确位置显示标题

问题：
自定义导航栏设置背景显示图片可以，但要正确显示标题文字的位置

方案：
获取不同设备对应的状态栏高度，进行计算即可正确显示到对应的位置

代码：

节点代码：

<view class="headBg">
	<image src="/static/makeMoney/makeMoneyHead.png" class="makeMoneyBgImg" mode="scaleToFill"></image>
	<view class="title_block" :style="'height:'+titleHeight+'px'">
		<view :style="'height:'+statusBarHeight+'px'"></view>
		<view class="title" :style="'height:'+naviBarHeight+'px'">赚钱</view>
		<view class="signInBlock">
			<view class="signInLeft">
				<view class="signInLeftTxtOne">
					每日签到可获得10积分
				</view>
				<view class="signInLeftTxtTwo">
					本月已连续签到0天
				</view>
			</view>
			<view class="signInRight">
				<view class="signInBtn">
					签到规则
				</view>
			</view>
		</view>
	</view>
</view>

样式代码：

.headBg {
  width: 100%;
  height: 200px;
  position: relative;
}

.makeMoneyBgImg {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.title_block {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 3px;
}

.title {
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}

.signInBlock {
  display: flex;
  height: 60px;
}

.signInLeft {
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.signInLeftTxtOne {
  flex: 1;
  color: #ffffff;
  font-size: 36rpx;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.signInLeftTxtTwo {
  flex: 1;
  color: #ffffff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
}

.signInRight {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.signInBtn {
  padding: 6px 16px;
  background-color: #ffedc8;
  font-size: 28rpx;
  color: #ee3333;
  border-radius: 4px;
}

js计算代码：

export default {
  data() {
    return {
      titleHeight: 0, //状态栏和导航栏的总高度
      statusBarHeight: 0, //状态栏高度
      naviBarHeight: 0, //导航栏高度
    }
  },
  onLoad() {
    const res = uni.getSystemInfoSync()
    const system = res.platform
    this.statusBarHeight = res.statusBarHeight
    if (system === 'android') {
      this.titleHeight = (48 + this.statusBarHeight)
    } else if (system === 'ios') {
      this.titleHeight = (44 + this.statusBarHeight)
    }
    this.naviBarHeight = this.titleHeight - this.statusBarHeight
  }
}

效果图：