add card-container

2026-10-12 16:17:14 +08:00
parent a20e051e8a
commit b09011251a
8 changed files with 132 additions and 0 deletions
@@ -0,0 +1,91 @@
+<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">
+				<slot name="description">
+					<span v-text="description" />
+				</slot>
+			</p>
+		</div>
+		<div v-if="$slots.default" class="content">
+			<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">
+defineProps({
+	title: String,
+	description: String,
+	tips: String
+});
+
+defineSlots<{
+	default?: () => unknown;
+	title?: () => unknown;
+	description?: () => unknown;
+	tips?: () => unknown;
+}>();
+
+defineOptions({
+	name: "CardContainer"
+});
+</script>
+
+<style scoped lang="less">
+.card-container {
+	margin: 0 1rem;
+
+	:deep(.t-cell-group--card) {
+		margin: 0;
+	}
+
+	.card-title {
+
+		.title {
+			margin: 0 .875rem;
+		}
+
+		.description {
+			color: var(--td-text-color-secondary, #52607a);
+			margin: .5rem .875rem;
+			font-size: .875rem;
+		}
+	}
+
+	.content {
+		overflow: hidden;
+		background: var(--td-bg-color-container, #fff);
+		border-radius: 1rem;
+	}
+
+	.tips {
+		color: var(--td-text-color-secondary, #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>