index.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <el-card
  3. :body-style="bodyStyle"
  4. class="vab-colorful-card"
  5. :shadow="shadow"
  6. :style="
  7. style
  8. ? style
  9. : {
  10. background: `linear-gradient(120deg, ${colorFrom} 10%, ${colorTo})`,
  11. }
  12. "
  13. >
  14. <template v-if="$slots.header" #header>
  15. <slot name="header"></slot>
  16. </template>
  17. <vab-icon v-if="icon" :icon="icon" />
  18. <slot />
  19. </el-card>
  20. </template>
  21. <script lang="ts" setup>
  22. import { ElCard } from 'element-plus'
  23. defineOptions({
  24. name: 'VabColorfulCard',
  25. })
  26. defineProps({
  27. ...ElCard.props,
  28. shadow: {
  29. type: String,
  30. default: 'never',
  31. },
  32. colorFrom: {
  33. type: String,
  34. default: '',
  35. },
  36. colorTo: {
  37. type: String,
  38. default: '',
  39. },
  40. title: {
  41. type: String,
  42. default: '',
  43. },
  44. icon: {
  45. type: String,
  46. default: '',
  47. },
  48. style: {
  49. type: Object,
  50. default: () => {},
  51. },
  52. })
  53. </script>
  54. <style lang="scss" scoped>
  55. .vab-colorful-card {
  56. position: relative;
  57. min-height: 120px;
  58. cursor: pointer;
  59. * {
  60. color: var(--el-color-white);
  61. }
  62. :deep() {
  63. .el-card__header {
  64. color: var(--el-color-white);
  65. }
  66. }
  67. i {
  68. position: absolute;
  69. right: 20px;
  70. font-size: 60px;
  71. transform: rotate(15deg);
  72. }
  73. }
  74. </style>