xiangyuan-gov-app/src/components/layout/space/SafeAreaMargin.vue

<template>
  <view :style="{
    marginTop: props.top ? `${safeAreaInsets.top}px` : undefined,
    marginBottom: props.bottom ? `${safeAreaInsets.bottom}px` : undefined,
    marginLeft: props.left ? `${safeAreaInsets.left}px` : undefined,
    marginRight: props.right ? `${safeAreaInsets.right}px` : undefined,
  }">
    <slot />
  </view>
</template>

<script setup lang="ts">
const systemInfo = uni.getSystemInfoSync();
const safeAreaInsets = systemInfo?.safeAreaInsets || {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
};

export interface SafeAreaMarginProps {
  top?: boolean;
  bottom?: boolean;
  left?: boolean;
  right?: boolean;
}

const props = withDefaults(defineProps<SafeAreaMarginProps>(), {
  top: true,
  bottom: true,
  left: true,
  right: true,
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})
</script>

<style>
</style>