<template>
	<view class="header-bar" :style="{ 'padding-top': statusBarHeight + 'px' , 'height' : navHeight + 'px'}">
		<view class="content">
			<view class="icon-box" @click="back()">
				<image class="icon" src="../static/img/back.png"></image>
				<text class="back-text">返回</text>
			</view>
			<text>{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"HeaderBar",
		data() {
			return {
				
			};
		},
		props: ['title'],
		computed: {
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			},
			navHeight(){
				return this.$store.state.navHeight
			},
		},
		methods: {
			back(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
.header-bar{
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	font-size: 36rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 99;
	.content{
		flex: 1;
		display: flex;
		justify-content: center;
		position: relative;
		align-items: center;
		.icon-box{
			display: flex;
			align-items: center;
			position: absolute;
			left: 48rpx;
			.icon {
				height: 40rpx;
				width: 40rpx;
				margin-right: 15rpx;
			}
			.back-text{
				font-size: 32rpx;
			}
		}
	}

}
</style>