| | |
| | | <div class="name">机巢总数</div> |
| | | </div> |
| | | <div class="status"> |
| | | <div v-for="item in listNum"> |
| | | <div :style="{ color: item.color }" class="value">{{ item.value }}</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="item" v-for="(item, index) in listNum"> |
| | | <div> |
| | | <div :style="{ color: item.color }" class="value">{{ item.value }}</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | <div class="right-line" v-if="index !== listNum.length - 1"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | line-height: 30px; |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .right-line { |
| | | width: 0px; |
| | | height: 36px; |
| | | border-radius: 0px 0px 0px 0px; |
| | | border: 1px solid; |
| | | border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1; |
| | | margin-left: 10px; |
| | | } |
| | | .name { |
| | | text-align: center; |
| | | width: 42px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | } |
| | | .value { |
| | | text-align: center; |
| | | width: 42px; |
| | | font-weight: 400; |
| | | font-size: 26px; |
| | | } |