前言
一些自己的学习笔记，仅供记录
效果图：
已结束状态
进行中状态
实现方式：
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/
