reader/component/my/my.wxss

.mine-container{
  width: 750rpx;
  height: 1116rpx;
  background: #F0F1F5;
  position: relative;
}

.mine-center{
  width: 716rpx;
  margin: 0 auto;
}

.mine-info{
  margin-top: 80rpx;
  width: 100%;
  height: 344rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
}

.mine-bg{
  width: 156rpx;
  height: 156rpx;
  background: #61CA54;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 280rpx;
  top: 18rpx;
}

.mine-avatar{
  width: 138rpx;
  height: 138rpx;
  border-radius: 50%;
  background: gray;
}

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

.mine-edit{
  position: absolute;
  top: 110rpx;
  right: 83rpx;
  width: 224rpx;
  height: 46rpx;
  border-radius: 22rpx;
  background: #3DBEF9;
  display: flex;
  align-items: center;
}

.edit-image{
  width: 24rpx;
  height: 36rpx;
  margin: 0 10rpx 6rpx 20rpx;
}

.edit-img{
  width: 100%;
  height: 100%;
}

.edit-text{
  width: 144rpx;
  height: 34rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

/* .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;
}

 */