diff --git a/snowy-admin-web/src/components/XnCardList/README.md b/snowy-admin-web/src/components/XnCardList/README.md
new file mode 100644
index 00000000..e1b17a1e
--- /dev/null
+++ b/snowy-admin-web/src/components/XnCardList/README.md
@@ -0,0 +1,62 @@
+# 小诺卡片列表的组件
+
+## 说明
+
+### props定义
+
+| 序号 | 编码         | 类型      | 说明     | 示例                     |
+|----|------------|---------|--------|------------------------|
+| 1  | grid       | Object  | grid布局 | 见：and-design定义（Grid栅格） |
+| 2  | dataSource | Array   | 数据源    | 见：dataSource字段定义       |
+| 3  | page       | Object  | 分页     | 见：page字段定义             |
+| 4  | actions    | Array   | 操作数组   | 见：action字段定义           |
+| 5  | loading    | Boolean | 加载中提示  | -                      |
+
+> dataSource字段定义
+
+| 序号 | 编码       | 类型     | 说明              | 示例            |
+|----|----------|--------|-----------------|---------------|
+| 1  | title    | String | 标题              | 设备编码          |
+| 2  | subTitle | String | 副标题             | 设备名称          |
+| 3  | img      | String | 图片              |               |
+| 4  | contents | Array  | 内容              | 见：content字段定义 |
+| 5  | badge    | Object | 徽标              | 见：badge字段定义   |
+| 6  | record   | Object | 数据记录，emit触发回调参数 |               |
+
+> content字段定义
+
+| 序号 | 编码    | 类型     | 说明 | 示例   |
+|----|-------|--------|----|------|
+| 1  | label | String | 标签 | 所属产品 |
+| 2  | value | Object | 值  | 透传   |
+
+> badge字段定义
+
+| 序号 | 编码    | 类型     | 说明 | 示例                     |
+|----|-------|--------|----|------------------------|
+| 1  | text  | String | 标签 | 所属产品                   |
+| 2  | color | String | 颜色 | 见：ant-design定义（预设、自定义） |
+
+> action字段定义
+
+| 序号 | 编码    | 类型     | 说明 | 示例      |
+|----|-------|--------|----|---------|
+| 1  | key   | String | 键  | setting |
+| 2  | label | String | 标签 | 所属产品    |
+| 3  | icon  | String | 图标 | setting |
+| 4  | color | String | 颜色 | red     |
+
+> page字段定义
+
+| 序号 | 编码      | 类型     | 说明   | 示例 |
+|----|---------|--------|------|----|
+| 1  | current | Number | 当前页  | 1  |
+| 2  | size    | Number | 每页大小 | 6  |
+| 3  | total   | Number | 总数   | 0  |
+
+### emits定义
+
+| 序号 | 方法名         | 参数类型   | 参数示例                        |
+|----|-------------|--------|-----------------------------|
+| 1  | action      | Object | {key: 'edit', record:{...}} |
+| 2  | page-change | Number | 1                           |
diff --git a/snowy-admin-web/src/components/XnCardList/index.vue b/snowy-admin-web/src/components/XnCardList/index.vue
new file mode 100644
index 00000000..9b95dcc3
--- /dev/null
+++ b/snowy-admin-web/src/components/XnCardList/index.vue
@@ -0,0 +1,105 @@
+<template>
+	<a-list :grid="grid" :data-source="props.dataSource" :pagination="pagination" :loading="loading">
+		<template #renderItem="{ item, index }">
+			<a-list-item :key="index">
+				<a-badge-ribbon :text="item.badge.text" :color="item.badge.color?item.badge.color:''">
+					<a-card class="xn-card">
+						<template #title>
+							<a-tag color="orange">{{ item.title }}</a-tag>
+						</template>
+						<template #actions>
+							<template v-for="{ key, label, icon, color} in props.actions">
+								<a-tooltip :title="label">
+									<component :is="icon" @click="doAction(key, item)" :style="{color:color}"/>
+								</a-tooltip>
+							</template>
+						</template>
+						<a-card-meta class="xn-card-meta">
+							<template #avatar>
+								<a-avatar shape="square" :size="64" :src="item.img"/>
+							</template>
+							<template #title>
+								<span class="xn-card-meta-title">{{ item.subTitle }}</span>
+							</template>
+							<template #description>
+								<div v-if="item.contents" v-for="content in item.contents">
+									<span>{{ content.label }}：{{ content.value }}</span>
+								</div>
+							</template>
+						</a-card-meta>
+					</a-card>
+				</a-badge-ribbon>
+			</a-list-item>
+		</template>
+	</a-list>
+</template>
+
+<script setup name="xnCardList">
+import {message} from 'ant-design-vue'
+
+const props = defineProps({
+	// grid布局
+	grid: {
+		type: Object,
+		default: () => {
+			return {gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3, xxxl: 4}
+		}
+	},
+	// 数据源
+	dataSource: {
+		type: Array,
+		required: true
+	},
+	// 分页
+	page: {
+		type: Object,
+		required: true
+	},
+	// 动作
+	actions: {
+		type: Array,
+		default: () => []
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	}
+})
+const emit = defineEmits(['action', 'page-change'])
+
+// 分页参数
+const {current, size, total} = toRefs(props.page)
+const pagination = reactive({
+	onChange: current => {
+		emit('page-change', current)
+	},
+	current: current,
+	pageSize: size,
+	total: total
+})
+
+// 触发 action
+const doAction = (key, item) => {
+	if (!item.record) {
+		message.error('记录参数[record]错误')
+		return
+	}
+	emit('action', {key, record: item.record})
+}
+</script>
+
+<style lang="less" scoped>
+.xn-card {
+	background: linear-gradient(141.6deg, var(--primary-1) 0%, rgba(255, 255, 255, 0) 70%);
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+
+	.xn-card-meta {
+		display: flex;
+		align-items: center;
+
+		.xn-card-meta-title {
+			font-size: 14px;
+		}
+	}
+}
+</style>