feat: 🎸 新增了一些页面
This commit is contained in:
229
src/components/CoursesVideoPlayer/index.css
Normal file
229
src/components/CoursesVideoPlayer/index.css
Normal file
@@ -0,0 +1,229 @@
|
||||
.courses-video-player-wrapper {
|
||||
width: 800px;
|
||||
height: 798px;
|
||||
position: relative;
|
||||
|
||||
.lock {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 433px;
|
||||
height: 384px;
|
||||
}
|
||||
|
||||
.courses-video-player {
|
||||
width: 800px;
|
||||
height: 545px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
|
||||
.courses-video-player-header {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> span {
|
||||
color: #2c7aff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.courses-video-player-header-title {
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.courses-video-player-video {
|
||||
width: 100%;
|
||||
height: 478px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.courses-video-player-info {
|
||||
margin-top: 20px;
|
||||
width: 800px;
|
||||
height: 234px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
background-image: linear-gradient(180deg, #daecff, #ffffff);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.courses-video-player-audience-info {
|
||||
width: 272px;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
border-right: 1px solid #f2f3f5;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.teacher-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -5px;
|
||||
width: 62px;
|
||||
height: 20px;
|
||||
background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.teacher-name {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.teacher-tag {
|
||||
background-color: #f2f3f5;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 8px;
|
||||
border-radius: 2px;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.living-data {
|
||||
width: 100%;
|
||||
height: 47px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.living-data-item {
|
||||
width: 78px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
> span:first-child {
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
> span:last-child {
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.courses-video-player-teacher-info {
|
||||
width: 456px;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
box-sizing: border-box;
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
&::before {
|
||||
background-image: url("@/assets/images/CoursesVideoPlayer/hat_icon.png");
|
||||
}
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
&::before {
|
||||
background-image: url("@/assets/images/CoursesVideoPlayer/blank_icon.png");
|
||||
}
|
||||
}
|
||||
.teacher-introduce {
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
}
|
||||
.courses-video-player-teacher-introduce {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.courses-video-player-teacher-tags {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.teacher-tags {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
margin-top: 5px;
|
||||
|
||||
> li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
background-color: #f2f3f5;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/components/CoursesVideoPlayer/index.jsx
Normal file
79
src/components/CoursesVideoPlayer/index.jsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
import { Avatar } from "@arco-design/web-react";
|
||||
import LOCKICON from "@/assets/images/Common/lock_bg.png";
|
||||
import "./index.css";
|
||||
|
||||
export default ({ className = "" }) => {
|
||||
const [isLock, setIsLock] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={`${className} courses-video-player-wrapper`}>
|
||||
{/* 直播板块 */}
|
||||
<div className="courses-video-player">
|
||||
{isLock ? (
|
||||
<img className="lock" src={LOCKICON} alt="lock" />
|
||||
) : (
|
||||
<>
|
||||
<div className="courses-video-player-header">
|
||||
<span>< 上一集</span>
|
||||
<span className="courses-video-player-header-title">
|
||||
钢铁是怎样炼成的
|
||||
</span>
|
||||
<span>下一集 ></span>
|
||||
</div>
|
||||
<div className="courses-video-player-video">
|
||||
<video src="" controls></video>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* 直播信息板块 */}
|
||||
<div className="courses-video-player-info">
|
||||
{/* 直播观众信息 */}
|
||||
<div className="courses-video-player-audience-info">
|
||||
<Avatar className="teacher-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
|
||||
/>
|
||||
</Avatar>
|
||||
<span className="teacher-name">赵老师</span>
|
||||
<span className="teacher-tag">教育体系认知</span>
|
||||
<div className="living-data">
|
||||
<div className="living-data-item">
|
||||
<span>开始</span>
|
||||
<span>9/1 10:00</span>
|
||||
</div>
|
||||
<div className="living-data-item">
|
||||
<span>时长</span>
|
||||
<span>60分钟</span>
|
||||
</div>
|
||||
<div className="living-data-item">
|
||||
<span>观看</span>
|
||||
<span>300000人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 直播教师信息 */}
|
||||
<div className="courses-video-player-teacher-info">
|
||||
<div className="courses-video-player-teacher-introduce">
|
||||
<p className="title icon1">导师介绍</p>
|
||||
<p className="teacher-introduce">
|
||||
这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是
|
||||
一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是
|
||||
一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍
|
||||
</p>
|
||||
</div>
|
||||
<div className="courses-video-player-teacher-tags">
|
||||
<p className="title icon2">教师专长</p>
|
||||
<ul className="teacher-tags">
|
||||
<li>一般般</li>
|
||||
<li>一般般</li>
|
||||
<li>一般般</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user