<template>
  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
</template>

<script>
export default {
  name: "StatusBar",
  data() {
    return {
      statusBarHeight: 0,
    }
  },
  mounted() {
    // #ifdef MP-WEIXIN || H5 || APP-PLUS
    try {
      const sysInfo = uni.getSystemInfoSync();
      this.statusBarHeight = sysInfo.statusBarHeight || 20;
    } catch (e) {}
    // #endif
    // #ifdef MP-WEIXIN
    try {
      const menuButton = wx.getMenuButtonBoundingClientRect();
      this.capsule = {
        top: menuButton.top,
        height: menuButton.height
      }
    } catch (e) {}
    // #endif
  }
}
</script>

<style>

</style>