page { height: 100%; width: 100%; background: #f4f4f4; } .container { background: #f4f4f4; height: auto; overflow: hidden; width: 100%; } .profile-info { background-color: #ab956d; color: #f4f4f4; display: flex; align-items: center; padding: 30rpx; font-size: 28rpx; } .profile-info .avatar { height: 148rpx; width: 148rpx; border-radius: 50%; } .profile-info .info { flex: 1; height: 85rpx; padding-left: 31.25rpx; } .profile-info .name { display: block; height: 45rpx; line-height: 45rpx; color: #fff; font-size: 37.5rpx; margin-bottom: 10rpx; } .profile-info .level { display: block; height: 30rpx; line-height: 30rpx; margin-bottom: 10rpx; color: #7f7f7f; font-size: 30rpx; } .user_area { /* border: 1px solid black; */ width: 100%; height: 226rpx; /* margin: 0 auto; */ margin-top: -8rpx; background: #fff; /* border-top: 1px solid #f4f4f4; */ } .user_row { /* border: 1px solid black; */ height: 86rpx; line-height: 86rpx; border-bottom: 1px solid #fafafa; } .user_row_left { /* border: 1px solid #757575; */ float: left; height: 86rpx; font-weight: 550; line-height: 86rpx; margin-left: 35rpx; font-size: 26rpx; letter-spacing: 1rpx; } .user_row_right { /* border: 1px solid #757575; */ float: right; height: 40rpx; width: 40rpx; font-weight: 550; line-height: 86rpx; margin-top: 28rpx; margin-right: 30rpx; } .user_column { /* border: 1px solid black; */ height: 140rpx; display: flex; justify-content: center; align-items: center; } .user_column_item { width: 30%; height: 140rpx; background: #fff; text-align: center; position: relative; } .user_column_item_badge { height: 28rpx; width: 28rpx; position: absolute; background: #b4282d; color: #fff; border-radius: 50%; margin-top: 20rpx; margin-left: 40rpx; } .user_column_item_image { width: 50rpx; height: 50rpx; margin-top: 30rpx; } .user_column_item_text { /* border: 1px solid black; */ margin-top: 5rpx; font-size: 24rpx; color: #555; } .separate { background: #e0e3da; width: 100%; height: 6rpx; } .user_column_item_phone { width: 30%; height: 140rpx; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; float: left; background: #fff; border-radius: 0; } .user_column_item_phone::after { border: none; border-radius: 0; } .logout { margin-top: 30rpx; height: 100rpx; width: 100%; line-height: 100rpx; text-align: center; background: #fff; color: red; font-size: 30rpx; }