使用element-plus搭建layout模板(精简版)

407 阅读1分钟
<template>
   <el-container class="layout_container">
      <el-aside class="layout_slider">Aside</el-aside>
      <el-container class="layout_right_main">
        <el-header class="layout_head">Header</el-header>
        <el-main class="layout_main">Main</el-main>
      </el-container>
    </el-container>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
  .layout_container{
    width: 100%; //默认本来也是100%
    height: 100vh;

    .layout_slider{
      background-color: #001529;
      color: #fff;
      width: 260px;
    }

    .layout_right_main{
      background-color: pink;
      .layout_head{
        background-color: antiquewhite;
      }
      .layout_main{
        background-color: aquamarine;
      }
    }

  }
</style>

效果如下:

image.png

天呀,居然只用了一行height:100vh就搞定了,而且可以兼容各个分辨率下的屏幕