重构el-drawer样式 本身的header去掉
<el-drawer
title="我是标题"
:visible.sync="drawer"
:with-header="false">
<div class="demo">
<div class="demo__header">
<div class="demo__header__title">标题</div>
<div class="demo__header__close" @click="handleClose">
×
</div>
</div>
</div>
<div class="demo__body">
<div style="height:700px">
</div>
<div class="demo__footer text-right"></div>
</div>
</el-drawer>
样式如下
.demo {
display: flex;
flex-direction: column;
height: 100%;
&__header {
flex: none;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 35px 20px;
// border-bottom: 1px solid #d3d4d5;
&__title {
flex: auto;
font-family: PingFangSC-Medium;
font-size: 24px;
color: #333333;
letter-spacing: 0;
color: #3ccba3;
font-weight: bold;
}
&__close {
color: #979797;
font-size: 26px;
flex: none;
cursor: pointer;
}
}
&__body {
flex: auto;
overflow-x: hidden;
overflow-y: scroll;
box-sizing: border-box;
padding: 15px 20px;
}
&__footer {
flex: none;
box-sizing: border-box;
padding: 10px 20px;
background: #f9f8f8;
// border: 1px solid #ededed;
// box-shadow: 0 -1px 4px 1px rgba(0, 0, 0, 0.14);
}
}
效果图如下