Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog

效果图：

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);
}