.backgroundContainer.data-v-e4e4508d { display: flex; position: relative; width: 100%; height: 100vh; background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.6); background-blend-mode: screen; background-size: cover; background-position: center center; overflow: hidden; justify-content: center; align-items: center; flex-direction: column; } .backgroundContainer .title-img.data-v-e4e4508d { width: 150rpx; height: 200rpx; margin-bottom: 130rpx; } .backgroundContainer .input-father.data-v-e4e4508d { height: 90rpx; width: 550rpx; background-color: #fff; border-radius: 30rpx; margin-bottom: 20rpx; display: flex; align-items: center; position: relative; } .backgroundContainer .input-father .input-code.data-v-e4e4508d { position: absolute; top: 0; right: 20rpx; width: 150rpx; height: 90rpx; } .backgroundContainer .input-father-blue.data-v-e4e4508d { margin-top: 100rpx; height: 90rpx; width: 550rpx; background: linear-gradient(to right, #00C9FF, #0076FF); border-radius: 30rpx; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 32rpx; } .backgroundContainer .input-father-gray.data-v-e4e4508d { margin-top: 100rpx; height: 90rpx; width: 550rpx; background: #949aa3; border-radius: 30rpx; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 32rpx; } .under-container-title.data-v-e4e4508d { display: flex; margin-top: 80rpx; align-items: center; font-size: 25rpx; font-weight: 500; } .under-container-title .radio-circle-blue.data-v-e4e4508d { color: #0083FF; margin-top: 3rpx; } .under-container-title .radio-circle-font.data-v-e4e4508d { color: #5A607F; margin-top: 3rpx; } .under-container-title .radio-circle.data-v-e4e4508d { position: relative; margin-top: 2rpx; width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #C0C5D9; background-color: transparent; } .under-container-title .radio-circle-target.data-v-e4e4508d { position: relative; margin-top: 2rpx; width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #C0C5D9; background-color: transparent; } .under-container-title .radio-circle-target.data-v-e4e4508d::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30rpx; height: 30rpx; background-color: #00C9FF; border-radius: 50%; } .add.data-v-e4e4508d { margin-left: 50rpx; font-size: 32rpx; } .shu.data-v-e4e4508d { background-color: #d2d5d7; width: 2rpx; height: 35rpx; margin: 0 20rpx; } .password.data-v-e4e4508d { font-size: 27rpx; margin-left: 30rpx; width: 100%; } .popup-wrapper.data-v-e4e4508d { position: fixed; inset: 0; z-index: 1000; /* 初始透明度 */ opacity: 0; /* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */ animation: fadeIn-e4e4508d 0.5s ease forwards; } /* 定义关键帧 */ @keyframes fadeIn-e4e4508d { from { opacity: 0; } to { opacity: 1; } } .mask.data-v-e4e4508d { position: absolute; inset: 0; } .box-small.data-v-e4e4508d { position: absolute; bottom: 20rpx; left: 50%; transform: translateX(-50%); width: 800rpx; height: 350rpx; background: #fff; border-radius: 50rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 0 65rpx; } .box-small .box-title.data-v-e4e4508d { font-size: 35rpx; margin: 60rpx 0; } .box-small .font-father.data-v-e4e4508d { line-height: 50rpx; } .box-small .text-blue.data-v-e4e4508d { color: #0083FF; } .box-change.data-v-e4e4508d { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -60%); width: 800rpx; height: 700rpx; background: #fff; border-radius: 50rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 0 65rpx; } .box-change .box-title.data-v-e4e4508d { font-size: 35rpx; margin: 60rpx 0; font-weight: 600; } .box-change .input-father.data-v-e4e4508d { height: 90rpx; width: 550rpx; background-color: #f7f7fb; border-radius: 30rpx; margin-bottom: 40rpx; display: flex; align-items: center; } .box.data-v-e4e4508d { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800rpx; height: 1100rpx; background: #fff; border-radius: 50rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 0 65rpx; } .box .box-title.data-v-e4e4508d { font-size: 35rpx; margin: 60rpx 0; } .box .font-father.data-v-e4e4508d { line-height: 50rpx; } .box .text-blue.data-v-e4e4508d { color: #0083FF; } .box .gray-box-bgc.data-v-e4e4508d { width: 100%; height: 250rpx; border: 2rpx solid #CFD5E4; background-color: #F2F4F7; color: #777777; border-radius: 20rpx; padding: 20rpx 20rpx; } .blue-button.data-v-e4e4508d { width: 100%; height: 90rpx; background: linear-gradient(to right, #00C9FF, #0076FF); color: #fff; display: flex; justify-content: center; align-items: center; margin-top: 50rpx; border-radius: 25rpx; font-size: 35rpx; letter-spacing: 5rpx; } .white-button.data-v-e4e4508d { width: 100%; height: 90rpx; display: flex; justify-content: center; align-items: center; margin-top: 10rpx; border-radius: 25rpx; font-size: 35rpx; }