uni-app nvue沉浸式状态栏（线性渐变色）

<template>  
<div class="page-searchList">  
    <div class="header">  
        <div class="statusBar" :style="{height:statusBarHeight+'wx'}"></div><!-- 状态栏占位 -->  
        <div class="info"><text style="font-size: 16wx;">标题栏</text></div>  
    </div>  
    <div class="content">  
        <text style="font-size: 50wx;">{{statusBarHeight}}wx</text> <!-- 打印状态栏高度 -->  
    </div>  
</div>  
</template>  

<script>  
export default {  
    data: {  
        statusBarHeight: ''  
    },  
    created() {  
        let _t = this;  
        setTimeout(() => { //获取状态栏高度，setTimeout后才能调用uni.  
            uni.getSystemInfo({  
                success: function(res) {  
                    _t.statusBarHeight = res.statusBarHeight;  
                    console.log(_t.statusBarHeight);  
                }  
            });  
        }, 1);  
    }  
};  
</script>  

<style>  
.page-searchList {  
    background-color: #8f8f94;  
    justify-content: center;  
    align-items: center;  
}  
.header {  
    background-image: linear-gradient(to right, #a80077, #66ff00);  
    width: 750px;  
    position: fixed;  
    top: 0;  
}  
.info {  
    height: 44wx;  
    justify-content: center;  
    align-items: center;  
}  
</style>