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

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

const statusBarHeight = ref(0)

onMounted(() => {
  // #ifdef APP-PLUS || MP-WEIXIN
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  // #endif
  
  // #ifdef H5
  if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
    // 微信浏览器中使用状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight || 0
  } else {
    // 非微信浏览器给一个固定高度
    statusBarHeight.value = 20
  }
  // #endif
})
</script>

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