使用var(--status-bar-height)提示不支持

代码
<template>
<view class="nav">
<view class="status-bar"></view>
<image class="logo-image" src="https://img-cdn-qiniu.dcloud.net.cn/static/images/logo1@2x.png"></image>
</view>
</template>

<script>
export default {
data() {
return {

        }  
    },  
    methods: {  

    }  
}  

</script>

<style >
.nav{
background-color: #007AFF;
height: 100%;
}
.status-bar{
width: 100%;
height:var(--status-bar-height);
}
.logo-image{
width: 100upx;
height: 40upx;
}

</style>
控制台提示
ERROR: property value var(--status-bar-height) is not supported for height (only number and pixel values are supported)