index.scss

.reserve-course-module {
  margin: 20px 15px 0 20px;
  padding-bottom: 5px;


  .course-list {
    ul {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;

      .course-item-box {
        width: 48%;
        padding: 4px;
        background-color: #fff;
        border-radius: 2px;
        margin-bottom: 15px;
        text-align: left;

        .top {
          width: 100%;
          height: 108px;
          position: relative;

          .course-img {
            width: 100%;
            height: 108px;
          }

          .square {
            background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/course-label-bg.png");
            background-repeat: no-repeat;
            background-size: cover;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 0;
            bottom: 0;

            .circular {
              height: 100%;
              width: 100%;
              color: #fff;
              padding-top: 15px;
              text-align: left;
              padding-left: 5px;

              span {
                font-size: 16px;
                margin-left: 3px;
              }
            }
          }

        }


        .count-price {
          text-align: left;
          color: #555;
          margin-top: 8px;
          line-height: 15px;
          span {
            color: #FF4000;

            i {
              font-size: 16px;
              font-style: normal;
              margin-left: 3px;
            }
          }
        }

        .btn {
          width: 100%;
          padding: 0 5px;
          margin-top: 8px;
          margin-bottom: 5px;

          button {
            width: 100%;
            height: 24px;
            border-radius: 2px;
            font-size: 12px;
            color: #fff;
            border: none;
          }

          .to-expand-buy1 {
            background: linear-gradient(-90deg, #7800FF 0%, #FF4BF0 100%);
          }

          .to-expand-buy2 {
            background: linear-gradient(-90deg, #FF8C1B 0%, #FF3B05 100%);
          }

          .to-study {
            background: linear-gradient(-90deg, #2ECEF0 0%, #2D56F0 100%);
          }
        }

      }
    }
  }
  .more-button {
    display: block;
    width: 100px;
    height: 27px;
    margin: 5px auto 15px;
    border: 1px solid #fff;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    background-color: transparent;
    cursor: pointer;
    outline: none;
  }
}