reader/pages/medalStore/index.less

.medalStore {
  .header {
    width: 100%;
    padding: 60rpx 46rpx;
    box-sizing: border-box;
    background-color: #30C866;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;

    .left {

      .title {
        font-size: 42rpx;
        font-weight: bold;
      }

      .tips {
        margin-top: 16rpx;
        font-size: 24rpx;
      }
    }

    .right {
      font-size: 54rpx;
    }
  }

  .body {
    background-color: #F2F6FC;
    padding-bottom: 4rpx;
    .medalsBox {
      width: 100%;
      margin-bottom: 22rpx;
      background-color: white;

      .title {
        padding: 25rpx 38rpx;
        box-sizing: border-box;
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
      }

      .medalList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .medal {
          width: 33%;
          margin-bottom: 30rpx;
          text-align: center;

          .medalImg {
            width: 184rpx;
            height: 169rpx;
          }

          .name {
            display: inline-block;
            text-align: center;
            padding: 6rpx 40rpx;
            font-size: 20rpx;
            border-radius: 50rpx;
            background-color: #FDD126;
          }
        }
      }
    }
  }
}