mirror of
https://github.com/PlayEdu/backend
synced 2025-06-08 13:14:08 +08:00
视频课程列表
This commit is contained in:
禺狨
parent
bb7807f87a
commit
19e68da26f
@ -24,7 +24,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>PlayEdu</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
1
src/pages/course/index.ts
Normal file
1
src/pages/course/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from "./vod";
|
||||||
0
src/pages/course/vod/Vod.module.css
Normal file
0
src/pages/course/vod/Vod.module.css
Normal file
130
src/pages/course/vod/Vod.tsx
Normal file
130
src/pages/course/vod/Vod.tsx
Normal 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
1
src/pages/course/vod/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from "./Vod";
|
||||||
@ -2,3 +2,4 @@ export * from "./home";
|
|||||||
export * from "./login";
|
export * from "./login";
|
||||||
export * from "./dashboard";
|
export * from "./dashboard";
|
||||||
export * from "./error";
|
export * from "./error";
|
||||||
|
export * from "./course";
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { RouteObject } from "react-router-dom";
|
import { RouteObject } from "react-router-dom";
|
||||||
import { Login, HomePage, Dashboard, ErrorPage } from "../pages";
|
import { Login, HomePage, Dashboard, ErrorPage, VodListPage } from "../pages";
|
||||||
|
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
@ -11,6 +11,10 @@ const routes: RouteObject[] = [
|
|||||||
path: "/",
|
path: "/",
|
||||||
element: <Dashboard />,
|
element: <Dashboard />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/vod",
|
||||||
|
element: <VodListPage />,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -25,7 +25,74 @@
|
|||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||||||
|
color: #ff4d4f !important;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-menu-item-active {
|
.ant-menu-item-active {
|
||||||
background-color: #ff4d4f !important;
|
background-color: #ff4d4f !important;
|
||||||
color: white !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;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user