.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%; margin: 50rpx 0; position: relative; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; border: 4rpx solid #61CA54; } .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: 30rpx; width: 90rpx; background: #61CA54; border-radius: 180rpx; z-index: 600; line-height: 32rpx; text-align: center; color: #FFFFFF; font-size: 20rpx; bottom: -28rpx; height: 32rpx; border: 2rpx solid #fff; } .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%; } .color { text-align: right; padding-right: 44rpx; } .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; align-items: center; display: flex; } /* .edit-image{ width: 24rpx; height: 34rpx; margin-left: 24rpx; margin-right: 10rpx; } */ .edit-img { width: 42rpx; height: 34rpx; display: block; margin-left: 20rpx; margin-right: 10rpx; } .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: #444; 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: 32rpx; color: #444; background: #FFFFFF; border-radius: 14rpx; } .set-msg-temp { position: absolute; width: 100%; height: 248rpx; } .placerholder { height: 41rpx; background: rgba(228,255,242,.8); /* background: #E4FFF2; */ width: 410rpx; margin-top: 35rpx; margin-left: 220rpx; border-radius: 10rpx; } .line1 { width: 300rpx; }