<template>
	<view class="back">
		<view class="left" @click="backTo">
			<uv-icon class="leftIcon" name="arrow-left" color="#000" blod size="32rpx"></uv-icon>
		</view>
	</view>
</template>

<script setup>
	import { reactive, onMounted } from 'vue';
	import { navigateBack,navbarHeightAndStatusBarHeight } from '@/utils/common.js';
	import { useMainStore } from '@/store/index.js';
	const { themeInfo } = useMainStore();

 	const backTo = ()=>{
		navigateBack()
	}

	let state = reactive({
        navHeight: 50,
        statusBarHeight: 0,
    });
    onMounted(() => {
		// #ifdef MP-WEIXIN || MP-XHS
		const { tempHeight, navbarHeight, statusBarHeight } = navbarHeightAndStatusBarHeight();
		state.navHeight = navbarHeight || tempHeight.navbarHeight;
		state.statusBarHeight = statusBarHeight || tempHeight.statusBarHeight;
		// #endif
    });
</script>

<style lang="scss">
	.back{
		position: relative;
		z-index: 99;
		box-sizing: border-box;
		height: 90rpx;
		width: 100vw;
		padding-left: 40rpx;
		background-color: #FFF;
		/*  #ifdef  APP-PLUS */
		margin-top: --status-bar-height;
		/*  #endif  */
		display: flex;
		align-items: center;
		overflow: hidden;
		margin-bottom: 20rpx;
		.leftIcon span {
			font-weight:bold;
		}
		.left{
			width: 120rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-weight:bold;
			::v-deep span {
				font-weight:bold;
			}
			text {
				font-weight:bold!important;
			}
			// transform: scale(1,1.4);
			// transform-origin: 0 0;
		}
	}
</style>