yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-08 02:35:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

视频课程列表

Browse Source
This commit is contained in:
禺狨 2023-03-02 15:52:54 +08:00
parent bb7807f87a
commit 19e68da26f
8 changed files with 207 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>PlayEdu</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

1
src/pages/course/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./vod";

0
src/pages/course/vod/Vod.module.css Normal file
View File

130
src/pages/course/vod/Vod.tsx Normal file
View File

@ -0,0 +1,130 @@
import React, { useEffect } from "react";
import { Typography, Input, Select, Button, Space, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import styles from "./Index.module.css";
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import { login } from "../../../api/index";
interface DataType {
key: string;
name: string;
age: number;
address: string;
}
const columns: ColumnsType<DataType> = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (text) => <span>{text}</span>,
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Action",
key: "action",
render: (_, record) => (
<Space size="middle">
<a>Invite {record.name}</a>
<a>Delete</a>
</Space>
),
},
];
const data: DataType[] = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sydney No. 1 Lake Park",
},
];
export const VodListPage: React.FC = () => {
useEffect(() => {
login.login("1@qq.com", "123123", "1", "2");
}, []);
const handleChange = (e: any) => {
console.log(e);
};
return (
<>
<div className="playedu-main-body mb-24">
<div className="float-left d-flex">
<div className="d-flex mr-24">
<Typography.Text>课程名称：</Typography.Text>
<Input style={{ width: 160 }} placeholder="请输入课程关键字" />
</div>
<div className="d-flex mr-24">
<Typography.Text>课程分类：</Typography.Text>
<Select
placeholder="请选择课程分类"
style={{ width: 160 }}
onChange={handleChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
]}
/>
</div>
<div className="d-flex mr-24">
<Button className="mr-16" danger>
重 置
</Button>
<Button type="primary" danger>
查 询
</Button>
</div>
</div>
</div>
<div className="playedu-main-body">
<div className="float-left j-b-flex mb-24">
<div className="d-flex">
<Button
icon={<PlusOutlined />}
className="mr-16"
type="primary"
danger
>
新建
</Button>
<Button danger>删除</Button>
</div>
<div className="d-flex">
<Button
type="link"
icon={<ReloadOutlined />}
style={{ color: "#333333" }}
></Button>
</div>
</div>
<div className="float-left">
<Table columns={columns} dataSource={data} />
</div>
</div>
</>
);
};

1
src/pages/course/vod/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./Vod";

1
src/pages/index.ts
View File

@ -2,3 +2,4 @@ export * from "./home";
export * from "./login";
export * from "./dashboard";
export * from "./error";
export * from "./course";

6
src/router/routes.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { RouteObject } from "react-router-dom";
import { Login, HomePage, Dashboard, ErrorPage } from "../pages";
import { Login, HomePage, Dashboard, ErrorPage, VodListPage } from "../pages";
const routes: RouteObject[] = [
{
@ -11,6 +11,10 @@ const routes: RouteObject[] = [
path: "/",
element: <Dashboard />,
},
{
path: "/vod",
element: <VodListPage />,
},
],
},
{

67
src/utils/index.css
View File

@ -25,7 +25,74 @@
color: white !important;
}
.ant-menu-submenu-selected > .ant-menu-submenu-title {
color: #ff4d4f !important;
}
.ant-menu-item-active {
background-color: #ff4d4f !important;
color: white !important;
}
.mr-16 {
margin-right: 16px;
}
.mb-24 {
margin-bottom: 24px;
}
.mr-24 {
margin-right: 24px;
}
.float-left {
width: 100%;
height: auto;
float: left;
}
.d-flex {
display: flex;
align-items: center;
}
.j-flex {
display: flex;
justify-content: center;
}
.d-j-flex {
display: flex;
align-items: center;
justify-content: center;
}
.j-r-flex {
display: flex;
justify-content: right;
}
.j-b-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.primary {
color: #ff4d4f;
}
.c-red {
color: #ff4d4f;
}
.playedu-main-body {
width: 100%;
height: auto;
float: left;
background-color: white;
box-sizing: border-box;
padding: 24px;
border-radius: 12px;
}