teach_sys_Demo/src/components/CoursesVideoPlayer/index.jsx

import { Avatar } from "@arco-design/web-react";
import Locked from "@/components/Locked";
import "./index.css";

export default ({ className = "", isLock = false }) => {
  const handleClickBtn = (item) => {
    console.log(item);
  };

  return (
    <div className={`${className} courses-video-player-wrapper`}>
      {/* 直播板块 */}
      <div className="courses-video-player">
        {isLock ? (
          <Locked
            className="video-lock-wrapper"
            text="该板块将于「垂直能力提升」阶段启动后开放届时，请留意教务系统通知，您可在该板块进行线上
        1V1 求职策略定制"
          />
        ) : (
          <>
            <div className="courses-video-player-header">
              <span onClick={() => handleClickBtn(1)}>&lt; 上一集</span>
              <span className="courses-video-player-header-title">
                钢铁是怎样炼成的
              </span>
              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
            </div>
            <div className="courses-video-player-video">
              <video src="/live.mp4" autoPlay 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>
  );
};