源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 587|回复: 0

[CSS/Html] css实现小圆点的代码

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2024-4-18 21:59:08 | 显示全部楼层 |阅读模式

要求效果:

20191224095156315.png


具体代码:

html

  1. <div v-if="scope.data.row.status === 1">
  2.         <div class="status-point" style=" background-color:#67C23A" />
  3.         已通过
  4.       </div>
  5.       <div v-else-if="scope.data.row.status === 0">
  6.         <div class="status-point" style=" background-color:#E6A23C" />
  7.         未被审批</div>
  8.       <div v-else-if="scope.data.row.status === 2">
  9.         <div class="status-point" style=" background-color:#00000040" />
  10.         未通过</div>
复制代码


css

  1. <style scoped>

  2. .status-point {
  3.   display: inline-block;
  4.   width: 6px;
  5.   height: 6px;
  6.   border-radius: 50%;
  7. }
  8. </style>
复制代码


后面想到用,也可以用i标签,这个实现方法的好处是圆点饱满边缘整齐

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-23 15:02 , Processed in 0.136964 second(s), 20 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明