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

<template>
	<view>
		<view class="fixed">
			<view class="navbar">
				<view :style="{height:statusBarHeight + 'px'}">
					<!-- 这里是状态栏 -->
				</view>
				<view class="inner">
					<view class="search_box">
						<view class="search_icon"></view>
						<view class="search_text">搜索</view>
					</view>
					<view class="right_icon" @click="scan_code()"></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
			
		},
		onLoad() {
			
		},
		methods:{
			scan_code(){
				// 允许从相机和相册扫码
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.fixed{
		position: fixed;
		top: 0;
		left: 0;
		
		background-image: url(../../static/top_1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 999;
	}
	.navbar{
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-left: 28rpx;
		padding-right: 28rpx;
		padding-bottom: 10rpx;
		.inner{
			display: flex;
			.search_box{
				width: 617rpx;
				height: 66rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 34rpx;
				display: flex;
				.search_icon{
					margin-top: 17rpx;
					margin-left: 38rpx;
					width: 34rpx;
					height: 34rpx;
					background-image: url(icon/search.png);
					background-size: cover;
					background-repeat: no-repeat;
				}
				.search_text{
					margin-left: 14rpx;
					line-height: 66rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				
			}
			
			.right_icon{
				margin-left: 30rpx;
				width: 50rpx;
				height: 73rpx;
				background-image: url(icon/saoma.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
		}
	}
</style>