u-navber自定义导航栏封装

效果图：

<template>
	<view>
		<u-navbar :is-back="false" :height="'208rpx'">
		<view class="navbar">
			<view class="title">
				<view class="back">
				</view>
				{{title}}
			</view>
			<view class="content">
				<view class="search">
					<image src="../../static/images/search.png" class="searchImage"></image>
					<u-input placeholder="请输入您想要的宝贝"></u-input>
					<u-button style="width: 46rpx;height: 40rpx;margin-right: 20rpx;">搜索</u-button>
				</view>
				
			</view>
		</view> </u-navbar>
		<view class="placeholder">
		</view>
			</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:'首页'
			},
		},
		data() {
			return {
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.navbar{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 208rpx;
	}
 .back{
	 background: url(../../static/images/tabbarBack.png);
	 background-size:100% 100%;
	 background-repeat: no-repeat;
	 width: 60rpx;
	 height: 60rpx;
	 position: absolute;
	 left: 20rpx;
	 top: 16rpx;
 }
 .title{
	 position: relative;
	 width: 100%;
	 height: 88rpx;
	 font-size: 36rpx;
	 font-weight: bold;
	 color: #333333;
	 text-align: center;
	 line-height: 88rpx;
 }
 .content{
	 width: 100%;
	 height: 120rpx;
	 padding: 20rpx;
	 display: flex;
	 align-items: center;
 }
 .search{
	 width: 100%;
	 height: 100%;
	 background-color: #F3F4F5;
	 display: flex;
	 align-items: center;
 }
 .searchImage{
	 width: 60rpx;height:60rpx;
	 margin-left:24rpx;
 }
 /deep/ .u-input{
	 display: inline-flex !important;
 }
 /deep/ uni-button{
	 background-color: #F3F4F5;
 }
  /deep/ .u-hairline-border:after{
		border:none
	}
	/deep/ .u-size-default{
		font-size: 28rpx;
	}
	/deep/ .u-btn--default{
		  border-color: #c0c4cc; 
			background-color: #F3F4F5;
			color:#333333
	}
	.placeholder{
		width: 100%;
		height: 208rpx;
		z-index: -1;
	}
</style>