| | |
| | | class="task-step-item" |
| | | :style="{ 'flex-basis': flexBasis }" |
| | | > |
| | | <el-icon v-if="index < active" class="icon" size="22" color="#01f304"><CircleCheck /></el-icon> |
| | | <el-icon v-if="index < active" class="icon" color="#01f304"><CircleCheck /></el-icon> |
| | | |
| | | <el-icon v-if="index === active" class="icon" size="22" color="#c25915"> |
| | | <el-icon v-if="index === active" class="icon" color="#c25915"> |
| | | <Clock /> |
| | | </el-icon> |
| | | <el-icon v-if="index > active" class="icon" size="22" color="#7d7f83"><Clock /></el-icon> |
| | | <el-icon v-if="index > active" class="icon" color="#7d7f83"><Clock /></el-icon> |
| | | <span class="text" :class="{ green: index < active, red: index === active, gray: index > active }"> |
| | | {{ item }} |
| | | </span> |
| | |
| | | } |
| | | .icon { |
| | | margin-right: 6px; |
| | | font-size: 22px; |
| | | } |
| | | .green { |
| | | color: #01f304; |
| | |
| | | } |
| | | .text { |
| | | flex-shrink: 0; |
| | | font-size: 14px; |
| | | } |
| | | .line { |
| | | display: inline-block; |