89 lines
1.4 KiB
Vue
89 lines
1.4 KiB
Vue
<template>
|
|
<div class="card-container">
|
|
<div class="card-title">
|
|
<h3 v-if="title || $slots.title" class="title">
|
|
<slot name="title">
|
|
<span v-text="title" />
|
|
</slot>
|
|
</h3>
|
|
<p v-if="description || $slots.description" class="description gray">
|
|
<slot name="description">
|
|
<span v-text="description" />
|
|
</slot>
|
|
</p>
|
|
</div>
|
|
<div v-if="$slots.default" class="content bg-white">
|
|
<slot />
|
|
</div>
|
|
<div v-if="tips || $slots.tips" class="tips">
|
|
<slot name="tips">
|
|
<span v-text="tips" />
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
tips?: string;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
defineSlots<{
|
|
default?: () => unknown;
|
|
title?: () => unknown;
|
|
description?: () => unknown;
|
|
tips?: () => unknown;
|
|
}>();
|
|
|
|
defineOptions({
|
|
name: "CardContainer"
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.card-container {
|
|
margin: 0 1rem;
|
|
|
|
.card-title {
|
|
|
|
.title {
|
|
margin: 0 .875rem;
|
|
}
|
|
|
|
.description {
|
|
margin: .5rem .875rem;
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
overflow: hidden;
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.tips {
|
|
color: #52607a;
|
|
padding: .25rem 1rem;
|
|
font-size: .8125rem;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.card-container {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
|
|
.tips {
|
|
color: #94a3b8;
|
|
background: rgba(148, 163, 184, .14);
|
|
}
|
|
}
|
|
}
|
|
</style>
|