uni-app自定义导航如何设置状态栏透明呢

    <view :class="nav-bar bg-tran">  
        <view class="status bg-tran"></view>  
        <view class="nav dis-flex justify-between items-c font-32">  
            <view class="nav-left font-34">  
                <ali-icon v-if="showBack" type="back" :back="true"></ali-icon>  
            </view>  
            <view>{{title}}</view>  
            <view class="nav-right text-r">  
                <slot></slot>  
            </view>  
        </view>  
    </view>

    .nav-bar {  
        color: inherit;  
        height: calc(var(--status-bar-height) + 44px);  
    }  

    .status {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        background-color: transparent !important;  
        height: var(--status-bar-height);  
    }  

    .nav {  
        margin-top: var(--status-bar-height);  
        height: 44px;  
        line-height: 44px;  
    }  

    .nav-left,  
    .nav-right {  
        width: 140upx;  
    }