头部胶囊input框与胶囊对其

<template>
	<view class="box">
		<input :style="{ width: withs, top:tops,height: hights}" type="text" value="" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				tops: '',
				withs: '',
				hights: ''
			}
		},


		methods: {},
		onLoad() {
			const res = uni.getMenuButtonBoundingClientRect()
			this.hights = res.height + 'px'
			this.withs = res.left * 0.6 + 'px'
			this.tops = res.top + 'px'
			console.log(this.tops, `kkk`)
		},
	}
</script>

<style lang="scss">
	.box {

		position: relative;

		input {
			border-radius: 20px;
			border: 1px solid black;
			position: absolute;
		}
	}
</style>