.popup1 { padding: 220rpx 0 0; width: 630rpx; box-sizing: border-box; .container { margin-top: -60rpx; padding: 32rpx; background: linear-gradient(180deg, #ebe4ff 0%, #ffffff 100%); border-radius: 24rpx; .user { padding: 24rpx; display: flex; align-items: center; border-radius: 24rpx; background-color: #fff; .avatar-wrapper { flex-shrink: 0; padding: 0; margin: 0; width: 108rpx; height: 108rpx; gap: 16rpx; outline: none; border: 2px solid #fff; border-radius: 50%; &::after { border: none; } .avatar { width: 100%; height: 100%; border-radius: 50%; } } .wrap { flex: 1; padding-left: 24rpx; .nickname { font-size: 36rpx; font-weight: bold; color: rgba(1, 1, 5, 1); } .hostipal { margin-top: 16rpx; line-height: 1; font-size: 28rpx; color: rgba(173, 172, 178, 1); .tag { margin-left: 10rpx; display: inline-block; font-size: 24rpx; color: rgba(255, 255, 255, 1); padding: 2rpx 10rpx; background: #8c75d0; border-radius: 8rpx 8rpx 8rpx 8rpx; } } } } } } .popup2 { width: 590rpx; height: 880rpx; .p-img { width: 100%; height: 100%; } } .popup3 { width: 590rpx; height: 880rpx; .p-img { width: 100%; height: 100%; } } .popup4 { width: 590rpx; height: 620rpx; .p-img { width: 100%; height: 100%; } } .popup5 { background-color: #fff; .container { padding: 64rpx 0 104rpx; .title { display: flex; align-items: center; justify-content: center; font-size: 40rpx; color: rgba(40, 48, 49, 1); line-height: 64rpx; gap: 8rpx; .tag { padding: 0 10rpx; color: #fff; background-color: rgba(140, 117, 208, 1); border-radius: 12rpx; line-height: 52rpx; } } .content { font-size: 40rpx; color: rgba(40, 48, 49, 1); text-align: center; } .btn { margin: 612rpx auto 0; font-size: 36rpx; color: rgba(255, 255, 255, 1); width: 590rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; background: linear-gradient(89deg, #8c75d0 0%, #b7bdff 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; } } } .popup6 { width: 590rpx; height: 880rpx; position: relative; .p-img { width: 100%; height: 100%; } .code { position: absolute; top: 350rpx; left: 50%; transform: translateX(-50%); width: 290rpx; height: 290rpx; } } .popup7 { .badge { position: relative; z-index: 1; width: 126rpx; height: 124rpx; display: block; margin: 0 auto; } .contaienr { margin-top: -80rpx; padding: 96rpx 0 0; width: 540rpx; border-radius: 24rpx; box-sizing: border-box; background: linear-gradient(353deg, #ffffff 0%, #f5eeff 100%); box-shadow: inset 0rpx -1rpx 0rpx 0rpx #e5e6eb; .content { font-size: 28rpx; color: #adacb2; text-align: center; } .footer { margin-top: 40rpx; border-top: 1px solid #e5e6eb; display: flex; .sure, .cancel { flex: 1; padding: 22rpx; text-align: center; font-size: 32rpx; } .cancel { border-right: 1px solid #e5e6eb; color: #211d2e; } .sure { color: #b982ff; } } } } .popup8 { width: 590rpx; height: 880rpx; position: relative; .p-img { width: 100%; height: 100%; } .code { position: absolute; top: 372rpx; left: 50%; transform: translateX(-50%); border-radius: 24rpx; width: 300rpx; height: 300rpx; } } .popup9 { padding: 32rpx; width: 530rpx; height: 452rpx; box-sizing: border-box; background-color: #fff; text-align: center; .icon { width: 128rpx; height: 128rpx; } .title { margin-top: 24rpx; font-size: 32rpx; color: #211d2e; font-weight: bold; line-height: 40rpx; } .btn { margin: 36rpx auto 0; width: 418rpx; height: 88rpx; line-height: 88rpx; font-size: 32rpx; color: #FFFFFF; background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; } } .close { margin: 48rpx auto 0; display: block; width: 84rpx; height: 84rpx; }