web-backset.cn/apps/web-main/src/view/Course/index.tsx

import "./index.less";
import Player from "../../components/Player";
import { useMount } from "../../hook";
import { Select, Message } from "@arco-design/web-react";
const Option = Select.Option;
const options = ["全部", "最新的"];
import BsCard from "../../components/Card";
import TimeScroll from "../../components/TimeScroll";

export default function Index() {
  useMount(() => {});

  return (
    <div className="container course">
      <div className="recommends">
        <BsCard
          imgUrl={
            "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
          }
          title={"这个非常OK啊"}
          desc={"推荐内容推荐内容推荐内容推荐内容推荐内容推荐内容推荐内容"}
          action={"开始学习"}
        />
        <BsCard
          imgUrl={
            "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp"
          }
          title={"这个非常OK啊"}
          desc={"推荐内容"}
          action={"开始学习"}
        />
        <BsCard
          imgUrl={
            "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp"
          }
          title={"这个非常OK啊"}
          desc={"推荐内容"}
          action={"开始学习"}
        />
      </div>
      <div className="timeline">
        <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>
        <TimeScroll />
      </div>
    </div>
  );
}