feat: 响应式
This commit is contained in:
parent
3754811e60
commit
575a0c4fa2
|
@ -157,7 +157,7 @@ input {
|
||||||
content: attr(data-tip);
|
content: attr(data-tip);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
right: 50%;
|
right: 5%;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
padding: 0.5em 0.75em;
|
padding: 0.5em 0.75em;
|
||||||
z-index: 1000000;
|
z-index: 1000000;
|
||||||
|
@ -171,7 +171,14 @@ input {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.ltr:hover {
|
||||||
|
&::after {
|
||||||
|
left: 5%;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.badge {
|
&.badge {
|
||||||
position: relative;
|
position: relative;
|
||||||
&::before {
|
&::before {
|
||||||
|
|
|
@ -7,6 +7,8 @@
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-right: 1px solid var(--color-border-2);
|
border-right: 1px solid var(--color-border-2);
|
||||||
|
background: #fff;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
> h3 {
|
> h3 {
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
|
@ -67,3 +69,31 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 199;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: #24292f;
|
||||||
|
color: #d7d7d7;
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-primary-2);
|
||||||
|
}
|
||||||
|
> svg {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1120px) {
|
||||||
|
.toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { ms2Time } from "./util";
|
||||||
import Result from "../../components/Result";
|
import Result from "../../components/Result";
|
||||||
import PlayCircle20Regular from "@ricons/fluent/PlayCircle20Regular";
|
import PlayCircle20Regular from "@ricons/fluent/PlayCircle20Regular";
|
||||||
import DocumentChevronDouble20Regular from "@ricons/fluent/DocumentChevronDouble20Regular";
|
import DocumentChevronDouble20Regular from "@ricons/fluent/DocumentChevronDouble20Regular";
|
||||||
|
import List20Regular from "@ricons/fluent/List20Regular";
|
||||||
import { Icon } from "@ricons/utils";
|
import { Icon } from "@ricons/utils";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { IChapter } from "../../api/dto";
|
import { IChapter } from "../../api/dto";
|
||||||
|
@ -33,6 +34,7 @@ const defaultState = {
|
||||||
|
|
||||||
function CourseDetail() {
|
function CourseDetail() {
|
||||||
const { id: course_id = "" } = useParams();
|
const { id: course_id = "" } = useParams();
|
||||||
|
const [tocVisible, setTocVisible] = useState(true);
|
||||||
const [state, setState] = useState<IState>(defaultState);
|
const [state, setState] = useState<IState>(defaultState);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
@ -112,7 +114,12 @@ function CourseDetail() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="course-detail">
|
<div className="course-detail">
|
||||||
<aside className="table-of-content">
|
<aside
|
||||||
|
className="table-of-content"
|
||||||
|
style={{
|
||||||
|
display: tocVisible ? "block" : "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<h3>{state.course.course_title}</h3>
|
<h3>{state.course.course_title}</h3>
|
||||||
<div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
|
<div style={{ color: "var(--color-text-3)", fontSize: 13 }}>
|
||||||
<span>{state.course.course_createtime}</span>
|
<span>{state.course.course_createtime}</span>
|
||||||
|
@ -143,9 +150,18 @@ function CourseDetail() {
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
<span
|
||||||
|
className="toggle bs tip ltr"
|
||||||
|
data-tip="折叠/展开目录"
|
||||||
|
onClick={() => setTocVisible((p) => !p)}
|
||||||
|
>
|
||||||
|
<List20Regular />
|
||||||
|
</span>
|
||||||
<div
|
<div
|
||||||
className="content"
|
className="content"
|
||||||
style={{ left: state.toc.length > 0 ? 300 : "0" }}
|
style={{
|
||||||
|
left: state.toc.length > 0 && tocVisible ? 300 : 0,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{state.view}
|
{state.view}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user