1.在App.vue中修改
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/*实现登录注册页面背景图全面布局*/
html, body {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*添加以下两个个实现element的container全面布局*/
width: 100%;
height: 100%;
}
</style>
2.修改container
<template>
<el-container class="container">
<el-aside width="240px" >Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'index',
data() {
return {
}
},
methods: {},
created() {
},
}
</script>
<style scoped>
.container{
/*实现全面布局*/
height: 100vh;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 500px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 500px;
}
</style>