el-drawer布局直接使用

<template>
  <el-drawer :visible.sync="drawer" size="50%" title="详情" class="drawer">
    <div class="top">
      1
    </div>
    <div class="center">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="bottom">
      <!-- 留个空隙备用 -->
    </div>
  </el-drawer>
</template>
<script>
export default {
  data() {
    return {
      drawer: true
    };
  }
};
</script>
<style lang="scss" scoped>
.drawer {
  /deep/ .el-drawer__container {
    .el-drawer {
      .el-drawer__header {
        height: 45px;
        margin-bottom: 25px;
      }
      .el-drawer__body {
        height: calc(100% - 70px);
        box-sizing: border-box;
        padding: 0 20px;
        .top {
          height: 50px;
          width: 100%;
        }
        .center {
          height: calc(100% - 100px);
          width: 100%;
          overflow: auto;
          ul {
            width: 97%;
            li {
              height: 200px;
              border: 6px solid #ccc;
            }
          }
        }
        .bottom {
          height: 50px;
          width: 100%;
        }
      }
    }
  }
}
</style>