uni-zhks-app/components/p-i-o-navbar/p-i-o-navbar.vue

<template>
	<view>
		<view class="content">
			<view :style="{height:statusBarHeight + 'px'}">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navbar">
		
				<view class="left" @click="click_left()">
					<uni-icons type="arrowleft" color="#fff" size="18"></uni-icons>
				</view>
				<view class="right">
					<view class="input_box">
						<view class="input_icon"></view>
						<view class="input_text">搜索井下人员</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view :style="{height: statusBarHeight + 'px'}"></view>
		<view style="height: 93rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				
			};
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			click_left() {
				uni.navigateBack();
			}
		}

	}
</script>

<style lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
			
		background-color: #009FE8;
		z-index: 999;
	}

	.navbar {
		width: 750rpx;
		box-sizing: border-box;
		padding-left: 31rpx;
		padding-right: 26rpx;
		padding-top: 14rpx;
		padding-bottom: 14rpx;
		display: flex;
		justify-content: space-between;

		.left {
			width: 42rpx;
			line-height: 65rpx;
		}

		.right {
			width: 620rpx;
			height: 65rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 33rpx;

			.input_box {
				display: flex;

				.input_icon {
					margin-left: 43rpx;
					margin-top: 16rpx;
					width: 34rpx;
					height: 34rpx;

					background-image: url(icon/search.png);
					background-size: cover;
					background-repeat: no-repeat;
				}

				.input_text {
					margin-left: 19rpx;

					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 65rpx;

				}
			}
		}
	}
</style>