init

src/component/card/index.less

@@ -0,0 +1,46 @@
+:root {
+  --card-border-radius: var(--global-border-radius);
+}
+
+.layui-card {
+  margin-bottom: 15px;
+  background-color: #ffffff;
+  border-radius: var(--card-border-radius);
+}
+
+.layui-card .layui-card-header {
+  height: 42px;
+  line-height: 42px;
+  padding: 0 15px;
+  border-bottom: 1px solid #f6f6f6;
+  font-size: 14px;
+}
+
+.layui-card .layui-card-footer {
+  height: 42px;
+  line-height: 42px;
+  padding: 0 15px;
+  border-top: 1px solid #f6f6f6;
+  font-size: 14px;
+}
+
+.layui-card .layui-card-header .layui-card-header-extra {
+  float: right;
+}
+
+.layui-card .layui-card-body {
+  padding: 10px 15px;
+  line-height: 24px; 
+}
+
+.layui-card:last-child {
+  margin-bottom: 0;
+}
+
+.layui-card.is-hover-shadow:hover {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.layui-card.shadow {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}

src/component/card/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/card/index.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+export default {
+  name: "LayCard",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed, useSlots } from "vue";
+import { CardShadow } from "./interface";
+
+export interface CardProps {
+  title?: string;
+  shadow?: CardShadow;
+}
+
+const props = withDefaults(defineProps<CardProps>(), {
+  shadow: "always",
+});
+
+const slots = useSlots();
+
+const classes = computed(() => {
+  return {
+    shadow: props.shadow === "always",
+    "is-hover-shadow": props.shadow === "hover",
+  };
+});
+</script>
+
+<template>
+  <div class="layui-card" :class="classes">
+    <div class="layui-card-header" v-if="slots.title || title || slots.extra">
+      <span class="layui-card-header-title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <span class="layui-card-header-extra" v-if="slots.extra">
+        <slot name="extra"></slot>
+      </span>
+    </div>
+    <div class="layui-card-body">
+      <slot name="body" v-if="slots.body"></slot>
+      <slot v-else></slot>
+    </div>
+    <div class="layui-card-footer" v-if="slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>

src/component/card/interface.ts

@@ -0,0 +1 @@
+export type CardShadow = "always" | "hover" | "never";