music-score/src/page-instrument/view-figner/change-subject/index.module.less

.changeSubject {
  padding: 49px 17px 19px 24px;


  &.changeSubjectPc {
    // .changeSubjectContainer {
    //   height: 140px;
    // }
  }
}

.changeSubjectContainer {
  height: 187px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;

  &::-webkit-scrollbar {
    display: none;
  }
}

.title {
  display: flex;
  align-items: center;

  font-size: 16px;
  font-weight: 500;
  color: #AE8967;
  line-height: 22px;

  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 11px;
    background: #D5AD89;
    border-radius: 3px;
    margin-right: 6px;
  }
}

.subjectContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 7px;

  .subjectItem {
    width: 31%;
    height: 34px;
    line-height: 34px;
    text-align: center;
    // background: #F6F6F6;
    border-radius: 50px;
    font-size: 13px;
    color: #333333;
    border: 1px solid #D8D8D8;
    margin-bottom: 12px;
    cursor: pointer;

    &:nth-child(3n + 2) {
      margin-left: 2.333%;
      margin-right: 2.333%;
    }

    // &:nth-child(3n + 3) {
    //   margin-left: 2.333%;
    // }

    &.arrow::after {
      content: '';
      display: inline-block;
      margin-left: 3px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid transparent;
      border-bottom: 4px solid #777777;
      transform: translateY(3px) rotate(180deg);
    }


    &.active {
      background: #FFF6E7;
      border-radius: 16px;
      border: 1px solid #AE8967;
      color: #A98464;

      &::after {
        border-bottom: 4px solid #C4A78D;
        transform: translateY(-2px) rotate(0deg);
      }
    }
  }


}

.btnGroups {
  border-top: 1px solid #EBEBEB;
  display: flex;
  align-items: center;
  padding: 8px 15px 0;

  // :global {
  //   .van-button+.van-button {
  //     margin-left: 15px;
  //   }
  // }

  .btn {
    width: 143px;
    height: 44px;
    cursor: pointer;

    &+.btn {
      margin-left: 9px;
    }
  }

  .resetBtn {
    background: url('../image/subject-btn1.png') no-repeat center;
    background-size: contain;
  }

  .confirmBtn {
    background: url('../image/subject-btn2.png') no-repeat center;
    background-size: contain;
  }
}