CocoClassHelpDocs/components/HomeCard/HomeCard.vue

<script setup lang="ts">
import { toRefs, computed } from "vue";
import _ from "lodash";

const props = withDefaults(
  defineProps<{
    title?: string;
    color?: "info" | "skyblue" | "white";
    span?: number;
  }>(),
  {
    color: "info",
    span: 24,
  }
);
const { title, color } = toRefs(props);
const styles = computed(() => {
  return _.get(
    {
      info: {
        backgroundColor: "#f5f9ff",
        borderColor: "#e2eeff",
      },
      skyblue: {
        backgroundColor: "#f6fdff",
        borderColor: "#e3f8f4",
      },
      white: {
        borderColor: "#e2eeff",
        backgroundColor: "#fff",
      },
    },
    color.value
  );
});
</script>
<template>
  <el-col tag="div" :span="span">
    <div class="card" :style="styles">
      <slot name="title">
        <h2 v-if="title">
          {{ title }}
        </h2>
      </slot>
      <el-row :gutter="20" tag="section">
        <slot></slot>
      </el-row>
    </div>
  </el-col>
</template>

<style lang="scss" scoped>
h2 {
  border: none;
  margin: 0;
  padding: 0;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  border-radius: 20px;
  padding: 32px;
  background: #f5f9ff;
  border: 1px solid #e2eeff;
  min-height: 240px;
  :deep(.card) {
    min-height: 162px;
  }
  h2 {
    display: flex;
    align-items: center;
    .prefix {
      margin-right: 8px;
    }
    .suffix {
      width: 24px;
      height: 24px;
      margin-left: 8px;
      color: #00000042;
    }
  }
  .el-row {
    row-gap: 20px;
    align-items: stretch;
  }
}
</style>