reader/component/my/my.wxss

.containers{
  padding-top: 0;
}

.mine-top{
  margin-top: 16rpx;
  position: relative;
  width: 732rpx;
  height: 220rpx;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
}

.avatar-box {
  margin: 50rpx 0 50rpx 50rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.avatar-box image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.mine-info{
  margin-left: 24rpx;
}

.mine-info :nth-child(1){
  width: 308rpx;
  height: 44rpx;
  font-size: 32rpx;
  color: #030303;
}

.mine-info :nth-child(2){
  width: 422rpx;
  height: 38rpx;
  font-size: 30rpx;
  color: #8F8E94;
}

.mine-top .edit{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C3C3C3;
  border-radius: 20rpx 0 20rpx 0;
}

.mine-top .edit .icon{
  width: 48rpx;
  height: 48rpx;
  background: #FFFFFF;
}

.category{
  margin-top: 8rpx;
  position: relative;
  width: 732rpx;
  height: 180rpx;
  display: flex;
  align-items: center;
  border-radius: 20rpx;
  background: #fff;
  font-weight: 500;
  font-family: SourceHanSansSC-regular;
  color: #030303;
}

.attentionCount{
  position: absolute;
  top: 20rpx;
  left: 313rpx;
  width: 50rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  color: red;
  font-size: 28rpx;
  font-weight: lighter;
}

.category text{
  color: #959595;
  font-weight: 500;
  font-size: 36rpx;
}

.play,.attention,.point,.red-flower{
  flex: 1;
  text-align: center;
}

.wallet,.grouping,.reader,.keep,.attention-me{
  margin-top: 8rpx;
  width: 732rpx;
  height: 120rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-title,.grouping-title,.reader-title,.keep-title,.attention-me-title{
  margin-left: 50rpx;
}

.image-box{
  display: inline-block;
  width: 56rpx;
  height: 56rpx;
}


.wallet image,.grouping image,.reader image,.keep image,.attention-me image{
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

.wallet .text,.grouping .text,.reader .text,.keep .text,.attention-me .text{
  display: inline-block;
  margin-left: 14rpx;
  font-size: 36rpx;
  color: #101010;
}

.wallet .wallet-detail,.grouping .grouping-detail,.reader-detail,.keep-detail,.attention-me-detail{
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  color: #101010;
  text-align: center;
  margin-right: 20rpx;
}