问题：

如图所示，标题与ios安全区域没有分开。

解决方式：

写一个div，使它高度与Ios安全区一致。将其余内容挤压到安全区下

具体代码如下

<template><div class="quiz-edit"><div class="top"><div class="van-safe-area-inset-top"></div>//该div置于安全区内<div class="nav-bar"><van-icon name="arrow-left" class="left" :size="20" @click="onClickLeft"/><div class="center"><span class="title">问题编写</span><span class="tips">可使用提问次数：4次</span></div><span class="myquiz" @click="onClickRight">我的提问</span></div></div></div>
</template><style lang="less" scoped>// 苹果手机顶部安全区 兼容
@supports (top: env(safe-area-inset-top)) {.van-safe-area-inset-top {height: constant(safe-area-inset-top);height: env(safe-area-inset-top);}
}.quiz-edit{overflow: hidden;// height: 45px;
}
.top{background: #fe484a;height: 45px;padding: 0 15px;position: fixed;top: 0;left: 0;width: 100%;z-index: 999998;.van-safe-area-inset-top {width: 100%;background-color: #fe484a;} .nav-bar{display: flex;.left{color: #fff;line-height: 45px;width: 24px;height: 24px;}.center{position: absolute;left: 50%;width: 60%;margin-left: -31%;height: 45px;z-index: 99999999;color: #fff;overflow: hidden;text-align: center;.title{display: block;// width: 30%;font-size: 16px;line-height: 16px;padding-top: 8px;margin-left: 5%;z-index: inherit;}.tips{display: block;margin-top: 5px;font-size: 12px;text-align: center;z-index: 999999;}}.myquiz{line-height: 45px;font-size: 14px;z-index: 999999;position: absolute;// top: 0;right: 15px;color: #fff;}}}
</style>