.invite { width: 100%; padding: 0 20rpx 400rpx; box-sizing: border-box; min-height: 100vh; background-color: #291068; .headerBg { position: absolute; top: 0; left: 0; width: 100%; height: 811rpx; } .progressBox { position: relative; top: 380rpx; z-index: 2; padding: 20rpx; box-sizing: border-box; border: 20rpx solid #6B39D8; background-color: #2D1F64; border-radius: 42rpx; .row { position: relative; width: 100%; height: 110rpx; margin-bottom: 80rpx; display: flex; align-items: flex-end; justify-content: space-between; .line { position: absolute; top: 80rpx; left: 50%; transform: translateX(-50%); width: 90%; height: 8rpx; background-color: #FFD67B; } .numBox { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; .num { margin-bottom: 6rpx; font-size: 22rpx; color: #FFFFFF; } .icon { width: 60rpx; height: 60rpx; } .current { position: absolute; top: 30rpx; left: 0rpx; width: 87rpx; height: 64rpx; } .rewardNum { position: absolute; bottom: 24rpx; font-weight: bold; font-size: 24rpx; color: #626262; } .rewardN { position: absolute; bottom: 8rpx; font-size: 14rpx; color: #626262; } .reward { width: 144rpx; height: 109rpx; } } .qualify { .rewardNum, .rewardN { color: #962304; } } } .btns { display: flex; align-items: center; justify-content: space-between; margin-bottom: 70rpx; .transcript { width: 184rpx; height: 68rpx; } .resetBtn { font-size: 0px; } .inviteBtn { width: 390rpx; height: 68rpx; } } } }