jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Jacy
2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/shop/14_门店管理一键登录页_e76dbb7f/code.html
+210
View File
@@ -0,0 +1,210 @@
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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&amp;family=Inter:wght@400;500&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"error": "#ba1a1a",
"on-background": "#1a1c1b",
"surface-bright": "#faf9f7",
"surface-variant": "#e3e2e0",
"surface": "#faf9f7",
"surface-container-highest": "#e3e2e0",
"ink-black": "#1A1A1A",
"tertiary-fixed": "#dae5dd",
"on-secondary-fixed-variant": "#574500",
"surface-container-high": "#e9e8e6",
"on-surface-variant": "#5a413f",
"outline": "#8d706e",
"aged-amber": "#FFBF00",
"on-primary": "#ffffff",
"on-surface": "#1a1c1b",
"inverse-surface": "#2f3130",
"tertiary-container": "#4e5852",
"surface-container-low": "#f4f3f1",
"status-blue": "#2A6EBB",
"background": "#faf9f7",
"primary-fixed": "#ffdad7",
"secondary-container": "#fed65b",
"on-error-container": "#93000a",
"tertiary-fixed-dim": "#bec9c2",
"secondary-fixed-dim": "#e9c349",
"on-tertiary-fixed-variant": "#3f4943",
"tertiary": "#37413b",
"surface-tint": "#b3272c",
"primary-fixed-dim": "#ffb3ae",
"surface-container": "#efeeec",
"on-primary-container": "#ffb9b4",
"outline-variant": "#e2bebc",
"on-secondary-container": "#745c00",
"heritage-red": "#A61D24",
"inverse-on-surface": "#f1f1ef",
"secondary": "#735c00",
"primary": "#820012",
"on-secondary-fixed": "#241a00",
"on-primary-fixed": "#410004",
"on-tertiary-container": "#c2cdc6",
"surface-dim": "#dadad8",
"success-green": "#2D6A4F"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-page": "20px",
"stack-md": "16px",
"stack-sm": "4px",
"stack-lg": "32px",
"gutter-card": "12px",
"base": "8px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"headline-lg": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"coupon-amount": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"body-md": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.rice-paper-texture {
background-color: #faf9f7;
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
background-blend-mode: multiply;
}
.card-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background rice-paper-texture min-h-screen flex flex-col font-body-md overflow-x-hidden">
<!-- Brand Header -->
<header class="pt-16 pb-8 flex flex-col items-center justify-center animate-fade-in">
<div class="w-24 h-24 mb-6 rounded-full overflow-hidden flex items-center justify-center">
<img alt="Dukang Brand Logo" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCg_ZkLJf0Su8p3oz_TBnbJrq231Hdzmu1mjG7JN1fkuAX6_pthZxENiN_l7DW34ZnsKfku8uqO2QwiWn-nMjIFBApZg-btMS7QbWagO9r5O0jOyuOTM91bsGxg_JBfXxTl_LhIrn_qSc3w8GU5zc2GaEv1vENiOSgnMr5my9iRN0xkUN8VvdjRvA_fXMaf3tDuXwdZ_CFWVbM7Kv-cwbJGMsfzZxBLY0TfpheWFPq4KKxtYTSYbZyF7MNkbpPucV3NuZJUMEh7ejw">
</div>
<div class="text-center">
<h1 class="font-headline-xl text-headline-xl text-heritage-red tracking-tight">欢迎回来</h1>
<div class="w-12 h-0.5 bg-heritage-red mx-auto mt-2 opacity-30"></div>
</div>
</header>
<!-- Main Content Container -->
<main class="flex-grow px-margin-page w-full max-w-md mx-auto flex flex-col items-center">
<!-- Info Card -->
<section class="w-full bg-surface-container-lowest card-shadow rounded-xl p-8 mb-stack-lg border border-outline-variant/30 relative overflow-hidden">
<!-- Subtle Decorative Element -->
<div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-heritage-red opacity-[0.03]"></div>
<div class="flex flex-col items-center text-center space-y-4">
<!-- Store Icon -->
<div class="w-16 h-16 bg-primary-fixed rounded-full flex items-center justify-center mb-2">
<span class="material-symbols-outlined text-heritage-red text-4xl" data-icon="storefront">storefront</span>
</div>
<!-- Store Info -->
<div class="space-y-1">
<h2 class="font-headline-md text-headline-md text-ink-black">洛阳宴会中心旗舰店</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant font-medium tracking-wide">138 **** 8888</p>
</div>
<!-- Status Badge -->
<div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-success-green/10 text-success-green text-xs font-medium border border-success-green/20">
<span class="material-symbols-outlined text-[14px] mr-1" data-icon="verified_user" style="font-variation-settings: 'FILL' 1;">verified_user</span>
认证门店
</div>
<!-- Switch Account -->
<div class="pt-8 w-full border-t border-outline-variant/50">
<button class="text-on-surface-variant font-label-md text-label-md hover:text-heritage-red transition-colors flex items-center justify-center mx-auto group">
<span class="material-symbols-outlined text-[18px] mr-1 group-hover:rotate-180 transition-transform duration-500" data-icon="sync">sync</span>
切换账号
</button>
</div>
</div>
</section>
<!-- Action Button -->
<div class="w-full space-y-4 animate-slide-up" style="animation-delay: 200ms;">
<button class="w-full h-14 bg-heritage-red text-white font-headline-md text-headline-md rounded-xl card-shadow active:scale-95 transition-all duration-150 flex items-center justify-center shadow-lg shadow-heritage-red/20">
<span>一键登录</span>
<span class="material-symbols-outlined ml-2" data-icon="arrow_forward">arrow_forward</span>
</button>
<div class="flex items-center justify-center space-x-2 opacity-60">
<span class="material-symbols-outlined text-sm" data-icon="lock">lock</span>
<p class="font-label-md text-label-md text-on-surface-variant">加密环境安全登录中</p>
</div>
</div>
</main>
<!-- Footer -->
<footer class="py-10 flex flex-col items-center justify-center space-y-2 opacity-40">
<div class="flex items-center space-x-3">
<div class="w-8 h-[1px] bg-outline"></div>
<p class="font-label-md text-[10px] tracking-[0.2em] uppercase text-on-surface-variant">SECURED BY DUKANG HERITAGE</p>
<div class="w-8 h-[1px] bg-outline"></div>
</div>
<p class="text-[10px] font-label-md">© 2024 杜康酒业门店管理系统</p>
</footer>
<!-- Interactive Layer -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const loginBtn = document.querySelector('button.bg-heritage-red');
loginBtn.addEventListener('click', function() {
this.innerHTML = `
<svg class="animate-spin h-5 w-5 text-white mr-2" 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>登录中...</span>
`;
this.classList.add('opacity-80', 'pointer-events-none');
// Simulate redirect
setTimeout(() => {
this.innerHTML = `<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">check_circle</span>`;
this.classList.add('bg-success-green');
}, 1500);
});
});
</script>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-slide-up {
animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
</body></html>