jpcj-xcx/components/topbar/topbar.vue

<template>
	<view class="tabbar">
		<view :style="{ 'margin-top': tophight.top + 'px', 'margin-bottom': '15rpx' }">
			<view class="slot-box" :style="{'padding-left': `calc(100vw - ${tophight.right}px)`,'padding-right': `calc(100vw - ${tophight.left}px)`,height: tophight.height + 'px'}">
				<slot></slot>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data: () => ({
			tophight: uni.getMenuButtonBoundingClientRect(),
		}),
		mounted() {
			console.log(uni.getMenuButtonBoundingClientRect())
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		display: flex;
		background-color: #FFFFFF;
		.slot-box{
			display: flex;
			align-items: center;
		}
	}
</style>