.bj.data-v-5e59b7d8 { width: 100%; height: 50vh; position: fixed; top: 0; z-index: -1; background-color: #0F0F0F; } .tabback.data-v-5e59b7d8 { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 126rpx; padding: 0 20rpx; box-sizing: border-box; background-color: #fff; border: 1rpx solid #D8D8D8; margin-top: 102rpx; border-radius: 30rpx 30rpx 0 0; } .tabback .rtjt.data-v-5e59b7d8 { font-size: 36rpx; color: #333; } .tabback .name.data-v-5e59b7d8 { font-size: 36rpx; font-weight: bold; color: #333; } .device-detail.data-v-5e59b7d8 { min-height: 100vh; } .content-container.data-v-5e59b7d8 { min-height: calc(100vh - 228rpx); padding: 0; display: flex; flex-direction: column; } .instruction-section.data-v-5e59b7d8 { background-color: #F3F5F6; padding: 80rpx 40rpx; text-align: center; } .instruction-section .instruction-text.data-v-5e59b7d8 { font-size: 32rpx; color: #666; line-height: 1.5; display: block; } .input-section.data-v-5e59b7d8 { background-color: #fff; padding: 60rpx 40rpx; } .input-section .input-group .input-label.data-v-5e59b7d8 { display: block; font-size: 30rpx; color: #333; margin-bottom: 30rpx; font-weight: 500; } .input-section .input-group .device-input.data-v-5e59b7d8 { width: 100%; height: 80rpx; border: none; border-bottom: 2rpx solid #E5E5E5; font-size: 32rpx; color: #333; background: transparent; padding: 0; box-sizing: border-box; } .input-section .input-group .device-input.data-v-5e59b7d8::-webkit-input-placeholder { color: #999; font-size: 28rpx; } .input-section .input-group .device-input.data-v-5e59b7d8::placeholder { color: #999; font-size: 28rpx; } .input-section .input-group .device-input.data-v-5e59b7d8:focus { border-bottom-color: #007AFF; outline: none; } .button-section.data-v-5e59b7d8 { flex: 1; display: flex; align-items: flex-end; padding: 0 40rpx 80rpx; background-color: #F3F5F6; } .button-section .continue-btn.data-v-5e59b7d8 { width: 100%; height: 100rpx; background-color: #999; color: #fff; border: none; border-radius: 50rpx; font-size: 36rpx; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .button-section .continue-btn.data-v-5e59b7d8:active { -webkit-transform: scale(0.98); transform: scale(0.98); background-color: #888; } .button-section .continue-btn.active.data-v-5e59b7d8 { background-color: #000; color: #fff; } .scan-tip.data-v-5e59b7d8 { text-align: center; padding: 40rpx 20rpx; color: #666; font-size: 28rpx; } .scan-container.data-v-5e59b7d8 { display: flex; justify-content: center; padding: 40rpx 20rpx; } @-webkit-keyframes scan-data-v-5e59b7d8 { 0% { top: 20rpx; } 100% { top: 580rpx; } } @keyframes scan-data-v-5e59b7d8 { 0% { top: 20rpx; } 100% { top: 580rpx; } } .flashlight-btn.data-v-5e59b7d8 { display: flex; justify-content: center; margin: 40rpx 0; } .flashlight-btn .flashlight-icon.data-v-5e59b7d8 { width: 120rpx; height: 60rpx; background-color: #333; border-radius: 30rpx; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32rpx; transition: all 0.3s ease; } .flashlight-btn .flashlight-icon.active.data-v-5e59b7d8 { background-color: #007aff; -webkit-transform: scale(1.1); transform: scale(1.1); } .flashlight-btn .flashlight-icon .icon.data-v-5e59b7d8 { font-size: 28rpx; }