用户中心 商城 登陆注册前端
Change-Id: I4165f66073210b296608a5cfa0e8329e3d9bc8e3
diff --git a/src/pages/AuthStyle.css b/src/pages/AuthStyle.css
new file mode 100644
index 0000000..820c596
--- /dev/null
+++ b/src/pages/AuthStyle.css
@@ -0,0 +1,240 @@
+/* AuthStyle.css - 仅针对auth页面的样式，不影响其他页面 */
+
+/* 限定在.auth-wrapper内的样式才会生效 */
+.auth-wrapper {
+ /* 基础样式 */
+ --primary-color: #f9952f;
+ --primary-hover: #e08527;
+ --white: #ffffff;
+ --light-gray: #f5f5f5;
+ --dark-gray: #333333;
+ --error-color: #ff4d4f;
+
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+ /* 页面背景（仅影响.auth-wrapper内部） */
+ background-color: var(--light-gray);
+ background-image: linear-gradient(135deg, var(--primary-color) 0%, #f9c22f 100%);
+ background-size: 400% 400%;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ animation: gradientBG 15s ease infinite;
+}
+
+@keyframes gradientBG {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+/* 容器样式 */
+.auth-wrapper .auth-container {
+ width: 100%;
+ max-width: 500px;
+ animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.auth-wrapper .auth-header {
+ text-align: center;
+ margin-bottom: 2rem;
+ color: var(--white);
+}
+
+.auth-wrapper .auth-header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.auth-wrapper .auth-header p {
+ font-size: 1rem;
+ opacity: 0.9;
+}
+
+/* 卡片样式 */
+.auth-wrapper .auth-card {
+ background-color: var(--white);
+ border-radius: 10px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ padding: 2rem;
+ transition: all 0.3s ease;
+}
+
+.auth-wrapper .auth-card:hover {
+ box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+}
+
+/* 标签页样式 */
+.auth-wrapper .tabs {
+ display: flex;
+ position: relative;
+ margin-bottom: 2rem;
+ border-bottom: 1px solid #eee;
+}
+
+.auth-wrapper .tab-btn {
+ flex: 1;
+ padding: 0.75rem;
+ text-align: center;
+ background: none;
+ border: none;
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--dark-gray);
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+.auth-wrapper .tab-btn.active {
+ color: var(--primary-color);
+}
+
+.auth-wrapper .tab-indicator {
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ height: 3px;
+ width: 50%;
+ background-color: var(--primary-color);
+ transition: all 0.3s ease;
+}
+
+/* 表单样式 */
+.auth-wrapper .auth-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.auth-wrapper .form-group {
+ position: relative;
+}
+
+.auth-wrapper .form-group input {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+.auth-wrapper .form-group input:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 2px rgba(249, 149, 47, 0.2);
+ outline: none;
+}
+
+.auth-wrapper .form-group.with-button {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.auth-wrapper .form-group.with-button input {
+ flex: 1;
+}
+
+/* 按钮样式 */
+.auth-wrapper .submit-btn {
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem;
+ border-radius: 5px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.auth-wrapper .submit-btn:hover {
+ background-color: var(--primary-hover);
+ transform: translateY(-2px);
+}
+
+.auth-wrapper .submit-btn:active {
+ transform: translateY(0);
+}
+
+.auth-wrapper .code-btn {
+ background-color: var(--light-gray);
+ color: var(--dark-gray);
+ border: none;
+ padding: 0 1rem;
+ border-radius: 5px;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ white-space: nowrap;
+}
+
+.auth-wrapper .code-btn:hover:not(:disabled) {
+ background-color: #e0e0e0;
+}
+
+.auth-wrapper .code-btn:disabled {
+ cursor: not-allowed;
+ opacity: 0.7;
+}
+
+/* 消息样式 */
+.auth-wrapper .message {
+ padding: 0.75rem 1rem;
+ border-radius: 5px;
+ margin-bottom: 1.5rem;
+ text-align: center;
+ transition: all 0.3s ease;
+}
+
+.auth-wrapper .message.error {
+ background-color: #fff2f0;
+ border: 1px solid var(--error-color);
+ color: var(--error-color);
+}
+
+/* 加载动画 */
+.auth-wrapper .spinner {
+ width: 20px;
+ height: 20px;
+ border: 3px solid rgba(255,255,255,0.3);
+ border-radius: 50%;
+ border-top-color: var(--white);
+ animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+/* 页脚样式 */
+.auth-wrapper .auth-footer {
+ text-align: center;
+ margin-top: 2rem;
+ color: var(--white);
+ font-size: 0.9rem;
+ opacity: 0.8;
+}
+
+/* 响应式设计 */
+@media (max-width: 600px) {
+ .auth-wrapper {
+ padding: 1rem;
+ }
+
+ .auth-wrapper .auth-card {
+ padding: 1.5rem;
+ }
+}
\ No newline at end of file