.mine-container { width: 100%; height: 1136rpx; position: relative; background: #faf7fa; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } page { background: #faf7fa; } .follow-details { width: 100%; box-sizing: border-box; /* padding: 0 15rpx; */ } .follow-info { /* margin-top: 26rpx; */ width: 100%; height: 230rpx; background: #FFFFFF; position: relative; } .info-placerholder { width: 100%; height: 66rpx; position: absolute; top: 0; background: #12C962; } .set-msg { width: 100%; height: 230rpx; 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: 160rpx; height: 160rpx; border-radius: 50%; margin: 23rpx 0 0 66rpx; position: relative; box-shadow: 5rpx 10rpx 3rpx 2rpx rgba(0, 0, 0, .1); } .avatar-image { width: 154rpx; height: 154rpx; border-radius: 50%; border: 6rpx solid #fff; } .avatar-nickname { /* width: 500rpx; */ display: flex; height: 27rpx; line-height: 27rpx; margin-top: 17rpx; width: 100%; overflow-x: hidden; } .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: 471rpx; height: 110rpx; color: #3d3d3d; font-size: 28rpx; margin: 66rpx 0 0 20rpx; font-weight: 800; border-bottom: solid 2rpx #edf0f3; } .mine-category { box-sizing: border-box; width: 471rpx; font-size: 24rpx; display: flex; /* justify-content: space-between; */ color: #767676; margin-top: 37rpx; padding-right: 37rpx; } .amount-text { font-weight: 400; margin-right:125rpx; } image { width: 100%; height: 100%; } .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: 24rpx; height: 30rpx; display: block; position: absolute; right: 43rpx; bottom: 73rpx; } .only-flower { width: 720rpx; height: 120rpx; background: #fff; border-radius: 20rpx; margin: 10rpx auto 0; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 40rpx; box-sizing: border-box; } .grey-point { width: 15rpx; height: 15rpx; background: #f2f2f2; position: absolute; top: 10rpx; left: 10rpx; border-radius: 50%; } .flower-amount, .wallet-box { font-size: 30rpx; font-weight: 800; display: flex; align-items: center; } .flower-amount image { width: 64rpx; height: 64rpx; margin-right: 24rpx; } .flower-tips { color: #848484; font-size: 24rpx; } .flower-last { color: #f65641; } .wallet-section { width: 720rpx; height: 120rpx; /* background: #fff; */ border-radius: 20rpx; margin: 10rpx auto 0; position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .wallet-box, .flower-box { width: 355rpx; height: 120rpx; border-radius: 20rpx; background: #fff; display: flex; align-items: center; position: relative; /* justify-content: space-around; */ } .wallet-box { margin-right: 10rpx; } .wallet-icon { width: 93rpx; height: 83rpx; margin-left: 31rpx; margin-right: 25rpx; margin-top: -7rpx; } .right_vip{ display: flex; flex-direction: column; align-items: center; } .vip_text{ color: #505050; font-size: 30rpx; margin-bottom: 14rpx; } .grey{ background-color: #b2b1b1; width: 167rpx; height: 36rpx; border-radius: 16rpx; color: #fff; font-size: 24rpx; line-height: 36rpx; text-align: center; } .vip{ background-color: #ff9313; width: 167rpx; height: 36rpx; border-radius: 16rpx; color: #fff; font-size: 24rpx; line-height: 36rpx; text-align: center; } .flower-icon { width: 54rpx; height: 64rpx; margin: 0 14rpx 0 32rpx; } .flower-text { width: 242rpx; font-size: 30rpx; font-weight: 800; } .flower-tips-text { color: #848484; font-size: 22rpx; } .btn-section { width: 100%; height: 190rpx; background: #fff; display: flex; justify-content: space-between; align-items: center; margin-top: 10rpx; padding: 0 60rpx; box-sizing: border-box; } .btn { width: 121rpx; height: 170rpx; display: flex; flex-direction: column; margin-top: 6rpx; } .btn image { width: 121rpx; height: 121rpx; border-radius: 50%; } .btn-title { margin-top: 11rpx; width: 121rpx; text-align: center; color: #505050; font-size: 24rpx; font-weight: 800; } .my-reading-title { width: 100%; height: 74rpx; line-height: 89rpx; display: flex; /* align-items: center; */ justify-content: space-between; padding: 0 0 0 30rpx; color: #393939; font-weight: 800; font-size: 30rpx; box-sizing: border-box; } .my-reading-section-placeholder { width: 100%; font-size: 24rpx; color: #393939; text-align: center; line-height: 80rpx; } .title-right { display: flex; flex-direction: row; float: right; width: 100rpx; height: 38rpx; line-height: 92rpx; font-size: 28rpx; color: #444; /* align-items: center; */ } .title-right image { width: 15rpx; height: 27rpx; margin-left: 10rpx; margin-top: 33rpx; } .set-msg-temp { position: absolute; width: 100%; height: 248rpx; } .footer-section { width: 100%; height: 150rpx; font-size: 24rpx; color: #b6b6b6; text-align: center; padding-top: 70rpx; } .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; }