ChartCard.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
  3. <div class="chart-card-header">
  4. <div class="meta">
  5. <span class="chart-card-title">
  6. <slot name="title">
  7. {{ title }}
  8. </slot>
  9. </span>
  10. <span class="chart-card-action">
  11. <slot name="action"></slot>
  12. </span>
  13. </div>
  14. <div class="total">
  15. <slot name="total">
  16. <span>{{ typeof total === 'function' && total() || total }}</span>
  17. </slot>
  18. </div>
  19. </div>
  20. <div class="chart-card-content">
  21. <div class="content-fix">
  22. <slot></slot>
  23. </div>
  24. </div>
  25. <div class="chart-card-footer">
  26. <div class="field">
  27. <slot name="footer"></slot>
  28. </div>
  29. </div>
  30. </a-card>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'ChartCard',
  35. props: {
  36. title: {
  37. type: String,
  38. default: ''
  39. },
  40. total: {
  41. type: [Function, Number, String],
  42. required: false,
  43. default: null
  44. },
  45. loading: {
  46. type: Boolean,
  47. default: false
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="less" scoped>
  53. .chart-card-header {
  54. position: relative;
  55. overflow: hidden;
  56. width: 100%;
  57. .meta {
  58. position: relative;
  59. overflow: hidden;
  60. width: 100%;
  61. color: rgba(0, 0, 0, .45);
  62. font-size: 14px;
  63. line-height: 22px;
  64. }
  65. }
  66. .chart-card-action {
  67. cursor: pointer;
  68. position: absolute;
  69. top: 0;
  70. right: 0;
  71. }
  72. .chart-card-footer {
  73. border-top: 1px solid #e8e8e8;
  74. padding-top: 9px;
  75. margin-top: 8px;
  76. > * {
  77. position: relative;
  78. }
  79. .field {
  80. white-space: nowrap;
  81. overflow: hidden;
  82. text-overflow: ellipsis;
  83. margin: 0;
  84. }
  85. }
  86. .chart-card-content {
  87. margin-bottom: 12px;
  88. position: relative;
  89. height: 46px;
  90. width: 100%;
  91. .content-fix {
  92. position: absolute;
  93. left: 0;
  94. bottom: 0;
  95. width: 100%;
  96. }
  97. }
  98. .total {
  99. overflow: hidden;
  100. text-overflow: ellipsis;
  101. word-break: break-all;
  102. white-space: nowrap;
  103. color: #000;
  104. margin-top: 4px;
  105. margin-bottom: 0;
  106. font-size: 30px;
  107. line-height: 38px;
  108. height: 38px;
  109. }
  110. </style>