<template>
	<view data-remark='底部安全域' class="g-rh-fixed g-components-panel-fixed" :style="{ backgroundColor }" :class="[border ? 'g_border_e_t' : '']">
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		border: {
			type: Boolean,
			default: true,
		},
		backgroundColor: {
			type: String,
			default: "#fff",
		},
	},
};
</script>

<style>
.g-components-panel-fixed {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	padding-top: 12px;
	padding-bottom: calc(constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
	min-height: 72px;
	z-index: 999;
	box-sizing: border-box;
}
</style>
