<div class="default_layer" >
<div class="layer_main">
<div class="main" :style="{'background-color':bg_color,'max-width':width+'px'}">
<h4 class="layer_title" v-if="title_lock">{{title}}</h4>
<slot name="layer_main"></slot>
<div class="footer_bottom">
<el-button size="small" class="sure_wrap">确定</el-button>
<el-button size="small" class="cancel_wrap">取消</el-button>
</div>
</div>
</div>
</div>
data() {
return{
title:'标题'
}
},
.default_layer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1000;
text-align: center;
line-height: 100vh;
.layer_main{
box-sizing: border-box;
display: inline-block;
text-align: left;
.main{
min-width: 320px;
padding:10px;
margin: 0 auto;
max-height: 80vh;
background-color: white;
vertical-align: middle;
display: inline-block;
word-break: break-all;
overflow-x: scroll;
.layer_title{
border-bottom: 1px solid #eee;
font-size: 14px;
color: #333;
padding-bottom:10px;
}
.footer_bottom{
padding-top:10px;
text-align: center;
font-size: 13px;
.sure_wrap{
min-width: 80px;
color: white;
background-color: #428bca;
}
.cancel_wrap{
min-width: 80px;
color: #545454;
background-color: #f5f5f5;
border-color: #e9e9e9;
}
}
}
}
}
效果
