376 lines
16 KiB
HTML
376 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>智慧门户 - 登录</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<!-- 配置Tailwind -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF',
|
|
secondary: '#36BFFA',
|
|
accent: '#FFD166',
|
|
darkBlue: '#0F172A',
|
|
lightBlue: '#E0F2FE',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
|
|
.bg-gradient-tech {
|
|
background: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #3B82F6 100%);
|
|
}
|
|
|
|
.bg-glass {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.bg-glass-hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.text-shadow {
|
|
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modal-backdrop {
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.input-focus-ring {
|
|
box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.4);
|
|
}
|
|
}
|
|
|
|
/* 动画优化 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-8px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
.error-modal {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.error-modal.hide {
|
|
animation: fadeOut 0.3s ease-in forwards;
|
|
}
|
|
|
|
.feature-card {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
.feature-card:nth-child(2) {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.feature-card:nth-child(3) {
|
|
animation-delay: 2s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-inter min-h-screen flex items-center justify-center p-4 md:p-0 overflow-x-hidden">
|
|
<!-- 背景优化 - 增加渐变叠加层让背景图更协调 -->
|
|
<div class="fixed inset-0 bg-gradient-tech z-0"></div>
|
|
<!-- 科技感装饰元素 -->
|
|
<div class="fixed inset-0 z-0 overflow-hidden opacity-20">
|
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 rounded-full bg-primary/30 blur-3xl"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-accent/20 blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- 错误提示弹窗 (默认隐藏) -->
|
|
<div id="errorModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
|
|
<div class="absolute inset-0 bg-darkBlue/80 modal-backdrop" id="modalBackdrop"></div>
|
|
<div class="relative bg-white/15 backdrop-blur-xl border border-white/25 rounded-xl p-6 w-full max-w-md shadow-2xl error-modal transform transition-all">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 mx-auto bg-red-500/20 rounded-full flex items-center justify-center mb-4">
|
|
<i class="fa fa-exclamation-triangle text-red-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">登录失败</h3>
|
|
<p class="text-white/80" id="modalErrorMessage">账号或密码错误，请重新输入</p>
|
|
</div>
|
|
<button id="closeModal"
|
|
class="w-full mt-4 bg-accent hover:bg-accent/90 text-darkBlue font-medium py-2.5 px-4 rounded-lg transition-all duration-300 shadow-lg shadow-accent/20 hover:shadow-accent/30">
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录卡片 - 科技感背景图（协调不突兀） -->
|
|
<div class="relative w-full max-w-5xl bg-white/10 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row z-10 border border-white/20"
|
|
style="background-image: url('images/login-brand.png'); background-size: cover; background-position: center; background-blend-mode: overlay;">
|
|
<!-- 左侧品牌区域 - 半透明遮罩提升可读性 -->
|
|
<div class="p-6 md:p-10 lg:p-12 flex-1 flex flex-col justify-between bg-darkBlue/40 backdrop-blur-sm">
|
|
<div>
|
|
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-shadow mb-6">智慧门户</h2>
|
|
<p class="text-white/90 text-base md:text-lg max-w-md leading-relaxed">
|
|
一站式智能管理平台，融合前沿技术，为您提供高效、安全、便捷的服务体验，
|
|
助力数字化转型，创造更大价值
|
|
</p>
|
|
</div>
|
|
<div class="mt-10 md:mt-20 space-y-6">
|
|
<div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center text-accent">
|
|
<i class="fa fa-shield text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-white">安全可靠</h3>
|
|
<p class="text-white/70 text-sm">多重加密保障数据安全</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center text-secondary">
|
|
<i class="fa fa-bolt text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-white">高效便捷</h3>
|
|
<p class="text-white/70 text-sm">智能服务提升工作效率</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-glass bg-glass-hover p-5 rounded-xl border border-white/10 hover:border-white/30 transition-all duration-300 feature-card">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
|
<i class="fa fa-cubes text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-white">智能互联</h3>
|
|
<p class="text-white/70 text-sm">全方位数据互通互联</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10 md:mt-16 text-center md:text-left text-white/60 text-sm">
|
|
<p>© 2025 智慧门户 版权所有</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧登录表单区域 - 增强遮罩确保表单清晰 -->
|
|
<div class="flex-1 p-6 md:p-10 lg:p-12 bg-darkBlue/60 backdrop-blur-xl border-l border-white/20 flex flex-col justify-center">
|
|
<div class="max-w-md mx-auto w-full">
|
|
<div class="text-center md:text-left mb-10">
|
|
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-white text-shadow">账户登录</h1>
|
|
<p class="text-white/70">欢迎回来，请输入您的账号信息</p>
|
|
</div>
|
|
|
|
<form id="loginForm" class="space-y-6">
|
|
<!-- 用户名输入 -->
|
|
<div class="space-y-3">
|
|
<label for="username" class="block text-sm font-medium text-white/80">账号</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fa fa-user text-white/50"></i>
|
|
</div>
|
|
<input type="text" id="username" name="username"
|
|
class="block w-full pl-12 pr-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:border-accent focus:input-focus-ring text-white placeholder-white/40 transition-all duration-300 outline-none"
|
|
placeholder="请输入账号" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密码输入 -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<label for="password" class="block text-sm font-medium text-white/80">密码</label>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fa fa-lock text-white/50"></i>
|
|
</div>
|
|
<input type="password" id="password" name="password"
|
|
class="block w-full pl-12 pr-12 py-3 bg-white/10 border border-white/20 rounded-lg focus:border-accent focus:input-focus-ring text-white placeholder-white/40 transition-all duration-300 outline-none"
|
|
placeholder="请输入密码" required>
|
|
<button type="button" id="togglePassword"
|
|
class="absolute inset-y-0 right-0 pr-4 flex items-center text-white/50 hover:text-white transition-colors">
|
|
<i class="fa fa-eye-slash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 记住密码 -->
|
|
<div class="flex items-center">
|
|
<input id="remember" name="remember" type="checkbox"
|
|
class="h-5 w-5 text-accent focus:ring-accent border-white/30 rounded transition-colors bg-white/10">
|
|
<label for="remember" class="ml-3 block text-sm text-white/70">
|
|
记住我 30 天
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 登录按钮 -->
|
|
<button type="submit"
|
|
class="w-full bg-accent hover:bg-accent/90 text-darkBlue font-medium py-3 px-4 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-2 focus:ring-offset-white/10 shadow-lg shadow-accent/20 hover:shadow-accent/30 transform hover:-translate-y-0.5 active:translate-y-0">
|
|
登录
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
if (window.self !== window.top) {
|
|
// 跳转到顶层窗口，强制取消嵌套
|
|
window.top.location.href = window.self.location.href;
|
|
}
|
|
|
|
|
|
// 密码显示/隐藏切换
|
|
const togglePassword = document.getElementById('togglePassword');
|
|
const password = document.getElementById('password');
|
|
togglePassword.addEventListener('click', () => {
|
|
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
password.setAttribute('type', type);
|
|
const icon = togglePassword.querySelector('i');
|
|
icon.classList.toggle('fa-eye');
|
|
icon.classList.toggle('fa-eye-slash');
|
|
});
|
|
|
|
// 错误弹窗相关元素
|
|
const errorModal = document.getElementById('errorModal');
|
|
const closeModal = document.getElementById('closeModal');
|
|
const modalBackdrop = document.getElementById('modalBackdrop');
|
|
const modalErrorMessage = document.getElementById('modalErrorMessage');
|
|
|
|
// 显示错误弹窗
|
|
function showErrorModal(message = '账号或密码错误，请重新输入') {
|
|
modalErrorMessage.textContent = message;
|
|
errorModal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// 隐藏错误弹窗
|
|
function hideErrorModal() {
|
|
const modal = errorModal.querySelector('.error-modal');
|
|
modal.classList.add('hide');
|
|
setTimeout(() => {
|
|
errorModal.classList.add('hidden');
|
|
modal.classList.remove('hide');
|
|
document.body.style.overflow = '';
|
|
}, 300);
|
|
}
|
|
|
|
// 关闭弹窗事件绑定
|
|
closeModal.addEventListener('click', hideErrorModal);
|
|
modalBackdrop.addEventListener('click', hideErrorModal);
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && !errorModal.classList.contains('hidden')) {
|
|
hideErrorModal();
|
|
}
|
|
});
|
|
|
|
// 表单提交处理
|
|
const loginForm = document.getElementById('loginForm');
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// 获取表单数据
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value.trim();
|
|
const remember = document.getElementById('remember').checked;
|
|
|
|
// 简单表单验证
|
|
if (!username || !password) {
|
|
showErrorModal('账号和密码不能为空');
|
|
return;
|
|
}
|
|
|
|
// 模拟登录加载状态
|
|
const submitButton = loginForm.querySelector('button[type="submit"]');
|
|
const originalText = submitButton.innerHTML;
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';
|
|
|
|
try {
|
|
// 发送登录请求到后端（替换为实际接口地址）
|
|
const response = await fetch('biz/userLogin', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({username, password, remember}),
|
|
credentials: 'include'
|
|
});
|
|
|
|
const result = await response.json();
|
|
console.log(result)
|
|
if (response.ok && result.success) {
|
|
// 登录成功，跳转到首页（替换为实际首页路径）
|
|
window.location.href = 'biz/index';
|
|
} else {
|
|
// 登录失败，显示错误信息
|
|
showErrorModal(result.message || '账号或密码错误，请重新输入');
|
|
}
|
|
} catch (error) {
|
|
// 网络错误处理
|
|
console.error('登录请求失败:', error);
|
|
showErrorModal('网络异常，请检查网络连接后重试');
|
|
} finally {
|
|
// 恢复按钮状态
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalText;
|
|
}
|
|
});
|
|
|
|
// 输入框交互优化（聚焦时轻微上浮效果）
|
|
const inputs = document.querySelectorAll('input');
|
|
inputs.forEach(input => {
|
|
input.addEventListener('focus', () => {
|
|
input.parentElement.classList.add('scale-[1.02]', 'transition-transform', 'duration-300');
|
|
});
|
|
input.addEventListener('blur', () => {
|
|
input.parentElement.classList.remove('scale-[1.02]');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |