1

components/hr-card/hr-card.uvue

@@ -0,0 +1,36 @@
+<template>
+	<view :class="cardClass" :style="cardStyle">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+
+	/**
+	 * 通用卡片容器
+	 * variant：default(默认) / list(自带列表内边距) / tight(紧凑) / danger(预警红底) / flat(无边框)
+	 */
+	const props = defineProps({
+		variant : { type: String, default: 'default' },
+		/** 自定义内边距，传空取 variant 默认值 */
+		padding : { type: String, default: '' },
+		/** 自定义外边距（底部） */
+		marginBottom : { type: String, default: '' }
+	})
+
+	const cardClass = computed(() : string => {
+		let c = 'hr-card'
+		if (props.variant == 'list') { c += ' hr-card-list' }
+		if (props.variant == 'danger') { c += ' hr-card-danger' }
+		if (props.variant == 'tight') { c += ' hr-card-tight' }
+		return c
+	})
+
+	const cardStyle = computed(() : string => {
+		let s = ''
+		if (props.padding != '') { s += `padding:${props.padding};` }
+		if (props.marginBottom != '') { s += `margin-bottom:${props.marginBottom};` }
+		return s
+	})
+</script>