Card.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div class='m-card' :class='"type-"+type'>
  3. <div class='name'>{{name}}</div>
  4. <div class='number'>
  5. {{total}}
  6. <i>{{unit}}</i>
  7. </div>
  8. <div class='type'>
  9. {{typeDict[type]}}
  10. <i v-show='[2,3].includes(type)'>:</i>
  11. <i v-show='[2,3].includes(type)'>{{number}}</i>
  12. </div>
  13. <!-- 右上角tag -->
  14. <div class='tag' v-if='[2,3].includes(type)'></div>
  15. </div>
  16. </template>
  17. <script>
  18. /**
  19. * 设备卡片
  20. * @props type 类型
  21. * @props name 设备类型名称
  22. * @props total 设备数量
  23. * @props unit 单位
  24. * @props number 重要维保/维修 的数量
  25. */
  26. export default {
  27. name: 'Card',
  28. props: {
  29. type: {
  30. //1 正常, 2维保 3 维修
  31. type: Number,
  32. default: 0,
  33. required: true,
  34. },
  35. name: {
  36. type: String,
  37. default: '',
  38. required: true,
  39. },
  40. unit: {
  41. type: String,
  42. default: '',
  43. required: true,
  44. },
  45. total: {
  46. type: Number,
  47. default: 0,
  48. required: true,
  49. },
  50. number: {
  51. type: Number,
  52. // default: 0,
  53. required: false,
  54. },
  55. },
  56. data() {
  57. return {
  58. typeDict: {
  59. 1: '正常运维',
  60. 2: '重要维保',
  61. 3: '重要维修',
  62. },
  63. }
  64. },
  65. created() {
  66. console.log(this.number, this.type)
  67. },
  68. components: {},
  69. beforeMount() {},
  70. mounted() {},
  71. methods: {},
  72. }
  73. </script>
  74. <style lang='less' scoped>
  75. .m-card {
  76. width: 100%;
  77. height: 100%;
  78. border-radius: 4px;
  79. background-size: cover !important;
  80. padding: 15px 0 15px 13px;
  81. line-height: 25px;
  82. display: flex;
  83. flex-direction: column;
  84. position: relative;
  85. .name,
  86. .number {
  87. font-size: 15px;
  88. font-weight: 500;
  89. color: #333333;
  90. flex: 1;
  91. }
  92. .number > i {
  93. font-size: 14px;
  94. color: #666;
  95. }
  96. .type {
  97. font-size: 14px;
  98. font-weight: 500;
  99. color: #2bad88;
  100. flex: 1;
  101. }
  102. .tag {
  103. position: absolute;
  104. right: 15px;
  105. top: 6px;
  106. border-top: 10px solid #0481e1;
  107. border-left: 5px solid #0481e1;
  108. border-right: 5px solid #0481e1;
  109. border-bottom: 3px solid transparent;
  110. }
  111. }
  112. // 正常运维
  113. .type-1,
  114. .type-4 {
  115. background: url('../../assets/images/normal.png');
  116. }
  117. // 重要维保
  118. .type-2,
  119. .type-5 {
  120. background: url('../../assets/images/weibao.png');
  121. .type {
  122. color: #0481e1;
  123. }
  124. .tag {
  125. border-color: #0481e1;
  126. border-bottom: 3px solid transparent;
  127. }
  128. }
  129. // 重要维修
  130. .type-3,
  131. .type-6 {
  132. background: url('../../assets/images/weixiu.png');
  133. .type {
  134. color: #d83931;
  135. }
  136. .tag {
  137. border-color: #d83931;
  138. border-bottom: 3px solid transparent;
  139. }
  140. }
  141. </style>