lijing
45a758adea
- .main-container 去掉通道默认的 1px 描边（保留白底/圆角/阴影） - 24 个视图根容器剥离自带的 border/圆角/背景/padding——它与卡片 16px 叠加成 32px， 是「双层边框 + 空隙过大」的主因 - 学科管理不再 flex:1 把图例推到卡片底部；时段设置工具条去灰底，避免与表头双色带 - 教师管理页签 activeTab 统一为字符串，与 TabPane name 一致
146 lines
3.7 KiB
Vue
146 lines
3.7 KiB
Vue
<template>
|
||
<div class="page-wrapper yh-fill">
|
||
<div class="main-container">
|
||
<div class="student-teach-detail-wrap">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="top-header-bar">
|
||
<div class="left-info">
|
||
<span class="label">当前学生：</span>
|
||
<span class="text">{{ studentName }}</span>
|
||
<span class="label" style="margin-left: 24px;">当前班级：</span>
|
||
<span class="text">{{ className }}</span>
|
||
</div>
|
||
<Button type="primary" @click="goBack">返回上一级</Button>
|
||
</div>
|
||
|
||
<div v-for="(item,index) in HistoryClassTeachByStuIdList" :key="index">
|
||
<!-- 时间段+学校班级栏 -->
|
||
<div class="time-school-bar">
|
||
<span>日期：{{ item.yearDate }}</span>
|
||
<span style="margin-left: 20px;">{{ item.schName }} {{ item.gradeName }}</span>
|
||
</div>
|
||
|
||
<!-- 科目教师卡片流式容器，超出纵向滚动 -->
|
||
<div class="card-scroll-wrap">
|
||
<div class="card-container">
|
||
<div class="subject-card" v-for="(itt, index) in item.teach" :key="index">
|
||
<div class="card-title">{{ itt.subName }}</div>
|
||
<div class="card-teacher">{{ itt.teacherName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'StudentTeachDetail',
|
||
data() {
|
||
return {
|
||
studentName:'',
|
||
className:'',
|
||
// 科目+教师数据源（完全匹配截图）
|
||
HistoryClassTeachByStuIdList: []
|
||
}
|
||
},
|
||
created(){
|
||
if(this.$route.query.stuId){
|
||
this.getHistoryClassTeachByStuId();
|
||
}
|
||
},
|
||
methods: {
|
||
//通过学生Id获取历史任教信息
|
||
getHistoryClassTeachByStuId:function(){
|
||
const _this = this;
|
||
var item={
|
||
stuId:_this.$route.query.stuId
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getHistoryClassTeachByStuId, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.studentName=resp.data.stuName;
|
||
this.className=resp.data.className;
|
||
this.HistoryClassTeachByStuIdList=resp.data.classTeachs;
|
||
}
|
||
});
|
||
},
|
||
// 返回上一页
|
||
goBack() {
|
||
this.$router.go(-1)
|
||
// 也可指定路由跳转
|
||
// this.$router.push('/对应路由地址')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.student-teach-detail-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
|
||
|
||
/* 顶部头部行 */
|
||
.top-header-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
margin-bottom: 16px;
|
||
}
|
||
.left-info {
|
||
font-size: 22px;
|
||
}
|
||
.label {
|
||
color: #333;
|
||
}
|
||
.text {
|
||
color: #2d7ff9;
|
||
}
|
||
|
||
/* 日期学校栏 */
|
||
.time-school-bar {
|
||
padding: 12px 16px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 卡片滚动容器：占剩余高度，内容溢出纵向滚动 */
|
||
.card-scroll-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
}
|
||
.card-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14px;
|
||
}
|
||
|
||
/* 单个科目卡片样式 */
|
||
.subject-card {
|
||
width: 162px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.card-title {
|
||
background-color: #4080ff;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
padding: 9px 4px;
|
||
font-size: 15px;
|
||
}
|
||
.card-teacher {
|
||
text-align: center;
|
||
padding: 11px 4px;
|
||
background-color: #f9fafc;
|
||
font-size: 15px;
|
||
color: #333;
|
||
}
|
||
</style> |