chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: let exam and teacher pages fill the content width

Browse Source 
考试与教师端页面被写死的最大宽度和额外左右内缩压成中间一条，宽屏两侧留白，
窄一点的屏还会把筛选按钮和表格操作列裁掉。同时分页条脱离文档流会与表格下沿重叠。

统一改为按内容区自适应宽度，并让操作列、筛选行、指标网格在空间不足时换行而非裁切。
bugfix/ai-assessment-evidence-rescore
chenyuan 3 weeks ago
parent 59f45f63e8
commit cbab6cdc26
12 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File

9
src/assets/styles/ruoyi.scss
Unescape Escape View File

@ -110,8 +110,10 @@
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { .pagination-container {
// position: relative; display: flex;
height: 25px; flex-wrap: wrap;
justify-content: flex-end;
height: auto;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
padding: 10px 20px !important; padding: 10px 20px !important;
@ -127,8 +129,7 @@
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
// right: 0; position: static;
position: absolute;
} }
@media ( max-width : 768px) { @media ( max-width : 768px) {

2
src/views/exam/index.vue
Unescape Escape View File

@ -26,7 +26,7 @@ function deviceToken(id){const key=`exam-device-${id}`;let value=localStorage.ge
function count(value){return value==="ALL"?exams.value.length:exams.value.filter(e=>e.status===value).length}function day(v){return String(new Date(v).getDate()).padStart(2,"0")}function month(v){return `${new Date(v).getMonth()+1}月`}function formatTime(v){return new Date(v).toLocaleString("zh-CN",{hour12:false}).replaceAll("/","-")}function countdown(v){const minutes=Math.max(0,Math.ceil((new Date(v)-Date.now())/60000));return minutes<60?`${minutes} 分钟后开始`:`${Math.ceil(minutes/60)} 小时后开始`} function count(value){return value==="ALL"?exams.value.length:exams.value.filter(e=>e.status===value).length}function day(v){return String(new Date(v).getDate()).padStart(2,"0")}function month(v){return `${new Date(v).getMonth()+1}月`}function formatTime(v){return new Date(v).toLocaleString("zh-CN",{hour12:false}).replaceAll("/","-")}function countdown(v){const minutes=Math.max(0,Math.ceil((new Date(v)-Date.now())/60000));return minutes<60?`${minutes} 分钟后开始`:`${Math.ceil(minutes/60)} 小时后开始`}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.student-exams{color:#20282d;max-width:1180px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;h1{font-size:26px;margin:0;letter-spacing:0}p{color:#6b7280;margin:6px 0 0}} .student-exams{color:#20282d;width:100%;max-width:none;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;h1{font-size:26px;margin:0;letter-spacing:0}p{color:#6b7280;margin:6px 0 0}}
.status-filter{display:flex;gap:28px;border-bottom:1px solid #dfe5e7;margin-top:24px;button{border:0;background:none;padding:12px 2px;color:#68747a;cursor:pointer;position:relative;b{margin-left:7px;font-weight:500}&.active{color:#12637a;font-weight:600;&:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#16839c}}}} .status-filter{display:flex;gap:28px;border-bottom:1px solid #dfe5e7;margin-top:24px;button{border:0;background:none;padding:12px 2px;color:#68747a;cursor:pointer;position:relative;b{margin-left:7px;font-weight:500}&.active{color:#12637a;font-weight:600;&:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#16839c}}}}
.exam-row{display:grid;grid-template-columns:78px 1fr 150px;gap:22px;align-items:center;padding:22px 8px;border-bottom:1px solid #e6eaec}.date-block{border-right:1px solid #dfe5e7;display:grid;text-align:center;strong{font-size:28px;color:#185e70}span{color:#6b7280;font-size:13px}}.exam-info{h2{font-size:18px;margin:9px 0}.submitted{margin-left:8px;color:#43856e;font-size:13px}p{display:flex;align-items:center;gap:5px;margin:0;color:#6b7280}}.exam-action{text-align:right;color:#7b858a} .exam-row{display:grid;grid-template-columns:78px 1fr 150px;gap:22px;align-items:center;padding:22px 8px;border-bottom:1px solid #e6eaec}.date-block{border-right:1px solid #dfe5e7;display:grid;text-align:center;strong{font-size:28px;color:#185e70}span{color:#6b7280;font-size:13px}}.exam-info{h2{font-size:18px;margin:9px 0}.submitted{margin-left:8px;color:#43856e;font-size:13px}p{display:flex;align-items:center;gap:5px;margin:0;color:#6b7280}}.exam-action{text-align:right;color:#7b858a}
@media(max-width:650px){.exam-row{grid-template-columns:58px 1fr}.exam-action{grid-column:2;text-align:left}.status-filter{gap:14px;overflow-x:auto}} @media(max-width:650px){.exam-row{grid-template-columns:58px 1fr}.exam-action{grid-column:2;text-align:left}.status-filter{gap:14px;overflow-x:auto}}

2
src/views/exam/result.vue
Unescape Escape View File

@ -10,7 +10,7 @@
import{computed,onMounted,ref}from"vue";import{useRoute}from"vue-router";import{ArrowLeft}from"@element-plus/icons-vue";import{getExamResult}from"@/api/exam";const route=useRoute(),loading=ref(false),result=ref({questions:[]}),currentId=ref(null);const current=computed(()=>result.value.questions?.find(q=>q.id===currentId.value));onMounted(async()=>{loading.value=true;try{result.value=(await getExamResult(route.params.id)).data;currentId.value=result.value.questions?.[0]?.id}finally{loading.value=false}});function display(v){if(Array.isArray(v))return v.join("、");if(v===true)return"正确";if(v===false)return"错误";return v||"未作答"}function answerClass(q){return{current:q.id===currentId.value,wrong:q.correct===false,right:q.correct===true,subjective:q.type==="SHORT_ANSWER"}} import{computed,onMounted,ref}from"vue";import{useRoute}from"vue-router";import{ArrowLeft}from"@element-plus/icons-vue";import{getExamResult}from"@/api/exam";const route=useRoute(),loading=ref(false),result=ref({questions:[]}),currentId=ref(null);const current=computed(()=>result.value.questions?.find(q=>q.id===currentId.value));onMounted(async()=>{loading.value=true;try{result.value=(await getExamResult(route.params.id)).data;currentId.value=result.value.questions?.[0]?.id}finally{loading.value=false}});function display(v){if(Array.isArray(v))return v.join("、");if(v===true)return"正确";if(v===false)return"错误";return v||"未作答"}function answerClass(q){return{current:q.id===currentId.value,wrong:q.correct===false,right:q.correct===true,subjective:q.type==="SHORT_ANSWER"}}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.result-page { max-width: 1180px; margin: auto; color: #20282d; > header h1 { font-size: 25px; margin: 12px 0 4px; } > header p { color: #6b7280; margin: 0; } } .result-page { width: 100%; max-width: none; margin: auto; color: #20282d; > header h1 { font-size: 25px; margin: 12px 0 4px; } > header p { color: #6b7280; margin: 0; } }
.score-band { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); margin: 24px 0; border-block: 1px solid #dce3e5; > div { padding: 18px; border-right: 1px solid #e4e8ea; display: grid; gap: 6px; span { color: #6b7280; font-size: 13px; } b { font-size: 19px; color: #185e70; } } .total { grid-template-columns: auto auto 1fr; align-items: end; background: #edf7f4; span { grid-column: 1 / 4; } strong { font-size: 38px; color: #11657a; } small { padding-bottom: 7px; } } } .score-band { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); margin: 24px 0; border-block: 1px solid #dce3e5; > div { padding: 18px; border-right: 1px solid #e4e8ea; display: grid; gap: 6px; span { color: #6b7280; font-size: 13px; } b { font-size: 19px; color: #185e70; } } .total { grid-template-columns: auto auto 1fr; align-items: end; background: #edf7f4; span { grid-column: 1 / 4; } strong { font-size: 38px; color: #11657a; } small { padding-bottom: 7px; } } }
.result-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; } .result-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; }
aside { border-right: 1px solid #dce3e5; padding-right: 20px; h2 { font-size: 16px; } div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } button { aspect-ratio: 1; border: 1px solid #ccd5d8; background: #fff; border-radius: 3px; &.right { background: #dff3ea; border-color: #61a88b; } &.wrong { background: #fde8e5; border-color: #d87a6e; } &.subjective { background: #e7eef7; border-color: #7696bc; } &.current { outline: 2px solid #e4a53c; outline-offset: 1px; } } } aside { border-right: 1px solid #dce3e5; padding-right: 20px; h2 { font-size: 16px; } div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } button { aspect-ratio: 1; border: 1px solid #ccd5d8; background: #fff; border-radius: 3px; &.right { background: #dff3ea; border-color: #61a88b; } &.wrong { background: #fde8e5; border-color: #d87a6e; } &.subjective { background: #e7eef7; border-color: #7696bc; } &.current { outline: 2px solid #e4a53c; outline-offset: 1px; } } }

2
src/views/exam/take.vue
Unescape Escape View File

@ -35,7 +35,7 @@ function formatTime(v){return v?new Date(v).toLocaleString("zh-CN",{hour12:false
h1 { font-size: 20px; margin: 0; } p { margin: 5px 0 0; color: #6b7280; font-size: 13px; } > button { justify-self: end; } h1 { font-size: 20px; margin: 0; } p { margin: 5px 0 0; color: #6b7280; font-size: 13px; } > button { justify-self: end; }
.timer { display: flex; align-items: center; gap: 8px; color: #526067; strong { font-size: 22px; font-variant-numeric: tabular-nums; color: #165f71; } &.urgent strong { color: #c24138; } } .timer { display: flex; align-items: center; gap: 8px; color: #526067; strong { font-size: 22px; font-variant-numeric: tabular-nums; color: #165f71; } &.urgent strong { color: #c24138; } }
} }
.exam-body { display: grid; grid-template-columns: 250px minmax(0, 880px); gap: 22px; justify-content: center; padding: 22px; } .exam-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; padding: 22px; }
.answer-sheet { background: white; border: 1px solid #dce3e5; padding: 18px; align-self: start; position: sticky; top: 16px; .answer-sheet { background: white; border: 1px solid #dce3e5; padding: 18px; align-self: start; position: sticky; top: 16px;
h2 { font-size: 17px; margin: 0 0 18px; } footer { display: flex; gap: 18px; color: #6b7280; font-size: 12px; border-top: 1px solid #e5e7eb; padding-top: 12px; } h2 { font-size: 17px; margin: 0 0 18px; } footer { display: flex; gap: 18px; color: #6b7280; font-size: 12px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
footer i { display: inline-block; width: 10px; height: 10px; border: 1px solid #cbd5d8; margin-right: 5px; } footer .answered-dot { background: #dcefeb; border-color: #68a99b; } footer i { display: inline-block; width: 10px; height: 10px; border: 1px solid #cbd5d8; margin-right: 5px; } footer .answered-dot { background: #dcefeb; border-color: #68a99b; }

2
src/views/teacherEnd/class/index.vue
Unescape Escape View File

@ -50,7 +50,7 @@
<span>{{ formatDate(row.schoolClass.createTime) }}</span> <span>{{ formatDate(row.schoolClass.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="420"> <el-table-column label="操作" align="center" min-width="320">
<template #default="{ row }"> <template #default="{ row }">
<div class="action-buttons"> <div class="action-buttons">
<el-button v-if="activeClassType === 'TEACHING'" type="primary" text @click="openMemberDialog(row.schoolClass)"> <el-button v-if="activeClassType === 'TEACHING'" type="primary" text @click="openMemberDialog(row.schoolClass)">

4
src/views/teacherEnd/exam/analysis.vue
Unescape Escape View File

@ -23,7 +23,7 @@ function resize() { chart?.resize(); }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.analysis-page { color: #1f2937; }.page-head{display:flex;justify-content:space-between;align-items:flex-end;h1{margin:10px 0 0;font-size:24px}.el-select{width:220px}} .analysis-page { color: #1f2937; }.page-head{display:flex;justify-content:space-between;align-items:flex-end;h1{margin:10px 0 0;font-size:24px}.el-select{width:220px}}
.metrics{display:grid;grid-template-columns:repeat(7,1fr);border-block:1px solid #dfe5e7;margin:22px 0 28px;div{padding:16px 12px;border-right:1px solid #e5e7eb;display:grid;gap:6px;&:last-child{border:0}}span{font-size:13px;color:#6b7280}strong{font-size:23px;color:#165f71}} .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-block:1px solid #dfe5e7;margin:22px 0 28px;div{padding:16px 12px;border-right:1px solid #e5e7eb;display:grid;gap:6px;min-width:0;&:last-child{border:0}}span{font-size:13px;color:#6b7280}strong{font-size:23px;color:#165f71}}
.analysis-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:36px}h2{font-size:18px;margin:0 0 16px}.chart{height:390px}.hardest ol{list-style:none;padding:0;margin:0;counter-reset:item}.hardest li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid #e5e7eb;line-height:1.6;&:before{counter-increment:item;content:counter(item);grid-row:1;display:none}span{color:#c04d42;white-space:nowrap}} .analysis-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:36px}h2{font-size:18px;margin:0 0 16px}.chart{height:390px}.hardest ol{list-style:none;padding:0;margin:0;counter-reset:item}.hardest li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid #e5e7eb;line-height:1.6;&:before{counter-increment:item;content:counter(item);grid-row:1;display:none}span{color:#c04d42;white-space:nowrap}}
@media(max-width:900px){.metrics{grid-template-columns:repeat(3,1fr)}.analysis-grid{grid-template-columns:1fr}} @media(max-width:900px){.analysis-grid{grid-template-columns:1fr}}
</style> </style>

8
src/views/teacherEnd/exam/editor.vue
Unescape Escape View File

@ -109,7 +109,7 @@ function formatValue(value) { const date = value instanceof Date ? value : new D
.editor-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 14px; > :last-child { justify-self: end; } } .editor-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 14px; > :last-child { justify-self: end; } }
.title-block { display: flex; align-items: center; gap: 10px; h1 { margin: 0; font-size: 23px; letter-spacing: 0; } } .title-block { display: flex; align-items: center; gap: 10px; h1 { margin: 0; font-size: 23px; letter-spacing: 0; } }
.steps { max-width: 760px; margin: 28px auto; } .steps { max-width: 760px; margin: 28px auto; }
.editor-panel { max-width: 1120px; margin: auto; h2 { font-size: 19px; margin: 0 0 22px; } } .editor-panel { width: 100%; max-width: none; margin: auto; h2 { font-size: 19px; margin: 0 0 22px; } }
.base-form { max-width: 650px; .el-input, .el-select { width: 100%; } .el-date-editor { width: 100%; } } .base-form { max-width: 650px; .el-input, .el-select { width: 100%; } .el-date-editor { width: 100%; } }
.unit { margin-left: 8px; color: #6b7280; } .unit { margin-left: 8px; color: #6b7280; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; h2 { margin: 0; } p { margin: 6px 0 0; color: #6b7280; } } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; h2 { margin: 0; } p { margin: 6px 0 0; color: #6b7280; } }
@ -127,3 +127,9 @@ function formatValue(value) { const date = value instanceof Date ? value : new D
.editor-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; display: flex; justify-content: center; align-items: center; gap: 12px; background: rgba(255,255,255,.96); border-top: 1px solid #e5e7eb; z-index: 10; } .editor-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; display: flex; justify-content: center; align-items: center; gap: 12px; background: rgba(255,255,255,.96); border-top: 1px solid #e5e7eb; z-index: 10; }
@media (max-width: 760px) { .editor-head { grid-template-columns: 1fr; gap: 12px; .title-block { grid-row: 1; } > :last-child { justify-self: start; } } .question-layout { grid-template-columns: 1fr; } .type-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e5e7eb; } .score-summary { grid-template-columns: 1fr 1fr; } .section-head { align-items: flex-start; flex-direction: column; gap: 12px; } } @media (max-width: 760px) { .editor-head { grid-template-columns: 1fr; gap: 12px; .title-block { grid-row: 1; } > :last-child { justify-self: start; } } .question-layout { grid-template-columns: 1fr; } .type-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e5e7eb; } .score-summary { grid-template-columns: 1fr 1fr; } .section-head { align-items: flex-start; flex-direction: column; gap: 12px; } }
</style> </style>
<style lang="scss">
#app .teacherLayout .editor-footer { left: 304px; }
#app .teacherLayout.hideSidebar .editor-footer { left: 64px; }
#app .mobile.teacherLayout .editor-footer { left: 0; }
</style>

12
src/views/teacherEnd/index.vue
Unescape Escape View File

@ -18,10 +18,10 @@
<div class="serch"> <div class="serch">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="日期："> <el-form-item label="日期：">
<el-date-picker v-model="classParams.time" style="width: 185.6px" type="datetime" placeholder="请选择" format="YYYY/MM/DD HH:mm:ss" /> <el-date-picker v-model="classParams.time" style="width: 200px" type="datetime" placeholder="请选择" format="YYYY/MM/DD HH:mm:ss" />
</el-form-item> </el-form-item>
<el-form-item label="班级："> <el-form-item label="班级：">
<el-select placeholder="全部" v-model="classParams.classId" style="width: 185.6px"> <el-select placeholder="全部" v-model="classParams.classId" style="width: 200px">
<el-option label="全部" value="" /> <el-option label="全部" value="" />
<el-option v-for="item in userStore.classList" :key="item.class_id" :label="item.class_name" :value="item.class_id" /> <el-option v-for="item in userStore.classList" :key="item.class_id" :label="item.class_name" :value="item.class_id" />
</el-select> </el-select>
@ -203,7 +203,7 @@ onMounted(() => {
// gap: 15px; // gap: 15px;
:deep(.el-card) { :deep(.el-card) {
padding: 0px 15px; padding: 0px 15px;
height: calc(100vh - 80px); height: auto;
border: none; border: none;
#trend { #trend {
height: 500px; height: 500px;
@ -272,11 +272,13 @@ onMounted(() => {
} }
} }
.el-card:nth-child(1) { .el-card:nth-child(1) {
width: calc(100% - 47% - 15px); flex: 1 1 53%;
min-width: 0;
border-right: 2px dashed #e5e5e5; border-right: 2px dashed #e5e5e5;
} }
.el-card:nth-child(2) { .el-card:nth-child(2) {
width: calc(100% - 53%); flex: 1 1 47%;
min-width: 0;
.card-header { .card-header {
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: bold; font-weight: bold;

8
src/views/teacherEnd/score/TaskReviewPanel.vue
Unescape Escape View File

@ -41,7 +41,7 @@
<el-table-column label="AI评分" width="66" align="center"> <el-table-column label="AI评分" width="66" align="center">
<template #default="{ row }">{{ formatScore(row.aiAssessmentScore) }}</template> <template #default="{ row }">{{ formatScore(row.aiAssessmentScore) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="老师评分" width="94" align="center"> <el-table-column label="老师评分" min-width="94" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-if="canManageClass && row.scorable" v-if="canManageClass && row.scorable"
@ -287,9 +287,9 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.task-review { display: grid; grid-template-columns: minmax(360px, 400px) minmax(0, 1fr); min-height: calc(100vh - 142px); border: 1px solid rgba(39, 172, 238, 0.28); border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(6, 23, 36, 0.84), rgba(4, 12, 23, 0.78)); box-shadow: 0 18px 48px rgba(0, 5, 16, 0.34), inset 0 1px 0 rgba(153, 220, 255, 0.08); } .task-review { display: grid; grid-template-columns: minmax(400px, 460px) minmax(0, 1fr); min-height: calc(100vh - 142px); border: 1px solid rgba(39, 172, 238, 0.28); border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(6, 23, 36, 0.84), rgba(4, 12, 23, 0.78)); box-shadow: 0 18px 48px rgba(0, 5, 16, 0.34), inset 0 1px 0 rgba(153, 220, 255, 0.08); }
.task-review__sidebar { min-width: 0; padding: 16px; border-right: 1px solid rgba(54, 159, 212, 0.25); overflow: auto; background: rgba(2, 18, 31, 0.48); } .task-review__sidebar { min-width: 0; padding: 16px; border-right: 1px solid rgba(54, 159, 212, 0.25); overflow: auto; background: rgba(2, 18, 31, 0.48); }
.task-review__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid rgba(44, 169, 226, 0.28); border-radius: 10px; background: rgba(2, 18, 31, 0.64); } .task-review__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 12px; border: 1px solid rgba(44, 169, 226, 0.28); border-radius: 10px; background: rgba(2, 18, 31, 0.64); }
.task-review__filters :deep(.el-form-item) { margin-bottom: 0; } .task-review__filters :deep(.el-form-item) { margin-bottom: 0; }
.task-review__filters :deep(.el-select) { width: 100%; } .task-review__filters :deep(.el-select) { width: 100%; }
.task-review__list-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 4px; color: #dff6ff; font-size: 16px; font-weight: 700; } .task-review__list-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 4px; color: #dff6ff; font-size: 16px; font-weight: 700; }
@ -305,7 +305,7 @@ onBeforeUnmount(() => {
.task-review__scores { display: flex; gap: 10px; color: #b9d9eb; font-size: 13px; white-space: nowrap; } .task-review__scores { display: flex; gap: 10px; color: #b9d9eb; font-size: 13px; white-space: nowrap; }
.task-review__scores span { padding: 7px 10px; border: 1px solid rgba(50, 166, 223, 0.28); border-radius: 999px; background: rgba(2, 26, 43, 0.68); } .task-review__scores span { padding: 7px 10px; border: 1px solid rgba(50, 166, 223, 0.28); border-radius: 999px; background: rgba(2, 26, 43, 0.68); }
.task-review__scores strong { margin-left: 5px; color: #77d9ff; font-size: 17px; } .task-review__scores strong { margin-left: 5px; color: #77d9ff; font-size: 17px; }
.task-review__student-preview-scroll { height: calc(100vh - 260px); min-height: 580px; margin-top: 22px; overflow: scroll; scrollbar-gutter: stable; scrollbar-color: #238db8 #061724; border: 1px solid rgba(54, 159, 212, 0.32); border-radius: 10px; } .task-review__student-preview-scroll { height: calc(100vh - 260px); min-height: 580px; margin-top: 22px; overflow: auto; scrollbar-gutter: stable; scrollbar-color: #238db8 #061724; border: 1px solid rgba(54, 159, 212, 0.32); border-radius: 10px; }
.task-review__student-preview-scroll::-webkit-scrollbar { width: 12px; height: 12px; } .task-review__student-preview-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.task-review__student-preview-scroll::-webkit-scrollbar-track { background: #061724; } .task-review__student-preview-scroll::-webkit-scrollbar-track { background: #061724; }
.task-review__student-preview-scroll::-webkit-scrollbar-thumb { border: 2px solid #061724; border-radius: 8px; background: #238db8; } .task-review__student-preview-scroll::-webkit-scrollbar-thumb { border: 2px solid #061724; border-radius: 8px; background: #238db8; }

11
src/views/teacherEnd/student/index.vue
Unescape Escape View File

@ -64,7 +64,7 @@
<span>{{ formatDate(row.createTime) }}</span> <span>{{ formatDate(row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="360"> <el-table-column label="操作" align="center" min-width="360">
<template #default="{ row }"> <template #default="{ row }">
<div class="student-action-group"> <div class="student-action-group">
<el-button type="info" text @click="editSchool(row)">编辑</el-button> <el-button type="info" text @click="editSchool(row)">编辑</el-button>
@ -516,19 +516,12 @@ onMounted(async () => {
align-items: center; align-items: center;
gap: 20px; gap: 20px;
} }
:deep(.pagination-container) {
.el-pagination {
// 去掉定位
position: sticky !important;
}
}
.student-action-group { .student-action-group {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
flex-wrap: nowrap; flex-wrap: wrap;
white-space: nowrap;
:deep(.el-button + .el-button) { :deep(.el-button + .el-button) {
margin-left: 0; margin-left: 0;
} }

31
src/views/teacherEnd/teacher/index.vue
Unescape Escape View File

@ -63,15 +63,17 @@
<span>{{ formatDate(row.createTime) }}</span> <span>{{ formatDate(row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center" min-width="300">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="isManagerTeacher"> <div class="teacher-action-cell">
<el-button type="primary" text :disabled="row.hasCreatedClass" @click="editSchool(row)">编辑</el-button> <template v-if="isManagerTeacher">
<el-button type="danger" text :disabled="row.hasCreatedClass" @click="delSchool(row)">删除</el-button> <el-button type="primary" text :disabled="row.hasCreatedClass" @click="editSchool(row)">编辑</el-button>
<el-button type="warning" text @click="initializeTeacherPassword(row)">密码初始化</el-button> <el-button type="danger" text :disabled="row.hasCreatedClass" @click="delSchool(row)">删除</el-button>
<el-tag v-if="row.hasCreatedClass" type="warning" size="small">该教师已创建班级，不允许编辑或删除</el-tag> <el-button type="warning" text @click="initializeTeacherPassword(row)">密码初始化</el-button>
</template> <el-tag v-if="row.hasCreatedClass" type="warning" size="small">该教师已创建班级，不允许编辑或删除</el-tag>
<el-tag v-else type="info">仅查看</el-tag> </template>
<el-tag v-else type="info">仅查看</el-tag>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -362,6 +364,19 @@ onMounted(() => {
.empty-summary { .empty-summary {
color: rgba(184, 218, 235, 0.58); color: rgba(184, 218, 235, 0.58);
} }
.teacher-action-cell {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 6px;
.el-tag {
height: auto;
white-space: normal;
line-height: 1.5;
padding: 2px 8px;
}
}
.student-count { .student-count {
color: #63dcff; color: #63dcff;
font-size: 18px; font-size: 18px;

26
src/views/teacherEnd/trainingTask/index.vue
Unescape Escape View File

@ -674,7 +674,7 @@ function buildPayload() {
align-items: stretch; align-items: stretch;
gap: 16px; gap: 16px;
padding: 20px 22px; padding: 20px 22px;
margin: 0 54px 32px; margin: 0 0 32px;
border: 1px solid rgba(42, 190, 255, 0.5); border: 1px solid rgba(42, 190, 255, 0.5);
border-radius: 8px; border-radius: 8px;
background: background:
@ -710,9 +710,10 @@ function buildPayload() {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 16px 24px;
width: 100%; width: 100%;
} }
@ -721,7 +722,7 @@ function buildPayload() {
z-index: 1; z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
flex: 0 0 300px; flex: 0 1 300px;
gap: 10px; gap: 10px;
min-width: 280px; min-width: 280px;
} }
@ -787,7 +788,8 @@ function buildPayload() {
.search-panel { .search-panel {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 0 0 600px; flex: 1 1 480px;
min-width: 0;
gap: 12px; gap: 12px;
:deep(.el-input) { :deep(.el-input) {
@ -860,10 +862,10 @@ function buildPayload() {
.task-grid { .task-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 42px 70px; gap: 42px 70px;
min-height: 280px; min-height: 280px;
padding: 4px 54px 42px; padding: 4px 0 42px;
} }
.task-card { .task-card {
@ -1014,10 +1016,6 @@ function buildPayload() {
} }
@media (max-width: 1280px) { @media (max-width: 1280px) {
.task-filter {
margin-inline: 24px;
}
.filter-primary-row { .filter-primary-row {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
@ -1029,20 +1027,14 @@ function buildPayload() {
} }
.task-grid { .task-grid {
grid-template-columns: repeat(2, minmax(220px, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
padding-inline: 24px;
} }
} }
@media (max-width: 760px) { @media (max-width: 760px) {
.task-filter {
margin-inline: 4px;
}
.task-grid { .task-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 22px; gap: 22px;
padding-inline: 4px;
} }
.search-panel { .search-panel {

Write Preview
Loading…
Cancel
Save