会根据窗口大小调整位置,宽度固定(可以自己调整),高度是auto
效果如图:
代码如下:
<div class="layerOfTeacher ">
<div class="layer-box">
<div class="layer-title">我是弹层</div>
<div class="layer-btn">
<button class="cancel-btn" id="cancel">取消</button>
<button class="confirm-btn" id="confirm">确定</button>
</div>
</div>
</div>
scss代码如下:
.layerOfTeacher{
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: 999;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
&.hide{
display: none;
}
.layer-box {
position: relative;
width: 5.6rem;
height: auto;
border-radius: 0.4rem;
background-color: #fff;
.layer-title {
font-size: 0.45rem;
text-align: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.layer-small {
text-align: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
color: #afacac;
}
.number {
border: 0.01rem solid #a5a3a3;
width: 2rem;
height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
padding-left:0.2rem;
}
.layer-btn {
margin-top: 1rem;
display: flex;
flex-direction: row;
border-top: 1px solid #a5a3a3;
button {
flex: 1;
font-size: 0.4rem;
padding: 0.2rem;
background-color: #fff;
border: none;
outline: none;
}
.confirm-btn {
border-bottom-right-radius: 0.4rem;
border-left: 1px solid #a5a3a3;
color: #108ee9;
}
.cancel-btn{
border-bottom-left-radius: 0.4rem;
}
}
}
}