.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; margin-bottom: 20rpx; } .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: rgba(0,0,0,.8); 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: 26rpx; height: 30rpx; display: block; position: absolute; right: 51rpx; bottom: 98rpx; } .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; } .vip-con { position: relative; width: 100%; height: 140rpx; background: #fff; padding: 30rpx; margin-top: 20rpx; box-sizing: border-box; } .vip-con image { width: 100%; height: 100%; } .vip-con .price { position: absolute; left: 220rpx; top: 35rpx; color: #FE0606; font-size: 30rpx; width: 180rpx; text-align: end; font-weight: 600; } .vip-con .price text { font-size: 45rpx; } .vip-con .flase-price { position: absolute; left: 408rpx; top: 63rpx; font-size: 15rpx; text-decoration: line-through; font-weight: 500; color: rgba(0, 0, 0, 0.6); } .vip-con .order-buy { position: absolute; top: 46rpx; right: 62rpx; display: flex; align-items: center; justify-content: center; width: 169rpx; height: 49rpx; background: #FF6300; border-radius: 25rpx; color: #fff; font-size: 26rpx; font-weight: 500; } .vip-con .vip-buy { background: transparent; color: #FE0606; font-size: 30rpx; top: 46rpx; } .vip-con .vip-end-time { position: absolute; top: 53rpx; left: 251rpx; font-size: 28rpx; color: #6E4008; font-weight: 400; } .vip-con .invite { position: absolute; right: 73rpx; top: 50rpx; font-size: 30rpx; color: #FE0606; font-weight: 400; } .wallet-section { width: 100%; height: 120rpx; /* background: #fff; */ border-radius: 10rpx; margin-top: 20rpx; position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .wallet-box, .flower-box { width: 100%; height: 120rpx; border-radius: 20rpx; background: #fff; display: flex; align-items: center; position: relative; justify-content: space-around; } .flower-box-box{ display: flex; align-items: center; } .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 { float: right; color: rgba(0,0,0,.6); font-size: 26rpx; } .btn-section { width: 100%; height: 190rpx; background: #fff; display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx; padding: 0 60rpx; box-sizing: border-box; } .btn { padding: 0; margin: 0; overflow: visible; -webkit-appearance: none; -webkit-tap-highlight-color: #fff; width: 121rpx; height: 170rpx; display: flex; flex-direction: column; margin-top: 6rpx; line-height: normal; } .btn .btn-icon { width: 121rpx; height: 121rpx; border-radius: 50%; flex-shrink: 0; } .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; }