<!-- 获取安全区域 -->
<script setup lang="ts">
import { computed, ref } from 'vue'let systemType = ref('1')
// #ifdef APP-PLUS || H5 || APP-PLUS-NVUE
systemType.value = '1'
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets, 'safeAreaInsets')
const prop = defineProps({title: {type: String,default: '消息',},
})
// #endif// #ifdef MP-WEIXIN
systemType.value = '2'
const navbarHeight = ref(0)
//计算刘海状态栏
navbarHeight.value = uni.getSystemInfoSync().statusBarHeight || 0
//计算胶囊区域的高度
let { top, height } = uni.getMenuButtonBoundingClientRect()
const titleBarHeight = computed(() => {return (top - navbarHeight.value) * 2 + height
})
// #endif
</script><template><view v-if="systemType == '1'" class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'rpx' }"><view class="search">{{ title }}</view></view><view v-if="systemType == '2'"><view class="fill" :style="{ height: navbarHeight + 'px' }"></view><view class="title" :style="{ height: titleBarHeight + 'px' }"> 消息 </view></view>
</template><style lang="scss">
.navbar {background-size: cover;position: relative;display: flex;flex-direction: column;padding-top: 20px;// .leftBack {// position: absolute;// top: 200rpx;// }.search {display: flex;align-items: center;justify-content: center;padding: 0rpx 10rpx 0 26rpx;height: 64rpx;line-break: 64rpx;//ui标记距离上面22rpxmargin: 44rpx 20rpx 0 20rpx;color: #1f1f1f;font-weight: 600;font-size: 28rpx;border-radius: 32rpx;}
}
.fill {width: 100%;
}
.title {width: 100%;display: flex;justify-content: center;align-items: center;
}
</style>
uniapp 设置安全区域以及导航栏和胶囊对齐 要注意app没有胶囊没法获取 要另外写样式（已完善）
ps：真就是每个公司总有那么几个表现狗 真他妈的恶心 得拓展一下自己的知识宽度 找下家了
