工具条按钮样式统一

frontend/src/views/teachOffice/subject/index.vue

@@ -52,23 +52,6 @@
 
     </el-card>
 
-    <!-- ==================== 3. 操作按钮区域 ==================== -->
-    <el-card shadow="never" class="action-card">
-      <div class="section-heading section-heading--compact">
-        <div>
-          <h2 class="section-title">课程科目操作</h2>
-          <p class="section-description">维护课程科目，或下载业务数据与导入模板</p>
-        </div>
-      </div>
-      <div class="action-row">
-        <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
-        <el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
-      </div>
-      <div class="action-row">
-        <el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
-      </div>
-    </el-card>
-
     <!-- ==================== 4. 文件上传区域 ==================== -->
     <el-card shadow="never" class="upload-card">
       <div class="section-heading section-heading--compact">
@@ -92,10 +75,12 @@
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <el-card shadow="never" class="table-card">
-      <div class="section-heading section-heading--compact table-heading">
-        <div>
-          <h2 class="section-title">课程科目列表</h2>
-          <p class="section-description">共 {{ total }} 条数据</p>
+      <div class="list-header">
+        <div class="list-title">课程科目列表<span class="list-sub">共 {{ total }} 条数据</span></div>
+        <div class="list-actions">
+          <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
+          <el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
+          <el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
         </div>
       </div>
       <el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
@@ -642,22 +627,6 @@ export default {
 
 }
 
-// ==================== 3. 操作按钮区域 ====================
-.action-card {
-  margin-bottom: 16px;
-
-  .action-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
 // ==================== 4. 文件上传区域 ====================
 .upload-card {
   margin-bottom: 16px;
@@ -702,6 +671,39 @@ export default {
 
 // ==================== 6. 数据表格区域 ====================
 .table-card {
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+
+      .list-sub {
+        margin-left: 10px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+
+    .list-actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
+  }
+
   .pagination-wrapper {
     display: flex;
     justify-content: flex-end;