<template>
  <view class="safe-area-bottom" :style="{ height: bottomHeight + 'px' }"></view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const bottomHeight = ref(0)

onMounted(() => {
  // #ifdef APP-PLUS || MP-WEIXIN
  const systemInfo = uni.getSystemInfoSync()
  // 获取底部安全区域高度
  bottomHeight.value = systemInfo.safeAreaInsets?.bottom || 0
  // #endif
  
  // #ifdef H5
  // iOS环境下的 H5，需要适配底部安全区域
  if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
    bottomHeight.value = 34 // iPhone X 及以上机型的底部安全区域高度
  }
  // #endif
})
</script>

<style lang="scss" scoped>
.safe-area-bottom {
  width: 100%;
}
</style> 