|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class='m-card' :class='"type-"+type'>
|
|
|
+ <div class='m-card' :class='"type-"+type' v-if='type != 4'>
|
|
|
<div class='name'>{{name}}</div>
|
|
|
<div class='number'>
|
|
|
{{total}}
|
|
@@ -13,6 +13,10 @@
|
|
|
<!-- 右上角tag -->
|
|
|
<div class='tag' v-if='[2,3].includes(type)'></div>
|
|
|
</div>
|
|
|
+ <!-- 更多主要设备 卡片 -->
|
|
|
+ <div class='m-card type-4' v-else>
|
|
|
+ <div>更多主要设备</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
/**
|
|
@@ -27,7 +31,7 @@ export default {
|
|
|
name: 'Card',
|
|
|
props: {
|
|
|
type: {
|
|
|
- //1 正常, 2维保 3 维修
|
|
|
+ //1 正常, 2维保 3 维修 4 更多设备
|
|
|
type: Number,
|
|
|
default: 0,
|
|
|
required: true,
|
|
@@ -110,13 +114,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// 正常运维
|
|
|
-.type-1,
|
|
|
-.type-4 {
|
|
|
+.type-1 {
|
|
|
background: url('../../assets/images/normal.png');
|
|
|
}
|
|
|
// 重要维保
|
|
|
-.type-2,
|
|
|
-.type-5 {
|
|
|
+.type-2 {
|
|
|
background: url('../../assets/images/weibao.png');
|
|
|
.type {
|
|
|
color: #0481e1;
|
|
@@ -127,8 +129,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// 重要维修
|
|
|
-.type-3,
|
|
|
-.type-6 {
|
|
|
+.type-3 {
|
|
|
background: url('../../assets/images/weixiu.png');
|
|
|
.type {
|
|
|
color: #d83931;
|
|
@@ -138,4 +139,19 @@ export default {
|
|
|
border-bottom: 3px solid transparent;
|
|
|
}
|
|
|
}
|
|
|
+// 更多设备
|
|
|
+.type-4 {
|
|
|
+ display: flex;
|
|
|
+ padding: 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../assets/images/more.png');
|
|
|
+ .type {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ border-color: #666;
|
|
|
+ border-bottom: 3px solid transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|