<template>
	<view class="safeBottomBox">
		<view class="safeBottomFiexd" :style="{ height: safeBottomAz + 'px', backgroundColor: bgColor }">
		</view>
		<view class="safeBottomZhangwei" :style="{ height: safeBottomAz + 'px' }">
		</view>
	</view>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'

const props = defineProps({
	bgColor: {
		type: String,
		default: '#EDEDED'
	}
})

const instance = getCurrentInstance()
const safeBottomAz = computed(() => {
	const store = instance?.appContext?.config?.globalProperties?.$store
	const height = store?.state?.safeBottomAz
	return Number(height) || 0
})
</script>

<style lang="scss" scoped>
.safeBottomBox {
	width: 100vw;
	position: relative;
	z-index: 999;
	overflow: hidden;
	.safeBottomFiexd {
		width: 100vw;
		position: fixed;
		left: 0;
		bottom: 0;
	}
}
</style>
