/* 认证页面全局样式 */ /* 输入框样式优化 */ .auth-input :deep(.el-input__wrapper) { border-radius: 8px !important; transition: all 0.3s ease !important; border: 1px solid #d1d5db !important; } .auth-input :deep(.el-input__wrapper:hover) { border-color: #3b82f6 !important; } .auth-input :deep(.el-input__wrapper.is-focus) { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important; } /* 按钮样式优化 */ .auth-button :deep(.el-button--primary) { border-radius: 8px !important; font-weight: 500 !important; transition: all 0.3s ease !important; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; border: none !important; } .auth-button :deep(.el-button--primary:hover) { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important; } .auth-button :deep(.el-button--primary:active) { transform: translateY(0) !important; } /* Radio button 样式优化 */ .auth-radio :deep(.el-radio-button__inner) { border: none !important; background: transparent !important; color: #6b7280 !important; font-weight: 500 !important; transition: all 0.3s ease !important; padding: 12px 16px !important; } .auth-radio :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) { background: white !important; color: #3b82f6 !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; } /* 表单标签样式 */ .auth-label { @apply block text-sm font-medium text-gray-700 mb-2; } /* 链接样式 */ .auth-link { @apply text-gray-600 hover:text-sky-600 transition-colors mx-2; } /* 卡片样式 */ .auth-card { @apply bg-white/95 backdrop-blur-sm shadow-2xl rounded-2xl border border-white/20; } /* 标题样式 */ .auth-title { @apply text-2xl font-bold text-gray-900 mb-2; } .auth-subtitle { @apply text-gray-600 text-sm; } /* 响应式优化 */ @media (max-width: 640px) { .auth-input :deep(.el-input__wrapper) { border-radius: 6px !important; } .auth-button :deep(.el-button--primary) { border-radius: 6px !important; } } /* 动画效果 */ .auth-fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 加载状态样式 */ .auth-loading { @apply opacity-75 pointer-events-none; } /* 错误状态样式 */ .auth-error :deep(.el-input__wrapper) { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important; } /* 成功状态样式 */ .auth-success :deep(.el-input__wrapper) { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important; }