<template>
	<view class="nav-head">
		<image src="../../static/public/back.png" mode="aspectFit" class="back" @tap="back()" v-if="showBack"></image>
		<slot name="left"></slot>
		<slot></slot>
		<slot name="middle"></slot>
		<slot name="right"></slot>
	</view>
</template>

<script>
const COMPONENT_NAME = 'navigation'
export default {
	name: COMPONENT_NAME,
	props: {
		showBack: {
			type: Boolean,
			default() {
				return true
			}
		},
		bgnum: {
			type: Boolean,
			default() {
				return false
			}
		},
	},
	data() {
		return {

		}
	},
	computed: {

	},
	mounted() {

	},
	methods: {
		back() {

			// #ifdef H5
			history.back()
			// #endif

			// #ifdef APP-PLUS	
			uni.navigateBack()
			// #endif
		}
	},
}
</script>

<style scoped lang="scss">
.item {
	font-size: 28rpx;
	text-align: center;
	width: 234rpx;
	line-height: 60rpx;
}

.nav-head {
	overflow: hidden;
	position: relative;
	top: 0rpx;
	height: 112rpx;
	// background-color: #fafafa;
	// background-color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 36rpx;
	color: #fff;
	// padding: 40rpx 16rpx;
	margin-top: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	z-index: 8;
	border-bottom: 4rpx solid #323045;

}

.back {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	left: 36rpx;
	top: 50%;
	transform: translateY(-50%);
}
</style>
