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