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;
            }
          }
        }
      }
    }
  }
}