diff --git a/src/components.d.ts b/src/components.d.ts
index 3c8f9ce..04ad279 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -21,6 +21,7 @@
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
+    DetailPage: typeof import('./components/DetailPage/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
     EmployeesDialog: typeof import('./components/dialog/employeesDialog.vue')['default']
     EmployeesRoleDialog: typeof import('./components/dialog/employeesRoleDialog.vue')['default']

diff --git a/src/components.d.ts b/src/components.d.ts
index 3c8f9ce..04ad279 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -21,6 +21,7 @@
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
+    DetailPage: typeof import('./components/DetailPage/index.vue')['default']
     Editor: typeof import('./components/Editor/index.vue')['default']
     EmployeesDialog: typeof import('./components/dialog/employeesDialog.vue')['default']
     EmployeesRoleDialog: typeof import('./components/dialog/employeesRoleDialog.vue')['default']
diff --git a/src/components/DetailPage/index.vue b/src/components/DetailPage/index.vue
new file mode 100644
index 0000000..e627083
--- /dev/null
+++ b/src/components/DetailPage/index.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup name="DetailPage">
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+
+const slots = useSlots()
+</script>
+
+<template>
+  <div class="detail-main">
+    <div class="header">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div class="btns">
+        <slot name="btns" />
+      </div>
+    </div>
+    <div v-if="slots.default" class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.detail-main {
+  .header {
+    position: relative;
+    background-color: #fff;
+    height: 50px;
+    border-radius: 8px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    display: flex;
+
+    .title {
+      font-weight: 700;
+    }
+
+    .btns {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    padding: 20px 20px 20px 10px;
+    margin-top: 10px;
+    border-radius: 8px;
+  }
+}
+</style>