feat: multi-module iteration
This commit is contained in:
@@ -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 |
Reference in New Issue
Block a user