<template>
	<view class="navigation" :style="{height: getNavigationHeight}">
		<view class="back_btn" :style="{marginTop: statusHeight}" @click="backClick">
			<image class="image" src="../static/navigation_back.png" mode="aspectFit"></image>
		</view>
		<view class="title" :style="{top: statusHeight}">{{title}}</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			title: String
		},
		data() {
			return {
			}
		},
	
		computed: {
			safeAreaInsets() {
				return uni.getSystemInfoSync().safeAreaInsets.bottom
			},
			statusHeight() {
				let device = uni.getSystemInfoSync();
				return device.statusBarHeight + "px";
			},
			getNavigationHeight() {
				var h = 0;
				let device = uni.getSystemInfoSync();
				let statusBarHeight = device.statusBarHeight;
				h += 44;
				return h + "px";
			}
		},
		onLoad() {
	
		},
		methods: {
			backClick() {
				uni.navigateBack()	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigation {
		display: flex;
		flex-direction: row;
		position: relative;
		background: linear-gradient(to right, #D82222, #B81F1F);
		// justify-content: center;
		align-items: center;
		.back_btn {
			display: flex;
			width: 44px;
			height: 44px;
			justify-content: center;
			align-items: center;
			.image {
				width: 20px;
				height: 20px;
			}
		}
		.title {
			display: flex;
			// position: absolute;
			top: 0;
			left: 50%;
			right: 50%;
			height: 44px;
			width: 100%;
			margin-right: 44px;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			color: #FFE8C3;
		}
	}
</style>