feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 1066px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;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": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.success-bg-glow {
|
||||
background: radial-gradient(circle at center, rgba(45, 106, 79, 0.08) 0%, rgba(250, 249, 247, 0) 70%);
|
||||
}
|
||||
@keyframes subtle-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
.animate-subtle-bounce {
|
||||
animation: subtle-bounce 2s ease-in-out infinite;
|
||||
}
|
||||
.coupon-notch-l { clip-path: circle(8px at 0% 50%); }
|
||||
.coupon-notch-r { clip-path: circle(8px at 100% 50%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface selection:bg-heritage-red/10 overflow-x-hidden min-h-screen">
|
||||
<!-- Top App Bar -->
|
||||
<header class="flex items-center px-margin-page h-14 w-full z-50 bg-surface sticky top-0">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 mr-4">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-heritage-red flex-1 text-center pr-10">杜康好客</h1>
|
||||
</header>
|
||||
<main class="relative px-margin-page pb-10">
|
||||
<!-- Success State Container -->
|
||||
<section class="flex flex-col items-center justify-center pt-10 pb-8 text-center success-bg-glow rounded-b-[40px]">
|
||||
<div class="w-20 h-20 bg-success-green/10 rounded-full flex items-center justify-center mb-6 ring-8 ring-success-green/5">
|
||||
<span class="material-symbols-outlined text-success-green !text-5xl" style="font-variation-settings: "FILL" 1;">check_circle</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black mb-2">核销成功</h2>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="font-coupon-amount text-coupon-amount text-aged-amber">¥ 100.00</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray uppercase tracking-wider">已入账到余额</span>
|
||||
<span class="font-body-md text-body-md text-subtle-gray mt-2">核销成功，账单通知已发送至老板手机</span></div>
|
||||
</section>
|
||||
<!-- Transaction Details Card -->
|
||||
<div class="mt-8 bg-surface-container-lowest rounded-xl p-stack-md relative overflow-hidden">
|
||||
<!-- Decorative Accent -->
|
||||
<div class="space-y-4 relative z-10">
|
||||
<div class="flex justify-between items-center group">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销门店</span>
|
||||
<span class="font-body-md text-body-md text-ink-black font-semibold">杜康大酒店 (龙门大道店)</span>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div><div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销用户</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
|
||||
<span class="material-symbols-outlined text-subtle-gray !text-sm">person</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="font-body-md text-body-md text-ink-black font-semibold">杜康用户***</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">138 **** 8888</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销时间</span>
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">2023-10-24 15:45:12</span>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest border-dashed"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant font-mono">DK772839401</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray !text-sm active:text-primary cursor-pointer">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="mt-4 flex justify-center"><button class="text-primary font-label-md text-label-md flex items-center gap-1 active:opacity-70"></button></div>
|
||||
<!-- Redemption Illustration (Premium Feel) -->
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-12 space-y-4"><button class="w-full h-14 bg-heritage-red text-white font-headline-md text-headline-md rounded-xl flex items-center justify-center gap-2 active:opacity-90 transition-all">
|
||||
<span class="">继续核销</span>
|
||||
<span class="material-symbols-outlined !text-xl">qr_code_scanner</span>
|
||||
</button>
|
||||
<button class="w-full h-14 border border-heritage-red text-heritage-red font-headline-md text-headline-md rounded-xl flex items-center justify-center gap-2 active:bg-heritage-red/5 transition-all">
|
||||
<span class="">返回首页</span>
|
||||
<span class="material-symbols-outlined !text-xl">home</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Footer / Branding -->
|
||||
<div class="mt-16 flex flex-col items-center opacity-30 select-none">
|
||||
<div class="w-8 h-8 rounded-full border border-primary flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-primary !text-xs" style="font-variation-settings: "FILL" 1;">verified</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md tracking-[0.2em] text-primary">山西领势酒业有限责任公司</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar (Contextual) -->
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const buttons = document.querySelectorAll('button');
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('touchstart', () => {
|
||||
btn.classList.add('scale-[0.98]');
|
||||
});
|
||||
btn.addEventListener('touchend', () => {
|
||||
btn.classList.remove('scale-[0.98]');
|
||||
});
|
||||
});
|
||||
|
||||
// Copy to clipboard mock
|
||||
const copyIcon = document.querySelector('.material-symbols-outlined[data-icon="content_copy"]');
|
||||
if(copyIcon) {
|
||||
copyIcon.addEventListener('click', () => {
|
||||
copyIcon.innerText = 'done';
|
||||
copyIcon.classList.add('text-success-green');
|
||||
setTimeout(() => {
|
||||
copyIcon.innerText = 'content_copy';
|
||||
copyIcon.classList.remove('text-success-green');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销成功页 - 增加用户信息展示",
|
||||
"screenId": "1af6b0074ec948edbe5b15ddf442c1ad",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T08:06:24.136Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<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-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"tertiary": "#37413b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-background": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-surface": "#1a1c1b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(166, 29, 36, 0.03) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(255, 191, 0, 0.05) 0px, transparent 50%);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Subtle Parchment Texture */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
filter: contrast(120%) brightness(100%);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.input-focus-ring:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
.login-btn-gradient {
|
||||
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-entrance {
|
||||
animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style></head>
|
||||
<body class="flex flex-col min-h-screen px-margin-page pb-10">
|
||||
<!-- Header / Branding Section -->
|
||||
<header class="flex flex-col items-center pt-16 pb-10 text-center animate-entrance">
|
||||
<div class="relative mb-4">
|
||||
<div class="w-20 h-20 rounded-full flex items-center justify-center shadow-lg relative overflow-hidden bg-surface-bright">
|
||||
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
||||
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgZNvVIRyBYDv2Vp1Xp8xRJ5N1TUbfwehPbXLMn_2XYMEheSImebkftfAoS9KBLlvY6ZZL6-0U3naoHVd-CQBcPW7fk9chuLWoMQhSwcvVvFFSSHz23qX27nuprq96I5u_Y0aCV_s3vp1YLhEvBBR39RKGtL5tdpO0KHzcxu9lig6AeKcoOe4uhL-WXEC_1BeMevx2yWV1md5SWGjcMe5A6_sF9ZHGPizbOwM6DUUo5HBjcUGCuVNend46zUp3G0JZSFRG_azHZdA" alt="杜康好客" class="w-full h-full object-contain p-2 relative z-10">
|
||||
</div>
|
||||
<!-- Decorative Seal Accent -->
|
||||
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black tracking-widest mb-1">杜康好客</h1>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-[0.2em] opacity-80">门店管理系统</p>
|
||||
</header>
|
||||
<!-- Main Login Container -->
|
||||
<main class="flex-grow flex flex-col items-center justify-center w-full max-w-md mx-auto animate-entrance" style="animation-delay: 0.1s;">
|
||||
<div class="w-full bg-surface-container-lowest rounded-xl p-8 login-card-shadow border border-outline-variant/10">
|
||||
<form class="space-y-6" id="loginForm">
|
||||
<!-- Phone Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">手机号码</label>
|
||||
<div class="relative flex items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
|
||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">phone_iphone</span>
|
||||
<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="11" placeholder="请输入您的手机号" type="tel">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Verification Code Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">验证码</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex flex-grow items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
|
||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">shield</span>
|
||||
<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="6" placeholder="验证码" type="text">
|
||||
</div>
|
||||
<button class="px-4 py-3.5 font-label-md text-label-md text-heritage-red bg-primary-fixed rounded-lg hover:bg-primary-fixed-dim transition-colors active:scale-95 duration-100 whitespace-nowrap font-semibold" type="button">
|
||||
获取验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Login Button -->
|
||||
<button class="w-full py-4 rounded-xl text-white font-headline-md text-headline-md flex items-center justify-center gap-2 login-btn-gradient shadow-md active:scale-[0.98] transition-all mt-8 group" type="submit">
|
||||
<span class="">登录</span>
|
||||
<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
||||
</button>
|
||||
</form><div class="mt-6 space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="h-[1px] flex-grow bg-outline-variant/30"></div>
|
||||
<span class="text-label-md text-subtle-gray font-medium">或者</span>
|
||||
<div class="h-[1px] flex-grow bg-outline-variant/30"></div>
|
||||
</div>
|
||||
<button class="w-full py-3.5 rounded-xl border border-heritage-red/20 bg-heritage-red/5 text-heritage-red font-headline-md text-headline-md flex items-center justify-center gap-2 hover:bg-heritage-red/10 active:scale-[0.98] transition-all" type="button">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="">微信一键授权</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Agreement Checkbox -->
|
||||
<div class="mt-8 flex items-start gap-2 max-w-[280px]">
|
||||
<div class="relative flex items-center mt-1">
|
||||
<input class="w-4 h-4 rounded border-outline-variant text-heritage-red focus:ring-heritage-red/20 bg-surface-bright" id="agreement" type="checkbox">
|
||||
</div>
|
||||
<label class="font-label-md text-label-md text-on-surface-variant leading-relaxed select-none" for="agreement">
|
||||
我已阅读并同意 <a class="text-heritage-red font-semibold hover:underline" href="#">《用户协议》</a> 与 <a class="text-heritage-red font-semibold hover:underline" href="#">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto pt-10 pb-6 text-center animate-entrance" style="animation-delay: 0.3s;">
|
||||
<div class="flex items-center justify-center gap-4 mb-4">
|
||||
<div class="h-[1px] w-8 bg-outline-variant"></div>
|
||||
<div class="text-[10px] font-label-md tracking-[0.3em] text-subtle-gray uppercase">Secured by DUKANG HERITAGE</div>
|
||||
<div class="h-[1px] w-8 bg-outline-variant"></div>
|
||||
</div>
|
||||
<!-- Decorative subtle element -->
|
||||
<div class="opacity-30">
|
||||
<span class="material-symbols-outlined text-outline text-[20px]" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Atmospheric Effect -->
|
||||
<div class="fixed top-0 left-0 w-full h-full pointer-events-none z-[-1] overflow-hidden">
|
||||
<div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] rounded-full bg-heritage-red/5 blur-[120px]"></div>
|
||||
<div class="absolute top-[20%] -right-[5%] w-[30%] h-[30%] rounded-full bg-aged-amber/5 blur-[100px]"></div>
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interactions for the form
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
loginForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const agreement = document.getElementById('agreement');
|
||||
if (!agreement.checked) {
|
||||
agreement.parentElement.classList.add('animate-shake');
|
||||
setTimeout(() => agreement.parentElement.classList.remove('animate-shake'), 500);
|
||||
alert('请先阅读并同意用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
// Success visual feedback
|
||||
const btn = loginForm.querySelector('button[type="submit"]');
|
||||
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span>';
|
||||
btn.classList.add('opacity-80');
|
||||
|
||||
setTimeout(() => {
|
||||
alert('登录请求已发送 (演示模式)');
|
||||
btn.innerHTML = '<span>登录</span><span class="material-symbols-outlined">arrow_forward</span>';
|
||||
btn.classList.remove('opacity-80');
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// Add shake animation style
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理登录页",
|
||||
"screenId": "de65a6601ab840908079d53a10c2fc50",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:34:03.302Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, 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;600;700;800&family=Be+Vietnam+Pro:wght@400;500&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": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.status-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.05); }
|
||||
}
|
||||
.custom-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex items-center px-margin-page h-14 w-full z-50 fixed top-0 bg-surface">
|
||||
<div class="flex items-center gap-4 w-full">
|
||||
<button class="active:opacity-70 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-heritage-red">门店管理</h1>
|
||||
<div class="ml-auto flex items-center gap-4">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 flex items-center gap-1 text-on-surface-variant" onclick="window.location.reload()">
|
||||
<span class="material-symbols-outlined text-xl">logout</span>
|
||||
<span class="font-label-md text-label-md">退出登录</span>
|
||||
</button>
|
||||
<button class="active:opacity-70 transition-opacity duration-200">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 px-margin-page space-y-6">
|
||||
<!-- StatusCard -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-8 flex flex-col items-center custom-shadow text-center">
|
||||
<div class="relative mb-6">
|
||||
<div class="w-24 h-24 rounded-full bg-success-green/10 flex items-center justify-center status-pulse">
|
||||
<div class="w-16 h-16 rounded-full bg-success-green flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-3xl" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -bottom-1 -right-1 bg-white p-1 rounded-full border border-surface-container">
|
||||
<span class="material-symbols-outlined text-success-green text-sm" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-success-green mb-8">营业中</h2>
|
||||
<!-- Large Switch Component -->
|
||||
<label class="relative inline-flex items-center cursor-pointer mb-4" onclick="showConfirmModal(event)">
|
||||
<input checked="" class="sr-only peer" id="statusToggle" type="checkbox" value="">
|
||||
<div class="w-20 h-10 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-8 after:w-8 after:transition-all peer-checked:bg-success-green"></div>
|
||||
</label>
|
||||
<div class="flex flex-col items-center gap-1 mb-4">
|
||||
<span class="text-xs text-subtle-gray uppercase tracking-wider">营业时间</span>
|
||||
<span class="font-headline-md text-headline-md text-on-surface">09:30 - 22:00</span>
|
||||
</div><p class="font-label-md text-label-md text-subtle-gray" id="lastUpdate">最后修改于 2023-10-20 09:00</p>
|
||||
</section>
|
||||
<!-- HintCard -->
|
||||
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4 flex gap-3 items-start" id="hintCard">
|
||||
<span class="material-symbols-outlined text-status-blue text-xl mt-0.5" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||
<p class="font-body-md text-on-surface text-sm">用户可正常核销餐券</p>
|
||||
</div>
|
||||
<!-- ReadonlyInfoSection -->
|
||||
<section class="space-y-4">
|
||||
<h3 class="font-label-md text-label-md text-subtle-gray px-1 uppercase tracking-wider">门店信息</h3>
|
||||
<div class="bg-surface-container-lowest rounded-xl p-base custom-shadow divide-y divide-surface-container">
|
||||
<div class="py-4 px-2 flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs text-subtle-gray">门店名称</span>
|
||||
<span class="font-headline-md text-headline-md text-on-surface">杜康大酒店 (龙门大道店)</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-30 mt-1">lock</span>
|
||||
</div>
|
||||
<div class="py-4 px-2 flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs text-subtle-gray">地理位置</span>
|
||||
<span class="font-body-lg text-body-lg text-on-surface">洛阳市洛龙区龙门大道123号</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-30 mt-1">lock</span>
|
||||
</div>
|
||||
<div class="py-4 px-2 flex justify-between items-start gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs text-subtle-gray">联系电话</span>
|
||||
<span class="font-body-lg text-body-lg text-on-surface">0379-66668888</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-30 mt-1">lock</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-2 pt-4">
|
||||
<span class="material-symbols-outlined text-subtle-gray text-base">help</span>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">如需修改信息请联系城市合伙人</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Visual Decorative Branding -->
|
||||
<div class="flex justify-center pt-8 opacity-10 grayscale">
|
||||
<div class="w-32 h-32" data-alt="A sophisticated, high-end minimalist illustration of a traditional Chinese liquor bottle silhouette with elegant gold leaf accents. The lighting is soft and luxurious, featuring a warm amber palette against a clean paper-textured background. The overall style is refined and distinguished, reflecting the Dukang liquor brand's heritage." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBmm0Nk1I-yFkUScE0FHTxcyGrLIPc1L2yjf9mqrW68qK-Mmpr_PwM5yoiiPL1Fnv1WGecekZa9tzRFcyqevO1pgpZDxyEolMphC-sD6ATne3Ngw5otDshVuVd2EC7ME-a4iFQ_xTHQIIaYsctcWP9bPh0qeWdmmMM_g0nFEHH1kwVEaFVL13ioqQaLzaqYxVVwWb7e6lCUjz-cJbqH3Oe2dql-kvwFE_XFGMX4E7Cr5DzkK6f9l-8NBCnZvlHy9n7PQ6Jar0rpCt8')"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-2 pb-safe px-4 bg-surface rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]">
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low scale-95 transition-transform duration-150 py-2 px-4">
|
||||
<span class="material-symbols-outlined mb-1">home</span>
|
||||
<span class="font-label-md text-label-md">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low scale-95 transition-transform duration-150 py-2 px-4">
|
||||
<span class="material-symbols-outlined mb-1">receipt_long</span>
|
||||
<span class="font-label-md text-label-md">核销记录</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-primary font-bold active:bg-surface-container-low scale-95 transition-transform duration-150 py-2 px-4">
|
||||
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 1;">person</span>
|
||||
<span class="font-label-md text-label-md">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
function toggleStatus() {
|
||||
const toggle = document.getElementById('statusToggle');
|
||||
const statusText = document.querySelector('h2');
|
||||
const hintText = document.querySelector('#hintCard p');
|
||||
const hintCard = document.getElementById('hintCard');
|
||||
const statusIconContainer = document.querySelector('.w-24.h-24');
|
||||
const innerIconCircle = statusIconContainer.querySelector('.w-16.h-16');
|
||||
const checkmark = document.querySelector('.absolute.-bottom-1.-right-1 .material-symbols-outlined');
|
||||
|
||||
const now = new Date();
|
||||
const timeStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`;
|
||||
|
||||
if (toggle.checked) {
|
||||
// Open State
|
||||
statusText.innerText = "营业中";
|
||||
statusText.className = "font-headline-lg-mobile text-headline-lg-mobile text-success-green mb-8";
|
||||
hintText.innerText = "当前处于营业状态，用户可在您的门店核销餐券。";
|
||||
hintCard.className = "bg-blue-50 border border-blue-100 rounded-lg p-4 flex gap-3 items-start";
|
||||
statusIconContainer.className = "w-24 h-24 rounded-full bg-success-green/10 flex items-center justify-center status-pulse";
|
||||
innerIconCircle.className = "w-16 h-16 rounded-full bg-success-green flex items-center justify-center";
|
||||
checkmark.innerText = "check_circle";
|
||||
checkmark.className = "material-symbols-outlined text-success-green text-sm";
|
||||
} else {
|
||||
// Closed State
|
||||
statusText.innerText = "已休息";
|
||||
statusText.className = "font-headline-lg-mobile text-headline-lg-mobile text-subtle-gray mb-8";
|
||||
hintText.innerText = "当前处于休息状态，用户将无法看到您的门店或进行核销。";
|
||||
hintCard.className = "bg-surface-container rounded-lg p-4 flex gap-3 items-start border border-surface-variant";
|
||||
statusIconContainer.className = "w-24 h-24 rounded-full bg-subtle-gray/10 flex items-center justify-center";
|
||||
innerIconCircle.className = "w-16 h-16 rounded-full bg-subtle-gray flex items-center justify-center";
|
||||
checkmark.innerText = "cancel";
|
||||
checkmark.className = "material-symbols-outlined text-subtle-gray text-sm";
|
||||
}
|
||||
|
||||
document.getElementById('lastUpdate').innerText = `最后修改于 ${timeStr}`;
|
||||
}
|
||||
</script>
|
||||
<div class="fixed inset-0 z-[100] hidden flex items-center justify-center bg-black/50 px-margin-page" id="confirmModal"><div class="bg-white rounded-xl w-full max-w-sm p-6 space-y-6"><div class="text-center space-y-2"><h4 class="font-headline-md text-headline-md">确认切换状态？</h4><p class="text-body-md text-subtle-gray">切换至“临时闭店”后，用户将无法选择本店核销餐券。</p></div><div class="flex gap-3"><button class="flex-1 py-3 rounded-lg border border-surface-container font-bold" onclick="closeModal()">取消</button><button class="flex-1 py-3 rounded-lg bg-primary text-white font-bold" onclick="confirmToggle()">确认切换</button></div></div></div><script>let pendingToggle = false; function showConfirmModal(e) { e.preventDefault(); document.getElementById('confirmModal').classList.remove('hidden'); } function closeModal() { document.getElementById('confirmModal').classList.add('hidden'); } function confirmToggle() { const toggle = document.getElementById('statusToggle'); toggle.checked = !toggle.checked; toggleStatus(); closeModal(); } function toggleStatus() { const toggle = document.getElementById('statusToggle'); const statusText = document.querySelector('h2'); const hintText = document.querySelector('#hintCard p'); const hintCard = document.getElementById('hintCard'); const statusIconContainer = document.querySelector('.w-24.h-24'); const innerIconCircle = statusIconContainer.querySelector('.w-16.h-16'); const checkmark = document.querySelector('.absolute.-bottom-1.-right-1 .material-symbols-outlined'); const now = new Date(); const timeStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`; if (toggle.checked) { statusText.innerText = '开店'; statusText.className = 'font-headline-lg-mobile text-headline-lg-mobile text-success-green mb-8'; hintText.innerText = '用户可正常核销餐券。'; hintCard.className = 'bg-blue-50 border border-blue-100 rounded-lg p-4 flex gap-3 items-start'; statusIconContainer.className = 'w-24 h-24 rounded-full bg-success-green/10 flex items-center justify-center status-pulse'; innerIconCircle.className = 'w-16 h-16 rounded-full bg-success-green flex items-center justify-center'; checkmark.innerText = 'check_circle'; checkmark.className = 'material-symbols-outlined text-success-green text-sm'; } else { statusText.innerText = '临时闭店'; statusText.className = 'font-headline-lg-mobile text-headline-lg-mobile text-subtle-gray mb-8'; hintText.innerText = '用户端提示暂停服务，无法选择本店核销。'; hintCard.className = 'bg-surface-container rounded-lg p-4 flex gap-3 items-start border border-surface-variant'; statusIconContainer.className = 'w-24 h-24 rounded-full bg-subtle-gray/10 flex items-center justify-center'; innerIconCircle.className = 'w-16 h-16 rounded-full bg-subtle-gray flex items-center justify-center'; checkmark.innerText = 'cancel'; checkmark.className = 'material-symbols-outlined text-subtle-gray text-sm'; } document.getElementById('lastUpdate').innerText = `最后修改于 ${timeStr}`; }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店营业状态页 (S-03)",
|
||||
"screenId": "329eb2540f4240bebb3a1c281db020b7",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:34:09.358Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 1066px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;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": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.success-bg-glow {
|
||||
background: radial-gradient(circle at center, rgba(45, 106, 79, 0.08) 0%, rgba(250, 249, 247, 0) 70%);
|
||||
}
|
||||
@keyframes subtle-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
.animate-subtle-bounce {
|
||||
animation: subtle-bounce 2s ease-in-out infinite;
|
||||
}
|
||||
.coupon-notch-l { clip-path: circle(8px at 0% 50%); }
|
||||
.coupon-notch-r { clip-path: circle(8px at 100% 50%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface selection:bg-heritage-red/10 overflow-x-hidden min-h-screen">
|
||||
<!-- Top App Bar -->
|
||||
<header class="flex items-center px-margin-page h-14 w-full z-50 bg-surface sticky top-0">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 mr-4">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-heritage-red flex-1 text-center pr-10">杜康好客</h1>
|
||||
</header>
|
||||
<main class="relative px-margin-page pb-10">
|
||||
<!-- Success State Container -->
|
||||
<section class="flex flex-col items-center justify-center pt-10 pb-8 text-center success-bg-glow rounded-b-[40px]">
|
||||
<div class="w-20 h-20 bg-success-green/10 rounded-full flex items-center justify-center mb-6 ring-8 ring-success-green/5">
|
||||
<span class="material-symbols-outlined text-success-green !text-5xl" style="font-variation-settings: "FILL" 1;">check_circle</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black mb-2">核销成功</h2>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="font-coupon-amount text-coupon-amount text-aged-amber">¥ 100.00</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray uppercase tracking-wider">已入账到余额</span>
|
||||
<span class="font-body-md text-body-md text-subtle-gray mt-2">核销成功，账单通知已发送至老板手机</span></div>
|
||||
</section>
|
||||
<!-- Transaction Details Card -->
|
||||
<div class="mt-8 bg-surface-container-lowest rounded-xl p-stack-md relative overflow-hidden">
|
||||
<!-- Decorative Accent -->
|
||||
<div class="space-y-4 relative z-10">
|
||||
<div class="flex justify-between items-center group">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销门店</span>
|
||||
<span class="font-body-md text-body-md text-ink-black font-semibold">杜康大酒店 (龙门大道店)</span>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div><div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销用户</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
|
||||
<span class="material-symbols-outlined text-subtle-gray !text-sm">person</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="font-body-md text-body-md text-ink-black font-semibold">杜康用户***</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">138 **** 8888</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">核销时间</span>
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">2023-10-24 15:45:12</span>
|
||||
</div>
|
||||
<div class="w-full h-px bg-surface-container-highest border-dashed"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant font-mono">DK772839401</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray !text-sm active:text-primary cursor-pointer">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="mt-4 flex justify-center"><button class="text-primary font-label-md text-label-md flex items-center gap-1 active:opacity-70"></button></div>
|
||||
<!-- Redemption Illustration (Premium Feel) -->
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-12 space-y-4"><button class="w-full h-14 bg-heritage-red text-white font-headline-md text-headline-md rounded-xl flex items-center justify-center gap-2 active:opacity-90 transition-all">
|
||||
<span class="">继续核销</span>
|
||||
<span class="material-symbols-outlined !text-xl">qr_code_scanner</span>
|
||||
</button>
|
||||
<button class="w-full h-14 border border-heritage-red text-heritage-red font-headline-md text-headline-md rounded-xl flex items-center justify-center gap-2 active:bg-heritage-red/5 transition-all">
|
||||
<span class="">返回首页</span>
|
||||
<span class="material-symbols-outlined !text-xl">home</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Footer / Branding -->
|
||||
<div class="mt-16 flex flex-col items-center opacity-30 select-none">
|
||||
<div class="w-8 h-8 rounded-full border border-primary flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-primary !text-xs" style="font-variation-settings: "FILL" 1;">verified</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md tracking-[0.2em] text-primary">山西领势酒业有限责任公司</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar (Contextual) -->
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const buttons = document.querySelectorAll('button');
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('touchstart', () => {
|
||||
btn.classList.add('scale-[0.98]');
|
||||
});
|
||||
btn.addEventListener('touchend', () => {
|
||||
btn.classList.remove('scale-[0.98]');
|
||||
});
|
||||
});
|
||||
|
||||
// Copy to clipboard mock
|
||||
const copyIcon = document.querySelector('.material-symbols-outlined[data-icon="content_copy"]');
|
||||
if(copyIcon) {
|
||||
copyIcon.addEventListener('click', () => {
|
||||
copyIcon.innerText = 'done';
|
||||
copyIcon.classList.add('text-success-green');
|
||||
setTimeout(() => {
|
||||
copyIcon.innerText = 'content_copy';
|
||||
copyIcon.classList.remove('text-success-green');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销成功页 - 增加用户信息展示",
|
||||
"screenId": "1af6b0074ec948edbe5b15ddf442c1ad",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:34:19.464Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Be+Vietnam+Pro:wght@400;500&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-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"tertiary": "#37413b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-background": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-surface": "#1a1c1b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-ticket {
|
||||
mask-image: radial-gradient(circle at 0 50%, transparent 8px, black 8.5px), radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
-webkit-mask-image: radial-gradient(circle at 0 50%, transparent 8px, black 8.5px), radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
}
|
||||
.grain-overlay {
|
||||
background-image: url("https://www.transparenttextures.com/patterns/felt.png");
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-background selection:bg-heritage-red selection:text-white">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full h-14 flex items-center px-margin-page bg-surface dark:bg-surface-dim shadow-sm z-50">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors active:scale-95 duration-100 rounded-full">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">门店管理中心</h1>
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors active:scale-95 duration-100 rounded-full">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-14 pb-20 px-margin-page space-y-6">
|
||||
<!-- Top Section (Heritage Red Card) -->
|
||||
<section class="mt-4 relative overflow-hidden bg-heritage-red rounded-xl p-6 shadow-xl text-white">
|
||||
<div class="absolute inset-0 grain-overlay"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center space-x-2 mb-6">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">store</span>
|
||||
<h2 class="font-headline-md text-headline-md font-bold">洛阳老城店</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/5">
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider mb-1">今日核销笔数</p>
|
||||
<p class="font-headline-xl text-headline-xl font-bold">12</p>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/5">
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider mb-1">今日到账金额</p>
|
||||
<p class="font-headline-xl text-headline-xl font-bold font-coupon-amount"><span class="text-lg">¥</span>1,200</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Center Action: Scan QR Code -->
|
||||
<section class="flex flex-col items-center justify-center py-4">
|
||||
<button class="group relative w-32 h-32 rounded-full bg-aged-amber shadow-[0px_10px_30px_rgba(255,191,0,0.3)] flex items-center justify-center active:scale-90 transition-all duration-200 border-4 border-white">
|
||||
<div class="absolute inset-0 rounded-full animate-ping bg-aged-amber opacity-20"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-heritage-red text-5xl mb-1" style="font-variation-settings: 'FILL' 1;">qr_code_scanner</span>
|
||||
</div>
|
||||
</button>
|
||||
<p class="mt-4 font-headline-md text-headline-md text-heritage-red font-bold">扫码核销</p>
|
||||
</section>
|
||||
<!-- Middle Section: Business Status -->
|
||||
<section class="bg-white rounded-xl p-5 shadow-sm flex items-center justify-between border border-outline-variant/30">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-full bg-success-green/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-success-green" style="font-variation-settings: 'FILL' 1;">schedule</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-body-lg text-body-lg font-bold">营业状态</h3>
|
||||
<p class="text-label-md text-subtle-gray">当前正在营业中</p><p class="text-label-md text-subtle-gray mt-1">营业时间: 10:00 - 22:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox">
|
||||
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success-green"></div>
|
||||
</label>
|
||||
</section>
|
||||
<!-- Bottom Section: Recent Records -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-headline-md text-headline-md font-bold text-ink-black">核销记录</h3>
|
||||
<a class="text-label-md text-heritage-red font-bold flex items-center" href="#">
|
||||
查看全部 <span class="material-symbols-outlined text-sm ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- Record 1 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 14:20:05</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥299</p></div></div>
|
||||
<!-- Record 2 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 13:45:12</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥1,200</p></div></div>
|
||||
<!-- Record 3 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 11:10:30</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥199</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 w-full flex justify-around items-center h-16 px-4 pb-safe bg-surface-container-lowest dark:bg-inverse-surface shadow-lg z-50 rounded-t-xl border-t border-outline-variant">
|
||||
<a class="flex flex-col items-center justify-center text-heritage-red font-bold scale-110 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:opacity-80 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
<span class="font-label-md text-label-md mt-1">核销记录</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:opacity-80 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
<script>
|
||||
// Micro-interaction for the Scan Button
|
||||
const scanBtn = document.querySelector('.group');
|
||||
if (scanBtn) {
|
||||
scanBtn.addEventListener('click', function() {
|
||||
this.classList.add('scale-95');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('scale-95');
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle Switch feedback
|
||||
const toggle = document.querySelector('input[type="checkbox"]');
|
||||
const statusText = document.querySelector('.text-label-md.text-subtle-gray');
|
||||
if (toggle && statusText) {
|
||||
toggle.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
statusText.innerText = '当前正在营业中';
|
||||
statusText.classList.remove('text-error');
|
||||
statusText.classList.add('text-subtle-gray');
|
||||
} else {
|
||||
statusText.innerText = '当前已停止营业';
|
||||
statusText.classList.add('text-error');
|
||||
statusText.classList.remove('text-subtle-gray');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理首页",
|
||||
"screenId": "4a4f4a2140b3476c999530d1a7ed288d",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T08:06:31.550Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><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;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&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": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.notch-cutout {
|
||||
mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px),
|
||||
radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
.paper-texture {
|
||||
background-color: #ffffff;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png");
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .8; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-md text-on-surface min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex items-center px-margin-page h-14 w-full z-50 bg-surface fixed top-0 left-0">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 mr-4">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-heritage-red">核销确认</h1>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 mt-14 px-margin-page py-stack-lg flex flex-col gap-6">
|
||||
<!-- RedemptionCard (Bento Style & Paper Texture) -->
|
||||
<section class="paper-texture rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="opacity: 1; transform: translateY(0px); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);">
|
||||
<!-- StoreVerified Banner -->
|
||||
<div class="bg-success-green px-margin-page py-4 flex items-center gap-3 shadow-md">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">verified_user</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider">当前登录核销门店</p>
|
||||
<h2 class="font-headline-md text-headline-md text-white font-bold">杜康大酒店 (龙门大道店)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Redemption Body -->
|
||||
<div class="p-margin-page flex flex-col gap-8">
|
||||
<!-- User Info -->
|
||||
<div class="flex items-center justify-between bg-surface-container-low p-4 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-subtle-gray">person</span>
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">下单用户</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black tabular-nums">138 **** 9021</span>
|
||||
</div>
|
||||
<!-- AmountSection -->
|
||||
<div class="flex flex-col items-center py-4 border-y border-dashed border-outline-variant relative">
|
||||
<!-- Ticket Notches -->
|
||||
<div class="absolute -left-6 top-1/2 -translate-y-1/2 w-4 h-8 bg-background rounded-r-full border-r border-outline-variant/20"></div>
|
||||
<div class="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-8 bg-background rounded-l-full border-l border-outline-variant/20"></div>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mb-2">核销金额</p>
|
||||
<div class="flex items-baseline gap-1 text-heritage-red">
|
||||
<span class="font-headline-md text-headline-md">¥</span>
|
||||
<span class="font-coupon-amount text-[48px] leading-none tracking-tight">100.00</span>
|
||||
</div>
|
||||
<div class="mt-4 bg-aged-amber/10 px-3 py-1 rounded-full flex items-center gap-1.5 border border-aged-amber/20">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[16px]" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
<span class="font-label-md text-label-md text-on-secondary-fixed-variant">好客权益</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details List -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-subtle-gray">券编号</span>
|
||||
<span class="text-ink-black font-medium">DK202310248892</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm"><span class="text-subtle-gray">有效期</span><span class="text-ink-black font-medium">永久</span></div></div>
|
||||
<!-- ConfirmButton -->
|
||||
<button class="w-full bg-heritage-red text-white h-14 rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 active:scale-95 transition-all duration-150 shadow-lg shadow-heritage-red/20" id="confirmBtn" onclick="handleConfirm()"><span class="material-symbols-outlined" id="btnIcon">check_circle</span>
|
||||
<span id="btnText" class="">确认核销 ¥100.00</span></button>
|
||||
<!-- HintText -->
|
||||
<p class="text-center font-body-md text-body-md text-subtle-gray">
|
||||
请核对金额后点击确认
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Illustration / Background Ornament -->
|
||||
<div class="mt-auto opacity-10 flex justify-center pb-8 pointer-events-none">
|
||||
<div class="w-32 h-32 relative">
|
||||
<div class="absolute inset-0 border-2 border-heritage-red rounded-full animate-ping opacity-20"></div>
|
||||
<div class="absolute inset-4 border border-heritage-red rounded-full opacity-40"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-heritage-red text-6xl">wine_bar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar (Suppressed as per task focused rule, but shell is kept if relevant for top level - per prompt request, we are on a RedemptionPage (Store Side) which is a specific task, so we minimize UI clutter) -->
|
||||
<script>
|
||||
function handleConfirm() {
|
||||
const btn = document.getElementById('confirmBtn');
|
||||
const icon = document.getElementById('btnIcon');
|
||||
const text = document.getElementById('btnText');
|
||||
|
||||
// Interaction Feedback
|
||||
btn.disabled = true;
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
btn.classList.add('pulse-soft');
|
||||
text.innerText = '正在核销...';
|
||||
icon.innerText = 'sync';
|
||||
icon.classList.add('animate-spin');
|
||||
|
||||
// Simulating API Call
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin');
|
||||
icon.innerText = 'done_all';
|
||||
text.innerText = '核销成功';
|
||||
btn.classList.remove('pulse-soft');
|
||||
|
||||
// Optional: Vibrate on mobile
|
||||
if (window.navigator.vibrate) {
|
||||
window.navigator.vibrate(200);
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Add a micro-interaction for the card on load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const card = document.querySelector('section');
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销确认页 (S-01)",
|
||||
"screenId": "2b153959031e473cb2c9965146766a86",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:34:46.552Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -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&family=Inter:wght@400;500&family=Be+Vietnam+Pro: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": {
|
||||
"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>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理一键登录页",
|
||||
"screenId": "e76dbb7fc2e547779f9329d0291401d6",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T08:06:58.505Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
@@ -0,0 +1,209 @@
|
||||
<!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, viewport-fit=cover" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500&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">
|
||||
<!-- Theme Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.active-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 3px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 2px;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.summary-card-glow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 29, 0.08);
|
||||
}
|
||||
.glass-header {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 bg-surface/80 glass-header flex items-center px-margin-page h-14">
|
||||
<button class="flex items-center justify-center w-8 h-8 active:opacity-70 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center font-headline-md text-headline-md font-bold text-heritage-red ml-[-32px]">核销记录</h1>
|
||||
</header>
|
||||
<main class="pt-14 pb-24">
|
||||
<!-- FilterBar (Sticky) -->
|
||||
<nav class="sticky top-14 z-40 bg-surface flex border-b border-surface-container-high overflow-x-auto no-scrollbar"><div class="flex flex-col w-full bg-surface border-b border-surface-container-high"><div class="flex border-b border-surface-container-high/50"><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-primary font-bold active-tab" onclick="switchTab(this)">今日</button><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-subtle-gray active:opacity-70" onclick="switchTab(this)">近7日</button><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-subtle-gray active:opacity-70" onclick="switchTab(this)">近30日</button></div><div class="flex px-4 py-2 space-x-2 overflow-x-auto no-scrollbar"><button class="px-4 py-1 rounded-full bg-primary text-white text-[12px] font-medium">全部</button><button class="px-4 py-1 rounded-full bg-surface-container-high text-on-surface-variant text-[12px]">待打款</button><button class="px-4 py-1 rounded-full bg-surface-container-high text-on-surface-variant text-[12px]">已打款</button></div></div></nav>
|
||||
<!-- SummaryCard -->
|
||||
<section class="px-margin-page mt-stack-md">
|
||||
<div class="bg-primary-fixed/30 p-margin-page rounded-xl border border-primary-fixed-dim/20 summary-card-glow relative overflow-hidden">
|
||||
<!-- Atmospheric background element -->
|
||||
<div class="absolute -right-4 -top-4 w-24 h-24 bg-primary/5 rounded-full blur-2xl"></div>
|
||||
<div class="flex flex-col space-y-stack-sm"><div class="grid grid-cols-2 gap-4"><div class="flex flex-col"><span class="font-label-md text-label-md text-primary/70">期间核销总额</span><div class="flex items-baseline space-x-1"><span class="font-headline-md text-headline-md text-primary">¥</span><span class="font-headline-md text-headline-md text-primary tracking-tight">2,000.00</span></div></div><div class="flex flex-col"><span class="font-label-md text-label-md text-primary/70">期间到账总额</span><div class="flex items-baseline space-x-1"><span class="font-headline-md text-headline-md text-primary">¥</span><span class="font-headline-md text-headline-md text-primary tracking-tight">1,200.00</span></div></div></div><div class="flex items-center space-x-2 pt-2 border-t border-primary/10"><span class="material-symbols-outlined text-[16px] text-success-green" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body-md text-body-md text-on-surface-variant">结算比例: 60% (按6折结算)</span></div></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RecordList -->
|
||||
<section class="px-margin-page mt-stack-lg">
|
||||
<div class="flex justify-between items-center mb-stack-md">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">交易详情</h3>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">共 2 笔记录</span>
|
||||
</div>
|
||||
<div class="space-y-4"><div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-surface-container-high space-y-3"><div class="flex justify-between items-start"><div class="space-y-1"><div class="flex items-center space-x-2"><span class="font-label-md text-label-md text-subtle-gray">订单号</span><span class="font-body-md text-body-md text-on-surface font-medium">DK772839401</span></div><p class="font-label-md text-label-md text-subtle-gray">核销时间: 2023-10-24 15:45</p></div><span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已打款</span></div><div class="grid grid-cols-2 gap-2 py-2 bg-surface/50 rounded-lg px-3"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">核销金额(券面)</span><span class="text-body-md font-bold text-on-surface">¥166.67</span></div><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">到账金额(6折)</span><span class="text-body-md font-bold text-heritage-red">¥100.00</span></div></div><div class="flex justify-between items-center text-[11px] text-subtle-gray"><p class="">打款时间: 2023-10-24 18:00</p><div class="flex items-center text-on-surface-variant"><span class="material-symbols-outlined text-[12px] mr-1">restaurant</span>杜康·御享联名餐厅</div></div></div><div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-surface-container-high space-y-3"><div class="flex justify-between items-start"><div class="space-y-1"><div class="flex items-center space-x-2"><span class="font-label-md text-label-md text-subtle-gray">订单号</span><span class="font-body-md text-body-md text-on-surface font-medium">DK772839395</span></div><p class="font-label-md text-label-md text-subtle-gray">核销时间: 2023-10-24 14:20</p></div><span class="bg-aged-amber/10 text-aged-amber px-2 py-0.5 rounded text-[10px] font-bold">待打款</span></div><div class="grid grid-cols-2 gap-2 py-2 bg-surface/50 rounded-lg px-3"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">核销金额(券面)</span><span class="text-body-md font-bold text-on-surface">¥333.33</span></div><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">到账金额(6折)</span><span class="text-body-md font-bold text-heritage-red">¥200.00</span></div></div><div class="flex justify-between items-center text-[11px] text-subtle-gray"><p class="">预计打款: T+1工作日</p><div class="flex items-center text-on-surface-variant"><span class="material-symbols-outlined text-[12px] mr-1">restaurant</span>杜康·御享联名餐厅</div></div></div></div>
|
||||
</section>
|
||||
<!-- No More Data Footer -->
|
||||
<div class="py-stack-lg flex flex-col items-center">
|
||||
<div class="w-12 h-[1px] bg-surface-container-highest mb-2"></div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">已显示全部核销记录</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-2 pb-safe px-4 bg-surface rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]" style="padding-bottom: env(safe-area-inset-bottom);">
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="home">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-primary font-bold active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long" style="font-variation-settings: 'FILL' 1;">receipt_long</span>
|
||||
<span class="font-label-md text-label-md mt-1">核销记录</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
<script>
|
||||
function switchTab(element) {
|
||||
// Remove active classes from all siblings
|
||||
const parent = element.parentElement;
|
||||
const tabs = parent.querySelectorAll('button');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active-tab', 'text-primary', 'font-bold');
|
||||
tab.classList.add('text-subtle-gray');
|
||||
});
|
||||
|
||||
// Add active classes to current
|
||||
element.classList.add('active-tab', 'text-primary', 'font-bold');
|
||||
element.classList.remove('text-subtle-gray');
|
||||
|
||||
// Add a slight haptic feel
|
||||
if (window.navigator.vibrate) {
|
||||
window.navigator.vibrate(10);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Safe Area for mobile
|
||||
function handleSafeArea() {
|
||||
const pbSafe = 'padding-bottom: env(safe-area-inset-bottom);';
|
||||
document.querySelector('.pb-safe').style = pbSafe;
|
||||
}
|
||||
window.addEventListener('load', handleSafeArea);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销记录页 (S-02)",
|
||||
"screenId": "493d65d221044751b2c9167d2af85c3d",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:35:13.102Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<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-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"tertiary": "#37413b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-background": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-surface": "#1a1c1b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(166, 29, 36, 0.03) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(255, 191, 0, 0.05) 0px, transparent 50%);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Subtle Parchment Texture */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
filter: contrast(120%) brightness(100%);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.input-focus-ring:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
.login-btn-gradient {
|
||||
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-entrance {
|
||||
animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style><style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
</style></head>
|
||||
<body class="flex flex-col min-h-screen px-margin-page pb-10">
|
||||
<!-- Header / Branding Section -->
|
||||
<header class="flex flex-col items-center pt-16 pb-10 text-center animate-entrance">
|
||||
<div class="relative mb-4">
|
||||
<div class="w-20 h-20 rounded-full flex items-center justify-center shadow-lg relative overflow-hidden bg-surface-bright">
|
||||
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
||||
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgZNvVIRyBYDv2Vp1Xp8xRJ5N1TUbfwehPbXLMn_2XYMEheSImebkftfAoS9KBLlvY6ZZL6-0U3naoHVd-CQBcPW7fk9chuLWoMQhSwcvVvFFSSHz23qX27nuprq96I5u_Y0aCV_s3vp1YLhEvBBR39RKGtL5tdpO0KHzcxu9lig6AeKcoOe4uhL-WXEC_1BeMevx2yWV1md5SWGjcMe5A6_sF9ZHGPizbOwM6DUUo5HBjcUGCuVNend46zUp3G0JZSFRG_azHZdA" alt="杜康好客" class="w-full h-full object-contain p-2 relative z-10">
|
||||
</div>
|
||||
<!-- Decorative Seal Accent -->
|
||||
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black tracking-widest mb-1">杜康好客</h1>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-[0.2em] opacity-80">门店管理系统</p>
|
||||
</header>
|
||||
<!-- Main Login Container -->
|
||||
<main class="flex-grow flex flex-col items-center justify-center w-full max-w-md mx-auto animate-entrance" style="animation-delay: 0.1s;">
|
||||
<div class="w-full bg-surface-container-lowest rounded-xl p-8 login-card-shadow border border-outline-variant/10">
|
||||
<form class="space-y-6" id="loginForm">
|
||||
<!-- Phone Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">手机号码</label>
|
||||
<div class="relative flex items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
|
||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">phone_iphone</span>
|
||||
<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="11" placeholder="请输入您的手机号" type="tel">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Verification Code Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">验证码</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex flex-grow items-center border border-outline-variant rounded-lg bg-surface-bright transition-all input-focus-ring">
|
||||
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant">shield</span>
|
||||
<input class="w-full pl-10 pr-4 py-3.5 bg-transparent border-none focus:ring-0 font-body-md text-body-md text-on-surface placeholder:text-subtle-gray" maxlength="6" placeholder="验证码" type="text">
|
||||
</div>
|
||||
<button class="px-4 py-3.5 font-label-md text-label-md text-heritage-red bg-primary-fixed rounded-lg hover:bg-primary-fixed-dim transition-colors active:scale-95 duration-100 whitespace-nowrap font-semibold" type="button">
|
||||
获取验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Login Button -->
|
||||
<button class="w-full py-4 rounded-xl text-white font-headline-md text-headline-md flex items-center justify-center gap-2 login-btn-gradient shadow-md active:scale-[0.98] transition-all mt-8 group" type="submit">
|
||||
<span class="">登录</span>
|
||||
<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
||||
</button>
|
||||
</form><div class="mt-6 space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="h-[1px] flex-grow bg-outline-variant/30"></div>
|
||||
<span class="text-label-md text-subtle-gray font-medium">或者</span>
|
||||
<div class="h-[1px] flex-grow bg-outline-variant/30"></div>
|
||||
</div>
|
||||
<button class="w-full py-3.5 rounded-xl border border-heritage-red/20 bg-heritage-red/5 text-heritage-red font-headline-md text-headline-md flex items-center justify-center gap-2 hover:bg-heritage-red/10 active:scale-[0.98] transition-all" type="button">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="">微信一键授权</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Agreement Checkbox -->
|
||||
<div class="mt-8 flex items-start gap-2 max-w-[280px]">
|
||||
<div class="relative flex items-center mt-1">
|
||||
<input class="w-4 h-4 rounded border-outline-variant text-heritage-red focus:ring-heritage-red/20 bg-surface-bright" id="agreement" type="checkbox">
|
||||
</div>
|
||||
<label class="font-label-md text-label-md text-on-surface-variant leading-relaxed select-none" for="agreement">
|
||||
我已阅读并同意 <a class="text-heritage-red font-semibold hover:underline" href="#">《用户协议》</a> 与 <a class="text-heritage-red font-semibold hover:underline" href="#">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto pt-10 pb-6 text-center animate-entrance" style="animation-delay: 0.3s;">
|
||||
<div class="flex items-center justify-center gap-4 mb-4">
|
||||
<div class="h-[1px] w-8 bg-outline-variant"></div>
|
||||
<div class="text-[10px] font-label-md tracking-[0.3em] text-subtle-gray uppercase">Secured by DUKANG HERITAGE</div>
|
||||
<div class="h-[1px] w-8 bg-outline-variant"></div>
|
||||
</div>
|
||||
<!-- Decorative subtle element -->
|
||||
<div class="opacity-30">
|
||||
<span class="material-symbols-outlined text-outline text-[20px]" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Background Atmospheric Effect -->
|
||||
<div class="fixed top-0 left-0 w-full h-full pointer-events-none z-[-1] overflow-hidden">
|
||||
<div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] rounded-full bg-heritage-red/5 blur-[120px]"></div>
|
||||
<div class="absolute top-[20%] -right-[5%] w-[30%] h-[30%] rounded-full bg-aged-amber/5 blur-[100px]"></div>
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interactions for the form
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
loginForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const agreement = document.getElementById('agreement');
|
||||
if (!agreement.checked) {
|
||||
agreement.parentElement.classList.add('animate-shake');
|
||||
setTimeout(() => agreement.parentElement.classList.remove('animate-shake'), 500);
|
||||
alert('请先阅读并同意用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
// Success visual feedback
|
||||
const btn = loginForm.querySelector('button[type="submit"]');
|
||||
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span>';
|
||||
btn.classList.add('opacity-80');
|
||||
|
||||
setTimeout(() => {
|
||||
alert('登录请求已发送 (演示模式)');
|
||||
btn.innerHTML = '<span>登录</span><span class="material-symbols-outlined">arrow_forward</span>';
|
||||
btn.classList.remove('opacity-80');
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// Add shake animation style
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理登录页",
|
||||
"screenId": "de65a6601ab840908079d53a10c2fc50",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T08:07:19.867Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Be+Vietnam+Pro:wght@400;500&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-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"tertiary": "#37413b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-background": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-surface": "#1a1c1b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-ticket {
|
||||
mask-image: radial-gradient(circle at 0 50%, transparent 8px, black 8.5px), radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
-webkit-mask-image: radial-gradient(circle at 0 50%, transparent 8px, black 8.5px), radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
}
|
||||
.grain-overlay {
|
||||
background-image: url("https://www.transparenttextures.com/patterns/felt.png");
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-background selection:bg-heritage-red selection:text-white">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full h-14 flex items-center px-margin-page bg-surface dark:bg-surface-dim shadow-sm z-50">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors active:scale-95 duration-100 rounded-full">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">门店管理中心</h1>
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors active:scale-95 duration-100 rounded-full">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-14 pb-20 px-margin-page space-y-6">
|
||||
<!-- Top Section (Heritage Red Card) -->
|
||||
<section class="mt-4 relative overflow-hidden bg-heritage-red rounded-xl p-6 shadow-xl text-white">
|
||||
<div class="absolute inset-0 grain-overlay"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center space-x-2 mb-6">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">store</span>
|
||||
<h2 class="font-headline-md text-headline-md font-bold">洛阳老城店</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/5">
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider mb-1">今日核销笔数</p>
|
||||
<p class="font-headline-xl text-headline-xl font-bold">12</p>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/5">
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider mb-1">今日到账金额</p>
|
||||
<p class="font-headline-xl text-headline-xl font-bold font-coupon-amount"><span class="text-lg">¥</span>1,200</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Center Action: Scan QR Code -->
|
||||
<section class="flex flex-col items-center justify-center py-4">
|
||||
<button class="group relative w-32 h-32 rounded-full bg-aged-amber shadow-[0px_10px_30px_rgba(255,191,0,0.3)] flex items-center justify-center active:scale-90 transition-all duration-200 border-4 border-white">
|
||||
<div class="absolute inset-0 rounded-full animate-ping bg-aged-amber opacity-20"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-heritage-red text-5xl mb-1" style="font-variation-settings: 'FILL' 1;">qr_code_scanner</span>
|
||||
</div>
|
||||
</button>
|
||||
<p class="mt-4 font-headline-md text-headline-md text-heritage-red font-bold">扫码核销</p>
|
||||
</section>
|
||||
<!-- Middle Section: Business Status -->
|
||||
<section class="bg-white rounded-xl p-5 shadow-sm flex items-center justify-between border border-outline-variant/30">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-full bg-success-green/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-success-green" style="font-variation-settings: 'FILL' 1;">schedule</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-body-lg text-body-lg font-bold">营业状态</h3>
|
||||
<p class="text-label-md text-subtle-gray">当前正在营业中</p><p class="text-label-md text-subtle-gray mt-1">营业时间: 10:00 - 22:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox">
|
||||
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success-green"></div>
|
||||
</label>
|
||||
</section>
|
||||
<!-- Bottom Section: Recent Records -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-headline-md text-headline-md font-bold text-ink-black">核销记录</h3>
|
||||
<a class="text-label-md text-heritage-red font-bold flex items-center" href="#">
|
||||
查看全部 <span class="material-symbols-outlined text-sm ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- Record 1 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 14:20:05</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥299</p></div></div>
|
||||
<!-- Record 2 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 13:45:12</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥1,200</p></div></div>
|
||||
<!-- Record 3 -->
|
||||
<div class="bg-white rounded-xl p-4 flex items-center justify-between border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.03)]"><div class="flex flex-col"><p class="text-label-md text-subtle-gray">核销时间</p><h4 class="font-body-lg text-body-lg font-bold">2026-06-18 11:10:30</h4></div><div class="text-right"><p class="text-label-md text-subtle-gray">核销金额</p><p class="font-headline-md text-heritage-red font-bold">¥199</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 w-full flex justify-around items-center h-16 px-4 pb-safe bg-surface-container-lowest dark:bg-inverse-surface shadow-lg z-50 rounded-t-xl border-t border-outline-variant">
|
||||
<a class="flex flex-col items-center justify-center text-heritage-red font-bold scale-110 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:opacity-80 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
<span class="font-label-md text-label-md mt-1">核销记录</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:opacity-80 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
<script>
|
||||
// Micro-interaction for the Scan Button
|
||||
const scanBtn = document.querySelector('.group');
|
||||
if (scanBtn) {
|
||||
scanBtn.addEventListener('click', function() {
|
||||
this.classList.add('scale-95');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('scale-95');
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle Switch feedback
|
||||
const toggle = document.querySelector('input[type="checkbox"]');
|
||||
const statusText = document.querySelector('.text-label-md.text-subtle-gray');
|
||||
if (toggle && statusText) {
|
||||
toggle.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
statusText.innerText = '当前正在营业中';
|
||||
statusText.classList.remove('text-error');
|
||||
statusText.classList.add('text-subtle-gray');
|
||||
} else {
|
||||
statusText.innerText = '当前已停止营业';
|
||||
statusText.classList.add('text-error');
|
||||
statusText.classList.remove('text-subtle-gray');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理首页",
|
||||
"screenId": "4a4f4a2140b3476c999530d1a7ed288d",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:35:18.537Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><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;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&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": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.notch-cutout {
|
||||
mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px),
|
||||
radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
.paper-texture {
|
||||
background-color: #ffffff;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png");
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .8; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-md text-on-surface min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex items-center px-margin-page h-14 w-full z-50 bg-surface fixed top-0 left-0">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 mr-4">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-heritage-red">核销确认</h1>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 mt-14 px-margin-page py-stack-lg flex flex-col gap-6">
|
||||
<!-- RedemptionCard (Bento Style & Paper Texture) -->
|
||||
<section class="paper-texture rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="opacity: 1; transform: translateY(0px); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);">
|
||||
<!-- StoreVerified Banner -->
|
||||
<div class="bg-success-green px-margin-page py-4 flex items-center gap-3 shadow-md">
|
||||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">verified_user</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-white/80 uppercase tracking-wider">当前登录核销门店</p>
|
||||
<h2 class="font-headline-md text-headline-md text-white font-bold">杜康大酒店 (龙门大道店)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Redemption Body -->
|
||||
<div class="p-margin-page flex flex-col gap-8">
|
||||
<!-- User Info -->
|
||||
<div class="flex items-center justify-between bg-surface-container-low p-4 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-subtle-gray">person</span>
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">下单用户</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black tabular-nums">138 **** 9021</span>
|
||||
</div>
|
||||
<!-- AmountSection -->
|
||||
<div class="flex flex-col items-center py-4 border-y border-dashed border-outline-variant relative">
|
||||
<!-- Ticket Notches -->
|
||||
<div class="absolute -left-6 top-1/2 -translate-y-1/2 w-4 h-8 bg-background rounded-r-full border-r border-outline-variant/20"></div>
|
||||
<div class="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-8 bg-background rounded-l-full border-l border-outline-variant/20"></div>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mb-2">核销金额</p>
|
||||
<div class="flex items-baseline gap-1 text-heritage-red">
|
||||
<span class="font-headline-md text-headline-md">¥</span>
|
||||
<span class="font-coupon-amount text-[48px] leading-none tracking-tight">100.00</span>
|
||||
</div>
|
||||
<div class="mt-4 bg-aged-amber/10 px-3 py-1 rounded-full flex items-center gap-1.5 border border-aged-amber/20">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[16px]" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
<span class="font-label-md text-label-md text-on-secondary-fixed-variant">好客权益</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details List -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-subtle-gray">券编号</span>
|
||||
<span class="text-ink-black font-medium">DK202310248892</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm"><span class="text-subtle-gray">有效期</span><span class="text-ink-black font-medium">永久</span></div></div>
|
||||
<!-- ConfirmButton -->
|
||||
<button class="w-full bg-heritage-red text-white h-14 rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 active:scale-95 transition-all duration-150 shadow-lg shadow-heritage-red/20" id="confirmBtn" onclick="handleConfirm()"><span class="material-symbols-outlined" id="btnIcon">check_circle</span>
|
||||
<span id="btnText" class="">确认核销 ¥100.00</span></button>
|
||||
<!-- HintText -->
|
||||
<p class="text-center font-body-md text-body-md text-subtle-gray">
|
||||
请核对金额后点击确认
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Illustration / Background Ornament -->
|
||||
<div class="mt-auto opacity-10 flex justify-center pb-8 pointer-events-none">
|
||||
<div class="w-32 h-32 relative">
|
||||
<div class="absolute inset-0 border-2 border-heritage-red rounded-full animate-ping opacity-20"></div>
|
||||
<div class="absolute inset-4 border border-heritage-red rounded-full opacity-40"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-heritage-red text-6xl">wine_bar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar (Suppressed as per task focused rule, but shell is kept if relevant for top level - per prompt request, we are on a RedemptionPage (Store Side) which is a specific task, so we minimize UI clutter) -->
|
||||
<script>
|
||||
function handleConfirm() {
|
||||
const btn = document.getElementById('confirmBtn');
|
||||
const icon = document.getElementById('btnIcon');
|
||||
const text = document.getElementById('btnText');
|
||||
|
||||
// Interaction Feedback
|
||||
btn.disabled = true;
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
btn.classList.add('pulse-soft');
|
||||
text.innerText = '正在核销...';
|
||||
icon.innerText = 'sync';
|
||||
icon.classList.add('animate-spin');
|
||||
|
||||
// Simulating API Call
|
||||
setTimeout(() => {
|
||||
icon.classList.remove('animate-spin');
|
||||
icon.innerText = 'done_all';
|
||||
text.innerText = '核销成功';
|
||||
btn.classList.remove('pulse-soft');
|
||||
|
||||
// Optional: Vibrate on mobile
|
||||
if (window.navigator.vibrate) {
|
||||
window.navigator.vibrate(200);
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Add a micro-interaction for the card on load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const card = document.querySelector('section');
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销确认页 (S-01)",
|
||||
"screenId": "2b153959031e473cb2c9965146766a86",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T08:07:21.598Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -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&family=Inter:wght@400;500&family=Be+Vietnam+Pro: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": {
|
||||
"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>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店管理一键登录页",
|
||||
"screenId": "e76dbb7fc2e547779f9329d0291401d6",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:35:36.989Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Reference in New Issue
Block a user