<template>
	<view class="nav-head">
		<slot></slot>
		<slot name="bread"></slot>
		<slot name="logo"></slot>
		<image src="../../static/color/top_icon_ins@3x.png" mode="aspectFit" class="back" @tap="back()" v-if="showBack"></image>
	</view>
</template>

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

				console.log('back')
				// #ifdef H5
					history.back()
				// #endif
				
				// #ifdef APP-PLUS	
				uni.navigateBack()
				// #endif
				}	
	},
	}
</script>

<style>

.nav-head{
	line-height: 108rpx;
	background-color: #34026BFF;
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	position: relative;
	text-transform: capitalize;
	padding: 0 36rpx;
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	align-items: center;
}
	.back{
		width: 42rpx;
		height: 42rpx;
		position: absolute;
		left:36rpx;
        top: 50%;
		transform: translateY(-50%) rotate(-180deg) ;
	}
</style>
