工具条按钮样式统一

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

@@ -71,31 +71,6 @@
       </div>
     </div>
 
-    <!-- ==================== 4. 操作按钮区域 ==================== -->
-    <div class="section-card 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="handleOpenNew">新建选修课</el-button>
-        <el-button type="primary" plain icon="el-icon-circle-check" @click="handleOpenEarly">
-          所选批量开放报名
-        </el-button>
-        <el-button type="warning" plain icon="el-icon-remove-outline" @click="handleCancelEarly">
-          所选批量取消开放报名
-        </el-button>
-        <el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
-          批量停止报名
-        </el-button>
-        <!-- <el-button icon="el-icon-refresh" @click="handleReverseRange">
-          所选批量根据学员反向确定班次范围
-        </el-button> -->
-      </div>
-    </div>
-
     <!-- ==================== 5. 文件上传区域 ==================== -->
     <div class="section-card upload-card">
       <div class="section-heading section-heading--compact">
@@ -118,10 +93,19 @@
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <div class="section-card 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="handleOpenNew">新建选修课</el-button>
+          <el-button type="primary" plain icon="el-icon-circle-check" @click="handleOpenEarly">
+            所选批量开放报名
+          </el-button>
+          <el-button type="warning" plain icon="el-icon-remove-outline" @click="handleCancelEarly">
+            所选批量取消开放报名
+          </el-button>
+          <el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
+            批量停止报名
+          </el-button>
         </div>
       </div>
       <el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
@@ -534,20 +518,6 @@ export default {
   align-items: center;
 }
 
-// ==================== 4. 操作按钮区域 ====================
-.action-card {
-  .action-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
 // ==================== 5. 文件上传区域 ====================
 .upload-card {
   .upload-row {
@@ -581,6 +551,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;
+      }
+    }
+  }
+
   .main-table {
     ::v-deep .cell {
       font-size: 12px;