- ![avatar]()
- {{ (auth.user?.username || auth.user?.email || "用户").charAt(0).toUpperCase() }}
-
+
-
+
+
+
+
+
-
+
-
+
-
@@ -64,6 +84,7 @@
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElCheckbox, ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { Message, Lock } from "@element-plus/icons-vue";
import { useAuthStore } from "../store/auth";
import { getCachedCredential, setCachedCredential, clearCachedCredential } from "../utils/auth";
@@ -79,10 +100,10 @@ const form = reactive({
const rules: FormRules = {
email: [
- { required: true, message: "请输入邮箱", trigger: "blur" },
+ { required: true, message: "请输入有效的邮箱地址", trigger: "blur" },
{ type: "email", message: "邮箱格式不正确", trigger: "blur" },
],
- password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+ password: [{ required: true, message: "请输入您的密码", trigger: "blur" }],
};
const loading = ref(false);
@@ -111,7 +132,7 @@ const onSubmit = async () => {
router.push("/");
} catch (error: any) {
const detail = error?.response?.data?.detail || error?.response?.data?.message;
- ElMessage.error(detail || "邮箱或密码错误");
+ ElMessage.error(detail || "认证失败，请检查您的凭据");
} finally {
loading.value = false;
}
@@ -124,103 +145,191 @@ const onSubmit = async () => {
align-items: center;
justify-content: center;
min-height: 100vh;
- background: radial-gradient(circle at 50% 50%, #f0f2f5 0%, #e6e9f0 100%);
+ background-color: #f8fafc;
position: relative;
overflow: hidden;
}
-/* 装饰性背景元素，不使用外部资源 */
-.login-container::before {
- content: "";
+/* 动态背景 */
+.bg-animate {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.circle {
position: absolute;
- width: 600px;
- height: 600px;
- background: var(--ctms-primary);
- opacity: 0.03;
border-radius: 50%;
- top: -200px;
- right: -200px;
+ filter: blur(80px);
+ z-index: 0;
+ opacity: 0.4;
+ animation: move 20s infinite alternate;
+}
+
+.circle-1 {
+ width: 500px;
+ height: 500px;
+ background: #3b82f6;
+ top: -100px;
+ left: -100px;
+}
+
+.circle-2 {
+ width: 400px;
+ height: 400px;
+ background: #10b981;
+ bottom: -50px;
+ right: -50px;
+ animation-delay: -5s;
+}
+
+.circle-3 {
+ width: 300px;
+ height: 300px;
+ background: #6366f1;
+ top: 40%;
+ left: 30%;
+ animation-delay: -10s;
+}
+
+@keyframes move {
+ from { transform: translate(0, 0) scale(1); }
+ to { transform: translate(50px, 100px) scale(1.1); }
}
.login-content {
- width: 400px;
+ width: 420px;
z-index: 1;
+ position: relative;
}
.login-brand {
text-align: center;
- margin-bottom: 40px;
+ margin-bottom: 32px;
}
.brand-title {
- font-size: 36px;
- font-weight: 700;
- color: var(--ctms-primary);
- letter-spacing: 2px;
+ font-size: 48px;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ letter-spacing: -1px;
margin: 0;
}
.brand-subtitle {
- font-size: 16px;
- color: var(--ctms-text-secondary);
+ font-size: 14px;
+ color: #64748b;
margin-top: 8px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ font-weight: 500;
}
.login-card {
- padding: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ background: rgba(255, 255, 255, 0.8);
+ backdrop-filter: blur(20px);
+ border-radius: 20px;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+ padding: 12px;
}
.login-header {
+ text-align: center;
margin-bottom: 32px;
}
.form-title {
- font-size: 20px;
- font-weight: 600;
- color: var(--ctms-text-main);
+ font-size: 24px;
+ font-weight: 700;
+ color: #1e293b;
margin: 0;
}
.form-desc {
font-size: 14px;
- color: var(--ctms-text-secondary);
+ color: #94a3b8;
margin-top: 8px;
}
+.elegant-form :deep(.el-form-item__label) {
+ font-size: 13px;
+ font-weight: 600;
+ color: #475569;
+ padding-bottom: 8px;
+}
+
+.elegant-form :deep(.el-input__wrapper) {
+ background-color: #f8fafc;
+ box-shadow: 0 0 0 1px #e2e8f0 inset;
+ padding: 8px 12px;
+ border-radius: 10px;
+ transition: var(--ctms-transition);
+}
+
+.elegant-form :deep(.el-input__wrapper.is-focus) {
+ box-shadow: 0 0 0 1px var(--ctms-primary) inset, 0 0 0 4px rgba(47, 84, 235, 0.1) !important;
+ background-color: #fff;
+}
+
+.form-options {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+}
+
+.forgot-link {
+ font-size: 13px;
+ color: var(--ctms-primary);
+ text-decoration: none;
+ font-weight: 500;
+}
+
.submit-btn {
width: 100%;
- height: 44px;
+ height: 48px;
font-size: 16px;
- margin-top: 16px;
+ font-weight: 600;
+ border-radius: 12px;
+ background: linear-gradient(135deg, var(--ctms-primary) 0%, #4f46e5 100%);
+ border: none;
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+ transition: var(--ctms-transition);
}
-.link-row {
- margin-top: 12px;
+
+.submit-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
+}
+
+.register-prompt {
+ margin-top: 24px;
text-align: center;
-}
-.link-row a {
- color: var(--ctms-primary);
font-size: 14px;
+ color: #64748b;
+}
+
+.register-prompt a {
+ color: var(--ctms-primary);
+ font-weight: 600;
+ text-decoration: none;
+ margin-left: 4px;
}
.login-footer {
text-align: center;
- margin-top: 48px;
+ margin-top: 40px;
}
.login-footer p {
font-size: 12px;
- color: var(--ctms-text-disabled);
-}
-
-:deep(.el-form-item__label) {
- padding-bottom: 4px;
-}
-
-:deep(.el-input__wrapper) {
- box-shadow: 0 0 0 1px #d9d9d9 inset;
-}
-
-:deep(.el-input__wrapper.is-focus) {
- box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
+ color: #94a3b8;
}
+
+
+
+
+
CTMS
@@ -8,8 +15,8 @@
-
用户登录
-请输入邮箱与密码登录，未激活账号将无法登录
+欢迎回来
+请输入您的凭据以访问系统