列表定义状态比较不错的UI写法

最新推荐文章于 2024-06-15 14:35:55 发布

前端小芬芬

最新推荐文章于 2024-06-15 14:35:55 发布

阅读量433

点赞数

分类专栏： css 文章标签： ui css

本文链接：https://blog.csdn.net/yf18040578780/article/details/131684570

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<el-table-column
  prop="status"
  label="状态"
  align="left"
  :formatter="formatTd"
>
  <template slot-scope="scope">
    <span class="grayStatus" v-if="scope.row.status === 1"
      >未开始</span
    >
    <span class="greenStatus" v-else-if="scope.row.status === 2"
      >考试中</span
    >
    <span class="overStatus" v-else-if="scope.row.status === 3"
      >已结束</span
    >
    <span v-else>--</span>
  </template>
</el-table-column>

全局样式

/* 列表状态颜色 */
.redStatus::before,
.greenStatus::before,
.blueStatus::before,
.grayStatus::before,
.overStatus::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.redStatus::before {
  background: #ff4d4d;
}

.greenStatus::before {
  background: #02CCA3;
}

.blueStatus::before  {
  background: #4ea7ff;
}

.grayStatus::before  {
  background: #999999;
}

.overStatus::before {
  background: #F9A727;
}