Ci2Order.vue/App/components/z-navbar/z-navbar.vue

<template>
	<view>
		<view class="navbar" :style="{'background':bgcolor,'color':color,'zIndex':zIndex}">
			<view class="status_bar">

			</view>
			<view class="flex-n fac title_bar plr-30" v-if="!hideTitle">
				<view class="flex-1">
					<view class="go_back iconfont iconfanhui" @click="diyBack?$emit('goBack'):goBack()" v-if="back">

					</view>
					<slot name="left"></slot>
				</view>
				<view class="title">
				<template v-if="title">{{title}}</template>
				<slot name="title"></slot>
				</view>
				<view class="flex-1 flex-n fac fje">
					<slot name="right" ></slot>
					<view class="rightbtn" v-if="btnText" @click="$emit('click')">{{btnText}}</view>
				</view>
			</view>
		</view>
		<view class="seat" v-if="!hideTitle"></view>
		<view class="seat2" v-else></view>
	</view>
</template>

<script>
	export default {
		name: 'z-navbar',
		props: {
			title: String,
			btnText: String,
			hideTitle:Boolean,
			zIndex:{
				type:Number,
				default:500
			},
			bgcolor: {
				type: String,
				default: '#354054'
			},
			color: {
				type: String,
				default: 'white'
			},
			back: {
				type: Boolean,
				default: false
			},
			float: {
				type: String,
				default: 'right'
			},
			diyBack:Boolean
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		position: fixed;
		top: 0;
		// z-index: 500;
		width: 100vw;
		.status_bar {
			height: var(--status-bar-height);
		}
		.title_bar {
			height: 84rpx;
			font-size: 36rpx;
			.go_back {
				color: white;
				width: 30rpx;
				font-size: 30rpx;
				height: 30rpx;
			}
			.rightbtn{
				font-size: 28rpx;
			}
		}
	}

	.seat {
		height: calc(var(--status-bar-height) + 84rpx);
	}
	.seat2{
		height: var(--status-bar-height);
	}
</style>