.mine-container{ width: 750rpx; height: 1136rpx; position: relative; background: #F0F1F5; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } page{ background: #F0F1F5; } .follow-details{ width: 750rpx; box-sizing: border-box; padding: 0 15rpx; } .follow-info{ margin-top: 20rpx; width: 100%; height: 382rpx; border-radius: 20rpx; background: #FFFFFF; display: flex; } .set-msg{ width: 100%; height: 248rpx; display: flex; align-items: flex-start; justify-content: center; } .avatar-bg{ margin-left: 20rpx; margin-top: 50rpx; width: 152rpx; height: 152rpx; background: #61CA54; border-radius: 50%; position: relative; } .avatar-box{ width: 138rpx; height: 138rpx; border-radius: 50%; z-index: 300; margin:6rpx auto; } .avatar-image{ width: 100%; height: 100%; border-radius: 50%; } .avatar-nickname{ width: 500rpx; display: flex; } .avatar-address{ width: 500rpx; } .flowers-box{ width: 26rpx; height: 26rpx; margin-left: 10rpx; } .flowers-box>image{ width: 100%; height: 100%; } .occupation-title{ position: absolute; left: 100rpx; top: 46rpx; width: 68rpx; background: #61CA54; border-radius: 180rpx; z-index: 600; line-height: 26rpx; text-align: center; color: #FFFFFF; font-size: 18rpx; } .avatar-msg{ margin-left: 40rpx; margin-top: 50rpx; width: 500rpx; height: 150rpx; color: #444444; font-size: 32rpx; } .avatar-nickname,.avatar-birthday,.avatar-address{ line-height: 50rpx; } .gender-size{ margin-left: 10rpx; font-size: 28rpx; align-self: center; } .mine-category{ box-sizing: border-box; width: 674rpx; padding-top: 40rpx; padding-bottom: 32rpx; border-top: 4rpx solid #F0F1F5; font-size: 28rpx; font-weight: 600; z-index: 900; display: flex; position: absolute; top: 268rpx; left: 38rpx; } .border-right{ display: flex; justify-content: center; align-items: center; font-size: 24rpx; font-weight: lighter; height: 22rpx; border-right: 2rpx solid #D6D6D6; } .flower-count .border-right{ border: none; } .play-count,.point-count,.follow-count,.flower-count{ width: 25%; text-align: center; } .play-img{ width: 28rpx; height: 26rpx; margin-right: 6rpx; margin-bottom: 6rpx; } .red-heart{ width: 26rpx; height: 22rpx; margin-right: 6rpx; margin-bottom: 6rpx; } .point-img{ width: 28rpx; height: 24rpx; margin-right: 6rpx; margin-bottom: 6rpx; } image{ width: 100%; height: 100%; } .play-count{ color: #92D626; } .point-count{ color: #FFA700; } .follow-count{ color: #FF0000; } .flower-count{ color: #EE5750; } .mine-edit{ position: absolute; top: 72rpx; right: 36rpx; width: 138rpx; height: 52rpx; border-radius: 26rpx; background: #FF9209; box-sizing: border-box; padding-top: 3rpx; display: flex; } .edit-image{ width: 24rpx; height: 34rpx; margin-left: 24rpx; margin-right: 10rpx; } .edit-img{ width: 24rpx; height: 34rpx; } .edit-text{ width: 150rpx; height: 32rpx; color: #FFFFFF; font-size: 32rpx; line-height:46rpx; } .wallet-module{ margin-top: 30rpx; width:716rpx; height: 88rpx; font-size: 34rpx; color: #5E5E5E; background: #FFFFFF; border-radius: 14rpx; } .wallet-center{ width: 680rpx; height: 88rpx; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .icon-box{ width: 60rpx; height: 60rpx; margin-right: 16rpx; margin-top:2rpx; } .wallet-left{ display: flex; align-items: center; } .wallet-right{ margin-bottom: 20rpx; width: 16rpx; height: 28rpx; } .course-module,.group-module,.reading-module,.keep-module,.myfollow-module{ margin-top: 20rpx; width:716rpx; height: 88rpx; font-size: 34rpx; color: #5E5E5E; background: #FFFFFF; border-radius: 14rpx; }