diff --git a/frontend/src/views/teachOffice/elective/index.vue b/frontend/src/views/teachOffice/elective/index.vue
index a2c7d0a7d..e54b8f4e0 100644
--- a/frontend/src/views/teachOffice/elective/index.vue
+++ b/frontend/src/views/teachOffice/elective/index.vue
@@ -1,732 +1,517 @@
 <template>
-  <div class="app-container elective-page">
-    <!-- ==================== 1. 查询条件区域 ==================== -->
-    <el-card shadow="never" class="search-card">
-      <el-form :model="searchForm" label-width="110px" class="search-form" @submit.native.prevent>
-        <el-row :gutter="24">
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="课名称">
-              <el-input v-model="searchForm.kmc" placeholder="请输入课名称（模糊）" clearable />
-            </el-form-item>
+  <div class="app-container">
+    <!-- ==================== 2. 查询条件区域 ==================== -->
+    <div class="section-card query-card">
+      <el-form>
+        <el-row :gutter="32">
+          <!-- 左栏 -->
+          <el-col :xs="24" :md="12">
+            <div class="query-field">
+              <span class="q-label no-check">授课教员</span>
+              <el-input v-model="searchForm.js" placeholder="请输入授课教员" clearable class="q-control" />
+            </div>
+            <div class="query-field">
+              <span class="q-label no-check">可选班次年级</span>
+              <el-input v-model="searchForm.kbcnj" placeholder="请输入可选班次年级" clearable class="q-control" />
+            </div>
+            <div class="query-field">
+              <el-checkbox v-model="searchForm.xxkztEnabled" />
+              <span class="q-label">选修课状态</span>
+              <el-select v-model="searchForm.xxkzt" class="q-control" :disabled="!searchForm.xxkztEnabled">
+                <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
           </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="科目代码">
-              <el-input v-model="searchForm.kmdm" placeholder="请输入科目代码（模糊）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="简称">
-              <el-input v-model="searchForm.jc" placeholder="请输入简称（模糊）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="教研室代号">
-              <el-input v-model="searchForm.jysdh" placeholder="请输入教研室代号（精确）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="课程类型">
-              <el-input v-model="searchForm.kclx" placeholder="请输入课程类型（精确）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="培训类型">
-              <el-input v-model="searchForm.pxlx" placeholder="请输入培训类型（精确）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <el-form-item label="培训层次">
-              <el-input v-model="searchForm.pxcc" placeholder="请输入培训层次（精确）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :md="12" :lg="8">
-            <div class="search-actions">
-              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
-              <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+
+          <!-- 右栏 -->
+          <el-col :xs="24" :md="12">
+            <div class="query-field">
+              <span class="q-label no-check">课程科目名称</span>
+              <el-input v-model="searchForm.kckmmc" placeholder="请输入课程科目名称" clearable class="q-control" />
+            </div>
+            <div class="query-field">
+              <span class="q-label no-check">选修班名称</span>
+              <el-input v-model="searchForm.xxbmc" placeholder="请输入选修班名称" clearable class="q-control" />
+            </div>
+            <div class="query-field">
+              <el-checkbox v-model="searchForm.pxccEnabled" />
+              <span class="q-label">培训层次</span>
+              <el-select v-model="searchForm.pxcc" class="q-control" :disabled="!searchForm.pxccEnabled">
+                <el-option v-for="item in pxccOptions" :key="item" :label="item" :value="item" />
+              </el-select>
             </div>
           </el-col>
         </el-row>
       </el-form>
-    </el-card>
 
-    <!-- ==================== 2. 操作按钮区域 ==================== -->
-    <el-card shadow="never" class="action-card">
+      <div class="query-footer">
+        <el-button class="gray-btn" @click="handleQuery">查询</el-button>
+      </div>
+    </div>
+
+    <!-- ==================== 3. 导出按钮区域 ==================== -->
+    <div class="section-card export-card">
+      <div class="export-bar">
+        <el-button type="primary" @click="handleDownloadList">下载选修班列表</el-button>
+        <el-button type="primary" @click="handleDownloadWord">下载选修班学员名单Word</el-button>
+        <el-button type="primary" @click="handleDownloadExcel">下载选修班学员名单Excel</el-button>
+      </div>
+    </div>
+
+    <!-- ==================== 4. 操作按钮区域 ==================== -->
+    <div class="section-card action-card">
       <div class="action-row">
-        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建课程科目</el-button>
+        <el-button type="primary" @click="handleOpenNew">新建选修课</el-button>
+        <el-button type="primary" @click="handleOpenEarly">所选批量开放报名</el-button>
+        <el-button type="primary" @click="handleCancelEarly">所选批量取消开放报名</el-button>
+        <el-button type="primary" @click="handleStopSignup">批量停止报名</el-button>
+        <el-button type="primary" @click="handleReverseRange">所选批量根据学员反向确定班次范围</el-button>
       </div>
-    </el-card>
+      <div class="action-row">
+        <el-button type="primary" @click="handleDownloadTemplate">【选修课数据文件模板】下载</el-button>
+      </div>
+    </div>
 
-    <!-- ==================== 3. 数据表格区域 ==================== -->
-    <el-card shadow="never" class="table-card">
-      <div class="list-header">
-        <div class="list-title">课程科目列表</div>
+    <!-- ==================== 5. 文件上传区域 ==================== -->
+    <div class="section-card upload-card">
+      <div class="upload-row">
+        <div class="upload-left">
+          <el-button @click="handleSelectFile">选择文件</el-button>
+          <span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
+          <input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
+        </div>
+        <div class="upload-right">
+          <el-button type="primary" @click="handleUpload">上传数据</el-button>
+        </div>
       </div>
-      <el-table v-loading="loading" :data="tableData" border stripe highlight-current-row>
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="kbh" label="课编号" min-width="130" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="kmc" label="课名称" min-width="150" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="jc" label="简称" min-width="100" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="kmdm" label="科目代码" min-width="100" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="jysdh" label="教研室代号" min-width="110" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="kclx" label="课程类型" min-width="100" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="pxlx" label="培训类型" min-width="100" show-overflow-tooltip header-align="center" />
-        <el-table-column prop="pxcc" label="培训层次" min-width="100" show-overflow-tooltip header-align="center" />
-        <el-table-column label="学分" width="80" align="center">
-          <template slot-scope="scope">{{ fmtFloat(scope.row.xf) }}</template>
-        </el-table-column>
-        <el-table-column prop="xs" label="学时" width="80" align="center" />
-        <el-table-column prop="zks" label="周课时" width="80" align="center" />
-        <el-table-column label="操作" width="160" align="center" fixed="right">
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
-            <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" size="mini" icon="el-icon-delete" class="danger-text-btn" @click="handleDelete(scope.row)">删除</el-button>
+    </div>
+
+    <!-- ==================== 6. 数据表格区域 ==================== -->
+    <div class="section-card table-card">
+      <el-table :data="pagedData" border stripe class="main-table" @selection-change="handleSelectionChange">
+        <template slot="empty">
+          <span>无数据！</span>
+        </template>
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="序号" width="60" align="center" :index="tableIndex" />
+        <el-table-column prop="course" label="课程" min-width="110" show-overflow-tooltip />
+        <el-table-column prop="textbook" label="教材" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="teacher" label="实施教员" width="90" align="center" />
+        <el-table-column prop="place" label="教学场地" width="100" show-overflow-tooltip />
+        <el-table-column prop="teamClass" label="显示可选队别班次" min-width="150" align="center" show-overflow-tooltip />
+        <el-table-column label="计划学时/运行学时/学分" width="130" align="center">
+          <template slot="header">
+            <div class="triple-header">
+              <span>计划学时</span>
+              <span>运行学时</span>
+              <span>学分</span>
+            </div>
+          </template>
+          <template slot-scope="{ row }">
+            <div class="triple-cell">
+              <span>{{ row.planHours }}</span>
+              <span>{{ row.runHours }}</span>
+              <span>{{ row.credit }}</span>
+            </div>
           </template>
         </el-table-column>
+        <el-table-column label="开课结课日期" min-width="150" align="center">
+          <template slot-scope="{ row }">
+            {{ row.startDate }} ~ {{ row.endDate }}
+          </template>
+        </el-table-column>
+        <el-table-column label="报名日期" min-width="140" align="center">
+          <template slot-scope="{ row }">
+            {{ row.signupStart }} ~ {{ row.signupEnd }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="planCount" label="计划人数" width="90" align="center" />
+        <el-table-column prop="requirement" label="要求说明" min-width="120" show-overflow-tooltip />
       </el-table>
 
-      <el-pagination
-        class="pagination"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        :current-page="pageNum"
-        :page-size="pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        @size-change="handleSizeChange"
-        @current-change="handlePageChange"
-      />
-    </el-card>
+      <div class="pagination-wrap">
+        <el-pagination
+          background
+          layout="total, prev, pager, next, jumper"
+          :total="tableData.length"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </div>
 
-    <!-- ==================== 4. 新增/编辑弹窗 ==================== -->
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1100px" append-to-body
-      :close-on-click-modal="false">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="130px" class="add-form">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课编号" prop="kbh">
-              <el-input v-model="form.kbh" placeholder="请输入课编号（新增必填）" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课名称" prop="kmc">
-              <el-input v-model="form.kmc" placeholder="请输入课名称" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="简称">
-              <el-input v-model="form.jc" placeholder="请输入简称" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="教研室代号" prop="jysdh">
-              <el-input v-model="form.jysdh" placeholder="请输入教研室代号" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="科目代码">
-              <el-input v-model="form.kmdm" placeholder="请输入科目代码" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课程统一编号" prop="kctybh">
-              <el-input v-model="form.kctybh" placeholder="请输入课程统一编号" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="学分" prop="xf">
-              <el-input-number v-model="form.xf" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="学时">
-              <el-input-number v-model="form.xs" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="周课时" prop="zks">
-              <el-input-number v-model="form.zks" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="培训层次" prop="pxcc">
-              <el-input v-model="form.pxcc" placeholder="请输入培训层次" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="培训类型" prop="pxlx">
-              <el-input v-model="form.pxlx" placeholder="请输入培训类型" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课程类型" prop="kclx">
-              <el-input v-model="form.kclx" placeholder="请输入课程类型" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="考试课时" prop="ksks">
-              <el-input-number v-model="form.ksks" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="理论学时" prop="llxs">
-              <el-input-number v-model="form.llxs" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="实践学时" prop="sjxs">
-              <el-input-number v-model="form.sjxs" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="辅导答疑课时" prop="fddyks">
-              <el-input-number v-model="form.fddyks" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="自修课时" prop="zxks">
-              <el-input-number v-model="form.zxks" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="节次优选级" prop="jcyxj">
-              <el-input-number v-model="form.jcyxj" :min="0" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="成绩分制" prop="cjfz">
-              <el-input v-model="form.cjfz" placeholder="请输入成绩分制" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课类型" prop="klx">
-              <el-input v-model="form.klx" placeholder="请输入课类型" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="考核方式" prop="khfs">
-              <el-input v-model="form.khfs" placeholder="请输入考核方式" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="形成性成绩分值" prop="xcxcjfz">
-              <el-input-number v-model="form.xcxcjfz" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="终结性成绩分值" prop="zjxcjfz">
-              <el-input-number v-model="form.zjxcjfz" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="不计入学员平均分" prop="bjrxypjf">
-              <el-radio-group v-model="form.bjrxypjf">
-                <el-radio :label="1">是</el-radio>
-                <el-radio :label="0">否</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="考试课时不显示" prop="ksksbxs">
-              <el-radio-group v-model="form.ksksbxs">
-                <el-radio :label="1">是</el-radio>
-                <el-radio :label="0">否</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="政治类课程" prop="zzlkc">
-              <el-radio-group v-model="form.zzlkc">
-                <el-radio :label="1">是</el-radio>
-                <el-radio :label="0">否</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="密级" prop="mj">
-              <el-input v-model="form.mj" placeholder="请输入密级" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课程支持方式" prop="kczcfs">
-              <el-input v-model="form.kczcfs" placeholder="请输入课程支持方式" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="课程建设方式" prop="kcjsfs">
-              <el-input v-model="form.kcjsfs" placeholder="请输入课程建设方式" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="评选情况" prop="pxqk">
-              <el-input v-model="form.pxqk" placeholder="请输入评选情况" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="修订日期" prop="xdrq">
-              <el-date-picker
-                v-model="form.xdrq"
-                type="datetime"
-                value-format="yyyy-MM-ddTHH:mm:ss"
-                placeholder="请选择修订日期"
-                class="w-full"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="规范名称">
-              <el-input v-model="form.gfmc" placeholder="请输入规范名称" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="适用对象">
-              <el-input v-model="form.sydx" placeholder="请输入适用对象" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="序号">
-              <el-input v-model="form.xh" placeholder="请输入序号" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="拼音">
-              <el-input v-model="form.py" placeholder="请输入拼音" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="版本">
-              <el-input v-model="form.bb" placeholder="请输入版本" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="教学管理部门编号">
-              <el-input v-model="form.jxglbmbh" placeholder="请输入教学管理部门编号" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="8">
-            <el-form-item label="JSON字典">
-              <el-input v-model="form.jsonzd" placeholder="请输入JSON字典" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.bz" type="textarea" :rows="2" placeholder="请输入备注" />
-            </el-form-item>
-          </el-col>
-        </el-row>
+    <!-- 新建选修课弹窗 -->
+    <el-dialog
+      :visible="dialogVisible"
+      title="新建选修课"
+      width="560px"
+      @update:visible="val => (dialogVisible = val)"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="课程名称" prop="kcmc">
+          <el-input v-model="form.kcmc" placeholder="请输入课程名称" clearable />
+        </el-form-item>
+        <el-form-item label="实施教员" prop="js">
+          <el-input v-model="form.js" placeholder="请输入实施教员" clearable />
+        </el-form-item>
+        <el-form-item label="教材">
+          <el-input v-model="form.jc" placeholder="请输入教材" clearable />
+        </el-form-item>
+        <el-form-item label="教学场地">
+          <el-input v-model="form.jxcd" placeholder="请输入教学场地" clearable />
+        </el-form-item>
+        <el-form-item label="计划学时">
+          <el-input-number v-model="form.jhsxs" :min="0" :precision="0" class="w-full" />
+        </el-form-item>
+        <el-form-item label="运行学时">
+          <el-input-number v-model="form.yxsxs" :min="0" :precision="0" class="w-full" />
+        </el-form-item>
+        <el-form-item label="学分">
+          <el-input-number v-model="form.xf" :min="0" :precision="1" class="w-full" />
+        </el-form-item>
+        <el-form-item label="计划人数">
+          <el-input-number v-model="form.jh" :min="0" :precision="0" class="w-full" />
+        </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="saving" @click="handleSubmit">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- ==================== 5. 详情弹窗 ==================== -->
-    <el-dialog title="课程科目详情" :visible.sync="detailVisible" width="900px" append-to-body
-      :close-on-click-modal="false">
-      <div v-loading="detailLoading" class="detail-body">
-        <el-descriptions v-if="detailData.kbh" :column="2" border>
-          <el-descriptions-item label="课编号">{{ fmtVal(detailData.kbh) }}</el-descriptions-item>
-          <el-descriptions-item label="课名称">{{ fmtVal(detailData.kmc) }}</el-descriptions-item>
-          <el-descriptions-item label="简称">{{ fmtVal(detailData.jc) }}</el-descriptions-item>
-          <el-descriptions-item label="教研室代号">{{ fmtVal(detailData.jysdh) }}</el-descriptions-item>
-          <el-descriptions-item label="科目代码">{{ fmtVal(detailData.kmdm) }}</el-descriptions-item>
-          <el-descriptions-item label="课程统一编号">{{ fmtVal(detailData.kctybh) }}</el-descriptions-item>
-          <el-descriptions-item label="学分">{{ fmtFloat(detailData.xf) }}</el-descriptions-item>
-          <el-descriptions-item label="学时">{{ fmtVal(detailData.xs) }}</el-descriptions-item>
-          <el-descriptions-item label="周课时">{{ fmtVal(detailData.zks) }}</el-descriptions-item>
-          <el-descriptions-item label="培训层次">{{ fmtVal(detailData.pxcc) }}</el-descriptions-item>
-          <el-descriptions-item label="培训类型">{{ fmtVal(detailData.pxlx) }}</el-descriptions-item>
-          <el-descriptions-item label="课程类型">{{ fmtVal(detailData.kclx) }}</el-descriptions-item>
-          <el-descriptions-item label="考试课时">{{ fmtVal(detailData.ksks) }}</el-descriptions-item>
-          <el-descriptions-item label="理论学时">{{ fmtVal(detailData.llxs) }}</el-descriptions-item>
-          <el-descriptions-item label="实践学时">{{ fmtVal(detailData.sjxs) }}</el-descriptions-item>
-          <el-descriptions-item label="辅导答疑课时">{{ fmtVal(detailData.fddyks) }}</el-descriptions-item>
-          <el-descriptions-item label="自修课时">{{ fmtVal(detailData.zxks) }}</el-descriptions-item>
-          <el-descriptions-item label="节次优选级">{{ fmtVal(detailData.jcyxj) }}</el-descriptions-item>
-          <el-descriptions-item label="成绩分制">{{ fmtVal(detailData.cjfz) }}</el-descriptions-item>
-          <el-descriptions-item label="课类型">{{ fmtVal(detailData.klx) }}</el-descriptions-item>
-          <el-descriptions-item label="考核方式">{{ fmtVal(detailData.khfs) }}</el-descriptions-item>
-          <el-descriptions-item label="形成性成绩分值">{{ fmtFloat(detailData.xcxcjfz) }}</el-descriptions-item>
-          <el-descriptions-item label="终结性成绩分值">{{ fmtFloat(detailData.zjxcjfz) }}</el-descriptions-item>
-          <el-descriptions-item label="不计入学员平均分">{{ fmtFlag(detailData.bjrxypjf) }}</el-descriptions-item>
-          <el-descriptions-item label="考试课时不显示">{{ fmtFlag(detailData.ksksbxs) }}</el-descriptions-item>
-          <el-descriptions-item label="政治类课程">{{ fmtFlag(detailData.zzlkc) }}</el-descriptions-item>
-          <el-descriptions-item label="密级">{{ fmtVal(detailData.mj) }}</el-descriptions-item>
-          <el-descriptions-item label="课程支持方式">{{ fmtVal(detailData.kczcfs) }}</el-descriptions-item>
-          <el-descriptions-item label="课程建设方式">{{ fmtVal(detailData.kcjsfs) }}</el-descriptions-item>
-          <el-descriptions-item label="评选情况">{{ fmtVal(detailData.pxqk) }}</el-descriptions-item>
-          <el-descriptions-item label="修订日期">{{ fmtDateTime(detailData.xdrq) }}</el-descriptions-item>
-          <el-descriptions-item label="规范名称">{{ fmtVal(detailData.gfmc) }}</el-descriptions-item>
-          <el-descriptions-item label="适用对象">{{ fmtVal(detailData.sydx) }}</el-descriptions-item>
-          <el-descriptions-item label="序号">{{ fmtVal(detailData.xh) }}</el-descriptions-item>
-          <el-descriptions-item label="拼音">{{ fmtVal(detailData.py) }}</el-descriptions-item>
-          <el-descriptions-item label="版本">{{ fmtVal(detailData.bb) }}</el-descriptions-item>
-          <el-descriptions-item label="教学管理部门编号">{{ fmtVal(detailData.jxglbmbh) }}</el-descriptions-item>
-          <el-descriptions-item label="JSON字典">{{ fmtVal(detailData.jsonzd) }}</el-descriptions-item>
-          <el-descriptions-item label="备注" :span="2">{{ fmtVal(detailData.bz) }}</el-descriptions-item>
-        </el-descriptions>
-        <div v-else class="detail-empty">暂无数据</div>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleNewConfirm">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-/**
- * 课程科目（选修/课程科目管理）
- * 对应菜单：teachOffice/elective
- * 接入 JYSController /jys/kb 真实接口：分页查询 list、详情 get?kbh=、新增 add、编辑 update、删除 delete?kbh=
- * 旧页面的下载/上传/模板/批量报名等 mock 功能后端无对应接口，已移除
- */
-import {
-  listKb,
-  getKb,
-  addKb,
-  updateKb,
-  deleteKb
-} from '@/api/teachOffice/kb'
-
 export default {
   name: 'Elective',
   data() {
     return {
-      // ==================== 查询条件（仅后端 KBMapper 支持的字段） ====================
+      // ==================== 下拉选项 ====================
+      statusOptions: ['拟制', '开放报名', '停止报名', '已开课'],
+      pxccOptions: ['无', '本科', '硕士', '博士'],
+
+      // ==================== 查询条件 ====================
       searchForm: {
-        kmc: '',
-        kmdm: '',
-        jc: '',
-        jysdh: '',
-        kclx: '',
-        pxlx: '',
-        pxcc: ''
+        js: '',
+        kbcnj: '',
+        xxkztEnabled: false,
+        xxkzt: '拟制',
+        kckmmc: '',
+        xxbmc: '',
+        pxccEnabled: false,
+        pxcc: '无'
       },
 
-      // ==================== 列表 ====================
-      loading: false,
-      tableData: [],
-      total: 0,
-      pageNum: 1,
-      pageSize: 20,
+      // ==================== 数据表格 mock ====================
+      tableData: [
+        { id: 1, course: '军事英语', textbook: '军事英语教程', teacher: '张三', place: '教室101', teamClass: '2025级学员1-5队', planHours: 32, runHours: 30, credit: 2, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 60, requirement: '限选50人' },
+        { id: 2, course: '摄影技术', textbook: '摄影基础', teacher: '李四', place: '教室102', teamClass: '2024级学员1-4队', planHours: 24, runHours: 24, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 40, requirement: '自备相机' },
+        { id: 3, course: '网球', textbook: '网球教程', teacher: '王五', place: '操场', teamClass: '2025级学员2-6队', planHours: 24, runHours: 22, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-21', signupEnd: '2026-09-02', planCount: 30, requirement: '需自备球拍' },
+        { id: 4, course: '书法鉴赏', textbook: '中国书法', teacher: '赵六', place: '教室103', teamClass: '2026级学员1-3队', planHours: 16, runHours: 16, credit: 1, startDate: '2026-09-08', endDate: '2026-12-30', signupStart: '2026-08-25', signupEnd: '2026-09-05', planCount: 35, requirement: '' },
+        { id: 5, course: '无人机操作', textbook: '无人机原理', teacher: '孙七', place: '室外训练场', teamClass: '2025级学员1-6队', planHours: 32, runHours: 28, credit: 2, startDate: '2026-09-08', endDate: '2027-01-10', signupStart: '2026-08-26', signupEnd: '2026-09-06', planCount: 25, requirement: '需通过体检' }
+      ],
+      selectedRows: [],
 
-      // ==================== 新增/编辑弹窗 ====================
+      // ==================== 文件上传 ====================
+      selectedFile: null,
+
+      // ==================== 新建选修课弹窗 ====================
       dialogVisible: false,
-      dialogTitle: '新建课程科目',
-      isEdit: false,
-      saving: false,
-      form: this.createEmptyForm(),
+      form: {
+        kcmc: '',
+        js: '',
+        jc: '',
+        jxcd: '',
+        jhsxs: 0,
+        yxsxs: 0,
+        xf: 0,
+        jh: 0
+      },
       rules: {
-        kbh: [{ required: true, message: '请输入课编号', trigger: 'blur' }],
-        kmc: [{ required: true, message: '请输入课名称', trigger: 'blur' }],
-        jysdh: [{ required: true, message: '请输入教研室代号', trigger: 'blur' }],
-        xf: [{ required: true, message: '请输入学分', trigger: 'blur' }],
-        pxcc: [{ required: true, message: '请输入培训层次', trigger: 'blur' }],
-        pxlx: [{ required: true, message: '请输入培训类型', trigger: 'blur' }],
-        kclx: [{ required: true, message: '请输入课程类型', trigger: 'blur' }],
-        ksks: [{ required: true, message: '请输入考试课时', trigger: 'blur' }],
-        cjfz: [{ required: true, message: '请输入成绩分制', trigger: 'blur' }],
-        bjrxypjf: [{ required: true, message: '请选择是否不计入学员平均分', trigger: 'change' }],
-        llxs: [{ required: true, message: '请输入理论学时', trigger: 'blur' }],
-        sjxs: [{ required: true, message: '请输入实践学时', trigger: 'blur' }],
-        zks: [{ required: true, message: '请输入周课时', trigger: 'blur' }],
-        klx: [{ required: true, message: '请输入课类型', trigger: 'blur' }],
-        ksksbxs: [{ required: true, message: '请选择考试课时是否显示', trigger: 'change' }],
-        kctybh: [{ required: true, message: '请输入课程统一编号', trigger: 'blur' }],
-        fddyks: [{ required: true, message: '请输入辅导答疑课时', trigger: 'blur' }],
-        zxks: [{ required: true, message: '请输入自修课时', trigger: 'blur' }],
-        xdrq: [{ required: true, message: '请选择修订日期', trigger: 'change' }],
-        jcyxj: [{ required: true, message: '请输入节次优选级', trigger: 'blur' }],
-        kczcfs: [{ required: true, message: '请输入课程支持方式', trigger: 'blur' }],
-        kcjsfs: [{ required: true, message: '请输入课程建设方式', trigger: 'blur' }],
-        zzlkc: [{ required: true, message: '请选择是否政治类课程', trigger: 'change' }],
-        khfs: [{ required: true, message: '请输入考核方式', trigger: 'blur' }],
-        xcxcjfz: [{ required: true, message: '请输入形成性成绩分值', trigger: 'blur' }],
-        zjxcjfz: [{ required: true, message: '请输入终结性成绩分值', trigger: 'blur' }],
-        mj: [{ required: true, message: '请输入密级', trigger: 'blur' }],
-        pxqk: [{ required: true, message: '请输入评选情况', trigger: 'blur' }]
+        kcmc: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
+        js: [{ required: true, message: '请输入实施教员', trigger: 'blur' }]
       },
 
-      // ==================== 详情弹窗 ====================
-      detailVisible: false,
-      detailLoading: false,
-      detailData: {}
+      // ==================== 分页 ====================
+      currentPage: 1,
+      pageSize: 20
     }
   },
-  created() {
-    this.fetchList()
+  computed: {
+    fileName() {
+      return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
+    },
+    pagedData() {
+      const start = (this.currentPage - 1) * this.pageSize
+      return this.tableData.slice(start, start + this.pageSize)
+    }
   },
   methods: {
-    /* ---------- 列表加载 ---------- */
-    fetchList() {
-      this.loading = true
-      const params = {
-        pageNum: this.pageNum,
-        pageSize: this.pageSize
-      }
-      Object.keys(this.searchForm).forEach(key => {
-        const value = this.searchForm[key]
-        if (value !== '' && value !== null && value !== undefined) {
-          params[key] = value.trim()
-        }
-      })
-      listKb(params).then(response => {
-        const data = (response && response.data) || {}
-        this.tableData = data.records || []
-        this.total = data.total || 0
-      }).catch(() => {
-        this.tableData = []
-        this.total = 0
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-
-    /* ---------- 查询 / 重置 ---------- */
+    // ==================== 查询 ====================
     handleQuery() {
-      this.pageNum = 1
-      this.fetchList()
-    },
-    handleReset() {
-      this.searchForm = { kmc: '', kmdm: '', jc: '', jysdh: '', kclx: '', pxlx: '', pxcc: '' }
-      this.pageNum = 1
-      this.fetchList()
+      console.log('查询条件:', JSON.parse(JSON.stringify(this.searchForm)))
+      this.$message.success('查询完成（前端模拟）')
     },
 
-    /* ---------- 分页 ---------- */
-    handleSizeChange(size) {
-      this.pageSize = size
-      this.pageNum = 1
-      this.fetchList()
+    // ==================== 导出 ====================
+    downloadBlob(content, filename) {
+      const blob = new Blob(['\ufeff' + content], { type: 'text/plain;charset=utf-8;' })
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = filename
+      link.click()
+      URL.revokeObjectURL(link.href)
     },
-    handlePageChange(page) {
-      this.pageNum = page
-      this.fetchList()
+    handleDownloadList() {
+      this.downloadBlob('课程,教材,实施教员,教学场地,计划人数\n', '选修班列表.txt')
+      this.$message.success('选修班列表已下载（前端模拟）')
+    },
+    handleDownloadWord() {
+      this.downloadBlob('选修班学员名单\n', '选修班学员名单Word.txt')
+      this.$message.success('选修班学员名单Word已下载（前端模拟）')
+    },
+    handleDownloadExcel() {
+      this.downloadBlob('选修班学员名单\n', '选修班学员名单Excel.txt')
+      this.$message.success('选修班学员名单Excel已下载（前端模拟）')
+    },
+    handleDownloadTemplate() {
+      this.downloadBlob('课程,教材,实施教员,教学场地,计划学时,学分,开课结课日期,报名日期,计划人数,要求说明\n', '选修课数据文件模板.txt')
+      this.$message.success('【选修课数据文件模板】已下载（前端模拟）')
     },
 
-    /* ---------- 新增 / 编辑 ---------- */
-    handleAdd() {
-      this.isEdit = false
-      this.dialogTitle = '新建课程科目'
-      this.form = this.createEmptyForm()
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        if (this.$refs.formRef) this.$refs.formRef.clearValidate()
-      })
-    },
-    handleEdit(row) {
-      this.isEdit = true
-      this.dialogTitle = '编辑课程科目'
-      const form = this.createEmptyForm()
-      Object.keys(form).forEach(key => {
-        if (row[key] !== undefined && row[key] !== null) form[key] = row[key]
-      })
-      // 修订日期截断为 yyyy-MM-ddTHH:mm:ss 适配日期控件
-      if (typeof form.xdrq === 'string') form.xdrq = form.xdrq.slice(0, 19)
-      this.form = form
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        if (this.$refs.formRef) this.$refs.formRef.clearValidate()
-      })
-    },
-    handleSubmit() {
-      this.$refs.formRef.validate(valid => {
-        if (!valid) return
-        this.saving = true
-        const payload = this.cleanPayload(this.form)
-        const req = this.isEdit ? updateKb(payload) : addKb(payload)
-        req.then(() => {
-          this.$message.success(this.isEdit ? '修改成功' : '新增成功')
-          this.dialogVisible = false
-          this.fetchList()
-        }).catch(() => {}).finally(() => {
-          this.saving = false
-        })
-      })
-    },
-
-    /* ---------- 删除 ---------- */
-    handleDelete(row) {
-      this.$confirm('确定删除课程科目「' + (row.kmc || row.kbh) + '」吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        return deleteKb(row.kbh)
-      }).then(() => {
-        this.$message.success('删除成功')
-        this.fetchList()
-      }).catch(() => {})
-    },
-
-    /* ---------- 详情 ---------- */
-    handleDetail(row) {
-      this.detailVisible = true
-      this.detailLoading = true
-      this.detailData = {}
-      getKb(row.kbh).then(response => {
-        this.detailData = (response && response.data) || {}
-      }).catch(() => {
-        this.detailData = {}
-      }).finally(() => {
-        this.detailLoading = false
-      })
-    },
-
-    /* ---------- 工具 ---------- */
-    createEmptyForm() {
-      return {
-        kbh: '',
-        kmc: '',
-        jysdh: '',
-        bz: '',
-        xh: '',
-        xf: 0,
-        jc: '',
-        xs: 0,
-        pxcc: '',
-        pxlx: '',
-        kclx: '',
-        ksks: 0,
-        py: '',
-        gfmc: '',
-        cjfz: '',
-        bjrxypjf: 0,
-        jxglbmbh: '',
-        llxs: 0,
-        sjxs: 0,
-        kmdm: '',
-        zks: 0,
-        klx: '',
-        ksksbxs: 0,
-        kctybh: '',
-        sydx: '',
-        fddyks: 0,
-        zxks: 0,
-        bb: '',
-        xdrq: this.getCurrentDateTime(),
-        jcyxj: 0,
-        kczcfs: '',
-        kcjsfs: '',
-        jsonzd: '',
-        zzlkc: 0,
-        khfs: '',
-        xcxcjfz: 0,
-        zjxcjfz: 0,
-        mj: '',
-        pxqk: ''
+    // ==================== 操作按钮 ====================
+    handleOpenEarly() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
       }
+      this.$message.success('所选班已早开放报名（前端模拟）')
     },
-    /** 当前时间（yyyy-MM-ddTHH:mm:ss，与 el-date-picker value-format 一致） */
-    getCurrentDateTime() {
-      const d = new Date()
-      const pad = n => String(n).padStart(2, '0')
-      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+    handleCancelEarly() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
+      }
+      this.$message.success('所选班已早取消开放报名（前端模拟）')
     },
-    /** 移除空值（''/null/undefined），保留 0/false 等有效值 */
-    cleanPayload(obj) {
-      const payload = {}
-      Object.keys(obj).forEach(key => {
-        const value = obj[key]
-        if (value !== '' && value !== null && value !== undefined) {
-          payload[key] = value
-        }
+    handleStopSignup() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
+      }
+      this.$message.success('已批量停止报名（前端模拟）')
+    },
+    handleReverseRange() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
+      }
+      this.$message.success('已根据学员反向确定班次范围（前端模拟）')
+    },
+
+    // ==================== 文件上传 ====================
+    handleSelectFile() {
+      this.$refs.fileInputRef && this.$refs.fileInputRef.click()
+    },
+    handleFileChange(e) {
+      this.selectedFile = e.target.files[0] || null
+    },
+    handleUpload() {
+      if (!this.selectedFile) {
+        this.$message.warning('请先选择文件')
+        return
+      }
+      console.log('上传文件:', this.selectedFile.name)
+      this.$message.success(`文件「${this.selectedFile.name}」上传成功（前端模拟）`)
+    },
+
+    // ==================== 表格多选 ====================
+    handleSelectionChange(rows) {
+      this.selectedRows = rows
+    },
+
+    // ==================== 新建选修课弹窗 ====================
+    handleOpenNew() {
+      Object.assign(this.form, { kcmc: '', js: '', jc: '', jxcd: '', jhsxs: 0, yxsxs: 0, xf: 0, jh: 0 })
+      this.dialogVisible = true
+    },
+    handleNewConfirm() {
+      if (!this.$refs.formRef) return
+      this.$refs.formRef.validate((valid) => {
+        if (!valid) return
+        console.log('新建选修课:', JSON.parse(JSON.stringify(this.form)))
+        this.$message.success('新建选修课成功（前端模拟）')
+        this.dialogVisible = false
       })
-      return payload
     },
-    fmtVal(val) {
-      return val === '' || val === null || val === undefined ? '-' : val
+
+    // ==================== 分页 ====================
+    handlePageChange(page) {
+      this.currentPage = page
     },
-    fmtFloat(val) {
-      if (val === '' || val === null || val === undefined) return '-'
-      return Number(val)
-    },
-    fmtFlag(val) {
-      return val === 1 || val === '1' || val === true ? '是' : '否'
-    },
-    fmtDateTime(val) {
-      return (val || '').slice(0, 19) || '-'
+
+    // 表格序号（跨页连续）
+    tableIndex(index) {
+      return (this.currentPage - 1) * this.pageSize + index + 1
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.app-container {
-  padding: 20px;
+// ==================== 公共区域容器 ====================
+.section-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 16px 20px;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.elective-page {
-  .search-card {
-    margin-bottom: 16px;
+// ==================== 2. 查询条件区域 ====================
+.query-card {
+  .query-field {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+    min-height: 32px;
 
-    .search-form {
-      .search-actions {
-        padding-top: 4px;
+    ::v-deep .el-checkbox {
+      margin-right: 6px;
+      flex-shrink: 0;
+    }
+
+    .q-label {
+      width: 120px;
+      flex-shrink: 0;
+      font-size: 13px;
+      color: #303133;
+      text-align: right;
+      margin-right: 10px;
+      white-space: nowrap;
+
+      &.no-check {
+        margin-left: 24px;
       }
     }
-  }
 
-  .action-card {
-    margin-bottom: 16px;
-
-    .action-row {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
+    .q-control {
+      flex: 1;
+      min-width: 0;
     }
   }
 
-  .table-card {
-    .list-header {
+  .notice {
+    font-size: 12px;
+    color: #f56c6c;
+    margin-top: 8px;
+    text-align: left;
+  }
+
+  .query-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+
+// ==================== 3. 导出按钮区域 ====================
+.export-card {
+  .export-bar {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+}
+
+// ==================== 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 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+
+    .upload-left {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
+      gap: 12px;
 
-      .list-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #303133;
+      .file-name {
+        font-size: 12px;
+        color: #999;
+
+        &.has-file {
+          color: #303133;
+        }
       }
     }
+  }
+}
 
-    .pagination {
-      margin-top: 16px;
-      text-align: right;
+// ==================== 6. 数据表格区域 ====================
+.table-card {
+  .main-table {
+    ::v-deep .cell {
+      font-size: 12px;
     }
   }
 
-  .detail-body {
-    min-height: 60px;
+  .triple-header,
+  .triple-cell {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.4;
+  }
+
+  .pagination-wrap {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
   }
 }
 
-.add-form {
-  .w-full {
-    width: 100%;
-  }
+.w-full {
+  width: 100%;
 }
 
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
+// ==================== 按钮样式 ====================
+.gray-btn {
+  height: 28px;
+  padding: 2px 16px;
+  font-size: 12px;
+  background: #f5f5f5;
+  border: 1px solid #c0c4cc;
+  color: #333;
+  border-radius: 2px;
 
-.detail-empty {
-  padding: 20px;
-  text-align: center;
-  color: #909399;
-}
-
-.danger-text-btn {
-  color: #f56c6c;
-
-  &:hover {
-    color: #f78989;
+  &:hover,
+  &:focus {
+    background: #ebebeb;
+    border-color: #c0c4cc;
+    color: #333;
   }
 }
 </style>