uniapp,微信小程序,右上角图标根据胶囊对齐-导航栏-图标-胶囊-对齐

自定义导航栏，此处我是有一个扫码图标和事件，请在导航栏下面的div加上paddingTop，防止导航栏叠加在页面上

<template>
	<page-meta>
		<navigation-bar title=" " left-arrow="false" background-color="#2f81f3">
			<view class="custom-title"
				:style="{ height: `${navBarInfo.navBarHeight}px`, paddingTop: `${navBarInfo.statusBarHeight}px` }">
				<text>HI, {{myData.UserInfo.name}}</text>
				<view class="icon">
					<u-icon @click="scanCode()" name="scan" size="40"></u-icon>
				</view>
			</view>
		</navigation-bar>
	</page-meta>
	<view class="container" :style="{ paddingTop: `${navBarInfo.navBarHeight}px` }">...

            	// 定义响应式数据来保存导航栏相关信息
	const navBarInfo = reactive({
		statusBarHeight: 0,
		navBarHeight: 0,
		capsuleWidth: 0,
		capsuleHeight: 0,
		capsuleTop: 0
	});
	onMounted(() => {
		// 获取系统信息和胶囊按钮位置信息
		const systemInfo = uni.getSystemInfoSync();
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

		// 设置状态栏高度和导航栏高度
		navBarInfo.statusBarHeight = systemInfo.statusBarHeight;
		navBarInfo.navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;

		// 设置胶囊按钮的宽度、高度和顶部位置
		navBarInfo.capsuleWidth = menuButtonInfo.width;
		navBarInfo.capsuleHeight = menuButtonInfo.height;
		navBarInfo.capsuleTop = menuButtonInfo.top;

	});

page.json隐藏导航栏

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"titleNView": false, // 设置默认导航栏隐藏
				"navigationStyle": "custom"
			}
		},

css

 .custom-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 94rpx 30rpx 28rpx;
		padding-left: 30rpx;
		// padding-bottom: 28rpx;
		// margin-bottom: 28rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: $global-font-size-34;
		color: #FFFFFF;
		background-color: #2274EE;
		// line-height: 48rpx;
		text-align: left;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		box-sizing: border-box;

		.icon {
			padding-right: 32%;
		}
	}