<template>
	<view class="nav-head" :class="{ 'tp': bgTransparent }">
		<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
			}
		},
		bgTransparent: { // 背景是否透明
			type: Boolean,
			default() {
				return false
			}
		},
		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: fixed;
	top: 0rpx;
	height: 112rpx;
	// background-color: #fafafa;
	// background-color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 36rpx;
	color: #fff;
	// padding: 40rpx 16rpx;
	padding-top: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #15141F;
	z-index: 8;
	border-bottom: 4rpx solid #323045;

	&.tp {
		background-color: transparent;
		border: none;
	}
}

.back {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	left: 36rpx;
}
</style>
