null/components/safe-area.vue

<template>
	<view class="bottom_div_sec">
		<view class="btn-placer" :style="{height:height}"></view>
		<view class="save_fff"></view>
		<view class="bottom_div">
			<slot name='btn' />
			<view class="save_fff" :style="'background:'+bgColor"></view>
		</view>	
	</view>
</template>

<script>
	export default {
		name:"safe-area",
		props:{
			bgColor:{
				type:String,
				default:'#fff'
			},
			height:{
				type:String,
				default:'0'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.bottom_div_sec{
		width: 100%;
		position: relative;
	}
   .bottom_div{
     position:fixed;
     bottom:0;
     left:0;
     width:100%; 
     z-index:20;
   }
   .save_fff{
        height:calc(var(--safe-area-inset-bottom) / 2);
        width:100%;
   }
</style>