HQ_yueYue/展示端/src/pages/A4selectCourse/index.module.scss

.A4selectCourse {
  position: relative;
  :global {
    .A4main {
      height: calc(100% - 60px);
      overflow-y: auto;
      background-image: url('../../assets/img/selectCourse/bg.jpg');
      background-size: 100% 100%;
      .A4row {
        margin-top: 20px;
        margin-bottom: 70px;
        .A4row1 {
          height: 54px;
          line-height: 54px;
          display: inline-block;
          padding: 0 24px 0 50px;
          border-radius: 0 30px 30px 0;
          background-color: var(--themeColor2);
          font-size: 20px;
          color: #fff;
          box-shadow: 0px 4px 5px 0px rgba(109, 170, 31, 0.5);
          position: relative;
          & > img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 24px;
          }
        }
        .A4row2 {
          width: 90%;
          height: 550px;
          background-image: url('../../assets/img/selectCourse/pop.png');
          background-size: 100% 100%;
          margin: 25px auto;
          .A4row2_1 {
            padding-left: 25px;
            height: 60px;
            line-height: 58px;
            width: 70%;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .A4row2_2 {
            height: 380px;
            padding: 30px 30px 0;

            & > div {
              width: 100%;
              height: 100%;
              border-bottom: 2px dashed #bebebe;
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-bottom: 30px;
              .A4row2_2tit {
                font-weight: 700;
                font-size: 16px;
                color: var(--themeColor);
                margin-bottom: 5px;
              }
              & > p {
                min-height: 66px;
                text-align: justify;
                font-size: 16px;
                display: -webkit-box;
                overflow: hidden;
                white-space: normal !important;
                text-overflow: ellipsis;
                word-wrap: break-word;
                line-clamp: 3;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                margin-bottom: 12px;
              }
              .A4row2_2No {
                width: 100%;
                text-align: center;
                font-size: 30px;
                color: var(--themeColor);
              }
            }
          }
          // 按钮
          .A4row2_3 {
            padding: 0 30px;
            margin-top: 20px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            & > div {
              width: 46%;
              height: 100%;
              border-radius: 6px;
              box-shadow: 3px 3px 4px 0px rgba(125, 190, 43, 0.25);
              background-color: var(--themeColor2);
              color: #fff;
              font-weight: 700;
              font-size: 18px;
              display: flex;
              justify-content: center;
              align-items: center;
              &:nth-of-type(1) {
                background-color: #f18101;
                box-shadow: 3px 3px 4px 0px rgba(241, 129, 1, 0.25);
              }
            }
            .A4row2_3No {
              background-color: #d9d9d9 !important;
              pointer-events: none;
              color: #aeaeae;
            }
          }
        }
      }
    }
    .A4No {
      height: calc(100% - 60px);
      background-image: url('../../assets/img/selectCourse/bg.jpg');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 4px;
      color: var(--themeColor);
    }

    // 团体认证弹窗
    .A4tan {
      position: absolute;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      & > div {
        background-image: url('../../assets/img/selectCourse/tan.png');
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        border-radius: 10px;
        background-color: #fff;
        padding: 30px;
        & > h1 {
          text-align: center;
          font-size: 24px;
          font-weight: 700;
          color: var(--themeColor);
          padding-bottom: 25px;
          margin-bottom: 25px;
          border-bottom: 2px dashed #bebebe;
        }
        .A4ttxt {
          text-align: justify;
          padding: 0 15px;
          font-size: 18px;
          line-height: 24px;
          letter-spacing: 2px;
          span {
            font-weight: 700;
            color: var(--themeColor);
          }
        }
        .A4tbtn {
          margin-top: 24px;
          text-align: center;
        }
      }
    }
  }
}