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

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

index.vue:

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<button @click="handleClick">沉浸式</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			handleClick: function() {
				uni.navigateTo({
                    url: '/pages/chenjinshi/chenjinshi'
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

chenjinshi.vue:

<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() {
			return {
				statusBarHeight: ' '
			}
		},
		created() {
			let _t = this;
			setTimeout(() => { //获取状态栏高度，setTimeout后才能调用uni.
				uni.getSystemInfo({
					success: function(res) {
						_t.statusBarHeight = res.statusBarHeight;
						console.log(res);
					}
				});
			}, 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>

pages.json:

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/chenjinshi/chenjinshi",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}