ChartCard.vue 2.0 KB

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