145 lines
3.6 KiB
Vue
145 lines
3.6 KiB
Vue
<template>
|
||
<div class="student-teach-detail-wrap">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="top-header-bar">
|
||
<div class="left-info">
|
||
<span class="label">当前学生：</span>
|
||
<span class="text">{{ $route.query.studentName }}</span>
|
||
<span class="label" style="margin-left: 24px;">当前班级：</span>
|
||
<span class="text">{{ $route.query.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.schoolName }} {{ item.className }}</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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'StudentTeachDetail',
|
||
data() {
|
||
return {
|
||
// 科目+教师数据源（完全匹配截图）
|
||
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.HistoryClassTeachByStuIdList=resp.data;
|
||
}
|
||
});
|
||
},
|
||
// 返回上一页
|
||
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;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* 顶部头部行 */
|
||
.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> |