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

标题: css实现小圆点的代码 [打印本页]

---

作者: 洪七公    时间: 2024-4-18 21:59
标题: css实现小圆点的代码

要求效果：

(, 下载次数: 88)

上传

点击文件名下载附件

具体代码：

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. 
   
3. .status-point {
   
4.   display: inline-block;
   
5.   width: 6px;
   
6.   height: 6px;
   
7.   border-radius: 50%;
   
8. }
   
9. </style>

复制代码

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

---

欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)

Powered by Discuz! X3.3