a

src/assets/styles/page-cards.scss

@@ -80,7 +80,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 10px;
 }
 
 .header-right {

src/views/professional/professionaltitlerelation/index.vue

@@ -1,13 +1,12 @@
 <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">
+      <!-- 筛选卡片 -->
+      <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 }">
@@ -84,10 +83,16 @@
             </el-form-item>
           </template>
         </search-form>
-        </div>
+      </el-card>
 
-        <!-- 其次：左侧按钮，右侧 RightToolbar -->
-        <div class="content-block__header">
+      <!-- 列表内容卡片 -->
+      <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
@@ -113,8 +118,9 @@
               </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 {