uniapp設置頁面背景顏色

在uniapp中，給當前頁面添加滿屏背景顏色，需要給當前組件的根元素添加絕對定位，寬高百分百，然后設置背景顏色

<template>
	<view class="loginContent">
		<view class="logo">
			<image src="../../static/QTDD.jpg"></image>
		</view>

		<input type="text" v-model="email" placeholder="郵箱" />
		<input type="password" v-model="password" placeholder="密碼" />
		<button class="btn">登錄</button>
		<view class="alertNative">
			<view class="retrievePassword">找回密碼</view>
			<view class="register">注冊</view>
		</view>
	</view>
</template>
<style>
.loginContent{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
}
//其他不相關的CSS省略....
</style>

自己寫的時候遇到的幾種問題：

第一種：直接給當前組件的根元素添加背景顏色，會導致背景顏色只會出現在內容區域，不會滿屏顯示

<template>
	<view class="loginContent">
		//省略部分代碼
	</view>
</template>
<style>
.loginContent{
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
}
//其他不相關的CSS省略....
</style>

第二種：給當前組件根元素添加height:100vh，然后添加背景顏色，這種方式雖然能達到效果，但是此時屏幕會出現滾動條，這種體驗感不太好

<template>
	<view class="loginContent">
		//省略部分代碼
	</view>
</template>
<style>
.loginContent{
height:100vh;
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
//其他不相關的CSS省略....
</style>
}

第三種：在當前組件中給page添加背景顏色，這種方式也能達到效果，但是組件根元素會繼承背景顏色，導致背景顏色重疊了

<template>
	<view class="loginContent">
		//省略部分代碼
	</view>
</template>
<style>
page{
	background: linear-gradient(to bottom, #ffdde1, #ee9ca7);	
//其他不相關的CSS省略....
}
</style>
}