通知与推荐功能，css样式优化
Change-Id: I33d934bfdca88b7a8e6742be2a3c7323d28ffbcf
diff --git a/src/components/AuthForm.css b/src/components/AuthForm.css
index 0348f50..b15cbee 100644
--- a/src/components/AuthForm.css
+++ b/src/components/AuthForm.css
@@ -1,113 +1,144 @@
/* src/components/AuthForm.css */
.auth-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background-color: #f5f5f5;
- padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ padding: 20px;
}
.auth-title {
- color: #333;
- font-size: 2.5rem;
- margin-bottom: 2rem;
- text-align: center;
+ color: #1e3c72;
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ font-weight: 700;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.auth-form-wrapper {
- width: 100%;
- max-width: 400px;
- background: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 400px;
+ background: white;
+ padding: 2.5rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.auth-form {
- display: flex;
- flex-direction: column;
- gap: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
}
.auth-form h2 {
- color: #333;
- text-align: center;
- margin-bottom: 1.5rem;
+ color: #1e3c72;
+ text-align: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ font-weight: 600;
}
.form-group {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
.form-group input {
- padding: 0.8rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
- width: 100%;
- box-sizing: border-box; /* 确保padding不会影响宽度 */
- height: 42px; /* 固定高度 */
+ padding: 0.9rem 1rem;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ font-size: 1rem;
+ width: 100%;
+ box-sizing: border-box;
+ height: 46px;
+ transition: all 0.3s;
}
.form-group input:focus {
- outline: none;
- border-color: #007bff;
+ outline: none;
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
}
.auth-button {
- padding: 0.8rem;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- font-size: 1rem;
- cursor: pointer;
- transition: background-color 0.3s;
- height: 42px; /* 与输入框高度一致 */
+ padding: 0.9rem;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ height: 46px;
+ margin-top: 0.5rem;
}
.auth-button:hover {
- background-color: #0056b3;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);
}
.auth-button:disabled {
- background-color: #cccccc;
- cursor: not-allowed;
+ background: #cccccc;
+ transform: none;
+ box-shadow: none;
+ cursor: not-allowed;
}
.auth-switch {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
- margin-top: 1rem;
- font-size: 0.9rem;
- color: #666;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #666;
}
.switch-button {
- background: none;
- border: none;
- color: #007bff;
- cursor: pointer;
- text-decoration: underline;
- font-size: 0.9rem;
- padding: 0;
+ background: none;
+ border: none;
+ color: #1e3c72;
+ cursor: pointer;
+ font-size: 0.9rem;
+ font-weight: 600;
+ padding: 0;
+ transition: all 0.2s;
+ text-decoration: none;
}
.switch-button:hover {
- color: #0056b3;
+ color: #2a5298;
+ text-decoration: underline;
}
.error-message {
- color: #dc3545;
- background-color: #f8d7da;
- padding: 0.5rem;
- border-radius: 4px;
- text-align: center;
- margin-bottom: 1rem;
+ color: #e74c3c;
+ background-color: #fdecea;
+ padding: 0.8rem;
+ border-radius: 6px;
+ text-align: center;
+ margin-bottom: 1rem;
+ border: 1px solid #fadbd8;
+ font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+ .auth-form-wrapper {
+ padding: 1.8rem;
+ }
+
+ .auth-title {
+ font-size: 2rem;
+ }
+
+ .auth-form h2 {
+ font-size: 1.3rem;
+ }
}
\ No newline at end of file