<template>
	<view
		class="header"
		:style="{
			height: `${statusBarHeight + 44}px`,
			paddingTop: `${statusBarHeight}px`
		}"
	>
		<slot name="icon"><uni-icons type="back" size="28" @click="back" /></slot>
		<slot></slot>
	</view>
</template>

<script>
import { back } from '@/utils/hook.js'
export default {
	data() {
		return {
			statusBarHeight: 20
		}
	},
	mounted() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0
	},
	methods: {
		back
	}
}
</script>

<style lang="scss">
.header {
	width: 750rpx;
	padding: 0 32rpx 10rpx 20rpx;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #d8d8d8;
}
</style>
