/* 一键登录按钮样式 */ .one-click-login-wrapper { padding: 0 16px; margin-bottom: 16px; /* 初始隐藏,避免布局闪烁 */ display: none; } .one-click-login-wrapper.show { display: block; } .one-click-login-container { margin-bottom: 16px; text-align: center; } .one-click-login-btn { width: 100%; height: 48px; border: none; border-radius: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .one-click-login-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); } .one-click-login-btn:active:not(:disabled) { transform: translateY(0); } .one-click-login-btn:disabled { opacity: 0.7; cursor: not-allowed; } .one-click-login-btn .btn-icon { font-size: 20px; } .one-click-login-btn .btn-text { flex: 1; } /* 加载动画 */ .btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* 分割线 */ .login-divider { display: flex; align-items: center; margin: 20px 0; gap: 12px; } .divider-line { flex: 1; height: 1px; background: #e0e0e0; } .divider-text { color: #999; font-size: 14px; padding: 0 8px; } /* 响应式 */ @media (max-width: 480px) { .one-click-login-btn { height: 44px; font-size: 15px; } .one-click-login-btn .btn-icon { font-size: 18px; } }