vue3之页面的初步搭建

1.消除页面中没有铺满现象+layout布局

采用Layout布局，其中:span表示的是占比。即：总共分为24份，左侧内容与右侧内容占比为16:8。

在element-plus的布局容器的排版中的div容器添加style="min-height:100vh;"，如下内容

//登录页面搭建
<template>
	<el-row style="min-height:100vh; background-color: blue"> ✔
		<el-col :span="16">
			左侧内容
		</el-col>
		<el-col :span="8" style="background-color: #f5f5f5">
			右侧内容
		</el-col>
	</el-row>
</template>

2.页面响应式处理

当左侧内容和右侧内容只有在宽度>=1200px时，才会左侧内容与右侧内容占比16:8。

当左侧内容和右侧内容只有在宽度>=768px时，左侧内容与右侧内容占比12:12，即：各占一半。

//登录页面搭建
<template>
	<el-row style="min-height:100vh; background-color: blue"> ✔
		<el-col :lg="16" :md="12">
			左侧内容
		</el-col>
		<el-col :lg="8" :md="12" style="background-color: #f5f5f5">
			右侧内容
		</el-col>
	</el-row>
</template>