當前位置：
首頁 >
Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog
發布時間：2023/12/8
45
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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); }總結
以上是生活随笔為你收集整理的Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 拯救者y7000p进入BIOS
- 下一篇： vue+ol实现 ol 地图加载geoj