uniapp顶部状态栏设置（适配刘海屏）

方案一、占位

最顶部放一个高度为“var(--status-bar-height)”的div

    
<style>
  .status_bar {
      height: var(--status-bar-height);/*刘海儿的高度*/
      width: 100%;
      background-color:#007AFF ;
  }
style>

方案二、高度自适应

    
<style>
  .content {
      height: calc(100vh + var(--status-bar-height));/*加上刘海儿的高度*/
      width: 100%;
      background-color:#007AFF ;
  }
style>