修改等级、新手指南
Change-Id: If60f5e1164f16fdabc8a5648a78c40fdd93c83a8
diff --git a/src/pages/AuthPage/AuthPage.css b/src/pages/AuthPage/AuthPage.css
index 6e8b965..00fb5d7 100644
--- a/src/pages/AuthPage/AuthPage.css
+++ b/src/pages/AuthPage/AuthPage.css
@@ -1,245 +1,210 @@
- .auth-container {
+.auth-container {
display: flex;
align-items: center;
- /* justify-content: flex-end; */
- justify-content: space-between;
+ justify-content: space-between;
min-height: 100vh;
- font-family: Arial, sans-serif;
- background: #5F4437;
- /* background: linear-gradient(180deg, #5F4437, #823c3c) */
- padding: 0 2rem; /* 添加左右内边距 */
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ /* background: linear-gradient(135deg, #be8e9d 0%, #c48d74 100%); */
+ background: url('a.jpg') no-repeat center center fixed;
+ background-size: cover;
+ padding: 0 5%;
+ position: relative;
+ overflow: hidden;
}
- .logo-container {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 2rem;
- }
+.auth-container::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+ transform: rotate(30deg);
+}
- .site-logo {
- width: 300px; /* 设置固定宽度 */
- height: auto; /* 高度自适应，保持比例 */
+.logo-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ z-index: 1;
+}
+
+.site-logo {
+ width: 350px;
+ margin-left: -15%;
+ height: auto;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+}
+
+.glass-card {
+ width: 35%;
+ margin-right: 10%;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ overflow: hidden;
+ z-index: 2;
+ transition: all 0.3s ease;
+}
+
+.glass-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.auth-header {
+ display: flex;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.auth-tab {
+ flex: 1;
+ padding: 20px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: rgba(255, 255, 255, 0.7);
+ position: relative;
+}
+
+.auth-tab.active {
+ color: white;
+ font-weight: 600;
+}
+
+.auth-tab.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60%;
+ height: 3px;
+ background: white;
+ border-radius: 3px;
+}
+
+.auth-tab:not(.active):hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.auth-content {
+ padding: 30px;
+}
+
+.auth-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.form-group label {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.9);
+ text-align: left;
+ align-self: flex-start;
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group input[type="password"] {
+ padding: 14px 16px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 16px;
+ color: white;
+ transition: all 0.3s ease;
+}
+
+.form-group input::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.form-group input:focus {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.4);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+}
+
+.auth-button {
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ padding: 16px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 10px;
+ backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.auth-button:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: translateY(-2px);
+}
+
+.forgot-password {
+ color: rgba(255, 255, 255, 0.7);
+ text-decoration: none;
+ font-size: 14px;
+ transition: all 0.3s ease;
+}
+
+.forgot-password:hover {
+ color: white;
+ text-decoration: underline;
+}
+
+.error-message {
+ color: #ff6b6b;
+ font-size: 14px;
+ margin-top: 4px;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .auth-container {
+ flex-direction: column;
+ padding: 40px 20px;
+ justify-content: flex-start;
}
- .auth-card {
- width: 100%;
- max-width: 480px;
- background-color: #E4D8C9;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- overflow: hidden;
+ .logo-container {
+ margin-bottom: 40px;
}
- .auth-header {
- display: flex;
- border-bottom: 1px solid #eee;
+ .glass-card {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 480px) {
+ .auth-content {
+ padding: 20px;
}
.auth-tab {
- flex: 1;
padding: 16px;
- text-align: center;
- font-size: 18px;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.3s ease;
- }
-
- .auth-tab.active {
- color: #BA929A;
- border-bottom: 2px solid #BA929A;
- }
-
- .auth-tab:not(.active) {
- color: #888;
- }
-
- .auth-tab:hover:not(.active) {
- background-color: #f9f9f9;
- }
-
- .auth-content {
- padding: 30px;
- }
-
- .auth-form {
- display: flex;
- flex-direction: column;
- gap: 20px;
- }
-
- .form-group {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- .form-group label {
- font-weight: 500;
- color: #333;
- text-align: left;
- align-self: flex-start;
- }
-
- .form-group input[type="text"],
- .form-group input[type="email"],
- .form-group input[type="password"] {
- padding: 12px 16px;
- border: 1px solid #ddd;
- border-radius: 4px;
font-size: 16px;
- transition: border-color 0.3s;
}
-
- .form-group input:focus {
- border-color: #BA929A;
- outline: none;
- }
-
- .form-group-inline {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .checkbox-container {
- display: flex;
- align-items: center;
- gap: 8px;
- }
-
- .checkbox-container input[type="checkbox"] {
- width: 18px;
- height: 18px;
- cursor: pointer;
- }
-
- .forgot-password {
- color: #BA929A;
- text-decoration: none;
- font-size: 14px;
- }
-
- .forgot-password:hover {
- text-decoration: underline;
- }
-
- .auth-button {
- background-color: #BA929A;
- color: white;
- border: none;
- border-radius: 4px;
- padding: 14px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- transition: background-color 0.3s;
- }
-
- .auth-button:hover {
- background-color: #BA929A;
- }
-
- .social-login {
- margin-top: 20px;
- text-align: center;
- }
-
- .social-login p {
- color: #666;
- margin-bottom: 15px;
- position: relative;
- }
-
- .social-login p::before,
- .social-login p::after {
- content: "";
- position: absolute;
- top: 50%;
- width: 30%;
- height: 1px;
- background-color: #ddd;
- }
-
- .social-login p::before {
- left: 0;
- }
-
- .social-login p::after {
- right: 0;
- }
-
- .social-icons {
- display: flex;
- justify-content: center;
- gap: 20px;
- }
-
- .social-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 12px;
- cursor: pointer;
- }
-
- .social-icon.wechat {
- background-color: #07c160;
- }
-
- .social-icon.weibo {
- background-color: #e6162d;
- }
-
- .social-icon.qq {
- background-color: #12b7f5;
- }
-
- .terms-container {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .terms-link {
- color: #BA929A;
- text-decoration: none;
- }
-
- .terms-link:hover {
- text-decoration: underline;
- }
-
- .error-message {
- color: #e53e3e;
- font-size: 14px;
- margin-top: 4px;
- }
-
- /* Responsive adjustments */
- @media (max-width: 576px) {
- .auth-card {
- box-shadow: none;
- border-radius: 0;
- }
-
- .auth-content {
- padding: 20px;
- }
-
- .form-group-inline {
- flex-direction: column;
- align-items: flex-start;
- gap: 10px;
- }
-
- .social-icons {
- flex-wrap: wrap;
- }
- }
-
\ No newline at end of file
+}
\ No newline at end of file