CocoClassHelpDocs/components/HomeCard/HomeCard.vue

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

const props = withDefaults(
  defineProps<{
    title?: string;
    color?: "info" | "skyblue" | "white";
    link?: string;
    backgroundStyle?: Record<string, string>;
  }>(),
  {
    color: "info",
    backgroundStyle: { right: "16px", bottom: "24px" },
  }
);
const router = useRouter();
const { title, color } = toRefs(props);
const styles = computed(() => {
  return _.get(
    {
      primary: {
        backgroundColor: "#f5f9ff",
        borderColor: "#e2eeff",
        '--card-title-color': '#2B67CA',
      },
      info: {
        backgroundColor: "#f5f9ff",
        borderColor: "#e2eeff",
      },
      skyblue: {
        backgroundColor: "#f6fdff",
        borderColor: "#e3f8f4",
        '--card-title-color': '#2AA58B',
      },
      white: {
        borderColor: "#e2eeff",
        backgroundColor: "#fff",
      },
    },
    color.value
  );
});
const onClick = () => {
  if (props.link) {
    router.go(props.link);
  }
};
</script>
<template>
  <div class="card" :class="{ 'is-link': !!link }" :style="styles" @click="onClick">
    <div v-if="$slots.background" class="background" :style="props.backgroundStyle">
      <slot name="background"> </slot>
    </div>
    <slot name="title">
      <h2 v-if="title">
        {{ title }}
      </h2>
    </slot>
    <el-row :gutter="20" tag="section">
      <slot></slot>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
@use '@/.vitepress/theme/screen' as *;



:slotted(:deep(h2)),
h2 {
  border: none;
  margin: 0;
  padding: 0;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  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;
  }

  &.is-link {
    cursor: pointer;
  }

  .background {
    position: absolute;
  }

  h2 {
    color: var(--card-title-color);
    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;
  }
}

@include breakpoint(mobile) {
  .card {
    padding: 16px;
    min-height: 120px;
    gap: 12px;
    min-height: 130px;

    :deep(.card) {
      min-height: 130px;
      padding: 24px;
    }
  }
}
</style>