property/user_ui/components/toptab/navbar.vue

<template>
	<view>
		<image :src="navbg" class="navbg"></image>
		<uni-nav-bar :left-icon="leftflag?'left':''" :title="navtit" color="#ffffff"  :background-color="bgColor" :border="navborder" statusBar='true' fixed="true" @clickLeft='getBack' @clickRight='getDetail'>
			<block slot="right" v-if="rtype&&rtype=='come'">
				<view class="right">
					<view>预约信息</view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	export default{
		props:{
			bgColor:{
				type: String,
				default () {
					return 'transparent'
				}
			},
			navborder:{
				type: Boolean,
				default () {
					return false
				}
			},
			rtype:{
				type: String,
				default () {
					return ''
				}
			},
			navtit:'',
			leftflag:{
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data(){
			return{
				navbg:require("@/static/images/navbg.png"),
				backgroundColor: "transparent",
			}
		},
		methods:{
			getBack(){
				if(this.leftflag){
					uni.navigateBack({
						delta:1
					})
				}
				
			},
			getDetail(){
				this.$emit('getDetail')
			},
		}
	}
</script>

<style scoped lang="scss">
.navbg{width: 100%;height: 692rpx;position: fixed;left: 0;right: 0;top: 0;z-index: 1;}
.navtit{display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: #ffffff;width: 100%;
}
.right{position: absolute;right: 0;padding: 0 16rpx 0 26rpx;border-radius: 28rpx 0 0 28rpx;height: 56rpx;line-height: 56rpx;font-weight: bold;
font-size: 24rpx;background-color: #7DC7FE;
color: #FFFFFF;}
</style>