zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

UI美化及渐变效果

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-23 21:17:31 +08:00
parent 7694311882
commit c9d1535428
4 changed files with 306 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Login.vue
+178 -69
View File
@@ -1,5 +1,12 @@
<template>
<div class="login-container">
<!-- 动态背景元素 -->
<div class="bg-animate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
<div class="login-content">
<div class="login-brand">
<h1 class="brand-title">CTMS</h1>
@@ -8,8 +15,8 @@
<el-card class="login-card">
<div class="login-header">
<h2 class="form-title">用户登录</h2>
<p class="form-desc">请输入邮箱与密码登录，未激活账号将无法登录</p>
<h2 class="form-title">欢迎回来</h2>
<p class="form-desc">请输入您的凭据以访问系统</p>
</div>
<el-form
@@ -18,43 +25,56 @@
:rules="rules"
label-position="top"
@keyup.enter.native="onSubmit"
class="elegant-form"
>
<el-form-item label="邮箱" prop="email">
<el-form-item label="电子邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
placeholder="name@company.com"
autocomplete="email"
/>
>
<template #prefix>
<el-icon><Message /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-form-item label="登录密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
placeholder="最小 8 位字符"
autocomplete="current-password"
show-password
/>
>
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
<div class="form-footer">
<el-checkbox v-model="form.remember">记住账号密码</el-checkbox>
<el-button
type="primary"
:loading="loading"
class="submit-btn"
@click="onSubmit"
>
登 录
</el-button>
<div class="link-row">
<RouterLink to="/register">没有账号？注册</RouterLink>
</div>
<div class="form-options">
<el-checkbox v-model="form.remember">记住我</el-checkbox>
<RouterLink to="/forgot-password" class="forgot-link">忘记密码？</RouterLink>
</div>
<el-button
type="primary"
:loading="loading"
class="submit-btn"
@click="onSubmit"
>
登 录
</el-button>
<div class="register-prompt">
<span>还没有账号？</span>
<RouterLink to="/register">立即注册</RouterLink>
</div>
</el-form>
</el-card>
<div class="login-footer">
<p>© 2025 Clinical Trial Management System. All Rights Reserved.</p>
<p>© 2025 CTMS Enterprise. Powered by Professional Clinical Research.</p>
</div>
</div>
</div>
@@ -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<typeof form> = {
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;
}
</style>