guanmao-wxapp/components/custom.vue

<template>
	<view class="navigation" :style="{height:CustomBar+'px'}" >
		<view class="me-container" :class="bgColor" :style="cuStyle" >
			<view class="me-left flex_ac">
				<!-- <view v-if="isBack" @tap="toBack" class="iconfont icon-back"></view> -->
				<image v-if="isBack" @tap="toBack" src="@/static/icon/back.png"></image>
				<slot name="left"></slot>
			</view>
			<view class="me-content">
				<slot name="content"></slot>
			</view>
			<view class="me-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isBack:{
				type:Boolean,
				default:true
			},
			bgColor:{
				type:String,
				default:'bg-white'
			}
		},
		computed:{
			cuStyle(){
				return `height:${this.CustomBar-this.StatusBar}px;padding-top:${this.StatusBar}px;`
			}
		},
		data() {
			return {
				StatusBar:this.StatusBar,
				CustomBar:this.CustomBar
			};
		},
		methods:{
			toBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	cover-view{
		box-sizing: border-box;
	}
.navigation{
	position: relative;
	.bg-none {
		background: none;
	}
	.bg-white{
		background: #FFFFFF;
	}
	.bg-tran{
		background: transparent;
	}
	.bg-them{
		background: #fb5152;
	}
	.bg-linear {
		background: linear-gradient(-90deg,#6da7ff 0%, #7fdaff 100%);;
	}
	.me-container{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		// box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
		// padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.me-content{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		.me-left{
			image {
				width: 32rpx;
				height: 32rpx;
				display: block;
				margin-left: 30rpx;
			}
		}
		
	}
}
</style>