UI美化及渐变效果
This commit is contained in:
Cheng Zhou
@@ -92,10 +92,14 @@
|
||||
<StudySelector />
|
||||
<el-dropdown trigger="click" @command="onCommand" class="user-profile">
|
||||
<span class="dropdown-trigger compact">
|
||||
<div class="user-avatar">
|
||||
<img v-if="auth.user?.avatar_url" :src="auth.user.avatar_url" alt="avatar" />
|
||||
<span v-else>{{ (auth.user?.username || auth.user?.email || "用户").charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<el-avatar
|
||||
:size="28"
|
||||
:src="auth.user?.avatar_url"
|
||||
shape="square"
|
||||
class="user-avatar-comp"
|
||||
>
|
||||
{{ (auth.user?.username || auth.user?.email || "U").charAt(0).toUpperCase() }}
|
||||
</el-avatar>
|
||||
<span class="username">{{ auth.user?.username || auth.user?.email || "用户" }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
@@ -117,10 +121,13 @@
|
||||
|
||||
<el-main class="layout-main">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -153,7 +160,6 @@ const onCommand = (cmd: string) => {
|
||||
if (cmd === "logout") {
|
||||
onLogout();
|
||||
} else if (cmd === "profile") {
|
||||
// 预留个人设置路由占位，如后续有页面则跳转
|
||||
router.push("/profile");
|
||||
}
|
||||
};
|
||||
@@ -162,15 +168,16 @@ const onCommand = (cmd: string) => {
|
||||
<style scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
background-color: var(--ctms-bg-base);
|
||||
background-color: #f6f8fb;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
background-color: #001529;
|
||||
background-color: #001529; /* 经典深色，保持专业感 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.aside-logo {
|
||||
@@ -178,21 +185,22 @@ const onCommand = (cmd: string) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
background-color: #002140;
|
||||
background-color: #001529;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--ctms-primary);
|
||||
border-radius: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
box-shadow: 0 4px 8px rgba(47, 84, 235, 0.3);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@@ -200,45 +208,60 @@ const onCommand = (cmd: string) => {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
flex: 1;
|
||||
padding: 16px 0;
|
||||
padding: 12px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
padding: 16px 24px 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 4px 12px;
|
||||
border-radius: var(--ctms-radius);
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
transition: var(--ctms-transition);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover) {
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
color: #fff !important;
|
||||
background-color: var(--ctms-primary) !important;
|
||||
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active::before) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
margin: 4px 12px;
|
||||
border-radius: var(--ctms-radius);
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title:hover) {
|
||||
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
|
||||
color: #fff !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu--inline) {
|
||||
@@ -257,7 +280,7 @@ const onCommand = (cmd: string) => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
|
||||
height: 64px !important;
|
||||
z-index: 9;
|
||||
}
|
||||
@@ -265,85 +288,49 @@ const onCommand = (cmd: string) => {
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--ctms-border-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--ctms-primary-light);
|
||||
color: var(--ctms-primary);
|
||||
border-radius: 50%;
|
||||
.dropdown-trigger.compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #eef2f6;
|
||||
color: #334155;
|
||||
transition: var(--ctms-transition);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.dropdown-trigger.compact:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.user-avatar-comp {
|
||||
color: var(--ctms-primary) !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dropdown-trigger.compact {
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
background: #f4f6fa;
|
||||
border: 1px solid #e2e6f0;
|
||||
color: #333;
|
||||
}
|
||||
.avatar-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.user-dropdown-menu :deep(.el-dropdown-menu__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.study-tag {
|
||||
font-weight: 500;
|
||||
color: var(--ctms-primary);
|
||||
border-color: var(--ctms-primary-hover);
|
||||
background-color: var(--ctms-primary-light);
|
||||
font-weight: 600;
|
||||
margin: 0 10px 0 8px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
@@ -352,7 +339,23 @@ const onCommand = (cmd: string) => {
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: var(--ctms-spacing-lg);
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-transform-enter-active,
|
||||
.fade-transform-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -35,10 +35,38 @@
|
||||
--ctms-spacing-lg: 24px;
|
||||
--ctms-spacing-xl: 32px;
|
||||
|
||||
/* 圆角 & 阴影 */
|
||||
--ctms-radius: 4px;
|
||||
/* 圆角 & 阴影 - 升级为更多层级 */
|
||||
--ctms-radius-sm: 4px;
|
||||
--ctms-radius: 8px;
|
||||
--ctms-radius-lg: 12px;
|
||||
--ctms-radius-round: 50%;
|
||||
|
||||
--ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
--ctms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--ctms-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
|
||||
--ctms-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
--ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* 动画 */
|
||||
--ctms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 现代滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* 全局重置 */
|
||||
|
||||
+178
-69
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user