2023-02-27 15:41:19 +08:00
|
|
|
import "./index.less";
|
|
|
|
import Player from "../../components/Player";
|
|
|
|
import { useMount } from "../../hook";
|
2023-02-28 17:58:30 +08:00
|
|
|
import { Select, Message, Space, Tooltip } from "@arco-design/web-react";
|
2023-02-27 18:01:37 +08:00
|
|
|
const Option = Select.Option;
|
|
|
|
const options = ["全部", "最新的"];
|
|
|
|
import BsCard from "../../components/Card";
|
2023-02-27 23:38:41 +08:00
|
|
|
import TimeScroll from "../../components/TimeScroll";
|
2023-02-28 17:58:30 +08:00
|
|
|
import Tab20Regular from "@ricons/fluent/Tab20Regular";
|
|
|
|
import Table20Regular from "@ricons/fluent/Table20Regular";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { recommendListDefault, courseTimeListDefault } from "./mock";
|
2023-02-27 15:41:19 +08:00
|
|
|
|
|
|
|
export default function Index() {
|
|
|
|
useMount(() => {});
|
|
|
|
|
2023-02-28 17:58:30 +08:00
|
|
|
const [actions, setActions] = useState([
|
|
|
|
{
|
|
|
|
key: "tab",
|
|
|
|
icon: Tab20Regular,
|
|
|
|
active: false,
|
|
|
|
tip: "单格排列",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "table",
|
|
|
|
icon: Table20Regular,
|
|
|
|
active: true,
|
|
|
|
tip: "缩略",
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
const [recommendList, setRecommendList] = useState(recommendListDefault);
|
|
|
|
|
|
|
|
const [courseTimeList, setCourseTimeList] = useState(courseTimeListDefault);
|
|
|
|
|
|
|
|
const onClickActionItem = (action: any) => {
|
|
|
|
setActions((p) => p.map((a) => ({ ...a, active: a.key === action.key })));
|
|
|
|
};
|
|
|
|
|
2023-02-27 15:41:19 +08:00
|
|
|
return (
|
|
|
|
<div className="container course">
|
2023-02-27 23:38:41 +08:00
|
|
|
<div className="recommends">
|
2023-02-28 17:58:30 +08:00
|
|
|
{recommendList.map((item, index) => (
|
|
|
|
<BsCard {...item} key={index} />
|
|
|
|
))}
|
2023-02-27 23:38:41 +08:00
|
|
|
</div>
|
2023-02-28 17:58:30 +08:00
|
|
|
|
|
|
|
<div className="action-bar">
|
2023-02-27 23:38:41 +08:00
|
|
|
<Select
|
|
|
|
placeholder="排序规则"
|
|
|
|
style={{ width: 154 }}
|
|
|
|
onChange={(value) =>
|
|
|
|
Message.info({
|
|
|
|
content: `You select ${value}.`,
|
|
|
|
showIcon: true,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{options.map((option, index) => (
|
|
|
|
<Option key={option} disabled={index === 3} value={option}>
|
|
|
|
{option}
|
|
|
|
</Option>
|
|
|
|
))}
|
|
|
|
</Select>
|
2023-02-28 17:58:30 +08:00
|
|
|
<div className="table-action">
|
|
|
|
{actions.map((action) => (
|
|
|
|
<Tooltip key={action.key} content={action.tip}>
|
|
|
|
<span
|
|
|
|
className={action.active ? "active" : ""}
|
|
|
|
onClick={() => onClickActionItem(action)}
|
|
|
|
>
|
|
|
|
<action.icon />
|
|
|
|
</span>
|
|
|
|
</Tooltip>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="timeline">
|
|
|
|
<div className="thumbnail">
|
|
|
|
{courseTimeList.map((item, index) => (
|
|
|
|
<section key={index}>
|
|
|
|
<div className="time">
|
|
|
|
{item.year}年{item.month}月
|
|
|
|
</div>
|
|
|
|
<div className="statistic">{item.data.length} 个视频</div>
|
|
|
|
<div className="grid">
|
|
|
|
{item.data.map((d: any) => (
|
|
|
|
<BsCard key={d.time} imgUrl={d.img} title={d.title} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
<TimeScroll className="timescroll" data={courseTimeList} />
|
2023-02-27 18:01:37 +08:00
|
|
|
</div>
|
2023-02-27 15:41:19 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|