init

src/views/historySearchDetail.vue

@@ -0,0 +1,153 @@
+<template>
+    <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 class="time-school-bar">
+        <span>日期：{{ dateRange }}</span>
+        <span style="margin-left: 20px;">{{ schoolName }} &nbsp;&nbsp;{{ className }}</span>
+      </div>
+  
+      <!-- 科目教师卡片流式容器，超出纵向滚动 -->
+      <div class="card-scroll-wrap">
+        <div class="card-container">
+          <div class="subject-card" v-for="(item, index) in subjectList" :key="index">
+            <div class="card-title">{{ item.subject }}</div>
+            <div class="card-teacher">{{ item.teacher }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'StudentTeachDetail',
+    data() {
+      return {
+        // 头部信息
+        studentName: '朱思媛',
+        className: '预备1班',
+        schoolName: '上海市进才中学北校',
+        dateRange: '2025-07-11~2026-07-15',
+  
+        // 科目+教师数据源（完全匹配截图）
+        subjectList: [
+          { subject: '班主任', teacher: '伍芳芳' },
+          { subject: '副班主任', teacher: '未设置' },
+          { subject: '语文', teacher: '卫红' },
+          { subject: '数学', teacher: '伍芳芳' },
+          { subject: '英语', teacher: '俞莉玉' },
+          { subject: '体育', teacher: '郑浩淼' },
+          { subject: '美术', teacher: '蔡婷婷' },
+          { subject: '科学', teacher: '游宝玲' },
+          { subject: '劳技', teacher: '牛乐' },
+          { subject: '地理', teacher: '沈晓燕' },
+          { subject: '音乐', teacher: '李海昆' },
+  
+          { subject: '心理', teacher: '展望' },
+          { subject: '道德与法治', teacher: '郭雨佳' },
+          { subject: '班主任', teacher: '伍芳芳' },
+          { subject: '劳动', teacher: '牛乐' },
+          { subject: '信息科技', teacher: '张颖' },
+          { subject: '副班主任', teacher: '展望' },
+          { subject: '校本(劳动教育)', teacher: '牛乐' },
+          { subject: '体育与健康', teacher: '郑浩淼' },
+          { subject: '二外', teacher: '季思飞' },
+          { subject: '校本(心理+二外)', teacher: '数字化中心09' }
+        ]
+      }
+    },
+    methods: {
+      // 返回上一页
+      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>