front/src/views/career/plan/video-play-detail.scss

.video_detail_container {
  padding: 20px;
  min-height: 100vh;
  background: #f7f7f7;

  .el-main {
    padding: 7px 8px;
    background: #fff;
  }

  .aside_header {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 16px 0 16px;
    margin-bottom: 16px;
  }

  .el-aside {
    background: white;
    padding: 0;
    margin-bottom: 0;
    margin-right: 16px;
  }

  .aside_header span {
    margin-top: 5px;
    width: 84px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #343434;
    line-height: 22px;
  }

  .aside_header span:first-child {
    width: 173px;
    height: 27px;
    background: linear-gradient(180deg, #ffffff 0%, var(--themeColor) 100%);
    opacity: 0.5;
  }

  .video_wrap {
    border-bottom: 10px solid #f7f7f7;
  }

  .video_wrap video {
    width: 100%;
    height: 566px;
  }

  .text {
    padding-left: 32px;
  }

  .text span {
    cursor: pointer;
    width: 64px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #343434;
    margin-right: 16px;
    position: relative;
    padding: 32px 0 25px 0;
    display: inline-block;
  }

  .video_info {
    width: 100%;
    height: 172px;
    background: #ffffff;
    border-radius: 4px;
    padding-top: 28px;
    padding-left: 32px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #343434;
  }

  .info_active::after {
    content: "";
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--themeColor) transparent;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .video_info {
    border-top: 4px solid var(--themeColor);
    border-radius: 4px 4px 0px 0px;
  }

  .summary_tit {
    margin-bottom: 16px;
  }

  .vis_totle {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .vis_totle img {
    margin-right: 6px;
  }

  .introduce .introduce_tit {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #343434;
    line-height: 20px;
    margin-bottom: 12px;
  }

  .introduce_con {
    height: 66px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #727272;
    line-height: 22px;
  }

  .teacher_info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .teacher_ach_info {
    display: flex;
    flex-wrap: wrap;
  }

  .teacher_ach_info .ach_item {
    margin-bottom: 4px;
    flex: 50%;
    height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #797979;
    line-height: 20px;
    font-size: 14px;
  }

  .el-tree {
    overflow: scroll;
    height: 600px;
    scroll-margin: 20px;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
    background-color: rgb(238, 241, 245);
  }
}