.container { padding: 0rpx 20rpx 30rpx; } .container .userBox { background-color: white; padding: 20rpx 20rpx 0rpx; border-radius: 20rpx; } .container .userBox .above { display: flex; align-items: center; justify-content: space-between; padding-bottom: 30rpx; border-bottom: 1rpx solid #D6D6D6; } .container .userBox .above .identity { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .container .userBox .above .identity .avatar { width: 106rpx; height: 106rpx; border-radius: 50%; position: relative; } .container .userBox .above .identity .identityText { position: absolute; bottom: -10rpx; width: 80rpx; font-size: 24rpx; color: white; background-color: #10CA61; border-radius: 25rpx; } .container .userBox .above .userRight { flex: 1; margin-left: 40rpx; padding: 0px 10rpx; } .container .userBox .above .userRight .uRtop { display: flex; justify-content: space-between; } .container .userBox .above .userRight .uRtop .uRtopleft .nickName { margin: 10rpx 0rpx 18rpx; max-width: 340rpx; color: #333; font-size: 32rpx; } .container .userBox .above .userRight .uRtop .uRtopleft .gradeText { font-size: 24rpx; color: #989A9C; } .container .userBox .above .userRight .uRtop .uRtopRight { display: flex; align-items: center; } .container .userBox .above .userRight .uRtop .uRtopRight .edit { width: 22rpx; height: 28rpx; } .container .userBox .above .userRight .uRtop .uRtopRight text { margin: 0px 10rpx; font-size: 24rpx; color: #666; } .container .below { padding: 20rpx 0rpx; display: flex; align-items: center; justify-content: space-between; background-color: white; border-radius: 20rpx; } .container .below .sBox { width: 110rpx; position: relative; display: flex; flex-direction: column; align-items: center; } .container .below .sBox .img { width: 69rpx; height: 69rpx; } .container .below .sBox .title { margin-top: 8rpx; font-size: 26rpx; color: #333; } .container .below .sBox .noticeTips { position: absolute; right: 8rpx; top: -8rpx; width: 34rpx; padding: 4rpx 0rpx; border-radius: 40rpx; color: white; font-size: 18rpx; text-align: center; background-color: #FF0000; } .container .below .contactBtn { border: none; padding: 0rpx; line-height: normal; margin: 0; } .container .iosVip { margin: 4rpx 0px 0px 6rpx; font-size: 24rpx; color: #333; } .container .medalBox { margin: 30rpx 0rpx; padding: 20rpx 30rpx; background-color: white; border-radius: 20rpx; } .container .medalBox .header { display: flex; align-items: center; justify-content: space-between; } .container .medalBox .header .title { font-size: 30rpx; font-weight: bold; color: #000; } .container .medalBox .header .jump { font-size: 26rpx; color: #666666; } .container .medalBox .header .jump .jumpIcon { width: 12rpx; height: 22rpx; } .container .medalBox .body { margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between; } .container .medalBox .body .medal { width: 112rpx; height: 94rpx; } .container .payBox { margin-top: 20rpx; padding: 13rpx 30rpx; background-color: white; border-radius: 20rpx; } .container .payBox .title { font-size: 30rpx; font-weight: bold; color: #000; } .container .payBox .pay { margin: 20rpx 0rpx; display: flex; align-items: center; justify-content: space-between; padding: 0rpx 30rpx; border-radius: 22rpx; overflow: hidden; } .container .payBox .pay .payLeft .pLTitle { font-size: 36rpx; font-weight: bold; } .container .payBox .pay .payLeft .pLcontent { font-size: 22rpx; } .container .payBox .pay .payRight { margin: 24rpx 0rpx; padding: 12rpx 28rpx; border-radius: 40rpx; font-size: 24rpx; font-weight: bold; } .container .payBox .vipPay { background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat; background-size: cover; } .container .payBox .vipPay .vipTitle { color: #FFE6B9; } .container .payBox .vipPay .vipContent { margin-top: 4rpx; color: #FFE6B9; } .container .payBox .vipPay .vipBtn { background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF); color: #211501; } .container .payBox .buyPay { background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat; background-size: cover; } .container .payBox .buyPay .payLeft { color: #7D320A; font-size: 36rpx; font-weight: bold; } .container .payBox .buyPay .buyBtn { border: 1rpx solid white; color: white; background-color: #7D320A; }