You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
543 lines
11 KiB
543 lines
11 KiB
<template>
|
|
<div class="login-container">
|
|
<!-- 左上角Logo和标题 -->
|
|
<div class="logo-header">
|
|
<img src="@/assets/logo.png" alt="Logo" class="logo">
|
|
<h1 class="login-title">面向疾病预测的知识图谱应用系统</h1>
|
|
</div>
|
|
|
|
<!-- 左侧登录区域 -->
|
|
<div class="login-form-container">
|
|
<div class="login-header">
|
|
</div>
|
|
|
|
<div class="login-form">
|
|
<h2 class="form-title">登录</h2>
|
|
<p class="form-description">请输入您的电子邮件地址和密码以访问账户。</p>
|
|
|
|
<form class="form" @submit.prevent="handleLogin">
|
|
<!-- 错误信息显示 -->
|
|
<div v-if="errorMessage" class="error-message">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username" class="form-label">用户名</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
v-model="loginForm.username"
|
|
placeholder="输入您的用户名"
|
|
class="form-input"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="password-header">
|
|
<label for="password" class="form-label">密码</label>
|
|
<a href="#" class="forgot-password">忘记密码?</a>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
v-model="loginForm.password"
|
|
placeholder="输入您的密码"
|
|
class="form-input"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-checkbox">
|
|
<input
|
|
type="checkbox"
|
|
id="remember"
|
|
v-model="loginForm.remember"
|
|
class="checkbox"
|
|
>
|
|
<label for="remember" class="checkbox-label">记住密码</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="login-button"
|
|
:disabled="loading"
|
|
>
|
|
<img v-if="!loading" src="@/assets/登录.png" alt="登录" class="login-icon">
|
|
<span v-if="!loading">登录</span>
|
|
<span v-else>登录中...</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="social-login">
|
|
<p class="social-text">使用其他方式登录</p>
|
|
</div>
|
|
|
|
<div class="register-link">
|
|
<p>还没有账户? <a href="#" class="register"> 立即注册</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧知识图谱可视化区域 -->
|
|
<div class="graph-container">
|
|
<!-- 背景装饰 -->
|
|
<div class="background-decoration">
|
|
<div class="bg-circle circle-1"></div>
|
|
<div class="bg-circle circle-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { login } from '@/api/login';
|
|
|
|
const router = useRouter();
|
|
|
|
// 登录表单数据
|
|
const loginForm = ref({
|
|
username: '',
|
|
password: '',
|
|
remember: false
|
|
});
|
|
|
|
// 登录状态
|
|
const loading = ref(false);
|
|
const errorMessage = ref('');
|
|
|
|
// 登录处理函数
|
|
const handleLogin = async () => {
|
|
// 表单验证
|
|
if (!loginForm.value.username || !loginForm.value.password) {
|
|
errorMessage.value = '请输入用户名和密码';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
loading.value = true;
|
|
errorMessage.value = '';
|
|
|
|
// 调用登录API
|
|
const response = await login({
|
|
username: loginForm.value.username,
|
|
password: loginForm.value.password,
|
|
remember: loginForm.value.remember
|
|
});
|
|
|
|
// 登录成功处理
|
|
console.log('登录成功:', response);
|
|
|
|
// 如果后端返回了token，可以存储到localStorage
|
|
if (response.token) {
|
|
localStorage.setItem('token', response.token);
|
|
}
|
|
|
|
// 如果需要记住密码，可以存储用户名
|
|
if (loginForm.value.remember) {
|
|
localStorage.setItem('username', loginForm.value.username);
|
|
} else {
|
|
localStorage.removeItem('username');
|
|
}
|
|
|
|
// 登录成功后跳转到index页面
|
|
router.push('/index');
|
|
|
|
} catch (error) {
|
|
// 登录失败处理
|
|
console.error('登录失败:', error);
|
|
errorMessage.value = error.response?.data?.message || '登录失败，请检查用户名和密码';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 全局样式，防止页面滚动 */
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
/* 基础容器样式 */
|
|
.login-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
flex-direction: row;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
/* 左上角Logo和标题样式 */
|
|
.logo-header {
|
|
position: fixed;
|
|
top: 40px;
|
|
left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.login-title {
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
font-family: 'SimSun Bold', '宋体', serif;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
text-shadow: 0.4px 0.4px 0 #1f2937;
|
|
}
|
|
|
|
/* 左侧登录区域样式 */
|
|
.login-form-container {
|
|
width: 25%;
|
|
background-color: #ffffff;
|
|
padding: 2rem;
|
|
padding-left: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.login-header {
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.login-form {
|
|
max-width: 24rem;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: #333333;
|
|
margin-top: -7px;
|
|
margin-bottom: 10px;
|
|
margin-left: 13px;
|
|
text-shadow: 0.2px 0.2px 0 #1f2937;
|
|
text-align: left;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.form-description {
|
|
color: #B5B5B5;
|
|
margin-bottom: 2rem;
|
|
margin-left: 13px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ef4444;
|
|
font-size: 11px;
|
|
padding: 0.5rem;
|
|
background-color: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #374151;
|
|
margin-bottom: 0.3rem;
|
|
text-align: left;
|
|
font-family:'STSong', '宋体', serif;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.8rem;
|
|
border-radius: 0.5rem;
|
|
border: 2px solid #A3A3A3;
|
|
transition: all 0.2s;
|
|
font-size: 9px;
|
|
box-sizing: border-box;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: #2563eb;
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.password-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.forgot-password {
|
|
font-size: 9px;
|
|
color: #B5B5B5;
|
|
text-decoration: none;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.forgot-password:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.form-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: -5px;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.checkbox {
|
|
height: 0.8rem;
|
|
width: 0.8rem;
|
|
color: #2563eb;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
.checkbox-label {
|
|
margin-left: 0.1rem;
|
|
font-size: 11px;
|
|
color: #444040ba;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
background-color: #409EFF;
|
|
color: white;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
padding: 0.6rem 0.8rem;
|
|
border-radius: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-family: 'SimSun', '宋体', 'STSong', '华文宋体', serif;
|
|
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.login-icon {
|
|
height: 0.9rem;
|
|
width: auto;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.login-button:hover {
|
|
background-color: #1d4ed8;
|
|
}
|
|
|
|
.arrow-icon {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* 分割线样式 */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 1.5rem 0;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.divider span {
|
|
padding: 0 1rem;
|
|
font-size: 11px;
|
|
color: #B5B5B5;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.social-login {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.social-text {
|
|
text-align: center;
|
|
color: #B5B5B5;
|
|
margin-bottom: 1rem;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.social-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
background-color: #f3f4f6;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.register-link {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.register-link p {
|
|
color: #B5B5B5;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.register {
|
|
color: #B5B5B5;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.register:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
/* 右侧知识图谱可视化区域样式 */
|
|
.graph-container {
|
|
width: 75%;
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%),
|
|
url('@/assets/背景.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-blend-mode: overlay;
|
|
padding: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.background-decoration {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.bg-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(3rem);
|
|
}
|
|
|
|
.circle-1 {
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 16rem;
|
|
height: 16rem;
|
|
background-color: #60a5fa;
|
|
}
|
|
|
|
.circle-2 {
|
|
bottom: 33%;
|
|
right: 33%;
|
|
width: 20rem;
|
|
height: 20rem;
|
|
background-color: #818cf8;
|
|
}
|
|
|
|
.graph-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.graph-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 48rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.login-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.login-form-container,
|
|
.graph-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.login-form-container {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.graph-container {
|
|
min-height: 400px;
|
|
}
|
|
}
|
|
</style>
|