page { background: #f3f4f6; } .all { background-color: #FFFFFF; position: relative; height: 220rpx; } .all-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .all-text { width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 30rpx; box-sizing: border-box; color: #FFFFFF; font-size: 34rpx; font-weight: 600; } .number { font-size: 62rpx; font-weight: 600; margin-top: 10rpx; } .number text { font-size: 26rpx; } .tab { height: 100rpx; line-height: 100rpx; position: relative; display: flex; margin-top: -20rpx; } .tab .item { flex: 2; text-align: center; border-radius: 30rpx 30rpx 0 0; font-weight: 600; background-color: #1e50f1; color: #b4c8ff; } .tab .item.active { background-color: #FFFFFF; color: #000000; } .tab .item image { width: 34rpx; height: 34rpx; vertical-align: -7rpx; margin-right: 10rpx; } .list { background-color: #FFFFFF; padding: 30rpx; box-sizing: border-box; } .list .item { margin-bottom: 30rpx; display: flex; border-bottom: 2rpx solid #f3f3f3; padding-bottom: 30rpx; position: relative; } .list .item:last-child { padding-bottom: 0; margin-bottom: 0; border: none; } .list-cover { width: 100rpx; height: 100rpx; border-radius: 50%; } .list-text { width: calc(100% - 120rpx); margin-left: 20rpx; margin-top: 5rpx; } .list-nick { display: flex; } .name { font-weight: 600; } .user-sex { width: 40rpx; margin-left: 10rpx; } .identity { margin-top: 10rpx; } .user-identity { width: 130rpx; } .list-user { background-color: #f2f5fd; width: 70rpx; height: 70rpx; border-radius: 50%; text-align: center; padding: 18rpx; box-sizing: border-box; position: absolute; right: 0; top: 20rpx; } .list-user image { width: 100%; }