<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单管理系统 - 登录</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#6B7280'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
min-height: 1024px;
}
.login-bg {
background-image: url('https://mastergo.com/ai/api/search-image?query=modern minimalist abstract 3d geometric pattern with soft gradient colors, perfect for login page background, using blue and purple color scheme, clean and professional look, high end corporate style, centered composition&width=800&height=1024&orientation=portrait&flag=898d93f03d0ee82d20d8766d7d83a3dc');
background-size: cover;
background-position: center;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex min-h-[1024px]">
<div class="hidden lg:flex lg:w-[40%] login-bg relative">
<div class="absolute inset-0 bg-primary/80 backdrop-blur-sm"></div>
<div class="relative z-10 flex flex-col items-center justify-center w-full text-white px-8">
<h1 class="font-['Pacifico'] text-4xl mb-6">VASCO</h1>
<p class="text-xl font-medium text-center mb-4">智能订单管理系统</p>
<p class="text-base text-center text-gray-100">提升效率 · 简化流程 · 智能分析</p>
</div>
</div>
<div class="w-full lg:w-[60%] flex items-center justify-center p-8">
<div class="w-full max-w-[480px]">
<div class="text-center lg:text-left mb-12">
<h2 class="text-3xl font-bold text-gray-900">VASCO</h2>
</div>
<form class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
<i class="fas fa-envelope text-gray-400 w-5 h-5 flex items-center justify-center"></i>
</div>
<input type="email" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-button text-gray-900 text-sm focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Please entry email address">
</div>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<label class="block text-sm font-medium text-gray-700">Password</label>
<a href="#" class="text-sm text-primary hover:text-primary/80">Forget password？</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
<i class="fas fa-lock text-gray-400 w-5 h-5 flex items-center justify-center"></i>
</div>
<input type="password" class="w-full pl-12 pr-12 py-3 border border-gray-300 rounded-button text-gray-900 text-sm focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Please entry password">
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-4">
<i class="fas fa-eye text-gray-400 w-5 h-5 flex items-center justify-center"></i>
</button>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" id="remember" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
<label for="remember" class="ml-2 text-sm text-gray-600">Remember my credentials</label>
</div>
<button type="submit" class="w-full bg-primary text-white py-3 rounded-button hover:bg-primary/90 transition-colors duration-200 text-sm font-medium !rounded-button whitespace-nowrap">
Login
</button>
</form>
<div class="mt-8">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-200"></div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
index.html