charge123/qiye
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
MeSHard
2025-11-14 17:34:39 +08:00
commit ca6f1086b0
18 changed files with 3297 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
background/login.html Normal file
View File

@@ -0,0 +1,391 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans SC', sans-serif;
}
.liquid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.liquid-metal {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.4) 0%, transparent 50%);
animation: liquidFlow 20s ease-in-out infinite;
}
@keyframes liquidFlow {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-20px, -20px) rotate(1deg); }
66% { transform: translate(20px, -10px) rotate(-1deg); }
}
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}
.form-input {
background: rgba(255, 255, 255, 0.9);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.form-input:focus {
background: rgba(255, 255, 255, 1);
border-color: #4A90E2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
transform: translateY(-2px);
}
.btn-primary {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary:hover {
transform: translateY(-3px) rotateX(5deg);
box-shadow: 0 15px 35px rgba(74, 144, 226, 0.4);
}
.btn-primary:active {
transform: translateY(-1px) rotateX(2deg);
}
.floating-particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
50% { transform: translateY(-100px) rotate(180deg); opacity: 1; }
}
.logo-animation {
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.error-shake {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="liquid-bg">
<div class="liquid-metal"></div>
<div class="floating-particles" id="particles"></div>
</div>
<div class="glass-card rounded-3xl p-8 w-full max-w-md transform transition-all duration-500 hover:scale-105">
<!-- Logo Section -->
<div class="text-center mb-8">
<div class="logo-animation mb-4">
<div class="w-20 h-20 mx-auto bg-gradient-to-br from-blue-400 to-blue-600 rounded-3xl flex items-center justify-center shadow-2xl">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H5m0 0h2M7 7h10M7 11h10M7 15h10"></path>
</svg>
</div>
</div>
<h1 class="text-3xl font-bold text-white mb-2">企业设置管理</h1>
<p class="text-blue-100 text-sm">安全高效的企业配置平台</p>
</div>
<!-- Login Form -->
<form id="loginForm" class="space-y-6">
<div class="form-group">
<label for="companyId" class="block text-white text-sm font-medium mb-2">企业ID</label>
<input
type="text"
id="companyId"
name="companyId"
class="form-input w-full px-4 py-3 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none"
placeholder="请输入企业ID"
required
>
<div class="error-message text-red-300 text-xs mt-1 hidden" id="companyIdError"></div>
</div>
<div class="form-group">
<label for="password" class="block text-white text-sm font-medium mb-2">登录密码</label>
<input
type="password"
id="password"
name="password"
class="form-input w-full px-4 py-3 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none"
placeholder="请输入登录密码"
required
>
<div class="error-message text-red-300 text-xs mt-1 hidden" id="passwordError"></div>
</div>
<div class="flex items-center justify-between">
<label class="flex items-center">
<input type="checkbox" id="rememberMe" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500">
<span class="ml-2 text-sm text-blue-100">记住登录状态</span>
</label>
<a href="#" class="text-sm text-blue-200 hover:text-white transition-colors">忘记密码？</a>
</div>
<button
type="submit"
class="btn-primary w-full py-3 px-6 rounded-xl text-white font-medium text-lg focus:outline-none focus:ring-4 focus:ring-blue-300"
id="loginBtn"
>
<span class="btn-text">安全登录</span>
<span class="btn-loading hidden">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
验证中...
</span>
</button>
</form>
<!-- Footer -->
<div class="text-center mt-8">
<p class="text-blue-200 text-xs">
© 2025 企业设置管理系统 | 安全可靠的配置管理平台
</p>
</div>
</div>
<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-2xl p-8 max-w-sm mx-4 transform transition-all duration-300 scale-95">
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">登录成功</h3>
<p class="text-gray-600 text-sm mb-6">正在进入企业设置管理平台...</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full transition-all duration-1000" style="width: 0%" id="progressBar"></div>
</div>
</div>
</div>
</div>
<script>
// 创建浮动粒子效果
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 15;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 4 + 2;
const left = Math.random() * 100;
const animationDelay = Math.random() * 6;
const animationDuration = Math.random() * 3 + 4;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${left}%`;
particle.style.bottom = '-10px';
particle.style.animationDelay = `${animationDelay}s`;
particle.style.animationDuration = `${animationDuration}s`;
particlesContainer.appendChild(particle);
}
}
// 表单验证
function validateForm() {
const companyId = document.getElementById('companyId');
const password = document.getElementById('password');
let isValid = true;
// 验证企业ID
if (!companyId.value.trim()) {
showError('companyIdError', '企业ID不能为空');
companyId.classList.add('error-shake');
setTimeout(() => companyId.classList.remove('error-shake'), 500);
isValid = false;
} else {
hideError('companyIdError');
}
// 验证密码
if (!password.value.trim()) {
showError('passwordError', '登录密码不能为空');
password.classList.add('error-shake');
setTimeout(() => password.classList.remove('error-shake'), 500);
isValid = false;
} else {
hideError('passwordError');
}
return isValid;
}
function showError(elementId, message) {
const errorElement = document.getElementById(elementId);
errorElement.textContent = message;
errorElement.classList.remove('hidden');
}
function hideError(elementId) {
const errorElement = document.getElementById(elementId);
errorElement.classList.add('hidden');
}
// 登录处理
function handleLogin(event) {
event.preventDefault();
if (!validateForm()) {
return;
}
const loginBtn = document.getElementById('loginBtn');
const btnText = loginBtn.querySelector('.btn-text');
const btnLoading = loginBtn.querySelector('.btn-loading');
// 显示加载状态
btnText.classList.add('hidden');
btnLoading.classList.remove('hidden');
loginBtn.disabled = true;
// 模拟登录验证
setTimeout(() => {
// 保存登录状态
const rememberMe = document.getElementById('rememberMe').checked;
const loginData = {
companyId: document.getElementById('companyId').value,
loginTime: new Date().toISOString(),
rememberMe: rememberMe
};
if (rememberMe) {
localStorage.setItem('companyLogin', JSON.stringify(loginData));
} else {
sessionStorage.setItem('companyLogin', JSON.stringify(loginData));
}
// 显示成功模态框
showSuccessModal();
// 3秒后跳转到设置页面
setTimeout(() => {
window.location.href = 'settings.html';
}, 3000);
}, 2000);
}
// 显示成功模态框
function showSuccessModal() {
const modal = document.getElementById('successModal');
const progressBar = document.getElementById('progressBar');
modal.classList.remove('hidden');
// 动画显示模态框
anime({
targets: modal.querySelector('.bg-white'),
scale: [0.95, 1],
opacity: [0, 1],
duration: 300,
easing: 'easeOutQuad'
});
// 进度条动画
anime({
targets: progressBar,
width: '100%',
duration: 3000,
easing: 'linear'
});
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createParticles();
// 检查是否已登录
const savedLogin = localStorage.getItem('companyLogin') || sessionStorage.getItem('companyLogin');
if (savedLogin) {
const loginData = JSON.parse(savedLogin);
document.getElementById('companyId').value = loginData.companyId || '';
document.getElementById('rememberMe').checked = loginData.rememberMe || false;
}
// 表单提交事件
document.getElementById('loginForm').addEventListener('submit', handleLogin);
// 输入框聚焦动画
const inputs = document.querySelectorAll('.form-input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
anime({
targets: this,
scale: [1, 1.02],
duration: 200,
easing: 'easeOutQuad'
});
});
input.addEventListener('blur', function() {
anime({
targets: this,
scale: [1.02, 1],
duration: 200,
easing: 'easeOutQuad'
});
});
});
});
</script>
</body>
</html>