|
@@ -0,0 +1,41 @@
|
|
|
+<!-- src/components/LYcom/Lcard/index.vue -->
|
|
|
+<template>
|
|
|
+ <div class="l-card" :style="{ height: cardHeight }">
|
|
|
+ <slot></slot>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed } from 'vue'
|
|
|
+
|
|
|
+// 定义组件props
|
|
|
+interface Props {
|
|
|
+ height?: string | number
|
|
|
+}
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ height: 'auto'
|
|
|
+})
|
|
|
+
|
|
|
+// 计算卡片高度
|
|
|
+const cardHeight = computed(() => {
|
|
|
+ if (typeof props.height === 'number') {
|
|
|
+ return props.height + 'px'
|
|
|
+ }
|
|
|
+ return props.height
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.l-card {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #DDE4ED;
|
|
|
+ background-color: #fff;
|
|
|
+ /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
|
|
|
+ padding: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+</style>
|