问题:
如图所示,标题与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>