前言

一些自己的學習筆記，僅供記錄

效果圖：

已結(jié)束狀態(tài)

進行中狀態(tài)

實現(xiàn)方式：

template中的h5內(nèi)容如下：（根據(jù)數(shù)組來切換顯示和class樣式）

 <div :class="['status', `status-${item.status}`]">
                    {{ ['未開始', '進行中', '已結(jié)束'][item.status] }}
                  </div>

前面的"·"是以偽類的方式添加繪制的，對齊則是使用了flex布局以及align-item：center以下是css內(nèi)容：

 .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/