vue项目主页layout简单模块布局

<template>

  <div>

    <div class="header"></div>

    <div class="sideBar"></div>

    <div class="main">

      <router-view></router-view>

    </div>

  </div>

</template>

<script>

export default {

}

</script>

<style scoped>

.header{

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 80px;

  background-color: aquamarine;

}

.sideBar{

  position: absolute;

  top: 80px;

  left: 0;

  bottom: 0;

  width: 240px;

  background-color: orange;

}

.main{

  position: absolute;

  top: 80px;

  right: 0;

  left: 240px;

  bottom: 0;

  background-color: palegreen;

  overflow-y:auto;

}

</style>