Ver código fonte

feat: 课堂录播页面

NeeDaye 6 meses atrás
pai
commit
277dc111e7

BIN
src/assets/img/course_image.png


+ 5 - 1
src/layouts/styles/index.less

@@ -19,7 +19,7 @@
   padding: unset !important;
 }
 .page-box {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 160px);
   display: flex;
   flex-direction: column;
 }
@@ -28,6 +28,10 @@
   overflow: hidden;
   padding: 10px 20px 20px;
   .ant-pro-card-body {
+    .ant-spin-container {
+      height: calc(100vh - 360px);
+      overflow: auto;
+    }
     margin: 16px;
     .ant-list-items {
       display: flex;

+ 79 - 11
src/pages/Record/index.tsx

@@ -3,6 +3,9 @@ import {
 } from '@ant-design/pro-components';
 import React from 'react';
 import ProList from '@ant-design/pro-list';
+import { Image } from 'antd';
+import './style/index.less';
+import CourseImage from '@/assets/img/course_image.png';
 
 const TableList: React.FC<unknown> = () => {
   const data = [
@@ -68,11 +71,47 @@ const TableList: React.FC<unknown> = () => {
       teacherName: '张老师',
       teacherTime: '2025-05-28 12:00:00',
       classRoom: '高一4班'
-    }
+    },
+    {
+      image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      courseName: '这是课程名称',
+      gradeSubjectName: '高中数学',
+      schoolName: '杭州市滨江区市一中',
+      teacherName: '张老师',
+      teacherTime: '2025-05-28 12:00:00',
+      classRoom: '高一4班'
+    },
+    {
+      image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      courseName: '这是课程名称',
+      gradeSubjectName: '高中数学',
+      schoolName: '杭州市滨江区市一中',
+      teacherName: '张老师',
+      teacherTime: '2025-05-28 12:00:00',
+      classRoom: '高一4班'
+    },
+    {
+      image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      courseName: '这是课程名称',
+      gradeSubjectName: '高中数学',
+      schoolName: '杭州市滨江区市一中',
+      teacherName: '张老师',
+      teacherTime: '2025-05-28 12:00:00',
+      classRoom: '高一4班'
+    },
+    {
+      image: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      courseName: '这是课程名称',
+      gradeSubjectName: '高中数学',
+      schoolName: '杭州市滨江区市一中',
+      teacherName: '张老师',
+      teacherTime: '2025-05-28 12:00:00',
+      classRoom: '高一4班'
+    },
   ];
 
   return (
-    <PageContainer>
+    <PageContainer className="page-box">
       <ProList<any>
         search={{}}
         className="table-box"
@@ -89,22 +128,51 @@ const TableList: React.FC<unknown> = () => {
           };
         }}
         renderItem={(item) => (
-          <div style={{ backgroundColor: '#F8FAFC' }}>
-            <img
+          <div style={{ backgroundColor: '#F8FAFC', cursor: 'pointer' }}>
+            <Image
               width={'100%'}
-              src={item.image}
+              style={{ aspectRatio: '16/9', borderRadius: '15px 15px 0 0' }}
+              preview={false}
+              src={CourseImage}
             />
-            <div>
-              <div>
-                <div>{item.courseName}</div>
-                <div>{item.gradeSubjectName}</div>
+            <div className="course-info">
+              <div className="info-flex">
+                <div style={{ fontWeight: 'bold', fontSize: '18px' }}>{item.courseName}</div>
+                <div style={{ color: '#3C50E0' }}>{item.gradeSubjectName}</div>
+              </div>
+              <div className="info-flex">
+                <div>所属学校:{item.schoolName}</div>
+                <div>授课老师:{item.teacherName}</div>
+              </div>
+              <div className="info-flex">
+                <div>授课时间:{item.teacherTime}</div>
+                <div>授课班级:{item.classRoom}</div>
               </div>
-              <div></div>
-              <div></div>
             </div>
           </div>
         )}
         metas={{
+          active: {
+            title: '评审活动',
+            dataIndex: 'active',
+            fieldProps: {
+              placeholder: '请输入评审活动',
+            }
+          },
+          gradeSubjectName: {
+            title: '授课学科',
+            dataIndex: 'gradeSubjectName',
+            fieldProps: {
+              placeholder: '请选择授课学科',
+            }
+          },
+          teacherTime: {
+            title: '授课时间',
+            dataIndex: 'teacherTime',
+            fieldProps: {
+              placeholder: '请选择授课时间',
+            }
+          },
           actions: {},
         }}
         dataSource={data}

+ 8 - 0
src/pages/Record/style/index.less

@@ -0,0 +1,8 @@
+.course-info {
+  padding: 10px;
+  .info-flex {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+}