first

library/components/VabColorfulCard/index.js

@@ -0,0 +1,7 @@
+import VabColorfulCard from './index.vue'
+
+VabColorfulCard.install = function(app) {
+  app.component(VabColorfulCard.name, VabColorfulCard)
+}
+
+export default VabColorfulCard 

library/components/VabColorfulCard/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-card
+    :body-style="props.bodyStyle"
+    class="vab-colorful-card"
+    :shadow="props.shadow"
+    :style="
+      props.style
+        ? props.style
+        : {
+            background: `linear-gradient(135deg, ${props.colorFrom} 15%, ${props.colorTo} 85%)`,
+          }
+    "
+  >
+    <!-- 头部插槽 -->
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <!-- 使用 Iconify -->
+    <Icon v-if="props.icon" :icon="props.icon" class="card-icon" />
+    <!-- 默认插槽 -->
+    <slot></slot>
+  </el-card>
+</template>
+
+<script setup>
+import { ElCard } from 'element-plus'
+import { Icon } from '@iconify/vue'  // 导入 Iconify
+
+// 定义组件名称
+defineOptions({
+  name: 'VabColorfulCard',
+})
+
+// 定义 props
+const props = defineProps({
+  bodyStyle: {
+    type: [String, Object],
+    default: ''
+  },
+  shadow: {
+    type: String,
+    default: 'always',
+  },
+  colorFrom: {
+    type: String,
+    default: '',
+  },
+  colorTo: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.vab-colorful-card {
+  position: relative;
+  min-height: 120px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.1);  // 更淡的边框
+  border-radius: 4px;  // 稍微小一点的圆角
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);  // 更轻的阴影
+  transition: all 0.25s;
+
+  :deep(.el-card__header) {
+    color: var(--el-color-white);
+  }
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+
+  .card-icon {
+    position: absolute;
+    right: 20px;
+    font-size: 60px;
+    transform: rotate(15deg);
+  }
+}
+</style>