diff --git a/src/assets/photo.png b/src/assets/photo.png
new file mode 100644
index 0000000..90e64c2
Binary files /dev/null and b/src/assets/photo.png differ
diff --git a/src/assets/photo1.png b/src/assets/photo1.png
new file mode 100644
index 0000000..403f945
Binary files /dev/null and b/src/assets/photo1.png differ
diff --git a/src/router/router.js b/src/router/router.js
index bdd1dbb..f22ca1c 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,10 +1,12 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import ResourceChart from "../views/resource-chart.vue";
 import OrganizationChart from "../views/organization-chart.vue";
+import DemoChart from "../views/demo-chart.vue";
 
 const routes = [
     { name: 'resource-chart', path: "/resource-chart", component: ResourceChart },
-    { name: 'organization-chart', path: "/organization-chart", component: OrganizationChart }
+    { name: 'organization-chart', path: "/organization-chart", component: OrganizationChart },
+    { name: 'demo-chart', path: "/demo-chart", component: DemoChart },
 ];
 
 // 初始化路由
diff --git a/src/style.css b/src/style.css
index 0ac4856..3d8bf7a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -62,7 +62,6 @@ button:focus-visible {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -78,3 +77,59 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+
+.tree-org-node__content .tree-org-node__text {
+  padding: 0 !important;
+}
+
+.tree-org-node__content .tree-org-node__text{
+  width: 150px;
+  height: 120px;
+}
+
+.custom-content-top{
+  height: 30px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 30px;
+  font-weight: 900;
+  color: #fff;
+  background-color: #0e339b;
+}
+
+.custom-content-center{
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center; 
+  width: 100%; 
+  height: calc(100% - 30px);
+}
+
+.custom-content-left {
+  flex: 1;
+  height: 100%;
+}
+
+.custom-content-left img{
+  width: 100%;
+  height: 100%;
+}
+
+.custom-content-right {
+  font-size: 14px;
+  flex: 1;
+  height: 100%;
+  font-weight: 400;
+  background-color: #e6f6ff;
+  color: #000;
+}
+
+.custom-content-right-job,.custom-content-right-lastname {
+    margin-top: 12px;
+    width: 70px;
+    white-space: nowrap; /* 文字不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+    
+}
\ No newline at end of file
diff --git a/src/views/demo-chart.vue b/src/views/demo-chart.vue
new file mode 100644
index 0000000..ced9d1e
--- /dev/null
+++ b/src/views/demo-chart.vue
@@ -0,0 +1,216 @@
+<template>
+    <div style="height: 95vh;">
+        <vue3-tree-org
+            :data="data"
+            :center="center"
+            :render-content="renderContent"
+            :horizontal="horizontal"
+            :props="{id: 'id', pid: 'pid', deptName: 'deptName', jobName: 'jobName',lastName:'lastName',children: 'children',url:'url',type:'type'}"
+            :collapsable="collapsable"
+            :label-style="style"
+            :scalable="true"
+            :default-expand-level="10"
+        >
+            <!-- 自定义节点内容 -->
+            <template v-slot="{node}">
+                <div v-if="node.$$data.type" class="tree-org-node__text node-label">
+                    <div class="custom-content-top">{{node.$$data.deptName}}</div>
+                    <div class="custom-content-center">
+                      <div class="custom-content-left">
+                        <img :src="node.$$data.url" alt="" />
+                      </div>
+                      <div class="custom-content-right">
+                        <div class="custom-content-right-job">
+                          {{node.$$data.jobName}}
+                        </div>
+                        <div class="custom-content-right-lastname">
+                          {{node.$$data.lastName}}
+                        </div>
+                      </div>
+                  </div>
+                </div>
+                <div v-else class="tree-org-node__text node-label">
+                  <div class="custom-content-top">{{node.$$data.deptName}}</div>
+                  <div v-for="item in node.$$data.list" :key="item.id" class="custom-content-center">
+                      <div class="custom-content-left">
+                        <img :src="item.url" alt="" />
+                      </div>
+                      <div class="custom-content-right">
+                        <div class="custom-content-right-job">
+                          {{item.jobName}}
+                        </div>
+                        <div class="custom-content-right-lastname">
+                          {{item.lastName}}
+                        </div>
+                      </div>
+                  </div>
+                </div>
+            </template>
+            <!-- 自定义展开按钮 -->
+            <template v-slot:expand="{node}">
+                <div>{{node.children.length}}</div>
+            </template>
+        </vue3-tree-org>
+    </div>
+</template>
+<script>
+
+
+export default {
+  name: "demo-chart",
+  data() {
+    return {
+      data: {
+          "id":1,"type":true,"deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"/src/assets/photo.png",
+          "children":[
+              {
+                  "id":2,"pid":1,"type":true,"deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"/src/assets/photo.png",
+                  "children":[
+                      {"id":11,"pid":3,"type":true,"deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"/src/assets/photo1.png",
+                        "children":[
+                        {"id":24,"pid":11,"type":true,"deptName":"研发部","jobName":"经理","lastName":"王益民","url":"/src/assets/photo1.png",
+                          "children":[
+                            {"id":26,"pid":24,"type":true,"deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"/src/assets/photo1.png",
+                              "children":[
+                              {"id":null,"pid":26,"type":false,"deptName":"项目一组",
+                                "list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"/src/assets/photo1.png"},
+                                {"id":33,"jobName":"产品工程师","lastName":"王培文","url":"/src/assets/photo1.png"},
+                                {"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"/src/assets/photo1.png"},
+                                {"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"/src/assets/photo1.png"}]
+                              }
+                              ]
+                            },
+                            {"id":27,"pid":24,"type":true,"deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"/src/assets/photo1.png",
+                              "children":[
+                                {"id":null,"pid":27,"type":false,"deptName":"项目二组",
+                                  "list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"/src/assets/photo1.png"},
+                                  {"id":37,"jobName":"助理工程师","lastName":"周杰","url":"/src/assets/photo1.png"}]
+                                }
+                              ]
+                            },
+                            {"id":28,"pid":24,"type":true,"deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"/src/assets/photo1.png",
+                              "children":[
+                                {"id":null,"pid":28,"type":false,"deptName":"项目三组",
+                                  "list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"/src/assets/photo1.png"},
+                                  {"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"/src/assets/photo1.png"},
+                                  {"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"/src/assets/photo1.png"},
+                                  {"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"/src/assets/photo1.png"},
+                                  {"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"/src/assets/photo1.png"},
+                                  {"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"/src/assets/photo1.png"}]
+                                }
+                              ]
+                            },
+                            {"id":29,"pid":24,"type":true,"deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"/src/assets/photo1.png",
+                              "children":[
+                                {"id":null,"pid":29,"type":false,"deptName":"项目四组",
+                                    "list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"/src/assets/photo1.png"},
+                                    {"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"/src/assets/photo1.png"}]
+                                  }
+                              ]
+                            },
+                            {"id":30,"pid":24,"type":true,"deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"/src/assets/photo1.png",},
+                            {"id":31,"pid":24,"type":true,"deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"/src/assets/photo1.png",
+                              "children":[
+                              {"id":null,"pid":31,"type":false,"deptName":"项目六组",
+                                    "list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"/src/assets/photo1.png"}]
+                                  }
+                              ]
+                            },
+                            {"id":32,"pid":24,"type":true,"deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"/src/assets/photo1.png",}
+                          ]
+                        },
+                        {"id":25,"pid":11,"type":true,"deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"/src/assets/photo.png",},
+                        ]
+                      },
+                      {"id":12,"pid":3,"type":true,"deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"/src/assets/photo1.png",},
+                      {"id":13,"pid":3,"type":true,"deptName":"财务部","jobName":"经理","lastName":"杨清","url":"/src/assets/photo1.png",},
+                      {"id":14,"pid":3,"type":true,"deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"/src/assets/photo1.png",
+                        "children":[
+                        {"id":16,"pid":14,"type":true,"deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"/src/assets/photo1.png",
+                          "children":[
+                              {"id":null,"pid":16,"type":false,"deptName":"品管部",
+                                    "list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"/src/assets/photo1.png"},
+                                    {"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"/src/assets/photo1.png"},
+                                    ]
+                                  }
+                              ]
+                        },
+                        {"id":17,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"/src/assets/photo1.png",
+                          "children":[
+                              {"id":null,"pid":14,"type":false,"deptName":"品管部",
+                                    "list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"/src/assets/photo1.png"}]
+                                  }
+                              ]
+                        },
+                        {"id":18,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"/src/assets/photo1.png",
+                          "children":[
+                              {"id":null,"pid":18,"type":false,"deptName":"品管部",
+                                    "list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"/src/assets/photo1.png"},
+                                    {"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"/src/assets/photo1.png"},
+                                    ]
+                                  }
+                              ]
+                        },
+                        {"id":19,"pid":14,"type":true,"deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"/src/assets/photo1.png"}
+                        ]
+                      },
+                      {"id":23,"pid":3,"type":true,"deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"/src/assets/photo.png",
+                        "children":[
+                          {"id":15,"pid":23,"type":true,"deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
+                          {"id":20,"pid":23,"type":true,"deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
+                          {"id":21,"pid":23,"type":true,"deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
+                          {"id":22,"pid":23,"type":true,"deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
+                        ]
+                      },
+
+                     
+                  ]
+              },
+              {
+                  "id":3,"pid":1,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"/src/assets/photo.png",
+                  "children":[
+                      {"id":6,"pid":2,"type":true,"deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"/src/assets/photo1.png",},
+                      {"id":8,"pid":2,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"/src/assets/photo1.png",}
+                  ]
+              },
+             
+          ]
+      },
+      center:true,
+      horizontal: false,
+      collapsable: true,
+      expandAll: true,
+      style: {
+        background: "#fff",
+        color: "#5e6d82",
+      },
+    };
+  },
+  
+    
+
+
+  methods: {
+    onMenus({ node, command }) {
+      console.log(node, command);
+    },
+    onNodeClick(e, data) {
+      alert(data.title);
+    },
+    expandChange() {
+      this.toggleExpand(this.data, this.expandAll);
+    },
+  },
+};
+</script>
+<!-- <style lang="scss" scoped>
+.tree-org-node__text {
+    text-align: left;
+    font-size: 14px;
+    .custom-content {
+        padding-bottom: 8px;
+        margin-bottom: 8px;
+        border-bottom: 1px solid currentColor;
+    }
+}
+</style> -->