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相关推荐

Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
vue中，获取一个div的高赋值给另一个div （自适应）
vue中,获取一个div的高赋值给另一个div (自适应) 问题描述: 左侧是video 为了让video不出现黑边 video是16:9的(怎么写成16:9的盒子下次说), 左侧的高度会随着页面宽 ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
系列九、vue中css样式字体设置为华文行楷
一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址链接:https: ...
vue导入音乐_【vlog制作】不经电脑，如何在VUE中导入自定义音乐
VUE按不同风格.节气/节日.每月精选和流行曲集设置了多个音乐库,用户在剪辑视频的时候可以在库中挑选BGM,省掉了找音乐的麻烦,对于新手用户尤为贴心.然而对于频繁使用VUE剪辑视频的用户来说,原配音乐 ...
CSS实现半透明div层的方法
很不错的CSS透明效果,本实例是用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是用了CSS的滤镜. <html xm ...

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

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

最新文章

热门文章