diff --git a/src/components.d.ts b/src/components.d.ts
index 04ad279..fea7d82 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -18,9 +18,11 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
+    DetailBlock: typeof import('./components/DetailPage/DetailBlock.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']

diff --git a/src/components.d.ts b/src/components.d.ts
index 04ad279..fea7d82 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -18,9 +18,11 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
+    DetailBlock: typeof import('./components/DetailPage/DetailBlock.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']
diff --git a/src/components/DetailPage/DetailBlock.vue b/src/components/DetailPage/DetailBlock.vue
new file mode 100644
index 0000000..f886f0f
--- /dev/null
+++ b/src/components/DetailPage/DetailBlock.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup name="DetailBlock">
+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 {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+
+  .header {
+    position: relative;
+    height: 40px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    display: flex;
+
+    .title {
+      font-weight: 500;
+    }
+
+    .btns {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    padding: 0 10px 20px;
+    margin-top: 10px;
+  }
+}
+</style>

diff --git a/src/components.d.ts b/src/components.d.ts
index 04ad279..fea7d82 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -18,9 +18,11 @@
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
+    DetailBlock: typeof import('./components/DetailPage/DetailBlock.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']
diff --git a/src/components/DetailPage/DetailBlock.vue b/src/components/DetailPage/DetailBlock.vue
new file mode 100644
index 0000000..f886f0f
--- /dev/null
+++ b/src/components/DetailPage/DetailBlock.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup name="DetailBlock">
+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 {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+
+  .header {
+    position: relative;
+    height: 40px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    display: flex;
+
+    .title {
+      font-weight: 500;
+    }
+
+    .btns {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    padding: 0 10px 20px;
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/measure/train/trainLogAdd.vue b/src/views/measure/train/trainLogAdd.vue
index 5b49d76..f4a66b1 100644
--- a/src/views/measure/train/trainLogAdd.vue
+++ b/src/views/measure/train/trainLogAdd.vue
@@ -155,11 +155,8 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训记录
-      </h4>
-      <div>
+    <detail-page :title="`培训记录-${buttonType}`">
+      <template #btns>
         <el-button
           v-if=" buttonType !== '详情'"
           type="primary"
@@ -173,12 +170,10 @@
         <el-button v-if=" buttonType === '详情'" type="primary" @click="buttonType = '编辑'">
           编辑
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
         :inline="true"
         :model="formInline"
@@ -311,35 +306,32 @@
           </el-form-item>
         </div>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" :disabled="buttonType === '详情'" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" :disabled="buttonType === '详情'" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"