Card.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <div class='m-card' :class='"type-"+type' v-if='type != 4'>
  3. <div class='top-left'></div>
  4. <div class='name'>{{name}}</div>
  5. <div class='number'>
  6. {{total}}
  7. <i>{{unit}}</i>
  8. </div>
  9. <div class='type'>
  10. {{typeDict[type]}}
  11. <i v-show='[2,3].includes(type)'>:</i>
  12. <i v-show='[2,3].includes(type)'>{{number}}</i>
  13. </div>
  14. <!-- 右上角tag -->
  15. <div class='tag' v-if='[2,3].includes(type)'></div>
  16. <div class='bottom-right'></div>
  17. </div>
  18. <!-- 更多主要设备 卡片 -->
  19. <div class='m-card type-4' v-else>
  20. <div class='type'>更多主要设备</div>
  21. <div class='toggle'>展开</div>
  22. </div>
  23. </template>
  24. <script>
  25. /**
  26. * 设备卡片
  27. * @props type 类型
  28. * @props name 设备类型名称
  29. * @props total 设备数量
  30. * @props unit 单位
  31. * @props number 重要维保/维修 的数量
  32. */
  33. export default {
  34. name: 'Card',
  35. props: {
  36. type: {
  37. //1 正常, 2维保 3 维修 4 更多设备
  38. type: Number,
  39. default: 0,
  40. required: true,
  41. },
  42. name: {
  43. type: String,
  44. default: '',
  45. required: true,
  46. },
  47. unit: {
  48. type: String,
  49. default: '',
  50. required: true,
  51. },
  52. total: {
  53. type: Number,
  54. default: 0,
  55. required: true,
  56. },
  57. number: {
  58. type: Number,
  59. // default: 0,
  60. required: false,
  61. },
  62. },
  63. data() {
  64. return {
  65. typeDict: {
  66. 1: '正常运维',
  67. 2: '重要维保',
  68. 3: '重要维修',
  69. },
  70. }
  71. },
  72. created() {
  73. // console.log(this.number, this.type)
  74. },
  75. components: {},
  76. beforeMount() {},
  77. mounted() {},
  78. methods: {},
  79. }
  80. </script>
  81. <style lang='less' scoped>
  82. .m-card {
  83. width: 100%;
  84. height: 100%;
  85. border-radius: 4px;
  86. background-size: cover !important;
  87. padding: 8px 0 8px 12px;
  88. line-height: 25px;
  89. display: flex;
  90. flex-direction: column;
  91. position: relative;
  92. overflow: hidden;
  93. .name,
  94. .number {
  95. font-size: 14px;
  96. font-weight: 500;
  97. color: #333333;
  98. flex: 1;
  99. }
  100. .number {
  101. font-size: 20px;
  102. i {
  103. font-size: 12px;
  104. color: #666;
  105. }
  106. }
  107. .type {
  108. font-size: 13px;
  109. font-weight: 500;
  110. color: #2bad88;
  111. flex: 1;
  112. }
  113. .tag {
  114. position: absolute;
  115. right: 5px;
  116. top: 0;
  117. border-top: 10px solid #0481e1;
  118. border-left: 5px solid #0481e1;
  119. border-right: 5px solid #0481e1;
  120. border-bottom: 3px solid transparent;
  121. }
  122. .top-left {
  123. width: 100px;
  124. height: 100px;
  125. background: #edf6fd;
  126. border-radius: 100px;
  127. position: absolute;
  128. top: -50px;
  129. left: -30px;
  130. z-index: -1;
  131. }
  132. .bottom-right {
  133. width: 80px;
  134. height: 80px;
  135. background: #edf6fd;
  136. border-radius: 100px;
  137. position: absolute;
  138. bottom: -40px;
  139. right: -30px;
  140. z-index: -1;
  141. }
  142. }
  143. // 正常运维
  144. .type-1 {
  145. // background: url('../../assets/images/normal.png');
  146. border: 2.5px solid #aadfd0;
  147. .top-left,
  148. .bottom-right {
  149. background: #f0f9f7;
  150. }
  151. }
  152. // 重要维保
  153. .type-2 {
  154. border: 2.5px solid #9accf3;
  155. .top-left,
  156. .bottom-right {
  157. background: #edf6fd;
  158. }
  159. .type {
  160. color: #0481e1;
  161. }
  162. .tag {
  163. border-color: #0481e1;
  164. border-bottom: 3px solid transparent;
  165. }
  166. }
  167. // 重要维修
  168. .type-3 {
  169. border: 2.5px solid #efb1ad;
  170. .top-left,
  171. .bottom-right {
  172. background: #fcf1f0;
  173. }
  174. .type {
  175. color: #d83931;
  176. }
  177. .tag {
  178. border-color: #d83931;
  179. border-bottom: 3px solid transparent;
  180. }
  181. }
  182. // 更多设备
  183. .type-4 {
  184. display: flex;
  185. padding: 0;
  186. font-size: 14px;
  187. flex-direction: row;
  188. justify-content: center;
  189. align-items: center;
  190. position: relative;
  191. border: 2.5px solid #cecfcf;
  192. .type {
  193. color: #666666;
  194. height: 20px;
  195. font-size: 14px;
  196. line-height: 20px;
  197. text-align: center;
  198. }
  199. .tag {
  200. border-color: #666;
  201. border-bottom: 3px solid transparent;
  202. }
  203. .toggle {
  204. color: #0481e1;
  205. font-size: 12px;
  206. font-weight: 400;
  207. position: absolute;
  208. bottom: 6px;
  209. right: 8px;
  210. }
  211. }
  212. </style>