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(
    {
      info: {
        backgroundColor: "#f5f9ff",
        borderColor: "#e2eeff",
      },
      skyblue: {
        backgroundColor: "#f6fdff",
        borderColor: "#e3f8f4",
      },
      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>
:slotted(:deep(h2)), h2 {
  border: none;
  margin: 0;
  padding: 0;
}
.card {
  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 {
    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>