diff --git a/src/assets/styles/page-cards.scss b/src/assets/styles/page-cards.scss
index 61e0884..07c334a 100644
--- a/src/assets/styles/page-cards.scss
+++ b/src/assets/styles/page-cards.scss
@@ -80,7 +80,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 10px;
 }
 
 .header-right {
diff --git a/src/views/professional/professionaltitlerelation/index.vue b/src/views/professional/professionaltitlerelation/index.vue
index 2ba74ec..2ca323e 100755
--- a/src/views/professional/professionaltitlerelation/index.vue
+++ b/src/views/professional/professionaltitlerelation/index.vue
@@ -1,120 +1,126 @@
 <template>
-  <div class="titlerelation-page">
+  <div class="page-cards">
     <div class="page-wrapper">
-      <!-- 内容区：最上搜索，其次标题+按钮，再下方表格 -->
-      <div class="content-block">
-        <!-- 最上：搜索区 -->
-        <div v-show="showSearch" class="content-block__filter">
-          <search-form
-            :model="search"
-            ref="searchFormRef"
-            @keyup-enter="handleFilter"
-          >
-            <template #default="{ visible }">
-              <template v-if="visible">
-                <el-form-item label="姓名" prop="realName">
-                  <el-input
-                    v-model="search.realName"
-                    clearable
-                    placeholder="请输入姓名"
-                    class="filter-input"
+      <!-- 筛选卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <search-form
+          :model="search"
+          ref="searchFormRef"
+          :show-filter-title="false"
+          @keyup-enter="handleFilter"
+        >
+          <template #default="{ visible }">
+            <template v-if="visible">
+              <el-form-item label="姓名" prop="realName">
+                <el-input
+                  v-model="search.realName"
+                  clearable
+                  placeholder="请输入姓名"
+                  class="filter-input"
+                />
+              </el-form-item>
+              <el-form-item label="工号" prop="teacherNo">
+                <el-input
+                  v-model="search.teacherNo"
+                  clearable
+                  placeholder="请输入工号"
+                  class="filter-input"
+                />
+              </el-form-item>
+              <el-form-item label="审核状态" prop="state">
+                <el-select
+                  v-model="search.state"
+                  clearable
+                  placeholder="请选择审核状态"
+                  class="filter-select"
+                >
+                  <el-option
+                    v-for="item in professionalState"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
                   />
-                </el-form-item>
-                <el-form-item label="工号" prop="teacherNo">
-                  <el-input
-                    v-model="search.teacherNo"
-                    clearable
-                    placeholder="请输入工号"
-                    class="filter-input"
+                </el-select>
+              </el-form-item>
+              <el-form-item label="职称" prop="professionalTitleConfigId">
+                <el-select
+                  v-model="search.professionalTitleConfigId"
+                  clearable
+                  filterable
+                  placeholder="请选择职称"
+                  class="filter-select"
+                >
+                  <el-option
+                    v-for="item in professionalTitleList"
+                    :key="item.id"
+                    :label="item.professionalTitle"
+                    :value="item.id"
                   />
-                </el-form-item>
-                <el-form-item label="审核状态" prop="state">
-                  <el-select
-                    v-model="search.state"
-                    clearable
-                    placeholder="请选择审核状态"
-                    class="filter-select"
-                  >
-                    <el-option
-                      v-for="item in professionalState"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="职称" prop="professionalTitleConfigId">
-                  <el-select
-                    v-model="search.professionalTitleConfigId"
-                    clearable
-                    filterable
-                    placeholder="请选择职称"
-                    class="filter-select"
-                  >
-                    <el-option
-                      v-for="item in professionalTitleList"
-                      :key="item.id"
-                      :label="item.professionalTitle"
-                      :value="item.id"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="专业技术职务" prop="majorStation">
-                  <el-select
-                    v-model="search.majorStation"
-                    clearable
-                    filterable
-                    placeholder="请选择专业技术职务"
-                    class="filter-select"
-                  >
-                    <el-option
-                      v-for="item in majorStationList"
-                      :key="item.id"
-                      :label="item.majorStationName"
-                      :value="item.id"
-                    />
-                  </el-select>
-                </el-form-item>
-              </template>
-            </template>
-            <template #actions>
-              <el-form-item>
-                <el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
-                <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="专业技术职务" prop="majorStation">
+                <el-select
+                  v-model="search.majorStation"
+                  clearable
+                  filterable
+                  placeholder="请选择专业技术职务"
+                  class="filter-select"
+                >
+                  <el-option
+                    v-for="item in majorStationList"
+                    :key="item.id"
+                    :label="item.majorStationName"
+                    :value="item.id"
+                  />
+                </el-select>
               </el-form-item>
             </template>
-          </search-form>
-        </div>
+          </template>
+          <template #actions>
+            <el-form-item>
+              <el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
+              <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+            </el-form-item>
+          </template>
+        </search-form>
+      </el-card>
 
-        <!-- 其次：左侧按钮，右侧 RightToolbar -->
-        <div class="content-block__header">
-          <div class="header-actions">
-            <div class="action-group">
-              <el-button
-                v-if="hasAuth('professional_professionaltitlerelation_add')"
-                type="primary"
-                icon="FolderAdd"
-                @click="handleAdd"
-              >新增</el-button>
-              <el-button
-                v-if="hasAuth('professional_teacherbase_export')"
-                type="warning"
-                plain
-                icon="Download"
-                @click="handleDownLoadWord"
-                :loading="exportLoading"
-              >导出信息</el-button>
-            </div>
-            <div class="header-right">
-              <RightToolbar
-                v-model:showSearch="showSearch"
-                @queryTable="getDataList"
-              />
+      <!-- 列表内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Medal /></el-icon>
+              职称关系
+            </span>
+            <div class="header-actions">
+              <div class="action-group">
+                <el-button
+                  v-if="hasAuth('professional_professionaltitlerelation_add')"
+                  type="primary"
+                  icon="FolderAdd"
+                  @click="handleAdd"
+                >新增</el-button>
+                <el-button
+                  v-if="hasAuth('professional_teacherbase_export')"
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleDownLoadWord"
+                  :loading="exportLoading"
+                >导出信息</el-button>
+              </div>
+              <div class="header-right">
+                <RightToolbar
+                  v-model:showSearch="showSearch"
+                  @queryTable="getDataList"
+                />
+              </div>
             </div>
           </div>
-        </div>
+        </template>
 
-        <!-- 再下方：表格 -->
+        <!-- 表格 -->
         <el-table
           ref="tableRef"
           :data="state.dataList"
@@ -223,7 +229,7 @@
           @current-change="currentChangeHandle"
           @size-change="sizeChangeHandle"
         />
-      </div>
+      </el-card>
     </div>
 
     <!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
@@ -258,6 +264,7 @@ import {
 import { getProfessionalTitleList } from '/@/api/professional/rsbase/professionaltitlelevelconfig'
 import { getMajorStationList } from '/@/api/professional/rsbase/professionalmajorstation'
 import { defineAsyncComponent } from 'vue'
+import { Medal } from '@element-plus/icons-vue'
 // 子组件
 const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
 const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
@@ -469,17 +476,7 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-.titlerelation-page {
-  padding: 12px;
-  min-height: 100%;
-  background: var(--el-bg-color-page, #f5f6f8);
-}
-
-.page-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
+@import '/@/assets/styles/page-cards.scss';
 
 /* 筛选：内容区最上方，无上外边距；与下方标题栏间距用 margin-bottom */
 .content-block__filter {
@@ -527,29 +524,7 @@ onMounted(async () => {
   }
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  width: 100%;
-}
-
-/* 按钮间距按规范 10px；与 RightToolbar 区隔 */
-.action-group {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap; 
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-left: 12px;
-  // border-left: 1px solid var(--el-border-color-lighter);
-}
+/* header-actions / action-group / header-right 的基础布局来自 page-cards.scss */
 
 /* 表格 */
 .titlerelation-table {