使用calc(var(--status-bar-height) + 12px);方法不计算属性,展现结果与var(--status-bar-height) 相同
如图,给定status的height: var(--status-bar-height);,给定title的top: calc(var(--status-bar-height) + 12px);
展现结果是这样的,top与高度完全相等,upx和px都尝试了,都不可以
代码如下:
<template>
<view>
<view class="main-head" :style="{ height: screenH }">
<view class="status" :style="{ background: mstyle }"></view>
<view class="title" :style="{ background: mstyle }"></view>
</view>
</view>
</template>
<style lang="less">
.main-head {
background: rgba(0, 0, 0, 0.8);
position: relative;
z-index: 100;
.status {
width: 100%;
position: fixed;
top: 0;
height: var(--status-bar-height);
background: green;
}
.title {
position: absolute;
top: calc(var(--status-bar-height) + 12px);
width: 100%;
height: 66upx;
padding: 0 0 12upx;
background: red;
border-bottom: solid 1px rgba(100, 100, 100, 0.2);
}
}
</style>
