jiaowu-test/src/components/CoursesVideoPlayer/index.css

.courses-video-player-wrapper {
  width: 836px;
  height: 798px;
  position: relative;

  .video-lock-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .courses-video-player {
    width: 100%;
    height: 545px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #e5e6eb;

    .courses-video-player-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e6eb;

      > span {
        color: #2c7aff;
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        /* 添加以下样式来防止点击时背景变色 */
        -webkit-tap-highlight-color: transparent;
      }
      .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%;
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .courses-video-player-info {
    margin-top: 20px;
    width: 100%;
    height: 234px;
    border: 1px solid #e5e6eb;
    border-radius: 16px;
    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: 308px;
      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;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 200%;
          height: 200%;
          object-fit: cover;
          object-position: center 30%;
          position: absolute;
          left: 50%;
          top: 0%;
          transform: translateX(-50%);
        }
      }
      
      /* 孙应战导师头像特殊调整 - 居中显示 */
      .teacher-avatar.teacher-sunyingzhan {
        img {
          width: 175% !important;
          height: 175% !important;
          object-fit: cover !important;
          object-position: center center !important;
          top: -50% !important;
          left: 5% !important;
          transform: none !important;
        }
      }
      
      /* 刘杰导师头像特殊调整 */
      .teacher-avatar.teacher-liujie {
        img {
          width: 200%;  /* 大幅放大 */
          height: 200%;
          object-position: center 30%;  /* 调整位置 */
          top: -50%;  /* 继续大幅上移 */
        }
      }
      
      /* 李奇导师头像特殊调整 - 放大并居中显示 */
      .teacher-avatar.teacher-liqi {
        overflow: hidden !important;
        background-color: rgb(190, 196, 202) !important;
        img {
          width: 260% !important;
          height: 260% !important;
          object-fit: cover !important;
          object-position: center 30% !important;
          position: absolute !important;
          top: -25% !important;
          left: -20% !important;
          transform: none !important;
        }
      }
      
      /* 求职策略页面的头像特殊调整 */
      .teacher-avatar.teacher-strategy {
        img {
          width: 150% !important;
          height: 150% !important;
          object-fit: cover !important;
          object-position: center 40% !important;
          top: 0% !important;
        }
      }
      
      .avatar-wrapper {
        position: relative;
        width: 64px;
        height: 64px;
        
        .living-icon {
          position: absolute;
          left: 1px;
          bottom: -8px;
          width: 62px;
          height: 20px;
          background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
          background-size: 100% 100%;
          z-index: 10;
        }
      }

      .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 {
          min-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;
            white-space: nowrap;
          }
          
          &:first-child {
            min-width: 100px;
          }
        }
      }
    }

    .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;
        text-align: left;
        display: flex;
        align-items: center;

        .title-icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }

      .teacher-introduce {
        width: 100%;
        min-height: 84px;
        max-height: 120px;
        overflow-y: auto;
        font-size: 12px;
        line-height: 18px;
        color: #4e5969;
        
        &::-webkit-scrollbar {
          width: 4px;
        }
        
        &::-webkit-scrollbar-track {
          background: #f2f3f5;
          border-radius: 2px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #c9cdd4;
          border-radius: 2px;
        }
      }
      .courses-video-player-teacher-introduce {
        width: 100%;
        min-height: 100px;
        margin-bottom: 10px;
      }
      .courses-video-player-teacher-tags {
        width: 100%;
        height: auto;
        min-height: 50px;

        .teacher-tags {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          margin-top: 5px;
          gap: 8px;
          overflow: hidden;

          > li {
            box-sizing: border-box;
            padding: 2px 8px;
            background-color: #e5f1ff;
            color: #0077ff;
            font-size: 14px;
            font-weight: 400;
            border-radius: 4px;
            flex-shrink: 0;
            white-space: nowrap;
          }
        }
      }
    }
  }
}