css实现仿element ui配色的小圆圈状态标记

实现的效果如图

css代码如下

.status-info{display:inline-block;width: 7px;height:7px;background:#f4f4f5;border-radius:50%;border:1px solid #909399;
}
.status-primary{display:inline-block;width: 7px;height:7px;background:#ecf5ff;border-radius:50%;border:1px solid #409eff;
}
.status-success{display:inline-block;width: 7px;height:7px;background:#f0f9eb;border-radius:50%;border:1px solid #67c23a;
}
.status-waring{display:inline-block;width: 7px;height:7px;background:#fdf6ec;border-radius:50%;border:1px solid #e6a23c;
}
.status-danger{display:inline-block;width: 7px;height:7px;background:#fef0f0;border-radius:50%;border:1px solid #f56c6c;
}

css实现仿element ui配色的小圆圈状态标记相关推荐

element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
【Cocos Creator游戏开发教程】仿微信趣味画赛车小游戏（一）前言，界面UI
前言这个是我去年3月份在简书上发布的,不玩简书了,就迁到CSDN吧-- 最近遇到一款游戏,感觉玩起来还行,于是顺带就用来熟悉一下Cocos Creator(太久没用). 项目地址已放到 github ...
Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
Element UI库的入门使用
Element UI 有的 ul 库在 style 上添加 scoped 后可能会导致自定义样式失效.element ui 可以支持 scoped 多用于管理系统的开发,有明确设计稿的情况下一般不方便 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...

css实现仿element ui配色的小圆圈状态标记

css实现仿element ui配色的小圆圈状态标记相关推荐

最新文章

热门文章