前言

一些自己的学习笔记，仅供记录

效果图：

已结束状态

进行中状态

实现方式：

template中的h5内容如下：（根据数组来切换显示和class样式）

 <div :class="['status', `status-${item.status}`]">
                    {{ ['未开始', '进行中', '已结束'][item.status] }}
                  </div>

前面的"·"是以伪类的方式添加绘制的，对齐则是使用了flex布局以及align-item：center以下是css内容：

 .status {
              width: 48px;
              &::before {
                content: '';
                width: 4px;
                height: 4px;
                background-color: $text-tertiary;
                display: inline-block;
                margin-right: 7px;
              }
              &.status-0 {
                margin-right: 105px;
                align-items: center;
                color: $text-tertiary;
                display: flex;
                &::before {
                  background-color: $text-tertiary;
                }
              }
              &.status-1 {
                align-items: center;
                color: #00b058;
                display: flex;
                &::before {
                  background-color: #00b058;
                }
              }
              &.status-2 {
                align-items: center;
                color: #b7bbbf;
                display: flex;
                &::before {
                  background-color: #b7bbbf;
                }
              }
            }

补充：

&的作用：

ul{
    margin-bottom: 20px;
    & >li {
        margin-bottom: 0;
    }
  }

& 表示嵌套的上一级
这是sass的语法，代表上一级选择器
解释成CSS代码如下

ul{margin-bottom: 20px;}
ul > li {margin-bottom: 0;}

居中知识点：

https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/