| | |
| | | <div class="progress-wrapper"> |
| | | <div class="progress-bar"> |
| | | <div class="progress-fill"> |
| | | <div class="progress-color" |
| | | <div class="progress-color" :style="{ width: item.process*5 + '%' }" |
| | | :class="item.process <= 5 ? 'progress-yellow' : item.process <= 10 && item.process > 5 ? 'progress-green' : item.process <= 15 && item.process > 10 ? 'progress-blue' : 'progress-gray'"> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | .progress-yellow { |
| | | height: 100%; |
| | | background: #FEDB65; |
| | | background: #FEDB65 !important; |
| | | } |
| | | |
| | | .progress-blue { |
| | | height: 100%; |
| | | background: #00C6FF; |
| | | background: #00C6FF !important; |
| | | } |
| | | |
| | | .progress-green { |
| | | height: 100%; |
| | | background: rgba(0, 220, 171, 1); |
| | | background: rgba(0, 220, 171, 1) !important; |
| | | } |
| | | |
| | | .progress-gray { |
| | | height: 100%; |
| | | background: rgba(0, 242, 240, 1); |
| | | background: rgba(0, 242, 240, 1) !important; |
| | | } |
| | | |
| | | |