237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
|
<title>杜康好客 · 总部管理登录</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-lowest": "#ffffff",
|
|
"outline-variant": "#e2bebc",
|
|
"error": "#ba1a1a",
|
|
"surface": "#faf9f7",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"status-blue": "#2A6EBB",
|
|
"on-surface": "#1a1c1b",
|
|
"primary-fixed": "#ffdad7",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-dim": "#dadad8",
|
|
"surface-container-high": "#e9e8e6",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-low": "#f4f3f1",
|
|
"outline": "#8d706e",
|
|
"tertiary": "#37413b",
|
|
"on-primary-container": "#ffb9b4",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"tertiary-container": "#4e5852",
|
|
"aged-amber": "#FFBF00",
|
|
"ink-black": "#1A1A1A",
|
|
"surface-bright": "#faf9f7",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"error-container": "#ffdad6",
|
|
"surface-variant": "#e3e2e0",
|
|
"on-surface-variant": "#5a413f",
|
|
"on-primary-fixed": "#410004",
|
|
"on-error": "#ffffff",
|
|
"inverse-on-surface": "#f1f1ef",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"on-secondary-fixed": "#241a00",
|
|
"on-primary-fixed-variant": "#910817",
|
|
"inverse-surface": "#2f3130",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"secondary-container": "#fed65b",
|
|
"surface-container-highest": "#e3e2e0",
|
|
"success-green": "#2D6A4F",
|
|
"primary-container": "#a61d24",
|
|
"primary": "#820012",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"surface-tint": "#b3272c",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"subtle-gray": "#999999",
|
|
"secondary": "#735c00",
|
|
"on-background": "#1a1c1b",
|
|
"background": "#faf9f7",
|
|
"on-secondary-container": "#745c00",
|
|
"secondary-fixed": "#ffe088",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"surface-container": "#efeeec",
|
|
"heritage-red": "#A61D24",
|
|
"on-primary": "#ffffff",
|
|
"inverse-primary": "#ffb3ae"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "32px",
|
|
"margin-page": "20px",
|
|
"gutter-card": "12px",
|
|
"stack-md": "16px",
|
|
"base": "8px",
|
|
"stack-sm": "4px",
|
|
"stack-xl": "48px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-xl": ["Manrope"],
|
|
"headline-md": ["Manrope"],
|
|
"headline-lg": ["Manrope"],
|
|
"coupon-amount": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"],
|
|
"label-md": ["Inter"],
|
|
"body-lg": ["Be Vietnam Pro"],
|
|
"headline-lg-mobile": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.premium-card-shadow {
|
|
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
|
}
|
|
|
|
.amber-accent-gradient {
|
|
background: linear-gradient(135deg, #FFBF00 0%, #FFD700 100%);
|
|
}
|
|
|
|
.button-press-active:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body-md text-on-surface antialiased overflow-hidden">
|
|
<!-- HQQuickLoginPage Container -->
|
|
<div class="flex flex-col h-screen max-w-md mx-auto relative overflow-hidden">
|
|
<!-- Background Atmospheric Element -->
|
|
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
|
|
<div class="absolute -bottom-24 -left-24 w-64 h-64 bg-aged-amber/5 rounded-full blur-3xl pointer-events-none"></div>
|
|
<!-- Header Section -->
|
|
<header class="flex flex-col items-center pt-stack-xl pb-stack-lg z-10">
|
|
<div class="w-[150px] h-[150px] rounded-full overflow-hidden shadow-sm bg-white p-1 border border-surface-container-high">
|
|
<img alt="Dukang Logo" class="w-full h-full object-contain rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3aK6_2nIyv7uui_LC5TBgernkZyUS6mVK9Ncum0ctp7mLs8X7ZVQeAFVvDDfV9E_ymWgdy-tAM8T86AFWHdloymr7e_WT8LHAsVb8O6mt9EW8aWXPY5ELLE8fOPlk4PMuMTh2TR-zXkdWtQZPGw__iFJOKYtc26rA-CR5uNkXhG0Qw5DOL6YwLVyP-t3pfCR3G5NXuKgfzfF_nX6l3W8THrAtOC_-hB9LGvi-k68W_rl_Ikw84tIfZ4Dyi6luBLXEvPeX80FY40k">
|
|
</div>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold mt-4 tracking-tight">
|
|
杜康好客 · 总部管理
|
|
</h1>
|
|
</header>
|
|
<!-- Identity Card (Visual Focus) -->
|
|
<main class="flex-grow px-margin-page py-4 z-10">
|
|
<div class="premium-card-shadow bg-surface-container-lowest rounded-xl p-stack-lg flex flex-col items-center border border-outline-variant/10 relative overflow-hidden">
|
|
<!-- Decorative Top Edge -->
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-heritage-red/10"></div>
|
|
<!-- User Avatar -->
|
|
<div class="w-16 h-16 rounded-full bg-primary-fixed flex items-center justify-center mb-stack-md">
|
|
<span class="material-symbols-outlined text-[48px] text-heritage-red" style="font-variation-settings: 'FILL' 1;">
|
|
account_circle
|
|
</span>
|
|
</div>
|
|
<h2 class="font-headline-md text-headline-md text-ink-black font-bold">欢迎回来</h2>
|
|
<div class="flex flex-col items-center mt-stack-sm space-y-1">
|
|
<span class="font-body-lg text-body-lg text-on-surface font-medium">超级管理员 (Admin)</span>
|
|
<span class="font-body-md text-body-md text-subtle-gray tracking-widest">138 **** 8888</span>
|
|
</div>
|
|
<!-- Status Badge -->
|
|
|
|
</div>
|
|
<!-- Action Section -->
|
|
<div class="mt-stack-xl space-y-4">
|
|
<button class="button-press-active w-full h-14 bg-heritage-red text-white font-headline-md text-headline-md rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center gap-2" onclick="handleLogin()">
|
|
<span class="material-symbols-outlined">login</span>
|
|
一键登录
|
|
</button>
|
|
<button class="button-press-active w-full h-14 bg-transparent border border-outline text-on-surface-variant font-headline-md text-headline-md rounded-xl transition-all duration-200" onclick="handleSwitchAccount()">
|
|
切换其他账号
|
|
</button>
|
|
</div>
|
|
<div class="mt-6 flex justify-center items-center gap-2">
|
|
<input class="w-4 h-4 text-heritage-red border-outline rounded focus:ring-heritage-red cursor-pointer" id="terms" type="checkbox">
|
|
<label class="text-label-md text-subtle-gray" for="terms">
|
|
我已阅读并同意 <a class="text-heritage-red underline" href="#">《管理系统使用协议》</a>
|
|
</label>
|
|
</div>
|
|
</main>
|
|
<!-- Footer Section -->
|
|
<footer class="w-full pb-safe py-6 text-center z-10">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="flex items-center gap-1.5 text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[16px]">security</span>
|
|
<span class="font-label-md text-label-md">杜康数据安全实验室提供技术支持</span>
|
|
</div>
|
|
<p class="font-label-md text-label-md text-subtle-gray/60 tracking-wider">
|
|
安全管理系统 V1.2.0
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- Micro-interaction Scripts -->
|
|
<script>
|
|
function handleLogin() {
|
|
const checkbox = document.getElementById('terms');
|
|
if (!checkbox.checked) {
|
|
// Visual feedback for checkbox
|
|
checkbox.parentElement.classList.add('animate-shake');
|
|
setTimeout(() => checkbox.parentElement.classList.remove('animate-shake'), 400);
|
|
alert('请先阅读并同意管理系统使用协议');
|
|
return;
|
|
}
|
|
|
|
// Simulation of login action
|
|
const btn = document.querySelector('button.bg-heritage-red');
|
|
const originalText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="animate-spin material-symbols-outlined">refresh</span> 登录中...';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> 验证成功';
|
|
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
|
}, 1200);
|
|
}
|
|
|
|
function handleSwitchAccount() {
|
|
console.log('Switching account flow initiated...');
|
|
}
|
|
</script>
|
|
<style>
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
.animate-shake {
|
|
animation: shake 0.2s ease-in-out 0s 2;
|
|
}
|
|
</style>
|
|
|
|
|
|
</body></html> |