效果图:
HTML部分:
<div class="tankuangClass"
v-show="true"
style="width:400px;height:300px;top:20%;left:60%;">
<div class="bigtitle">
<span class="lefttitle">门禁控制</span>
<span class="closeicon" >
<i class="el-icon-circle-close" style="font-size: 18px;color: wheat;"></i>
</span>
</div>
<div class="content">
<p>AAAAAAA</p>
<p>bbbbb</p>
<p>ccccccc</p>
<p>DDDDD</p>
</div>
</div>
CSS部分:
.tankuangClass {
position: absolute;
border-radius: 10px;
background-color: rgba(0, 85, 116, 0.8);
}
.bigtitle {
padding: 10px 10px 5px 10px;
height: 25px;
border-bottom: solid 1px wheat;
}
.lefttitle {
font-size: 17px;
float: left;
color: wheat;
letter-spacing: 2px;
}
.closeicon {
float: right;
cursor: pointer;
}
.content {
padding: 10px;
height: calc(100% - 60px);
}