diff --git a/mock/list.ts b/mock/list.ts
new file mode 100644
index 0000000..bbaf394
--- /dev/null
+++ b/mock/list.ts
@@ -0,0 +1,503 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/getCardList",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          list: [
+            {
+              index: 1,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 2,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "人脸识别",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 3,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 4,
+              isEnabled: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "SSL证书",
+              state: "离线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 5,
+              isEnabled: true,
+              type: 3,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 6,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 7,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "CVM",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 8,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "SSL证书",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 9,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "SSL证书",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 10,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 11,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 12,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 13,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "云数据库",
+              state: "故障",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 14,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "SSL证书",
+              state: "故障",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 15,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 16,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "CVM",
+              state: "离线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 17,
+              isEnabled: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 18,
+              isEnabled: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "云数据库",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 19,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 20,
+              isEnabled: true,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "SSL证书",
+              state: "故障",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 21,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 22,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 23,
+              isEnabled: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "人脸识别",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 24,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "人脸识别",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 25,
+              isEnabled: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 26,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 27,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 28,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 29,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "CVM",
+              state: "故障",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 30,
+              isEnabled: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "离线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 31,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "CVM",
+              state: "故障",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 32,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 33,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 34,
+              isEnabled: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 35,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "云数据库",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 36,
+              isEnabled: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 37,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "CVM",
+              state: "离线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 38,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "云数据库",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 39,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "人脸识别",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 40,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "CVM",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 41,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 42,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 43,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "SSL证书",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 44,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 45,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "离线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 46,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 47,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "SSL证书",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 48,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "T-Sec 云防火墙",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            }
+          ]
+        }
+      };
+    }
+  }
+] as MockMethod[];
diff --git a/src/api/list.ts b/src/api/list.ts
new file mode 100644
index 0000000..5787148
--- /dev/null
+++ b/src/api/list.ts
@@ -0,0 +1,14 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    list: Array<any>;
+  };
+};
+
+/** 卡片列表 */
+export const getCardList = (data?: object) => {
+  return http.request<Result>("post", "/getCardList", { data });
+};
diff --git a/src/assets/control.png b/src/assets/control.png
new file mode 100644
index 0000000..58d983f
Binary files /dev/null and b/src/assets/control.png differ
diff --git a/src/assets/svg/device/control.svg b/src/assets/svg/device/control.svg
new file mode 100644
index 0000000..34cd73a
--- /dev/null
+++ b/src/assets/svg/device/control.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
+<path d="M21.002 7.35938H10.0897C9.36709 7.35912 8.6739 7.64553 8.16223 8.15577C7.65056 8.666 7.36219 9.35838 7.36041 10.081V21.9168C7.36194 22.6394 7.65006 23.3319 8.16155 23.8423C8.67305 24.3527 9.36613 24.6394 10.0887 24.6394H21.003C21.7256 24.6394 22.4187 24.3527 22.9302 23.8423C23.4416 23.3319 23.7298 22.6394 23.7313 21.9168V10.08C23.7293 9.35758 23.4408 8.66545 22.9291 8.15543C22.4175 7.6454 21.7244 7.35912 21.002 7.35938ZM11.9838 21.7834C11.9838 21.9039 11.936 22.0195 11.8508 22.1048C11.7657 22.1901 11.6502 22.2382 11.5297 22.2384H9.92361C9.80293 22.2384 9.68719 22.1905 9.60185 22.1051C9.51651 22.0198 9.46857 21.9041 9.46857 21.7834V20.1831C9.46857 19.9315 9.67209 19.728 9.92361 19.728H11.5268C11.7774 19.728 11.9819 19.9315 11.9819 20.1831V21.7834H11.9838ZM16.7454 21.7834C16.7454 21.9039 16.6976 22.0195 16.6124 22.1048C16.5273 22.1901 16.4118 22.2382 16.2913 22.2384H14.6852C14.5645 22.2384 14.4488 22.1905 14.3635 22.1051C14.2781 22.0198 14.2302 21.9041 14.2302 21.7834V20.1831C14.2302 20.1233 14.2419 20.0641 14.2648 20.0089C14.2877 19.9537 14.3212 19.9035 14.3635 19.8613C14.4057 19.819 14.4559 19.7855 14.5111 19.7627C14.5663 19.7398 14.6255 19.728 14.6852 19.728H16.2884C16.5399 19.728 16.7435 19.9315 16.7435 20.1831V21.7834H16.7454ZM21.507 21.7834C21.507 21.9041 21.459 22.0198 21.3737 22.1051C21.2884 22.1905 21.1726 22.2384 21.0519 22.2384H19.4468C19.3261 22.2384 19.2104 22.1905 19.1251 22.1051C19.0397 22.0198 18.9918 21.9041 18.9918 21.7834V20.1831C18.9918 20.1233 19.0035 20.0641 19.0264 20.0089C19.0493 19.9537 19.0828 19.9035 19.1251 19.8613C19.1673 19.819 19.2175 19.7855 19.2727 19.7627C19.3279 19.7398 19.3871 19.728 19.4468 19.728H21.05C21.3006 19.728 21.5041 19.9315 21.5041 20.1831V21.7834H21.5051H21.507ZM21.507 16.4458C21.5055 16.5147 21.4904 16.5826 21.4626 16.6457C21.4348 16.7088 21.3948 16.7658 21.345 16.8134C21.2952 16.861 21.2364 16.8984 21.1721 16.9232C21.1078 16.9481 21.0393 16.9601 20.9703 16.9584H10.0033C9.86441 16.961 9.73015 16.9085 9.62979 16.8125C9.52944 16.7165 9.47114 16.5846 9.46761 16.4458V11.1418C9.47139 11.0031 9.52979 10.8715 9.63012 10.7757C9.73045 10.6798 9.86457 10.6275 10.0033 10.6301H20.9694C21.1082 10.627 21.2426 10.6792 21.3431 10.7751C21.4435 10.871 21.5018 11.0029 21.5051 11.1418V16.4467L21.507 16.4458Z" fill="#154DDD"/>
+</svg>
diff --git a/src/assets/svg/device/monitor1.svg b/src/assets/svg/device/monitor1.svg
new file mode 100644
index 0000000..3d5f6fb
--- /dev/null
+++ b/src/assets/svg/device/monitor1.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
+<path d="M16 20C19.3137 20 22 17.3137 22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14C10 17.3137 12.6863 20 16 20Z" fill="#154DDD" stroke="#154DDD" stroke-width="2" stroke-linejoin="round"/>
+<path d="M16 16.3977C17.3255 16.3977 18.4 15.3231 18.4 13.9977C18.4 12.6722 17.3255 11.5977 16 11.5977C14.6745 11.5977 13.6 12.6722 13.6 13.9977C13.6 15.3231 14.6745 16.3977 16 16.3977Z" fill="white" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1474 20L12.8 24H19.2L17.8415 20H14.1474Z" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2 24H20.8" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/device/monitor2.svg b/src/assets/svg/device/monitor2.svg
new file mode 100644
index 0000000..2047a64
--- /dev/null
+++ b/src/assets/svg/device/monitor2.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
+<path d="M8.79999 16.7969V23.1969" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.79999 19.5992H11.6L13.2 17.1992" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.2 14.3984L19.7894 21.458C19.918 21.5438 20.0845 21.5477 20.217 21.4682L24 19.1984" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.2312 11.4867C9.01314 11.3413 8.99146 11.029 9.18734 10.8549L12.1711 8.2026C12.3062 8.08256 12.5049 8.06796 12.6561 8.16698L23.4818 15.2597C23.7248 15.4189 23.7224 15.7758 23.4774 15.9317L19.8198 18.2593C19.6862 18.3443 19.515 18.3425 19.3832 18.2547L9.2312 11.4867Z" fill="#154DDD" stroke="#154DDD" stroke-width="2"/>
+</svg>
diff --git a/src/router/modules/device.ts b/src/router/modules/device.ts
new file mode 100644
index 0000000..13bccc3
--- /dev/null
+++ b/src/router/modules/device.ts
@@ -0,0 +1,20 @@
+export default {
+  path: "/device",
+  meta: {
+    title: "设备列表",
+    icon: "homeFilled",
+    // showLink: false,
+    rank: 2
+  },
+  children: [
+    {
+      path: "/device",
+      name: "DeviceList",
+      component: () => import("@/views/device/index.vue"),
+      meta: {
+        title: "设备列表",
+        roles: ["admin", "common"]
+      }
+    }
+  ]
+} as RouteConfigsTable;
diff --git a/src/views/device/components/DeviceCard.vue b/src/views/device/components/DeviceCard.vue
new file mode 100644
index 0000000..74791d0
--- /dev/null
+++ b/src/views/device/components/DeviceCard.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import control from "@/assets/svg/device/control.svg?component";
+import monitor1 from "@/assets/svg/device/monitor1.svg?component";
+import monitor2 from "@/assets/svg/device/monitor2.svg?component";
+defineOptions({
+  name: "DeviceCard"
+});
+
+interface CardProductType {
+  isEnabled: boolean;
+  state: string;
+  description: string;
+  deviceSort: string;
+}
+
+const props = defineProps({
+  device: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const cardClass = computed(() => [
+  "device-card",
+  { "device-card_fault": props.device?.state === "故障" },
+  { "device-card_offline": props.device?.state === "离线" }
+]);
+
+const stateClass = computed(() => [
+  "device-state",
+  { "device-state_fault": props.device?.state === "故障" },
+  { "device-state_offline": props.device?.state === "离线" }
+]);
+
+const isEnabledClass = computed(() => [
+  "device-tag",
+  { "device-tag_off": !props.device?.isEnabled }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="device-header">
+      <div class="device--logo mr-2">
+        <control />
+        <monitor1 v-if="false" />
+        <monitor2 v-if="false" />
+      </div>
+      <div class="device-name">{{ device?.deviceSort }}</div>
+      <div :class="stateClass">{{ device?.state }}</div>
+    </div>
+    <div class="device-content">
+      <div class="device-info">
+        <div>设备代码：<span>DEVICE00002</span></div>
+        <div>设备分类：<span>DEVICE00002</span></div>
+        <div>
+          是否启用：
+          <el-tag
+            :class="isEnabledClass"
+            :color="
+              device?.isEnabled
+                ? 'rgba(82, 196, 26, 0.1)'
+                : 'rgba(232, 13, 13, 0.1)'
+            "
+            >{{ device?.isEnabled ? "已启用" : "未启用" }}</el-tag
+          >
+        </div>
+        <div>创建时间：<span>DEVICE00002</span></div>
+      </div>
+      <div class="device-icon"><img src="@/assets/control.png" /></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.device-card {
+  box-sizing: border-box;
+  height: 220px;
+  // background-color: skyblue;
+  border: 1.5px solid #52c41a;
+  border-radius: 8px;
+
+  &_fault {
+    border: 1.5px solid #e80d0d;
+  }
+
+  &_offline {
+    background-color: #f5f5f5;
+    border: 1.5px solid #dcdcdc;
+  }
+
+  .device-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 64px;
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+
+    .device-name {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 22px;
+      color: #000;
+      letter-spacing: 0;
+    }
+
+    .device-state {
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      width: 48px;
+      height: 24px;
+      color: #fff;
+      text-align: center;
+      background-color: #52c41a;
+      border-radius: 0 8px;
+
+      &_fault {
+        background-color: #e80d0d;
+      }
+
+      &_offline {
+        background-color: #dcdcdc;
+      }
+    }
+  }
+
+  .device-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 156px;
+    padding: 16px 0 16px 16px;
+
+    .device-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      font-size: 14px;
+      color: #666;
+
+      span {
+        color: #333;
+      }
+
+      .device-tag {
+        color: #52c41a;
+
+        &_off {
+          color: #e80d0d;
+        }
+      }
+    }
+
+    .device-icon {
+      display: flex;
+      align-items: flex-end;
+
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/device/components/TreeCard.vue b/src/views/device/components/TreeCard.vue
new file mode 100644
index 0000000..0910260
--- /dev/null
+++ b/src/views/device/components/TreeCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineOptions({
+  name: "TreeCard"
+});
+</script>
+
+<template>
+  <div class="treeCard">TreeCard</div>
+</template>
+
+<style lang="scss" scoped>
+.treeCard {
+  width: 240px;
+  height: 808px;
+  background-color: cadetblue;
+}
+</style>
diff --git a/src/views/device/index.vue b/src/views/device/index.vue
new file mode 100644
index 0000000..1bb1950
--- /dev/null
+++ b/src/views/device/index.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import TreeCard from "./components/TreeCard.vue";
+import DeviceCard from "./components/DeviceCard.vue";
+import { getCardList } from "@/api/list";
+import { onMounted, reactive, ref } from "vue";
+defineOptions({
+  name: "DeviceList"
+});
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const pagination = ref({ current: 1, pageSize: 9, total: 0 });
+
+const deviceList = ref([]);
+
+const searchValue = ref("");
+
+const formData = reactive({
+  deviceSort: "",
+  deviceState: "",
+  isEnabled: ""
+});
+const dataLoading = ref(true);
+// const onSubmit = () => {
+//   console.log("submit!");
+// };
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const getCardListData = async () => {
+  try {
+    const { data } = await getCardList();
+    deviceList.value = data.list;
+    console.log(data.list);
+    pagination.value = {
+      ...pagination.value,
+      total: data.list.length
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+onMounted(() => {
+  getCardListData();
+});
+</script>
+
+<template>
+  <div class="main flex justify-start p-4">
+    <TreeCard />
+    <div
+      class="ml-5 flex-1"
+      v-loading="dataLoading"
+      :element-loading-svg="svg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <el-form :inline="true" :model="formData" class="demo-form-inline">
+        <el-form-item label="设备分类">
+          <el-select
+            v-model="formData.deviceState"
+            placeholder="设备分类"
+            clearable
+          >
+            <el-option label="分类1" value="1" />
+            <el-option label="分类2" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备状态">
+          <el-select
+            v-model="formData.deviceState"
+            placeholder="设备状态"
+            clearable
+          >
+            <el-option label="在线" value="1" />
+            <el-option label="故障" value="2" />
+            <el-option label="离线" value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否启用">
+          <el-select
+            v-model="formData.deviceState"
+            placeholder="是否启用"
+            clearable
+          >
+            <el-option label="已启用" value="1" />
+            <el-option label="未启用" value="0" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div
+        v-loading="dataLoading"
+        :element-loading-svg="svg"
+        element-loading-svg-view-box="-10, -10, 50, 50"
+      >
+        <el-empty
+          v-show="
+            deviceList
+              .slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )
+              .filter(v =>
+                v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+              ).length === 0
+          "
+          :description="`${searchValue} 产品不存在`"
+        />
+        <template v-if="pagination.total > 0">
+          <el-row :gutter="16">
+            <el-col
+              class="mb-4"
+              v-for="(device, index) in deviceList
+                .slice(
+                  pagination.pageSize * (pagination.current - 1),
+                  pagination.pageSize * pagination.current
+                )
+                .filter(v =>
+                  v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+                )"
+              :key="index"
+              :xs="8"
+              :sm="8"
+              :md="8"
+              :lg="8"
+              :xl="8"
+            >
+              <DeviceCard :device="device" />
+            </el-col>
+          </el-row>
+          <el-pagination
+            v-model:currentPage="pagination.current"
+            class="float-right"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[9, 18, 36]"
+            :background="false"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="onPageSizeChange"
+            @current-change="onCurrentChange"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/workbench/components/chart/pie3D.vue b/src/views/workbench/components/chart/pie3D.vue
index 962630f..ee2a9bc 100644
--- a/src/views/workbench/components/chart/pie3D.vue
+++ b/src/views/workbench/components/chart/pie3D.vue
@@ -184,7 +184,7 @@ function getPie3D(pieData, internalDiameterRatio) {
       false,
       k,
       // 我这里做了一个处理，使除了第一个之外的值都是10
-      series[i].pieData.value
+      series[i].pieData.value === series[0].pieData.value ? 15 : 15
     );
 
     startValue = endValue;
@@ -222,6 +222,9 @@ function getPie3D(pieData, internalDiameterRatio) {
         color: "#fff" // 设置标示线的颜色
       }
     },
+    tooltip: {
+      show: false
+    },
     startAngle: 0, //起始角度，支持范围[0, 360]。
     clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
     radius: ["20%", "50%"],