|
|
@@ -1,7 +1,8 @@
|
|
|
//课程详情图片标题按钮主讲人组合
|
|
|
import { Link } from "react-router-dom";
|
|
|
-import { Image, Button, Space, Col, Row } from "antd";
|
|
|
+import { Image, Button, Space, Col, Row, Breadcrumb } from "antd";
|
|
|
import { Typography } from "antd";
|
|
|
+import { HomeOutlined } from "@ant-design/icons";
|
|
|
|
|
|
import { IUser } from "../../auth/User";
|
|
|
import { API_HOST } from "../../../request";
|
|
|
@@ -20,23 +21,34 @@ const Widget = ({ title, subtitle, coverUrl, teacher }: IWidget) => {
|
|
|
<>
|
|
|
<Row>
|
|
|
<Col flex="auto"></Col>
|
|
|
- <Col flex="1260px">
|
|
|
- <Space>
|
|
|
- <Image
|
|
|
- width={200}
|
|
|
- style={{ borderRadius: 12 }}
|
|
|
- src={API_HOST + "/" + coverUrl}
|
|
|
- fallback={`${API_HOST}/app/course/img/default.jpg`}
|
|
|
- />
|
|
|
- <Space direction="vertical">
|
|
|
- <Title level={3}>{title}</Title>
|
|
|
- <Title level={5}>{subtitle}</Title>
|
|
|
+ <Col flex="960px">
|
|
|
+ <Space direction="vertical">
|
|
|
+ <Breadcrumb>
|
|
|
+ <Breadcrumb.Item>
|
|
|
+ <HomeOutlined />
|
|
|
+ </Breadcrumb.Item>
|
|
|
+ <Breadcrumb.Item>
|
|
|
+ <Link to="/course/list">课程</Link>
|
|
|
+ </Breadcrumb.Item>
|
|
|
+ <Breadcrumb.Item>{title}</Breadcrumb.Item>
|
|
|
+ </Breadcrumb>
|
|
|
+ <Space>
|
|
|
+ <Image
|
|
|
+ width={200}
|
|
|
+ style={{ borderRadius: 12 }}
|
|
|
+ src={API_HOST + "/" + coverUrl}
|
|
|
+ fallback={`${API_HOST}/app/course/img/default.jpg`}
|
|
|
+ />
|
|
|
+ <Space direction="vertical">
|
|
|
+ <Title level={3}>{title}</Title>
|
|
|
+ <Title level={5}>{subtitle}</Title>
|
|
|
+ <Button type="primary">关注</Button>
|
|
|
+ </Space>
|
|
|
</Space>
|
|
|
+ <div>
|
|
|
+ 主讲人: <UserName {...teacher} />
|
|
|
+ </div>
|
|
|
</Space>
|
|
|
- <Button type="primary">关注</Button>
|
|
|
- <div>
|
|
|
- 主讲人: <UserName {...teacher} />
|
|
|
- </div>
|
|
|
</Col>
|
|
|
<Col flex="auto"></Col>
|
|
|
</Row>
|