lijing/BSchClassManageFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
lijing
2026-08-12 17:19:37 +08:00
commit e73d22744e
131 changed files with 66997 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/electiveClassManage.vue
+778
View File
@@ -0,0 +1,778 @@
<template>
<div class="page-container">
<!-- 顶部标签栏 + 新增分组按钮 + 校本Tab编辑按钮 -->
<div class="tab-header">
<div class="tabs-wrap">
<!-- 前两个固定Tab，无编辑按钮 -->
<div
class="tab-item fixed-tab"
:class="{active: activeTab === '0'}"
@click="activeTab = '0'"
>
拓展课选修班
</div>
<div
class="tab-item fixed-tab"
:class="{active: activeTab === '1'}"
@click="activeTab = '1'"
>
走班
</div>
<!-- 动态可编辑校本Tab -->
<div
v-for="(tab, idx) in dynamicTabList"
:key="tab.id"
class="tab-item edit-tab"
:class="{active: activeTab === tab.id}"
@click="activeTab = tab.id"
>
{{ tab.name }}
<Icon type="ios-create-outline" class="edit-icon" @click.stop="openEditGroupModal(tab, idx)"></Icon>
</div>
</div>
<!-- 加号新增校本分组 -->
<Button icon="ios-add-circle-outline" class="add-tab-btn" @click="openAddGroupModal"></Button>
</div>
<!-- Tab下方全局分割线 -->
<div class="tab-divider"></div>
<!-- 顶部操作按钮栏 -->
<div class="btn-toolbar">
<div class="left-btns">
<Button type="primary" class="btn-normal" @click="openAddClassModal">添加班级</Button>
<Button type="primary" class="btn-normal" @click="handleSyncClass">同步班级</Button>
<Button type="success" class="btn-normal" @click="openImportClassModal">班级信息导入</Button>
<Button type="success" class="btn-normal" @click="openImportStudentModal">学生导入</Button>
</div>
<div class="right-filter">
<Select v-model="filterType" style="width:120px" class="filter-select">
<Option value="other">其它</Option>
</Select>
<DatePicker
placeholder="请选择开班时间"
style="width:180px;margin-left:10px"
v-model="filterOpenTime"
></DatePicker>
</div>
</div>
<!-- 表格主体区域：自适应高度滚动，分页永久固定底部 -->
<div class="table-wrap">
<div class="table-scroll-box">
<Table
stripe
:columns="tableColumns"
:data="tableData"
class="elective-table"
@on-selection-change="onSelectionChange"
height="100%"
:border="false"
></Table>
</div>
<!-- 底部分页+批量操作按钮 -->
<div class="page-footer">
<div class="batch-btns">
<Button type="error" class="btn-bottom" @click="batchDelete" icon="ios-trash">删除</Button>
<Button class="btn-bottom" style="margin-left:10px" @click="reSyncAll">重新同步</Button>
</div>
<div class="page-pagination">
<Page
:current.sync="pageNum"
:page-size.sync="pageSize"
:total="total"
:page-size-opts="[10,20,50]"
show-sizer
show-total
@on-change="loadTableData"
@on-page-size-change="loadTableData"
></Page>
</div>
</div>
</div>
<!-- 弹窗1：新增校本分组 -->
<Modal v-model="addGroupModal" title="添加组" width="420">
<Form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="80">
<FormItem label="*组名称" prop="groupName">
<Input v-model="groupForm.groupName" placeholder="请输入组名称"></Input>
</FormItem>
</Form>
<div slot="footer" align="left">
<Button type="error" @click="addGroupModal=false">删除</Button>
<div style="float:right">
<Button @click="addGroupModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="submitAddGroup">提交</Button>
</div>
</div>
</Modal>
<!-- 弹窗2：编辑校本分组（对标截图红框弹窗） -->
<Modal v-model="editGroupModal" title="编辑组" width="420">
<Form ref="editGroupForm" :model="editGroupForm" :rules="editGroupRules" label-width="80">
<FormItem label="*组名称" prop="groupName">
<Input v-model="editGroupForm.groupName"></Input>
</FormItem>
</Form>
<div slot="footer" align="left">
<Button type="error" @click="confirmDelGroup">删除</Button>
<div style="float:right">
<Button @click="editGroupModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="submitEditGroup">提交</Button>
</div>
</div>
</Modal>
<!-- 弹窗3：新增选修班 -->
<Modal v-model="addClassModal" title="添加选修班" width="560">
<Form ref="addClassForm" :model="addClassForm" :rules="addClassRules" label-width="100">
<FormItem label="*班级名称" prop="className">
<Input v-model="addClassForm.className" placeholder="请输入班级名称"></Input>
</FormItem>
<FormItem label="*开班时间" prop="openTime">
<DatePicker v-model="addClassForm.openTime" placeholder="请选择开班时间" style="width:100%"></DatePicker>
</FormItem>
<FormItem label="关班时间">
<DatePicker v-model="addClassForm.closeTime" placeholder="请选择关班时间" style="width:100%"></DatePicker>
</FormItem>
<FormItem label="*选择教师" prop="teacherIds">
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;">
<Select v-model="teacherQuery.subject" style="width:120px">
<Option value="math">数学</Option>
<Option value="chinese">语文</Option>
<Option value="english">英语</Option>
</Select>
<Input v-model="teacherQuery.keyword" placeholder="请输入关键字" style="flex:1"></Input>
<Button type="primary" @click="queryTeacherList">查询</Button>
</div>
<div class="teacher-btn-group">
<Button
v-for="item in teacherList"
:key="item.id"
size="small"
:type="addClassForm.teacherIds.includes(item.id) ? 'primary' : 'default'"
style="margin:4px"
@click="toggleTeacherSelect(item)"
>
{{ item.name }}
</Button>
</div>
<div v-if="addClassForm.teacherIds.length>0" style="margin-top:8px">
已选：
<Tag
v-for="tid in addClassForm.teacherIds"
:key="tid"
closable
@on-close="removeTeacherTag(tid)"
>
{{ getTeacherNameById(tid) }}
</Tag>
</div>
</FormItem>
<FormItem label="班级封面">
<Upload action="" :before-upload="()=>false">
<div class="upload-box">
<Icon type="ios-add" size="24"></Icon>
<p>+点击上传图片</p>
</div>
</Upload>
</FormItem>
<FormItem label="班级简介">
<Input v-model="addClassForm.intro" type="textarea" rows="4" placeholder="请输入班级简介"></Input>
</FormItem>
<FormItem label="计划招生人数">
<Input v-model.number="addClassForm.studentNum" placeholder="请输入计划招生人数"></Input>
</FormItem>
</Form>
<div slot="footer" align="right">
<Button @click="addClassModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="submitAddClass">提交</Button>
</div>
</Modal>
<!-- 弹窗4：编辑选修班（完全匹配截图布局） -->
<Modal v-model="editClassModal" title="编辑选修班" width="560">
<Form ref="editClassForm" :model="editClassForm" :rules="addClassRules" label-width="100">
<FormItem label="*班级名称" prop="className">
<Input v-model="editClassForm.className"></Input>
</FormItem>
<FormItem label="*开班时间" prop="openTime">
<DatePicker v-model="editClassForm.openTime" style="width:100%"></DatePicker>
</FormItem>
<!-- 已选教师标签行 -->
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
<span v-for="tid in editClassForm.teacherIds" :key="tid" style="display:flex;align-items:center;border:1px solid #ccc;padding:4px 8px;border-radius:4px;">
:{{ getEditTeacherNameById(tid) }}
<Icon type="ios-close" style="margin-left:6px;cursor:pointer;color:#666" @click="removeEditTeacherTag(tid)"/>
</span>
</div>
<FormItem label="*任课教师" prop="teacherIds">
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;">
<Select v-model="editTeacherQuery.subject" style="width:120px">
<Option value="math">数学</Option>
<Option value="chinese">语文</Option>
<Option value="english">英语</Option>
</Select>
<Input v-model="editTeacherQuery.keyword" placeholder="请输入关键字" style="flex:1"></Input>
<Button type="primary" @click="queryEditTeacherList">查询</Button>
</div>
<div class="teacher-btn-group">
<Button
v-for="item in editTeacherList"
:key="item.id"
size="small"
:type="editClassForm.teacherIds.includes(item.id) ? 'primary' : 'default'"
style="margin:4px"
@click="toggleEditTeacherSelect(item)"
>
{{ item.name }}
</Button>
</div>
</FormItem>
</Form>
<div slot="footer" align="right">
<Button @click="editClassModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="submitEditClass">提交</Button>
</div>
</Modal>
<!-- 弹窗5：班级信息导入 -->
<Modal v-model="importClassModal" title="班级信息导入" width="440">
<div style="margin-bottom:16px">
<a href="javascript:;" style="color:#2d78f4">点击链接下载[班级导入模板.xls]</a>
</div>
<Upload action="" :before-upload="()=>false">
<Button icon="ios-cloud-upload-outline">选择要上传的文件</Button>
</Upload>
<div slot="footer" align="right">
<Button @click="importClassModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="confirmImportClass">确定</Button>
</div>
</Modal>
<!-- 弹窗6：学生导入 -->
<Modal v-model="importStudentModal" title="学生导入" width="440">
<div style="margin-bottom:16px">
<a href="javascript:;" style="color:#2d78f4">点击链接下载[学生批量导入模板.xls]</a>
</div>
<Upload action="" :before-upload="()=>false">
<Button icon="ios-cloud-upload-outline">选择要上传的文件</Button>
</Upload>
<div slot="footer" align="right">
<Button @click="importStudentModal=false" style="margin-right:10px">取消</Button>
<Button type="primary" @click="confirmImportStudent">确定</Button>
</div>
</Modal>
<!-- 批量删除确认弹窗 -->
<Modal v-model="delConfirmModal" title="提示" width="360">
<Alert type="warning" show-icon>确认批量删除选中班级？删除后不可恢复</Alert>
<div slot="footer" align="right">
<Button @click="delConfirmModal=false" style="margin-right:10px">取消</Button>
<Button type="error" @click="confirmBatchDel">确定删除</Button>
</div>
</Modal>
<!-- 删除分组二次确认弹窗 -->
<Modal v-model="delGroupConfirmModal" title="删除分组提示" width="380">
<Alert type="error" show-icon>确定删除该分组？分组下所有班级将会一并删除，不可恢复！</Alert>
<div slot="footer" align="right">
<Button @click="delGroupConfirmModal=false" style="margin-right:10px">取消</Button>
<Button type="error" @click="doDelGroup">确认删除</Button>
</div>
</Modal>
</div>
</template>
<script>
export default {
name: "CurriculumElectiveClass",
data() {
return {
// 激活选中项：0固定拓展课，1固定走班，其余为动态tab的id
activeTab: "2",
// 动态可编辑校本课程Tab列表，初始默认一条
dynamicTabList: [
{ id: "2", name: "校本课程" }
],
// 当前正在编辑的tab下标与对象
editTabIndex: null,
editTabItem: null,
// 筛选条件
filterType: "other",
filterOpenTime: null,
// 分页基础
pageNum: 1,
pageSize: 10,
total: 70,
selectedRows: [], // 表格多选行
// 表格列配置：操作第一个改为编辑图标按钮
tableColumns: [
{ type: "selection", width: 50 },
{ title: "#", type: "index", align: "center", width: 70 },
{ title: "班级名称", key: "className", align: "left" },
{ title: "开班时间", key: "openTime", align: "center", width: 160 },
{ title: "教师", key: "teacherName", align: "center", width: 220 },
{
title: "操作",
key: "action",
align: "center",
width: 160,
render: (h, params) => {
return h("div", { style: "display:flex;gap:6px;justify-content:center" }, [
// 第一个：编辑图标 打开编辑弹窗
h("Button", {
props: { type: "text", icon: "ios-create", size: "large" },
on: { click: () => this.openEditClass(params.row) }
}),
// 学生管理
h("Button", {
props: { type: "text", icon: "ios-people", size: "large" },
on: { click: () => this.openStudentManage(params.row) }
}),
// 同步刷新
h("Button", {
props: { type: "text", icon: "ios-refresh", size: "large" },
on: { click: () => this.singleSync(params.row) }
})
])
}
}
],
// 模拟表格数据
tableData: [
{ id: 1, className: "高一化学培优班", openTime: "2026-02-10", teacherName: "县晗", teacherIdList: [1] },
{ id: 2, className: "排球", openTime: "2026-02-11", teacherName: "阮琳玮", teacherIdList: [2] },
{ id: 3, className: "辩论与口才", openTime: "2026-02-12", teacherName: "蔡韵怡", teacherIdList: [3] },
{ id: 4, className: "银行实务&经济学原理简析", openTime: "2026-02-13", teacherName: "任蕾,吕婷", teacherIdList: [4,5] },
{ id: 5, className: "叩问与回响:经典短篇小说的细读与鉴赏", openTime: "2026-02-14", teacherName: "韩佳慧", teacherIdList: [6] },
{ id: 6, className: "叙事的镜子:文学与其影视改编", openTime: "2026-02-15", teacherName: "李嘉萱", teacherIdList: [7] },
{ id: 7, className: "寻迹\"唐宋八大家\"", openTime: "2026-02-16", teacherName: "苏煦雯", teacherIdList: [8] },
{ id: 8, className: "高二数学基础班", openTime: "2026-02-17", teacherName: "蓝怡", teacherIdList: [9] }
],
// ========== 添加分组弹窗 ==========
addGroupModal: false,
groupForm: { groupName: "" },
groupRules: { groupName: [{ required: true, message: "请输入组名称", trigger: "blur" }] },
// ========== 编辑分组弹窗（对标截图） ==========
editGroupModal: false,
editGroupForm: { groupName: "" },
editGroupRules: { groupName: [{ required: true, message: "请输入组名称", trigger: "blur" }] },
delGroupConfirmModal: false,
// ========== 新增班级弹窗 ==========
addClassModal: false,
addClassForm: {
className: "",
openTime: null,
closeTime: null,
teacherIds: [],
intro: "",
studentNum: null
},
addClassRules: {
className: [{ required: true, message: "请填写班级名称", trigger: "blur" }],
openTime: [{ required: true, message: "请选择开班时间", trigger: "change" }],
teacherIds: [{ required: true, message: "请至少选择一位任课教师", trigger: "change" }]
},
teacherQuery: { subject: "math", keyword: "" },
teacherList: [],
// ========== 编辑班级弹窗 ==========
editClassModal: false,
editCurrentRow: null,
editClassForm: {
className: "",
openTime: null,
teacherIds: []
},
editTeacherQuery: { subject: "math", keyword: "" },
editTeacherList: [],
// ========== 导入弹窗 ==========
importClassModal: false,
importStudentModal: false,
// 批量删除确认
delConfirmModal: false
}
},
mounted() {
this.loadTableData();
},
methods: {
// 加载表格分页数据
loadTableData() {
console.log("分页查询参数", {
page: this.pageNum,
size: this.pageSize,
tabId: this.activeTab,
filter: this.filterType,
time: this.filterOpenTime
});
// 此处替换后端接口赋值tableData、total
},
// 表格多选
onSelectionChange(rows) {
this.selectedRows = rows;
},
// 打开【新增校本分组】弹窗
openAddGroupModal() {
this.addGroupModal = true;
this.groupForm.groupName = "";
this.$nextTick(() => this.$refs.groupForm.clearValidate());
},
// 提交新增分组
submitAddGroup() {
this.$refs.groupForm.validate(valid => {
if (!valid) return;
const newId = Date.now().toString();
this.dynamicTabList.push({
id: newId,
name: this.groupForm.groupName
})
this.activeTab = newId;
this.$Message.success("分组新增成功");
this.addGroupModal = false;
this.loadTableData();
})
},
// 打开【编辑组】弹窗（点击Tab右上角铅笔图标）
openEditGroupModal(tabItem, index) {
this.editTabItem = tabItem;
this.editTabIndex = index;
this.editGroupForm.groupName = tabItem.name;
this.editGroupModal = true;
this.$nextTick(() => this.$refs.editGroupForm.clearValidate());
},
// 提交编辑分组名称
submitEditGroup() {
this.$refs.editGroupForm.validate(valid => {
if (!valid) return;
this.dynamicTabList[this.editTabIndex].name = this.editGroupForm.groupName;
this.$Message.success("分组名称修改成功");
this.editGroupModal = false;
})
},
// 点击弹窗删除按钮，弹出二次确认
confirmDelGroup() {
this.editGroupModal = false;
this.delGroupConfirmModal = true;
},
// 真正执行删除分组
doDelGroup() {
this.dynamicTabList.splice(this.editTabIndex, 1);
// 如果删的是当前激活tab，默认切到第一个动态tab
if (this.activeTab === this.editTabItem.id && this.dynamicTabList.length) {
this.activeTab = this.dynamicTabList[0].id;
} else if (!this.dynamicTabList.length) {
this.activeTab = "0";
}
this.delGroupConfirmModal = false;
this.$Message.success("分组已删除");
this.loadTableData();
},
// 2. 添加班级
openAddClassModal() {
this.addClassModal = true;
this.addClassForm = {
className: "", openTime: null, closeTime: null, teacherIds: [], intro: "", studentNum: null
};
this.teacherList = [];
this.teacherQuery = { subject: "math", keyword: "" };
this.$nextTick(() => this.$refs.addClassForm.clearValidate());
},
// 查询教师列表
queryTeacherList() {
// 模拟接口返回教师数组
this.teacherList = [
{ id: 1, name: "陶为玉" }, { id: 2, name: "丁雪芬" }, { id: 3, name: "贺少君" },
{ id: 4, name: "金添玉" }, { id: 5, name: "田雪婷" }, { id: 6, name: "金慧" },
{ id: 7, name: "翁海红" }, { id: 8, name: "钱李铭" }, { id: 9, name: "邱侯晗" },
{ id: 10, name: "沈裴裴" }, { id: 11, name: "左惊喜" }, { id: 12, name: "东昌测试1" },
{ id: 13, name: "苏煦雯" }, { id: 14, name: "李嘉萱" }, { id: 15, name: "王心洁" },
{ id: 16, name: "蓝怡" }, { id: 17, name: "鄢泓" }, { id: 18, name: "颜国连" }
];
},
// 切换教师勾选
toggleTeacherSelect(item) {
const idx = this.addClassForm.teacherIds.indexOf(item.id);
if (idx > -1) {
this.addClassForm.teacherIds.splice(idx, 1);
} else {
this.addClassForm.teacherIds.push(item.id);
}
},
removeTeacherTag(tid) {
const i = this.addClassForm.teacherIds.indexOf(tid);
if (i > -1) this.addClassForm.teacherIds.splice(i, 1);
},
getTeacherNameById(tid) {
const t = this.teacherList.find(s => s.id === tid);
return t ? t.name : "";
},
submitAddClass() {
this.$refs.addClassForm.validate(valid => {
if (!valid) return;
this.$Message.success("新增选修班成功");
this.addClassModal = false;
this.loadTableData();
})
},
// 3. 编辑班级（行编辑按钮触发）
openEditClass(row) {
this.editCurrentRow = row;
this.editClassModal = true;
this.editClassForm = {
className: row.className,
openTime: row.openTime,
teacherIds: row.teacherIdList || []
};
this.editTeacherList = [];
this.editTeacherQuery = { subject: "math", keyword: "" };
this.$nextTick(() => this.$refs.editClassForm.clearValidate());
},
queryEditTeacherList() {
// 匹配截图教师列表
this.editTeacherList = [
{ id: 101, name: "薛志明" }, { id: 102, name: "金瑜" }, { id: 103, name: "向荣" }, { id: 104, name: "张锦花" },
{ id: 105, name: "周慧敏" }, { id: 106, name: "张凌敏" }, { id: 107, name: "孙丽杰" }, { id: 108, name: "乔瑜" },
{ id: 109, name: "潘悦" }, { id: 110, name: "强熙" }, { id: 111, name: "张静漪" }, { id: 112, name: "杨雪" },
{ id: 113, name: "陈梦舟" }, { id: 114, name: "解颖" }, { id: 115, name: "施瑞安" }, { id: 116, name: "殷继宗" },
{ id: 117, name: "王恩跃" }, { id: 118, name: "徐丽丽" }, { id: 119, name: "吴萍" }, { id: 120, name: "王妍婷" }
];
},
toggleEditTeacherSelect(item) {
const idx = this.editClassForm.teacherIds.indexOf(item.id);
if (idx > -1) this.editClassForm.teacherIds.splice(idx, 1);
else this.editClassForm.teacherIds.push(item.id);
},
removeEditTeacherTag(tid) {
const i = this.editClassForm.teacherIds.indexOf(tid);
if (i > -1) this.editClassForm.teacherIds.splice(i, 1);
},
getEditTeacherNameById(tid) {
const t = this.editTeacherList.find(s => s.id === tid);
return t ? t.name : "";
},
submitEditClass() {
this.$refs.editClassForm.validate(valid => {
if (!valid) return;
this.$Message.success("编辑班级成功");
this.editClassModal = false;
this.loadTableData();
})
},
// 导入弹窗
openImportClassModal() { this.importClassModal = true; },
confirmImportClass() {
this.$Message.success("班级导入完成");
this.importClassModal = false;
this.loadTableData();
},
openImportStudentModal() { this.importStudentModal = true; },
confirmImportStudent() {
this.$Message.success("学生导入完成");
this.importStudentModal = false;
},
// 顶部按钮：同步班级
handleSyncClass() {
this.$Message.success("同步班级操作完成");
this.loadTableData();
},
// 底部：重新同步全部
reSyncAll() {
this.$Message.success("全局重新同步完成");
this.loadTableData();
},
// 单条行内同步
singleSync(row) {
this.$Message.success(`【${row.className}】同步成功`);
},
// 学生管理
openStudentManage(row) {
this.$router.push({path:'/electiveClassManageDetail'});
},
// 批量删除
batchDelete() {
if (!this.selectedRows.length) return this.$Message.warning("请先勾选要删除的班级");
this.delConfirmModal = true;
},
confirmBatchDel() {
this.$Message.success("批量删除成功");
this.delConfirmModal = false;
this.selectedRows = [];
this.loadTableData();
}
}
}
</script>
<style scoped>
.page-container {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 16px;
gap: 14px;
}
/* 顶部Tab栏整体布局 */
.tab-header {
display: flex;
align-items: center;
gap: 12px;
}
.tabs-wrap {
display: flex;
align-items: flex-end;
}
/* Tab核心样式：仅底部下划线选中，无边框无背景 */
.tab-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
margin-right: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
display: flex;
align-items: center;
gap: 6px;
}
.tab-item.active {
background: transparent;
border-top: none;
border-bottom: 2px solid #3377dd;
font-weight: 500;
}
.fixed-tab {
cursor: default;
}
.edit-icon {
font-size: 16px;
color: #666;
cursor: pointer;
}
.add-tab-btn {
width: 32px;
height: 32px;
padding: 0;
}
/* Tab下方通栏分割线 */
.tab-divider {
width: 100%;
border-bottom: 1px solid #dcdcdc;
}
/* 顶部按钮工具栏 */
.btn-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f7f8fa;
border-radius: 4px;
flex-shrink: 0;
}
.left-btns {
display: flex;
gap: 12px;
align-items: center;
}
.btn-normal {
padding: 6px 14px;
}
.filter-select {
margin-right: 8px;
}
/* 表格自适应容器，移除外层边框 */
.table-wrap {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
border: none;
border-radius: 0;
}
.table-scroll-box {
flex: 1;
min-height: 0;
overflow: hidden;
}
.elective-table {
width: 100%;
}
/* 底部分页与按钮 */
.page-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
flex-shrink: 0;
}
.batch-btns {
display: flex;
align-items: center;
}
.btn-bottom {
padding: 6px 16px;
}
/* 教师多选按钮组 */
.teacher-btn-group {
max-height: 180px;
overflow-y: auto;
border: 1px solid #e5e7eb;
padding: 8px;
border-radius: 4px;
}
/* 上传封面框 */
.upload-box {
width: 120px;
height: 120px;
border: 1px dashed #ccc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
border-radius: 4px;
}
</style>
<style>
/* 全局穿透修改iView表格，完全匹配截图：无外框、无竖线、仅行底横线 */
/deep/ .ivu-table {
border: none !important;
}
/deep/ .ivu-table-header th {
border: none;
border-bottom: 1px solid #eee;
text-align: center;
background: #fff;
}
/deep/ .ivu-table td {
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #f0f0f0;
}
/deep/ .ivu-table-row {
border: none;
}
/deep/ .ivu-table-stripe .ivu-table-row:nth-child(even) {
background-color: #fafafa;
}
</style>