diff --git a/devui/card/__tests__/card.spec.ts b/devui/card/__tests__/card.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b70b4692396b63e7b511fbcbf5e35d9fe5e3d8d6
--- /dev/null
+++ b/devui/card/__tests__/card.spec.ts
@@ -0,0 +1,165 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import DCard from '../src/card';
+import DAvatar from '../../avatar/src/avatar';
+
+describe('Card', () => {
+    it('render', async () => {
+        const wrapper = mount({
+          components: {
+            DCard,
+            DAvatar
+          },
+          template: `
+            <d-card class="d-card">
+              <template #cardAvatar>
+                <d-avatar name="DevUI"></d-avatar>
+              </template>
+              <template #cardTitle>
+                DEVUI Course
+              </template>
+              <template #cardSubtitle>
+                DevUI
+              </template>
+              <template #cardContent>
+                DEVUI
+              </template>
+              <template #cardActions>
+                <div class="card-block">
+                  btn
+                </div>
+              </template>
+            </d-card>
+          `,
+          
+        });
+    
+        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+        expect(avatar.classes()).toContain('devui-avatar');
+        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
+        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
+        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
+        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+        expect(wrapper.find('.card-block').text()).toBe('btn')
+    });
+    it('v-slot:', async () => {
+        const wrapper = mount({
+          components: {
+            DCard,
+            DAvatar
+          },
+          template: `
+            <d-card class="d-card">
+              <template v-slot:cardAvatar>
+                <d-avatar name="DevUI"></d-avatar>
+              </template>
+              <template v-slot:cardTitle>
+                DEVUI Course
+              </template>
+              <template v-slot:cardSubtitle>
+                DevUI
+              </template>
+              <template v-slot:cardContent>
+                DEVUI
+              </template>
+              <template v-slot:cardActions>
+                <div class="card-block">
+                  btn
+                </div>
+              </template>
+            </d-card>
+          `,
+          
+        });
+    
+        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+        expect(avatar.classes()).toContain('devui-avatar');
+        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
+        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
+        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
+        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+        expect(wrapper.find('.card-block').text()).toBe('btn')
+    });
+    it('src', async () => {
+        const wrapper = mount({
+          components: {
+            DCard,
+            DAvatar
+          },
+          template: `
+            <d-card class="d-card" :src="'https://devui.design/components/assets/image1.png'">
+              <template #cardAvatar>
+                <d-avatar name="DevUI"></d-avatar>
+              </template>
+              <template #cardTitle>
+                DEVUI Course
+              </template>
+              <template #cardSubtitle>
+                DevUI
+              </template>
+              <template #cardContent>
+                DEVUI
+              </template>
+              <template #cardActions>
+                <div class="card-block">
+                  btn
+                </div>
+              </template>
+            </d-card>
+          `,
+          
+        });
+    
+        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+        expect(avatar.classes()).toContain('devui-avatar');
+        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
+        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
+        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+        expect(wrapper.find('.devui-card-meta').attributes('src').includes('https://devui.design/components/assets/image1.png')).toBeTruthy();
+        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
+        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+        expect(wrapper.find('.card-block').text()).toBe('btn')
+    });
+    it('src', async () => {
+        const wrapper = mount({
+          components: {
+            DCard,
+            DAvatar
+          },
+          template: `
+            <d-card class="d-card" :align="'spaceBetween'">
+              <template #cardAvatar>
+                <d-avatar name="DevUI"></d-avatar>
+              </template>
+              <template #cardTitle>
+                DEVUI Course
+              </template>
+              <template #cardSubtitle>
+                DevUI
+              </template>
+              <template #cardContent>
+                DEVUI
+              </template>
+              <template #cardActions>
+                <div class="card-block">
+                  btn
+                </div>
+              </template>
+            </d-card>
+          `,
+          
+        });
+    
+        expect(wrapper.find('.devui-card-actions-align-spaceBetween').exists()).toBeTruthy();
+        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+        expect(avatar.classes()).toContain('devui-avatar');
+        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
+        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
+        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
+        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+        expect(wrapper.find('.card-block').text()).toBe('btn')
+    });
+})
\ No newline at end of file
diff --git a/docs/components/slider/index.md b/docs/components/slider/index.md
index 171e2e5b04e6d76a5e19f23f271a2c4fa47c738c..1b0f87d43756d68fdd98d615c086a1075994c529 100644
--- a/docs/components/slider/index.md
+++ b/docs/components/slider/index.md
@@ -124,5 +124,4 @@ d-slider 参数
 | min       | number  | 0     | 可选，滑动输入条的最小值                                |[基本用法](#基本用法)       |
 | step      | number  | 1     | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[基本用法](#可设置Step的滑动组件)       |
 | disabled  | boolean | false | 可选，值为 true 时禁止用户输入                          |[基本用法](#禁止输入态)      |
-| showInput | boolean | false | 可选，值为 true 显示输入框                                |[基本用法](#带有输入框的滑动组件)        |
-
+| showInput | boolean | false | 可选，值为 true 显示输入框                                |[基本用法](#带有输入框的滑动组件)        |
\ No newline at end of file