.container { position: relative; width: 750rpx; height: 100vh; background: linear-gradient(158deg, #FDD65D 0%, #FFD55D 17%, #FDCB4E 38%, #FE9F16 100%); .black { padding: 10rpx 30rpx; transform: rotate(180deg); width: 18rpx; height: 36rpx; opacity: 0.8; } .titleBox { text-align: center; color: #570D07; font-size: 30rpx; .t1 { margin: 10rpx 0; font-weight: 500; } .t2 { font-size: 20rpx; opacity: 0.9; } } .form { margin: 36rpx auto; width: 710rpx; background: #FFFFFF; border-radius: 20rpx; font-size: 28rpx; .row { position: relative; padding: 32rpx 47rpx; display: flex; align-items: center; .label { width: 150rpx; } .nickName { text-align: left; color: #666666; font-size: 26rpx; } .resetBtn { flex: 1; font-size: 26rpx; text-align: left; color: #555555; } } .r1:before { position: absolute; content: "请输入姓名"; bottom: -4rpx; left: 194rpx; color: red; } .r2:before { position: absolute; content: "请输入手机号"; bottom: -4rpx; left: 194rpx; color: red; } } .qrCodeBox { margin: 30rpx auto; width: 710rpx; box-sizing: border-box; padding: 65rpx 40rpx 37rpx; background: #FFFFFF; font-size: 30rpx; border-radius: 20rpx; text-align: center; .qrCode { margin: 38rpx 0; width: 256rpx; height: 256rpx; padding: 20rpx; border-radius: 20rpx; background-color: #FFF7E1; } .content { margin-top: 20rpx; text-align: left; } } .bottom { position: absolute; width: 100%; padding: 26rpx 0; bottom: 0; left: 0; background-color: white; .btn { margin: 0 auto; width: 466rpx; padding: 14rpx 0; background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%); border-radius: 39rpx; color: white; } } }