.tabback.data-v-20bea481 { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 160rpx; padding: 0 20rpx; padding-top: 80rpx; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 999 !important; background-color: #fff; } .tabback .rtjt.data-v-20bea481 { font-size: 36rpx; } .tabback .name.data-v-20bea481 { font-size: 32rpx; font-weight: 500; } .device-detail.data-v-20bea481 { padding-top: 150rpx; min-height: 100vh; background-color: #f5f5f5; } .content.data-v-20bea481 { /* padding: 40rpx 30rpx; */ } .avatar-section.data-v-20bea481 { display: flex; justify-content: center; margin-bottom: 104rpx; margin-top: 104rpx; } .avatar-section .avatar-container.data-v-20bea481 { position: relative; } .avatar-section .avatar-container .avatar-placeholder.data-v-20bea481 { width: 250rpx; height: 250rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f8f8f8; } .avatar-section .avatar-container .avatar-placeholder image.data-v-20bea481 { width: 250rpx; height: 250rpx; } .avatar-section .avatar-container .avatar-placeholder .avatar-icon.data-v-20bea481 { font-size: 80rpx; color: #999; } .avatar-section .avatar-container .upload-btn.data-v-20bea481 { position: absolute; bottom: 0; right: -24rpx; width: 110rpx; height: 68rpx; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; } .avatar-section .avatar-container .upload-btn image.data-v-20bea481 { width: 110rpx; height: 68rpx; } .avatar-section .avatar-container .upload-btn .upload-icon.data-v-20bea481 { color: #fff; font-size: 24rpx; font-weight: bold; } .action-sheet.data-v-20bea481 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; } .action-sheet-content.data-v-20bea481 { width: 100%; background-color: #fff; border-radius: 20rpx 20rpx 0 0; padding-bottom: 40rpx; -webkit-animation: slideUp-data-v-20bea481 0.3s ease-out; animation: slideUp-data-v-20bea481 0.3s ease-out; } @-webkit-keyframes slideUp-data-v-20bea481 { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideUp-data-v-20bea481 { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } .action-sheet-item.data-v-20bea481 { padding: 30rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; text-align: center; } .action-sheet-item.data-v-20bea481:active { background-color: #f5f5f5; } .action-sheet-cancel.data-v-20bea481 { padding: 30rpx 40rpx; text-align: center; margin-top: 20rpx; background-color: #f8f8f8; } .action-sheet-cancel.data-v-20bea481:active { background-color: #e8e8e8; } .action-sheet-text.data-v-20bea481 { font-size: 32rpx; color: #333; } .action-sheet-cancel .action-sheet-text.data-v-20bea481 { color: #666; } .form-section.data-v-20bea481 { background-color: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 30rpx; } .form-section .form-item.data-v-20bea481 { margin-bottom: 40rpx; } .form-section .form-item.data-v-20bea481:last-child { margin-bottom: 0; } .form-section .form-item .label.data-v-20bea481 { display: block; font-size: 28rpx; color: #333; margin-bottom: 20rpx; font-weight: 500; } .form-section .form-item .input-container.data-v-20bea481 { display: flex; align-items: center; border-bottom: 1rpx solid #eee; padding-bottom: 20rpx; } .form-section .form-item .input-container .input-field.data-v-20bea481 { flex: 1; font-size: 30rpx; color: #333; } .form-section .form-item .input-container .input-field.data-v-20bea481::-webkit-input-placeholder { color: #999; } .form-section .form-item .input-container .input-field.data-v-20bea481::placeholder { color: #999; } .form-section .form-item .input-container .input-field.data-v-20bea481:disabled { color: #666; } .form-section .form-item .input-container .edit-icon.data-v-20bea481 { width: 52rpx; height: 52rpx; margin-left: 20rpx; } .form-section .form-item .input-container .edit-icon image.data-v-20bea481 { width: 52rpx; height: 52rpx; } .switch-container.data-v-20bea481 { display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eee; padding-bottom: 20rpx; } .switch-container .switch-desc.data-v-20bea481 { flex: 1; font-size: 28rpx; color: #666; line-height: 1.4; } .switch-container .security-switch.data-v-20bea481 { margin-left: 20rpx; } .debug-info.data-v-20bea481 { margin-top: 20rpx; padding: 20rpx; background-color: #f8f8f8; border-radius: 8rpx; display: flex; align-items: center; justify-content: space-between; } .debug-info .debug-text.data-v-20bea481 { font-size: 24rpx; color: #333; } .debug-info .debug-btn.data-v-20bea481 { font-size: 24rpx; padding: 10rpx 20rpx; background-color: #333; color: white; border: none; border-radius: 4rpx; } .delete-section.data-v-20bea481 { display: flex; justify-content: center; } .delete-section .delete-btn.data-v-20bea481 { width: 100%; height: 88rpx; line-height: 88rpx; background-color: #fff; border: none; border-radius: 16rpx; color: #ff4444; font-size: 32rpx; font-weight: 500; } .delete-section .delete-btn.data-v-20bea481:active { background-color: #f8f8f8; } .pin-container .pin-switch-container.data-v-20bea481 { display: flex; align-items: center; justify-content: space-between; } .pin-container .pin-switch-container .pin-switch-desc.data-v-20bea481 { flex: 1; font-size: 28rpx; color: #666; line-height: 1.4; } .pin-container .pin-switch-container .pin-switch.data-v-20bea481 { margin-left: 20rpx; } .pin-container .pin-edit-container.data-v-20bea481 { display: flex; align-items: center; border-bottom: 1rpx solid #eee; padding-bottom: 20rpx; } .pin-container .pin-edit-container .pin-display-field.data-v-20bea481 { flex: 1; font-size: 30rpx; color: #666; } .pin-container .pin-edit-container .pin-display-field.data-v-20bea481:disabled { color: #666; } .pin-container .pin-edit-container .edit-icon.data-v-20bea481 { width: 52rpx; height: 52rpx; margin-left: 20rpx; } .pin-container .pin-edit-container .edit-icon image.data-v-20bea481 { width: 52rpx; height: 52rpx; } .pin-modal.data-v-20bea481 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 40rpx; } .pin-modal .pin-modal-content.data-v-20bea481 { width: 100%; max-width: 600rpx; background-color: #fff; border-radius: 20rpx; overflow: hidden; -webkit-animation: modalSlideIn-data-v-20bea481 0.3s ease-out; animation: modalSlideIn-data-v-20bea481 0.3s ease-out; } .pin-modal .pin-modal-content .pin-modal-header.data-v-20bea481 { display: flex; align-items: center; justify-content: space-between; padding: 40rpx 40rpx 20rpx; border-bottom: 1rpx solid #f0f0f0; } .pin-modal .pin-modal-content .pin-modal-header .pin-modal-title.data-v-20bea481 { font-size: 36rpx; font-weight: 600; color: #333; } .pin-modal .pin-modal-content .pin-modal-header .pin-modal-close.data-v-20bea481 { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; font-size: 48rpx; color: #999; cursor: pointer; } .pin-modal .pin-modal-content .pin-modal-header .pin-modal-close.data-v-20bea481:active { background-color: #f5f5f5; border-radius: 50%; } .pin-modal .pin-modal-content .pin-modal-body.data-v-20bea481 { padding: 40rpx; } .pin-modal .pin-modal-content .pin-modal-body .pin-verify-tip.data-v-20bea481 { background-color: #f8f9fa; border-radius: 12rpx; padding: 24rpx; margin-bottom: 32rpx; border-left: 4rpx solid #333; } .pin-modal .pin-modal-content .pin-modal-body .pin-verify-tip .pin-verify-tip-text.data-v-20bea481 { font-size: 28rpx; color: #666; line-height: 1.5; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group.data-v-20bea481 { margin-bottom: 40rpx; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group.data-v-20bea481:last-child { margin-bottom: 0; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group .pin-input-label.data-v-20bea481 { display: block; font-size: 28rpx; color: #333; margin-bottom: 20rpx; font-weight: 500; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group .pin-input.data-v-20bea481 { width: 100%; height: 88rpx; padding: 0 24rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; font-size: 32rpx; color: #333; background-color: #fff; box-sizing: border-box; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group .pin-input.data-v-20bea481:focus { border-color: #333; outline: none; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group .pin-input.data-v-20bea481::-webkit-input-placeholder { color: #999; } .pin-modal .pin-modal-content .pin-modal-body .pin-input-group .pin-input.data-v-20bea481::placeholder { color: #999; } .pin-modal .pin-modal-content .pin-modal-footer.data-v-20bea481 { display: flex; padding: 20rpx 40rpx 40rpx; gap: 20rpx; } .pin-modal .pin-modal-content .pin-modal-footer .pin-btn.data-v-20bea481 { flex: 1; height: 88rpx; line-height: 88rpx; border: none; border-radius: 12rpx; font-size: 32rpx; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .pin-modal .pin-modal-content .pin-modal-footer .pin-btn.pin-btn-cancel.data-v-20bea481 { background-color: #f5f5f5; color: #666; } .pin-modal .pin-modal-content .pin-modal-footer .pin-btn.pin-btn-cancel.data-v-20bea481:active { background-color: #e8e8e8; } .pin-modal .pin-modal-content .pin-modal-footer .pin-btn.pin-btn-confirm.data-v-20bea481 { background-color: #333; color: #fff; } .pin-modal .pin-modal-content .pin-modal-footer .pin-btn.pin-btn-confirm.data-v-20bea481:active { background-color: #0056b3; } @-webkit-keyframes modalSlideIn-data-v-20bea481 { from { opacity: 0; -webkit-transform: scale(0.9) translateY(-50rpx); transform: scale(0.9) translateY(-50rpx); } to { opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } } @keyframes modalSlideIn-data-v-20bea481 { from { opacity: 0; -webkit-transform: scale(0.9) translateY(-50rpx); transform: scale(0.9) translateY(-50rpx); } to { opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } }