前言
一些自己的學(xué)習(xí)筆記，僅供記錄
效果圖：
已結(jié)束狀態(tài)
進(jìn)行中狀態(tài)
實(shí)現(xiàn)方式：
template中的h5內(nèi)容如下：（根據(jù)數(shù)組來切換顯示和class樣式）
<div :class="['status', `status-${item.status}`]">
{{ ['未開始', '進(jìn)行中', '已結(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;
}
}
}
補(bǔ)充：
&的作用：
ul{
margin-bottom: 20px;
& >li {
margin-bottom: 0;
}
}
& 表示嵌套的上一級
這是sass的語法，代表上一級選擇器
解釋成CSS代碼如下
ul{margin-bottom: 20px;}
ul > li {margin-bottom: 0;}
居中知識點(diǎn)：
https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
