<template>
	<view :style="{ height: appStore.headerStyle.statusBarHeight + 'px', backgroundColor: themeStore.bgColor }"></view>
	<view class="header" :style="{ backgroundColor: themeStore.bgColor }">
		<theme-image :style="{ width: themeStore.width, height: themeStore.height }" @click="back" src="@/static/account/icon/back.png"></theme-image>
		<text class="header-title" :style="{ color: themeStore.color }">{{ props.title }}</text>
	</view>
</template>

<script setup>
import { useAppStore } from '@/store/useAppStore';
import { onMounted, reactive } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';
const themeStore = useThemeStore().theme.account.header;
const appStore = useAppStore();

const props = defineProps({
	title: String
});
const back = () => {
	uni.navigateBack({
		delta: 1
	});
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.header {
	width: 100vw;
	height: 88rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	// background-color: #610606;
	padding-left: 30rpx;

	.header-title {
		width: calc(100% - 34rpx);
		text-align: center;
		// color: #fff;
		font-size: 34rpx;
	}
}
</style>
