custom-bar

<template>
	<view class="nav_ber">
		<view class="nav_ber_img_box" :style="{backgroundImage:'url('+(baseImg)+')'}">
			<image class="nav_ber_img" :src="imgSrc" @tap='handelGoback'></image>
		</view>
		<!-- <text>{{imgSrc}}</text> -->
		<text class="nav_ber_text">{{text}}</text>
		<view  class="nav_ber_slot_right">
			<slot />
		</view>

	</view>
</template>
<script>
	export default {
		props: {
			// 导航栏标题
			text: {
				type: String,
				default: '自定义导航栏'
			},
			// 返回参数 用法 参考 https://www.bookstack.cn/read/uniapp-api/spilt.5.ead34267bd06d88a.md
			navigateBack: {
				type: [String,Number],
				default: 1
			},
			// 左侧返回按钮的三角图片路径
			baseImg: {
				type: String,
				default: ''
			},
			// 左侧返回按钮内部图片路径
			imgSrc: {
				type: String,
				default: ''
			}
		},
		methods: {
			handelGoback() {
				uni.navigateBack({
					delta: this.navigateBack
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.nav_ber {
		height: 40.1rpx;
		 background:linear-gradient(180deg,rgba(248,248,248,1) 0%,rgba(218,218,218,1) 52%,rgba(208,208,208,1) 100%);
		 box-shadow: 0px 1px 0px 0px rgba(151, 151, 151, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.nav_ber_img_box {
			position: absolute;
			// background: url(../../libs/static/customImg/fanhui-bg.png);
			background-size: 56.86rpx 27.47rpx;
			left: 8.24rpx;
			height: 27.47rpx;
			width: 56.86rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.nav_ber_img {
				position: absolute;
				width: 26.37rpx;
				height: 26.37rpx;
				z-index: 9999;
			}
		}
		.nav_ber_img_box:active {
			// background: url(../../libs/static/customImg/fanhui-actice-bg.png);
			// background-size: 56.86rpx 27.47rpx;
		}
		.nav_ber_text {
			font-size: 14.83rpx;
			font-weight: bold;
			color: rgba(0, 0, 0, 1);
			font-family:SourceHanSansCN-Medium,SourceHanSansCN;
		}
		.nav_ber_slot_right {
			width: 109.89rpx;
			height: 27.47rpx;
			position: absolute;
			top: 5.49rpx;
			left: 100%;
			transform: translate(-100%,0);
		}
	}
</style>