<template>
	<uv-sticky>
		<view class="head">
			<div class="title">
				<div class="backIcon" v-if="showBack" @click="goBack">
					<uv-icon class="backIcon" name="arrow-left" color="#fff" size="20"></uv-icon>
				</div>
				{{title}}
			</div>
		</view>
	</uv-sticky>
</template>
<script setup>
	const props = defineProps({
		title: [String],
		showBack: {
			type: Boolean,
			default: false
		}
	});
	
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.head {
		// background-color: rgba(3, 0, 255, 0.6);
		// background: center / 100% 100% url('/static/imgs/head_bg.png') no-repeat;
		background-image: url('data:image/png;base64,[encoded data, 172216 characters]');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		height: 90px;
		position: sticky;

		.title {
			position: absolute;
			bottom: 10px;
			font-size: 16px;
			left: 0;
			text-align: center;
			width: 100%;
			color: #fff;
		}

		.backIcon {
			position: absolute;
			top: 50%;
			transform: translate(50%,-50%);
		}
	}
</style>