@ -1,18 +1,5 @@
< template > < template >
< div class = "class-page" >
< div class = "class-page" >
<!-- 页面头部 -- >
< div class = "page-header" >
< div class = "header-icon" >
< el -icon >
< Grid / >
< / e l - i c o n >
< / div >
< div class = "header-content" >
< h1 > 班级管理 < / h1 >
< p > 维护学校班级信息 ， 支持行政班和教学班两种模式 < / p >
< / div >
< / div >
< el -tabs v -if = " adminClassManagementEnabled " v -model = " activeClassType " class = "class-tabs"
< el -tabs v -if = " adminClassManagementEnabled " v -model = " activeClassType " class = "class-tabs"
@ tab - change = "handleTabChange" >
@ tab - change = "handleTabChange" >
< el -tab -pane label = "行政班" name = "ADMIN" / >
< el -tab -pane label = "行政班" name = "ADMIN" / >
@ -265,7 +252,7 @@
< / template > < / template >
< script setup > < script setup >
import { Plus , Refresh , Search , Edit , Delete , User , Grid, Upload, Download , Close , Check } from "@element-plus/icons-vue" import { Plus , Refresh , Search , Edit , Delete , User , , Download , Close , Check } from "@element-plus/icons-vue"
import { ElMessageBox } from "element-plus" import { ElMessageBox } from "element-plus"
import { formatDate } from "@/utils/index" import { formatDate } from "@/utils/index"
import useUserStore from "@/store/modules/user" import useUserStore from "@/store/modules/user"
@ -319,9 +306,10 @@ const rules = computed(() => ({
} ) ) } ) )
const tableHeaderStyle = { const tableHeaderStyle = {
color : "#0f3052" ,
color : "#1f2937" ,
fontSize : "14px" ,
fontSize : "12px" ,
backgroundColor : "#eaf4ff" ,
fontWeight : "600" ,
backgroundColor : "#ffffff" ,
} }
const dialogTitle = computed ( ( ) => ` ${ isCreate . value ? "新增" : "编辑" } ${ activeClassType . value === "ADMIN" ? "行政班" : "教学班" } ` ) const dialogTitle = computed ( ( ) => ` ${ isCreate . value ? "新增" : "编辑" } ${ activeClassType . value === "ADMIN" ? "行政班" : "教学班" } ` )
@ -898,294 +886,150 @@ onMounted(() => {
< style lang = "scss" scoped > < style lang = "scss" scoped >
. class - page { . class - page {
min - height : calc ( 100 vh - 70 px ) ;
/* ===== 颜色令牌 ===== */
-- edu - primary : # 3 b82f6 ;
/ / 页 面 头 部 卡 片
-- edu - primary - deep : # 2563 eb ;
. page - header {
-- edu - primary - soft : # eff6ff ;
display : flex ;
-- text - strong : # 1 f2937 ;
align - items : center ;
-- text - body : # 6 b7280 ;
gap : 20 px ;
-- text - muted : # 9 ca3af ;
padding : 24 px 28 px ;
-- border - color : # e5e7eb ;
background : linear - gradient ( 135 deg , rgba ( 8 , 24 , 39 , 0.9 ) 0 % , rgba ( 6 , 17 , 29 , 0.9 ) 100 % ) ;
border - radius : 16 px ;
/* ===== 字号 ===== */
margin - bottom : 20 px ;
-- fs - page : 17 px ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.2 ) ;
-- fs - card : 14 px ;
box - shadow :
-- fs - body : 12 px ;
0 8 px 32 px rgba ( 0 , 0 , 0 , 0.4 ) ,
-- fs - tag : 11 px ;
inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.05 ) ;
/* ===== 间距（
. header - icon {
-- sp - 1 : 4 px ;
width : 60 px ;
-- sp - 2 : 8 px ;
height : 60 px ;
-- sp - 3 : 12 px ;
display : flex ;
-- sp - 4 : 16 px ;
align - items : center ;
-- sp - 5 : 20 px ;
justify - content : center ;
background : linear - gradient ( 135 deg , # 00 d4ff 0 % , # 0099 cc 100 % ) ;
/* ===== 圆角 / 控件 ===== */
border - radius : 14 px ;
-- r - card : 12 px ;
font - size : 30 px ;
-- r - control : 8 px ;
color : # 0 a0f1c ;
-- field - w : 200 px ;
box - shadow : 0 0 30 px rgba ( 0 , 212 , 255 , 0.4 ) ;
}
/ / a p p - m a i n 已 提 供 p a d d i n g 与 白 底 ， 此 处 不 再 设 页 面 级 留 白 / 背 景
. header - content {
/* ===== 行政班 / 教学班 标签页（极简文字式）===== */
h1 {
margin : 0 0 6 px 0 ;
font - size : 24 px ;
font - weight : 700 ;
color : # fff ;
letter - spacing : 2 px ;
text - shadow : 0 0 20 px rgba ( 0 , 212 , 255 , 0.3 ) ;
}
p {
margin : 0 ;
font - size : 14 px ;
color : rgba ( 255 , 255 , 255 , 0.5 ) ;
}
}
. header - stats {
margin - left : auto ;
display : flex ;
gap : 24 px ;
. stat - item {
text - align : center ;
padding : 12 px 20 px ;
background : rgba ( 0 , 212 , 255 , 0.08 ) ;
border - radius : 12 px ;
border : 1 px solid rgba ( 0 , 212 , 255 , 0.15 ) ;
. stat - value {
font - size : 28 px ;
font - weight : 700 ;
color : # 00 d4ff ;
line - height : 1 ;
text - shadow : 0 0 15 px rgba ( 0 , 212 , 255 , 0.5 ) ;
}
. stat - label {
font - size : 12 px ;
color : rgba ( 255 , 255 , 255 , 0.5 ) ;
margin - top : 4 px ;
}
}
}
}
/ / 标 签 页 样 式
. class - tabs {
. class - tabs {
margin - bottom : 16 px ;
margin - bottom : var ( -- sp - 3 ) ;
background : rgba ( 6 , 17 , 29 , 0.6 ) ;
border - radius : 14 px ;
padding : 6 px 16 px ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.15 ) ;
: deep ( . el - tabs _ _header ) {
: deep ( . el - tabs _ _header ) {
margin : 0 ;
margin : 0 0 var ( -- sp - 3 ) ;
}
}
: deep ( . el - tabs _ _nav - wrap : : after ) {
: deep ( . el - tabs _ _nav - wrap : : after ) {
display : none ;
background - color : var ( -- border - color ) ;
height : 1 px ;
}
}
: deep ( . el - tabs _ _item ) {
: deep ( . el - tabs _ _item ) {
font - size : 15 px ;
font - size : var ( -- fs - body ) ;
font - weight : 500 ;
font - weight : 400 ;
padding : 10 px 24 px ;
color : var ( -- text - body ) ;
border - radius : 8 px ;
height : 36 px ;
transition : all 0.3 s ease ;
color : rgba ( 255 , 255 , 255 , 0.5 ) ;
background : transparent ;
border : 1 px solid transparent ;
& : hover {
& : hover {
color : # 00 d4ff ;
color : var ( -- text - strong ) ;
background : rgba ( 0 , 212 , 255 , 0.1 ) ;
}
}
& . is - active {
& . is - active {
color : # 0 a0f1c ;
color : var ( -- edu - primary ) ;
background : linear - gradient ( 135 deg , # 00 d4ff 0 % , # 0099 cc 100 % ) ;
font - weight : 600 ;
font - weight : 600 ;
border - color : # 00 d4ff ;
box - shadow : 0 0 20 px rgba ( 0 , 212 , 255 , 0.3 ) ;
}
}
}
}
: deep ( . el - tabs _ _active - bar ) {
: deep ( . el - tabs _ _active - bar ) {
display : none ;
background - color : var ( -- edu - primary ) ;
height : 2 px ;
}
}
}
}
/ / 搜 索 栏
/* ===== 筛选 / 操作条（白卡）===== */
. query - bar {
. query - bar {
display : flex ;
display : flex ;
flex - wrap : wrap ;
flex - wrap : wrap ;
align - items : center ;
align - items : center ;
gap : 12 px ;
gap : var ( -- sp - 3 ) ;
padding : 20 px 24 px ;
padding : var ( -- sp - 4 ) ;
background : rgba ( 6 , 17 , 29 , 0.6 ) ;
background : # ffffff ;
border - radius : 14 px ;
border : 1 px solid var ( -- border - color ) ;
margin - bottom : 16 px ;
border - radius : var ( -- r - card ) ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.15 ) ;
margin - bottom : var ( -- sp - 4 ) ;
box - shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.3 ) ;
. el - select {
. el - select {
width : 150 px ;
width : var ( -- field - w ) ;
}
}
. el - input {
. el - input {
width : 170 px ;
width : var ( -- field - w ) ;
}
}
. query - divider {
. query - divider {
width : 1 px ;
width : 1 px ;
height : 3 2px ;
height : 4 px ;
background : rgba ( 0 , 200 , 255 , 0.2 ) ;
background : var ( -- border - color ) ;
margin : 0 4 px ;
margin : 0 var ( -- sp - 1 ) ;
}
}
. btn - group {
. btn - group {
margin - left : auto ;
margin - left : auto ;
display : flex ;
display : flex ;
gap : 10 px ;
gap : var ( -- sp - 2 ) ;
}
}
}
}
/ / 表 格 样 式
/* ===== 数据表格（纯白 + 灰线）===== */
. el - table {
. el - table {
border - radius : 14 px ;
background : # ffffff ;
border : 1 px solid var ( -- border - color ) ;
border - radius : var ( -- r - card ) ;
overflow : hidden ;
overflow : hidden ;
background : transparent ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.15 ) ;
box - shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , 0.4 ) ;
: deep ( . el - table _ _header - wrapper th ) {
: deep ( . el - table _ _header - wrapper th ) {
background : transparent ;
background : # ffffff ;
color : # fff ;
color : var ( -- text - strong ) ;
font - weight : 600 ;
font - weight : 600 ;
border : none ! important ;
font - size : var ( -- fs - body ) ;
padding : 14 px 0 ;
font - size : 14 px ;
text - shadow : 0 0 10 px rgba ( 0 , 212 , 255 , 0.3 ) ;
}
}
: deep ( . el - table _ _body - wrapper tr ) {
: deep ( . el - table _ _body tr : hover > td ) {
background : transparent ;
background : # f9fafb ! important ;
transition : all 0.3 s ease ;
& : hover > td {
background : rgba ( 0 , 212 , 255 , 0.08 ) ! important ;
}
}
: deep ( . el - table _ _row td ) {
padding : 14 px 0 ;
border - bottom : 1 px solid rgba ( 0 , 200 , 255 , 0.1 ) ! important ;
background : transparent ! important ;
}
}
: deep ( . el - table _ _cell ) {
: deep ( . el - table _ _cell ) {
font - size : 14 px ;
font - size : var ( -- fs - body ) ;
color : rgba ( 255 , 255 , 255 , 0.85 ) ;
color : var ( -- text - strong ) ;
background : transparent ! important ;
border - color : var ( -- border - color ) ;
border : none ! important ;
}
: deep ( . el - table _ _border - left ) ,
: deep ( . el - table _ _border - right ) {
display : none ;
}
}
/ / 操 作 按 钮
. el - button {
display : inline - flex ;
align - items : center ;
gap : 5 px ;
border - radius : 8 px ;
font - weight : 500 ;
transition : all 0.3 s ease ;
padding : 8 px 14 px ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.3 ) ;
background : rgba ( 0 , 150 , 200 , 0.15 ) ;
color : # 00 d4ff ;
& : hover {
transform : translateY ( - 1 px ) ;
box - shadow : 0 0 20 px rgba ( 0 , 212 , 255 , 0.3 ) ;
background : rgba ( 0 , 212 , 255 , 0.2 ) ;
}
. el - icon {
font - size : 15 px ;
}
}
}
}
/ / 成 员 工 具 栏
/* ===== 成员工具条（白卡）===== */
. member - toolbar {
. member - toolbar {
display : flex ;
display : flex ;
flex - wrap : no wrap;
flex - wrap : wrap ;
align - items : center ;
align - items : center ;
gap : 10 px ;
gap : var ( -- sp - 3 ) ;
margin - bottom : 16 px ;
margin - bottom : var ( -- sp - 4 ) ;
padding : 16 px 20 px ;
padding : var ( -- sp - 4 ) ;
background : rgba ( 6 , 17 , 29 , 0.5 ) ;
background : # ffffff ;
border -radius : 1 2 px ;
border : 1 px solid var ( -- border - color ) ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.15 ) ;
border - radius : var ( -- r - card ) ;
. el - input {
. el - input {
width : 150 px ;
width : var ( -- field - w ) ;
}
}
/ / 弹 窗 样 式
. el - dialog {
border - radius : 18 px ;
overflow : hidden ;
background : linear - gradient ( 135 deg , # 07111 d 0 % , # 03070 e 100 % ) ;
border : 1 px solid rgba ( 0 , 200 , 255 , 0.2 ) ;
box - shadow :
0 20 px 60 px rgba ( 0 , 0 , 0 , 0.6 ) ,
0 0 40 px rgba ( 0 , 212 , 255 , 0.1 ) ;
: deep ( . el - dialog _ _header ) {
background : linear - gradient ( 135 deg , # 0099 cc 0 % , # 006699 100 % ) ;
color : # fff ;
padding : 22 px 28 px ;
margin : 0 ;
. el - dialog _ _title {
color : # fff ;
font - weight : 700 ;
font - size : 18 px ;
text - shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.3 ) ;
}
. el - dialog _ _headerbtn {
. el - dialog _ _close {
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
font - size : 20 px ;
}
}
}
: deep ( . el - dialog _ _body ) {
padding : 28 px ;
background : transparent ;
}
: deep ( . el - dialog _ _footer ) {
padding : 18 px 28 px ;
border - top : 1 px solid rgba ( 0 , 200 , 255 , 0.15 ) ;
background : rgba ( 10 , 15 , 30 , 0.5 ) ;
}
}
}
}
/* ===== 弹窗内辅助布局（外观由 teacher-light.scss 全局接管）===== */
. dialog - footers {
. dialog - footers {
display : flex ;
display : flex ;
gap : 12 px ;
gap : var ( -- sp - 3 ) ;
justify - content : flex - end ;
justify - content : flex - end ;
}
}
@ -1195,7 +1039,7 @@ onMounted(() => {
. import - create - actions {
. import - create - actions {
display : flex ;
display : flex ;
gap : 10 px ;
gap : var ( -- sp - 2 ) ;
align - items : center ;
align - items : center ;
}
}
} }
