feat: 🎸 更新了很多信息
This commit is contained in:
173
src/components/CourseList/index.css
Normal file
173
src/components/CourseList/index.css
Normal file
@@ -0,0 +1,173 @@
|
||||
.course-list-wrapper {
|
||||
width: 304px;
|
||||
height: 798px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 16px;
|
||||
overflow-y: hidden;
|
||||
|
||||
.course-list-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
color: #1d2129;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 5px;
|
||||
width: 31px;
|
||||
height: 3px;
|
||||
background-image: url("@/assets/images/Common/title_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.course-list-content {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
overflow-y: auto;
|
||||
|
||||
.course-list {
|
||||
width: 100%;
|
||||
|
||||
/* 自定义折叠面板元素 */
|
||||
.course-list-item {
|
||||
width: 272px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 0;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
border: none;
|
||||
|
||||
.arco-collapse-item-header {
|
||||
border-radius: 8px;
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
.arco-timeline-item {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.arco-collapse-item-content-expanded {
|
||||
background-color: #fff;
|
||||
}
|
||||
.arco-collapse-item-content-box {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 自定义时间轴元素 */
|
||||
.time-line-dot-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("@/assets/images/Common/time_line_dot_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.time-line-clock-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-image: url("@/assets/images/Common/time_line_clock_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.time-line-item {
|
||||
width: 248px;
|
||||
height: 74px;
|
||||
background-color: #f2f3f5;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
|
||||
> p {
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
> .time-line-item-info {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #4e5969;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.finish {
|
||||
&::before {
|
||||
content: "已结束";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 48px;
|
||||
height: 20px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
background-color: #c9cdd4;
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c9cdd4;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border: 1px solid #0275f2;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.coming {
|
||||
&::before {
|
||||
content: "即将开始";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
background-color: #f2f3f5;
|
||||
color: #ff7d00;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ff7d00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/components/CourseList/index.jsx
Normal file
56
src/components/CourseList/index.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Collapse, Timeline } from "@arco-design/web-react";
|
||||
import "./index.css";
|
||||
|
||||
const TimelineItem = Timeline.Item;
|
||||
const CollapseItem = Collapse.Item;
|
||||
|
||||
const CourseList = ({ className = "" }) => {
|
||||
return (
|
||||
<div className={`${className} course-list-wrapper`}>
|
||||
<p className="course-list-title">课程列表</p>
|
||||
<div className="course-list-content">
|
||||
<Collapse
|
||||
lazyload
|
||||
className="course-list"
|
||||
bordered={false}
|
||||
expandIconPosition="right"
|
||||
>
|
||||
<CollapseItem
|
||||
header="课程单元1"
|
||||
name="1"
|
||||
className="course-list-item"
|
||||
>
|
||||
<Timeline>
|
||||
<TimelineItem
|
||||
dot={<div className="time-line-dot-icon" />}
|
||||
lineType="dashed"
|
||||
>
|
||||
<div className="time-line-item finish">
|
||||
<p>终生学习系统</p>
|
||||
<div className="time-line-item-info">
|
||||
<span>张老师</span>
|
||||
<span>2023-01-01</span>
|
||||
</div>
|
||||
</div>
|
||||
</TimelineItem>
|
||||
<TimelineItem
|
||||
dot={<div className="time-line-clock-icon" />}
|
||||
lineType="dashed"
|
||||
>
|
||||
<div className="time-line-item active">
|
||||
<p>终生学习系统</p>
|
||||
<div className="time-line-item-info">
|
||||
<span>张老师</span>
|
||||
<span>2023-01-01</span>
|
||||
</div>
|
||||
</div>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</CollapseItem>
|
||||
</Collapse>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseList;
|
||||
Reference in New Issue
Block a user