update point rule edit style

2026-08-12 23:29:54 +08:00
parent a7747b4d21
commit b4ba0062a9
3 changed files with 166 additions and 79 deletions
@@ -0,0 +1,72 @@
+<template>
+	<div class="card-container">
+		<card-title :title="title" :description="description">
+			<template v-if="$slots.title" #title>
+				<slot name="title" />
+			</template>
+			<template v-if="$slots.description" #description>
+				<slot name="description" />
+			</template>
+		</card-title>
+		<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;
+
+	.content {
+		overflow: hidden;
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+	}
+
+	.tips {
+		color: #52607a;
+		font-size: .8125rem;
+		line-height: 1.5;
+		padding: .25rem 1rem;
+	}
+}
+
+: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>