reader/components/navigationBar/index.less

.nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  color: #fff;
  background: #30C866;

  .view {
    padding: 0px 31rpx;
    width: 100%;
    color: #fff;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    .selectGrade {
      position: absolute;
      left: 22rpx;
      width: 158rpx;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 25rpx;
      background-color: #ffffffa6;
      color: #333;
      font-size: 24rpx;
      text-align: center;
    }

    .title {
      text-align: center;
    }
  }
}

.gradeContainer {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .gradeBox {
    width: 520rpx;
    padding: 33rpx 40rpx 50rpx;
    border-radius: 20rpx;
    background-color: white;

    .title {
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
    }

    .content {
      margin-top: 55rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .grade {
        padding: 12rpx 64rpx;
        border-radius: 50rpx;
        font-size: 36rpx;
        color: #333;
        background-color: #E4E4E4;
      }

      .oneRow {
        width: 100%;
        text-align: center;
      }

      .check {
        color: white;
        background-color: #1CCC69;
      }
    }

    .submitBox {
      text-align: center;

      .submit {
        width: 360rpx;
        margin-top: 60rpx;
        padding: 14rpx 0px;
        display: inline-block;
        background-color: #45B7FF;
        color: white;
        font-size: 42rpx;
        border-radius: 50rpx;
      }
    }
  }
}