mozzie/web-backset.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/backset.cn-dev-2.1' into release/1.0

Browse Source
This commit is contained in:
mozzie 2023-03-23 15:45:46 +08:00
commit 630c8ca1b5
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/view/CourseDetail/index.less
View File

@ -8,31 +8,47 @@
overflow-y: auto;
border-right: 1px solid var(--color-border-2);
> h2 {
margin-bottom: 10px;
> h3 {
margin: 0 0 10px 0;
}
.toc {
padding-top: 20px;
.level-1 {
color: var(--color-text-4);
color: var(--color-text-3);
line-height: 1.5;
padding-top: 10px;
padding-top: 24px;
font-size: 13px;
&:first-of-type {
padding-top: 0;
}
}
.level-2 {
padding: 5px 0;
margin: 6px 0;
padding: 6px 12px 6px 6px;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: var(--color-text-2);
cursor: pointer;
&:hover {
color: var(--color-text-1);
background: var(--color-fill-1);
border-radius: 6px;
}
&.active {
background: var(--color-fill-2);
border-radius: 6px;
color: var(--color-primary-1);
.xicon,
.time {
color: var(--color-primary-1);
}
}
.xicon {
color: var(--color-text-4);
margin-right: 6px;
}
.time {

18
apps/web/src/view/CourseDetail/index.tsx
View File

@ -8,6 +8,7 @@ import { getCourseDetailById } from "../../api";
import { ms2Time } from "./util";
import Result from "../../components/Result";
import PlayCircle20Regular from "@ricons/fluent/PlayCircle20Regular";
import DocumentChevronDouble20Regular from "@ricons/fluent/DocumentChevronDouble20Regular";
import { Icon } from "@ricons/utils";
import dayjs from "dayjs";
@ -52,6 +53,11 @@ function CourseDetail() {
level: 2,
time: "",
active: true,
icon: (
<Icon size={20}>
<DocumentChevronDouble20Regular />
</Icon>
),
view: <Guide mdText={data?.guide.guide_html} />,
},
...processToc,
@ -83,12 +89,10 @@ function CourseDetail() {
{toc.length > 0 ? (
<>
<aside className="table-of-content">
<h2>{course.course_title}</h2>
<div>
<div style={{ color: "var(--color-text-3)" }}>
<h3>{course.course_title}</h3>
<div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
<span>{course.course_createtime}</span>
</div>
</div>
<div className="toc">
{toc.map((i: any) => {
if (i.level === 1) {
@ -104,9 +108,11 @@ function CourseDetail() {
key={i.title}
onClick={() => onclickItem(i)}
>
<div className="bs ellipsis fc">
<div className="bs fc">
{i.icon}
<span>{i.title}</span>
<span style={{ padding: "0 12px 0 6px" }}>
{i.title}
</span>
</div>
<span className="time">{i.time}</span>
</div>