ieplus-app/src/components/ie-safe-toolbar/ie-safe-toolbar.vue

<template>
  <view class="min-h-62" :style="{ minHeight: minHeight + 'px' }">
    <view class="safe-area-inset-bottom fixed left-0 bottom-0 right-0 z-10 box-border" :class="{ 'shadow-box': shadow }"
      :style="{ height: minHeight + 'px', backgroundColor: bgColor }">
      <slot></slot>
    </view>
  </view>
</template>
<script lang="ts" setup>
defineOptions({
  options: {
    virtualHost: true
  }
});
import { useAppStore } from '@/store/appStore';
const appStore = useAppStore();
const props = defineProps({
  height: {
    type: Number,
    default: 62
  },
  shadow: {
    type: Boolean,
    default: true
  },
  bgColor: {
    type: String,
    default: '#FFFFFF'
  }
});
const minHeight = computed(() => {
  return (appStore.sysInfo.safeAreaInsets?.bottom ?? 0) + props.height;
});
</script>
<style lang="scss" scoped>
.shadow-box {
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.05);
}
</style>