<!--
 * @Author: ch
 * @Date: 2022-03-25 10:11:37
 * @LastEditors: ch
 * @LastEditTime: 2022-04-21 15:27:05
 * @Description: file content
-->
<template>
	<view class="header">
		<image class="header--back" v-if="back" src="@/static/search/arrow.png" @click="$Router.back()"></image>
		<slot name="custom">
			<text class="header--title">{{title}}</text>
			<view class="header--operation">
				<slot name="operation"></slot>
			</view>
		</slot>
	</view>
</template>
<script>
export default {
	props : {
		title : {
			type : String,
			default : ''
		},
		back : {
			type : Boolean,
			default : true
		}
	}
}
</script>
<style lang="scss" scoped>
.header{
	height: 88rpx;
	padding: 0 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: $color-grey1;
    position: sticky;
    top: var(--window-top);
	z-index: 999;
	&--back{
		width: 14rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}
	&--title{
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}
	&--operation{
		position: absolute;
		right: 40rpx;
		top: 0;
	}
}

</style>