reader/pages/medalStore/index.wxss

.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;
}
.medalStore .header .left .title {
  font-size: 42rpx;
  font-weight: bold;
}
.medalStore .header .left .tips {
  margin-top: 16rpx;
  font-size: 24rpx;
}
.medalStore .header .right {
  font-size: 54rpx;
}
.medalStore .body {
  background-color: #F2F6FC;
  padding-bottom: 4rpx;
}
.medalStore .body .medalsBox {
  width: 100%;
  margin-bottom: 22rpx;
  background-color: white;
}
.medalStore .body .medalsBox .title {
  padding: 25rpx 38rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
}
.medalStore .body .medalsBox .medalList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.medalStore .body .medalsBox .medalList .medal {
  width: 33%;
  margin-bottom: 30rpx;
  text-align: center;
}
.medalStore .body .medalsBox .medalList .medal .medalImg {
  width: 184rpx;
  height: 169rpx;
}
.medalStore .body .medalsBox .medalList .medal .name {
  display: inline-block;
  text-align: center;
  padding: 6rpx 40rpx;
  font-size: 20rpx;
  border-radius: 50rpx;
  background-color: #FDD126;
}