uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果

在uniapp中，如果你想去掉顶部导航栏并计算手机安全区的距离，可以通过以下方式实现：

1. 去掉顶部导航栏：

   在pages.json中对应页面的navigationBarTextStyle设置为transparent，这样顶部导航栏就变得透明，看起来就像是“去掉”了。

2. 计算手机安全区的距离：

   使用uniapp提供的uni.getSystemInfo或uni.getSystemInfoSyncAPI获取到系统信息，其中safeAreaInsets属性可以得到安全区域的边界。

3. 使用CSS实现背景模糊效果：

   可以使用CSS的backdrop-filter属性和blur()函数来实现背景模糊效果，但需要注意的是，这个属性对iOS平台支持的不是很好，安卓平台表现更好。

示例代码：

// pages.json 中配置
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "transparent"  // 设置导航栏文本样式为透明
      }
    }
  ]
}

// 页面的 script 中获取安全区域距离
export default {
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    const safeAreaInsets = systemInfo.safeAreaInsets;  // 安全区域的边界
    // 根据 safeAreaInsets 的值设置页面样式，如顶部的边距等
  }
}

/* 页面的 style 中实现背景模糊 */
.page {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(10px);  /* 可根据需求调整模糊程度 */
}

请注意，由于不同设备的安全区域边距可能不同，你可能需要针对不同的设备进行适配。另外，背景模糊效果可能在不同的设备和浏览器中表现不一致，需要进行测试以确保兼容性。