feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,359 @@
|
||||
<!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;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"/>
|
||||
<!-- Shared Tailwind Config -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-background": "#1a1c1b",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"aged-amber": "#FFBF00",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error-container": "#93000a",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"subtle-gray": "#999999",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed": "#410004",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"outline-variant": "#e2bebc",
|
||||
"error-container": "#ffdad6",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"ink-black": "#1A1A1A",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary": "#37413b",
|
||||
"on-error": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.coupon-notch-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: inset 1px 0 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: #faf9f7;
|
||||
}
|
||||
|
||||
.hero-texture {
|
||||
background-image: radial-gradient(circle at 20% 30%, rgba(166, 29, 36, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(166, 29, 36, 0.03) 0%, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background dark:bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<div class="flex items-center gap-1 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="location_on">location_on</span>
|
||||
<span class="font-label-md text-label-md text-on-surface">洛阳市</span>
|
||||
</div>
|
||||
<h1 class="font-headline-md text-headline-md-mobile font-bold text-primary dark:text-inverse-primary absolute left-1/2 -translate-x-1/2">
|
||||
好客权益
|
||||
</h1>
|
||||
<button class="flex items-center justify-center h-10 w-10 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 px-margin-page space-y-stack-md">
|
||||
<!-- Benefits Hero Card -->
|
||||
<section class="relative overflow-hidden rounded-xl bg-surface-container-lowest border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-stack-md hero-texture">
|
||||
<div class="flex justify-between items-start mb-stack-md">
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant">当前好客权益余额</p>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-xl text-primary">¥</span>
|
||||
<span class="font-headline-xl text-primary text-[40px]">1,280.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<img alt="Dukang Logo" class="w-12 h-12 opacity-90 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCA8CB5k6AHjxBUOWxWS9fH8YbI3X4XAIs0UfAoj0m3G-MhuVkkRU6e5-hdA53Y5wsZYk9khbJfr4L7gUmGe2vdXCRo1MJrdqv1uwIYfoqsWzJ7i1OzMJmSkLZEUMnD7qY7PbXqZmgAIxDY5ll1bPGPVf8fS-uuBrJ3W2qiHUWEL5uncVvAUa4vJIu7AtjcMnwlSIIGdaErwmkWGZxUj5CSkwcPmXFmJ5eU-3BrQF_Bx1xt2TQAfYzf31fxudx-imHatOL-PhOKuDc"/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-6">
|
||||
<button class="flex items-center gap-1 text-primary active:scale-95 transition-transform group">
|
||||
<span class="font-label-md text-label-md font-semibold">查看权益明细</span>
|
||||
<span class="material-symbols-outlined text-[16px] group-hover:translate-x-0.5 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quick Action Button -->
|
||||
<section>
|
||||
<button class="w-full bg-heritage-red text-on-primary py-4 rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 shadow-[0px_4px_12px_rgba(166,29,36,0.2)] active:scale-[0.98] transition-all" onclick="handleStoreNavigation()">
|
||||
<span class="material-symbols-outlined" data-icon="storefront" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
去使用
|
||||
</button>
|
||||
</section>
|
||||
<!-- Tabs for Filtering -->
|
||||
<nav class="flex border-b border-outline-variant/10">
|
||||
<button class="flex-1 py-3 font-label-md text-label-md border-b-2 transition-all text-primary font-bold border-primary" id="tab-available" onclick="switchTab('available')">待使用</button>
|
||||
<button class="flex-1 py-3 font-label-md text-label-md transition-all text-on-surface-variant" id="tab-history" onclick="switchTab('history')">已用完/已过期</button>
|
||||
</nav>
|
||||
<!-- Benefit Cards List -->
|
||||
<div class="space-y-4" id="content-available">
|
||||
<!-- Card 1 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">500</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">杜康好客权益券</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">适用于合作酒店餐饮消费</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥200</span>
|
||||
<span>未使用 ¥300</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK998231</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">200</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">洛阳宴会专供券</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">指定门店可用，不设找零</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥50</span>
|
||||
<span>未使用 ¥150</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK881023</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">580</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">杜康·大师系列好客权益</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">杜康村原址餐厅通用券</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥0</span>
|
||||
<span>未使用 ¥580</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK776512</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-20 space-y-4 hidden" id="content-history">
|
||||
<span class="material-symbols-outlined text-[64px] text-outline-variant" data-icon="history_edu">history_edu</span>
|
||||
<p class="font-body-md text-on-surface-variant">暂无过期或已使用的权益记录</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center py-base px-2 bg-surface pb-safe z-50 rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] border-t border-outline-variant/10"><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="home">home</span>
|
||||
<span class="font-label-md text-label-md">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
|
||||
<span class="font-label-md text-label-md">门店</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-primary font-bold hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="card_giftcard" style="font-variation-settings: 'FILL' 1;">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md">好客权益</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-label-md text-label-md">我的</span>
|
||||
</a></nav>
|
||||
<script>
|
||||
function switchTab(tab) {
|
||||
const availableTab = document.getElementById('tab-available');
|
||||
const historyTab = document.getElementById('tab-history');
|
||||
const availableContent = document.getElementById('content-available');
|
||||
const historyContent = document.getElementById('content-history');
|
||||
|
||||
if (tab === 'available') {
|
||||
availableTab.classList.add('text-primary', 'font-bold', 'border-primary');
|
||||
availableTab.classList.remove('text-on-surface-variant');
|
||||
historyTab.classList.remove('text-primary', 'font-bold', 'border-primary');
|
||||
historyTab.classList.add('text-on-surface-variant');
|
||||
|
||||
availableContent.classList.remove('hidden');
|
||||
historyContent.classList.add('hidden');
|
||||
} else {
|
||||
historyTab.classList.add('text-primary', 'font-bold', 'border-primary');
|
||||
historyTab.classList.remove('text-on-surface-variant');
|
||||
availableTab.classList.remove('text-primary', 'font-bold', 'border-primary');
|
||||
availableTab.classList.add('text-on-surface-variant');
|
||||
|
||||
historyContent.classList.remove('hidden');
|
||||
availableContent.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function handleStoreNavigation() {
|
||||
const btn = event.currentTarget;
|
||||
btn.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
btn.style.transform = '';
|
||||
alert('正在为您寻找附近的合作餐厅...');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.active\\:scale-95').forEach(el => {
|
||||
el.addEventListener('touchstart', () => el.style.transform = 'scale(0.95)');
|
||||
el.addEventListener('touchend', () => el.style.transform = '');
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "好客权益专页",
|
||||
"screenId": "8bda47b8349443afb19d5b22251e4b21",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:05.707Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,299 @@
|
||||
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400&family=Inter:wght@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">
|
||||
<!-- Use Tailwind Config from Design System -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"error-container": "#ffdad6",
|
||||
"surface": "#faf9f7",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"heritage-red": "#A61D24",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"background": "#faf9f7",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"on-primary": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"secondary-container": "#fed65b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"secondary": "#735c00",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-error-container": "#93000a",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary": "#37413b",
|
||||
"on-surface": "#1a1c1b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-family: 'Be Vietnam Pro', sans-serif;
|
||||
background-color: #faf9f7; /* surface-bright */
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.active-tab {
|
||||
position: relative;
|
||||
color: #820012; /* primary */
|
||||
font-weight: 600;
|
||||
}
|
||||
.active-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 16px;
|
||||
height: 3px;
|
||||
background-color: #A61D24; /* heritage-red */
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright min-h-screen text-on-surface">
|
||||
<!-- TopAppBar (Based on Shared Components JSON) -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile font-bold text-primary">权益明细</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform text-primary">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Area -->
|
||||
<main class="pt-14 pb-safe">
|
||||
<!-- SummaryHeader Card [Sticky] -->
|
||||
<div class="sticky top-14 z-40 bg-surface-bright/80 backdrop-blur-md px-margin-page py-stack-md">
|
||||
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 relative overflow-hidden" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<!-- Abstract Heritage Pattern (Animated Shader) -->
|
||||
<div class="absolute inset-0 opacity-[0.03] pointer-events-none">
|
||||
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mb-2">当前好客权益余额</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-headline-md font-bold text-heritage-red">¥</span>
|
||||
<span class="font-coupon-amount text-coupon-amount text-heritage-red">1,280.00</span>
|
||||
</div>
|
||||
<div class="mt-4 w-full flex justify-center gap-base">
|
||||
<button class="px-4 py-2 bg-heritage-red text-on-primary rounded-full font-label-md text-label-md active:scale-95 transition-all">立即使用</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FilterTabs -->
|
||||
<div class="px-margin-page border-b border-outline-variant/10 mb-stack-md bg-surface-bright">
|
||||
<div class="flex items-center gap-8 overflow-x-auto hide-scrollbar py-3">
|
||||
<button class="active-tab whitespace-nowrap font-label-md text-label-md transition-colors" onclick="switchTab(this)">全部</button>
|
||||
<button class="whitespace-nowrap font-label-md text-label-md text-on-surface-variant transition-colors hover:text-primary" onclick="switchTab(this)">获取记录</button>
|
||||
<button class="whitespace-nowrap font-label-md text-label-md text-on-surface-variant transition-colors hover:text-primary" onclick="switchTab(this)">消费记录</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionList -->
|
||||
<div class="px-margin-page space-y-4 pb-20">
|
||||
<!-- Group Label -->
|
||||
<h2 class="font-label-md text-label-md text-subtle-gray py-2">2026年6月</h2>
|
||||
<!-- TransactionItem 1 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">restaurant_menu</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">门店消费(洛阳宴会专供)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-18 14:20:05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-on-surface font-bold">-¥200.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionItem 2 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200 border-l-4 border-heritage-red/20" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container/10 flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">liquor</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">购酒赠送(杜康·酒祖)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-15 09:30:12</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-heritage-red font-bold">+¥500.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionItem 3 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">local_dining</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">门店消费(杜康·大师系列)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-10 18:45:30</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-on-surface font-bold">-¥580.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Group Label -->
|
||||
<h2 class="font-label-md text-label-md text-subtle-gray py-2">2026年5月</h2>
|
||||
<!-- TransactionItem 4 (Older Data) -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200 border-l-4 border-heritage-red/20" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container/10 flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">card_giftcard</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">新人入会赠送</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-05-20 10:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-heritage-red font-bold">+¥1560.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Spacer -->
|
||||
<div class="flex flex-col items-center py-stack-lg opacity-40">
|
||||
<div class="w-12 h-[1px] bg-outline-variant mb-4"></div>
|
||||
<p class="font-label-md text-label-md">已加载全部明细</p>
|
||||
</div>
|
||||
</div>
|
||||
</main><nav class="fixed bottom-0 w-full z-50 bg-surface-bright border-t border-outline-variant/10 px-margin-page pb-safe">
|
||||
|
||||
</nav>
|
||||
<!-- Bottom Navigation Bar (Based on Shared Components JSON) -->
|
||||
|
||||
<script>
|
||||
function switchTab(el) {
|
||||
// Remove active classes
|
||||
document.querySelectorAll('.active-tab').forEach(tab => {
|
||||
tab.classList.remove('active-tab', 'text-primary', 'font-bold');
|
||||
tab.classList.add('text-on-surface-variant');
|
||||
});
|
||||
|
||||
// Add active classes to selected
|
||||
el.classList.add('active-tab');
|
||||
el.classList.remove('text-on-surface-variant');
|
||||
}
|
||||
|
||||
// Simple scroll reveal for list items
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.bg-surface-container-lowest').forEach(item => {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(10px)';
|
||||
item.style.transition = 'all 0.4s ease-out';
|
||||
observer.observe(item);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "好客权益明细页",
|
||||
"screenId": "03d85af3bdd140df869b3a3c72b3c7c3",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:26.315Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,302 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 914px; 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Manrope:wght@600;700;800&family=Inter:wght@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">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-background": "#1a1c1b",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-surface": "#1a1c1b",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary": "#820012",
|
||||
"error": "#ba1a1a",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-dim": "#dadad8",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface": "#faf9f7",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary": "#735c00",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"outline": "#8d706e",
|
||||
"background": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"subtle-gray": "#999999",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"ink-black": "#1A1A1A",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container": "#efeeec"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"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"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.store-card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface antialiased">
|
||||
<!-- Top Navigation Anchor (Sticky Shell) -->
|
||||
<header class="sticky top-0 z-50 bg-surface shadow-none">
|
||||
<!-- TopAppBar Component -->
|
||||
<div class="flex items-center justify-between px-margin-page w-full h-14 bg-surface">
|
||||
<button class="active:scale-95 duration-100 hover:opacity-80">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">可用门店</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for center alignment -->
|
||||
</div>
|
||||
<!-- Location & Search Bar -->
|
||||
<div class="px-margin-page pb-4 bg-surface space-y-3">
|
||||
<div class="flex items-center space-x-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
||||
<span class="font-label-md text-label-md">洛阳市 · 涧西区</span>
|
||||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-outline text-[20px]">search</span>
|
||||
</div>
|
||||
<input class="w-full h-11 pl-10 pr-4 bg-surface-container-low border-none rounded-xl text-body-md focus:ring-1 focus:ring-primary/20 transition-all outline-none" placeholder="搜索门店名称或地址" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Tabs -->
|
||||
<div class="bg-surface border-b border-outline-variant/10">
|
||||
<div class="flex overflow-x-auto hide-scrollbar px-margin-page py-3 space-x-8">
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-primary tab-active">全部</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">火锅</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">地方菜</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">高端餐饮</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">烧烤烤肉</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">西餐</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="px-margin-page py-6 space-y-4 pb-24">
|
||||
<!-- Store Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional architectural photograph of a luxury hotel restaurant entrance in Luoyang, featuring warm amber lighting, traditional Chinese design elements with a modern minimalist twist, and polished surfaces. The scene is elegant and inviting, reflecting high-end hospitality with a rich heritage-red accent color visible in the decor." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_VmvHNE8E5ueryg9QkL1sQiCXZCrgCzyb95Nm5gb3UNtvVC7QglRa_47ep_U9s1k3s6JMh8Mk5_qlbGHQHuwLFRpv2f3rjbmFBR94J58SAP1TceUVhavyX7ZWTzES97V-MPPGbfqcBIZlb9e742Tm_HpnwxiIeTz3QO3YZxW33iviMjrvO30tH9GhkQLFGLnePHE8tRlY9siSXCpoU6wILU5RwdCje-iJ-sn6-B9xMhclgNRc9ZvrCuQ6-CUpNNRVksf4_nD_NJY">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">洛阳盛世明珠酒店</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">800m</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区南昌路128号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="High-end interior design of a modern Chinese hotpot restaurant. The lighting is moody with warm orange and red tones. Tables are arranged neatly with high-quality porcelain. Minimalist aesthetics with heritage-red walls and sleek furniture. Professional food photography style, bright yet atmospheric." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfubdPkH17DScXyeevSq-y0GiS5Ig07xnMFyZBVt1X-iDKmKd9CVw3Emgqxdu-J3Adxrx4SG61w5jfrw--1upwraWTWaxjjLltYi4eNluF52wAKKa6D6rsFP2IlQINobtVvF9mUNRGxyP4t3_9MRdvso-3AOli0dUJUmjQtLcb7qqMH4iOUNedOhZ2aNN8WTthEmqagzXNacdq4ab3fvXrrwmmPD0fx0p3NC5yRy334Q32eW7p4QlFPx3QtzuCrBUwsqk1j83aoEs">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">杜康印象·私房菜</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">1.2km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区西苑路杜康大厦1F</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 3 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A gourmet local Luoyang cuisine restaurant interior, showcasing traditional craftsmanship through contemporary design. Wooden textures, elegant table settings, and soft focal lighting on a signature dish. The atmosphere is sophisticated and authentic. Red silk accents and golden lighting create a premium hospitable feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgc_4UfJqJ1rHKWIi9Wey6rhStiK6UKlgdKmWGTJ-GTExLWaIpYVKw75g4ayAjV2JqBMGs97GV3s90Nos8EnlhD3IM-P7LwxDVzmHDL8pwifoxEGGntx1WXi8tRhblZj7XGOvin_FEhzTdVRbzh7jP2sfX00zE-dyNy0a96ehvR49tnM2eqnVPqpqE_DJG6rw_aOvxJz8U85GdBZpsXru8wBy4FtheGbSRCGOg1ZXG6nBkS8oV9ZGzUqm0MWUtcOE49sh5sEvozB0">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">真不同饭店(老城店)</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">3.5km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 09:30-21:30</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">老城区中州东路359号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 4 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1);">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="Luxury banquet hall in a five-star hotel. Crystal chandeliers reflecting on polished marble floors. A palette of off-white, gold, and deep red. High-end dining tables with elegant floral arrangements. The shot is wide and captures a sense of grandeur and professional excellence in hospitality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7WPfxko8NVVhn8RGSqwBCDZpOzt_zCykpzLbg8ykhrDBdiIURTozRhMuT1SgpB83im7QSnW3Zo1gmtv0O1xuHZ59i__mk2Fw5ps6zKPvXr74hCQhFE2578H031AVKCwWQgnYSwDQR6hVkJ0dn-hfzAkWvdtMyLwPKT1NkMEJzCVvrF1QLiaJOsRlYXaK7DSQ-UCyW1sfCTbQ4UH9RwB1vi51iRtOdps85pCLvcklKes6LEuCJjZbo8Buw1lFEZxdHR0Y9IDdpsnU">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">洛阳友谊宾馆中餐厅</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">1.5km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区中州西路6号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More spacing for scroll -->
|
||||
<div class="py-4 text-center">
|
||||
<span class="text-outline text-label-md font-label-md">没有更多门店了</span>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar Component -->
|
||||
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 pb-safe bg-surface shadow-lg border-t border-outline-variant/30"><button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="font-label-md text-label-md">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-primary active:scale-90 transition-transform px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
<span class="font-label-md text-label-md">门店</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md">好客权益</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-label-md text-label-md">我的</span>
|
||||
</button></nav>
|
||||
<script>
|
||||
// Micro-interaction for tabs
|
||||
const tabs = document.querySelectorAll('.whitespace-nowrap');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('text-primary', 'tab-active');
|
||||
t.classList.add('text-on-surface-variant');
|
||||
});
|
||||
tab.classList.add('text-primary', 'tab-active');
|
||||
tab.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
|
||||
// Store card click ripple-like effect
|
||||
const cards = document.querySelectorAll('.store-card-shadow');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousedown', () => {
|
||||
card.style.transform = 'scale(0.98)';
|
||||
card.style.transition = 'transform 0.1s ease';
|
||||
});
|
||||
card.addEventListener('mouseup', () => {
|
||||
card.style.transform = 'scale(1)';
|
||||
});
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "可用门店列表页",
|
||||
"screenId": "ffa51fc9808445a0aaaa07a9b0b523ce",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:11.621Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 887px; 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro: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">
|
||||
<!-- CSS and Tailwind Config included as per instructions -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"outline-variant": "#e2bebc",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"error-container": "#ffdad6",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-background": "#1a1c1b",
|
||||
"primary-container": "#a61d24",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-error": "#ffffff",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary": "#820012",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary": "#37413b",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary": "#735c00",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"secondary-container": "#fed65b",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"background": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"aged-amber": "#FFBF00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.qr-gradient {
|
||||
background: linear-gradient(135deg, rgba(166, 29, 36, 0.03) 0%, rgba(255, 191, 0, 0.03) 100%);
|
||||
}
|
||||
.ticket-notch {
|
||||
position: relative;
|
||||
}
|
||||
.ticket-notch::before, .ticket-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
background: #faf9f7;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.ticket-notch::before { left: -6px; border-radius: 0 12px 12px 0; }
|
||||
.ticket-notch::after { right: -6px; border-radius: 12px 0 0 12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright text-on-surface font-body-md min-h-screen flex flex-col">
|
||||
<!-- TopAppBar (Mapped from Shared Components) -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">出示核销码</h1>
|
||||
</div>
|
||||
<button class="hover:opacity-80 transition-opacity active:scale-95 transition-transform">
|
||||
|
||||
</button>
|
||||
</header>
|
||||
<main class="flex-1 mt-20 px-margin-page pb-32 space-y-gutter-card">
|
||||
<!-- CouponSummaryCard -->
|
||||
<section class="ticket-notch bg-primary-container text-on-primary-container p-6 rounded-xl shadow-lg flex flex-col items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-[80px]" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-md text-headline-md">¥</span>
|
||||
<h2 class="font-coupon-amount text-coupon-amount">500.00</h2>
|
||||
</div>
|
||||
<p class="mt-2 font-label-md text-label-md bg-aged-amber text-on-secondary-container px-3 py-1 rounded-full">好客权益核销额度</p>
|
||||
</section>
|
||||
<!-- QRCodePanel -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col items-center qr-gradient border border-outline-variant/10">
|
||||
<div class="bg-white p-4 rounded-xl shadow-sm mb-6 border border-surface-container">
|
||||
<div class="w-[200px] h-[200px] flex items-center justify-center bg-surface-container-low rounded-lg relative overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="A clean, professional 2D high-resolution QR code design isolated on a white background, featuring a subtle geometric red and amber logo at its center. The code is framed by a minimalist rounded border and represents a premium digital voucher for a high-end liquor and dining service in China. The lighting is even and studio-quality, emphasizing clarity and scannability within a luxury UI environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiDbOCWd-QjMSq_3jl9M7Vb6Hk0IPh_9xXH1_rFE4DzjTBV67coi83noUpIJvPfQ50VmCm8QPJJRSkoJHvTWPWvgNC8-52TQ4_2cT7wR44cwSPSh2hRH5bo4OGpmTybQxbcyfowBUGGM1438NLdmSp-yz6-tvbIkaBVIivs34eK0pUsGJzXm644wIQsJx4rXTYifV5HOBUW-hmdesUWqLDZeUK-hhMBA-7ERjEtfCmgUlZLqniiivEBeCfKfJc33vAMhW6N8Ypy-s">
|
||||
<!-- Scanline Animation effect -->
|
||||
<div class="absolute top-0 left-0 w-full h-[2px] bg-heritage-red/40 blur-[1px]" id="scanline" style="top: 136px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant font-label-md text-label-md">
|
||||
<span class="material-symbols-outlined text-heritage-red scale-75">schedule</span>
|
||||
<span id="timer" class="">核销码将在 00:00 后失效</span>
|
||||
</div>
|
||||
<button class="text-heritage-red font-headline-md text-headline-md font-bold py-2 px-4 hover:bg-primary-container/5 rounded-lg transition-colors active:scale-95" id="refresh-btn">
|
||||
点击刷新
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- SafetyNotice -->
|
||||
<section class="bg-secondary-container/10 border border-secondary-container/20 p-4 rounded-xl flex gap-4 items-start">
|
||||
<div class="bg-aged-amber/20 p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">gpp_maybe</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-secondary-fixed-variant mb-1">安全提示</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">请在核销前向店员确认核销金额，该码仅限一次性使用，切勿截图发送给他人。</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- ActionButtons (Fixed Bottom) -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-surface-bright/80 backdrop-blur-md p-4 pb-safe border-t border-surface-container">
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
// Micro-interactions and Timer Logic
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const timerElement = document.getElementById('timer');
|
||||
const scanline = document.getElementById('scanline');
|
||||
const refreshBtn = document.getElementById('refresh-btn');
|
||||
|
||||
let timeLeft = 299; // 5 minutes in seconds
|
||||
|
||||
// Simple Countdown
|
||||
const updateTimer = () => {
|
||||
const minutes = Math.floor(timeLeft / 60);
|
||||
const seconds = timeLeft % 60;
|
||||
timerElement.innerText = `核销码将在 ${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} 后失效`;
|
||||
if (timeLeft > 0) timeLeft--;
|
||||
};
|
||||
|
||||
const timerInterval = setInterval(updateTimer, 1000);
|
||||
|
||||
// Scanline Animation
|
||||
let scanPos = 0;
|
||||
const animateScan = () => {
|
||||
scanPos += 1;
|
||||
if (scanPos > 200) scanPos = 0;
|
||||
scanline.style.top = scanPos + 'px';
|
||||
requestAnimationFrame(animateScan);
|
||||
};
|
||||
animateScan();
|
||||
|
||||
// Refresh Interaction
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
timeLeft = 299;
|
||||
refreshBtn.classList.add('animate-pulse');
|
||||
setTimeout(() => refreshBtn.classList.remove('animate-pulse'), 1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div id="snapdom-sandbox" data-snapdom-sandbox="true" aria-hidden="true" style="position: absolute; left: -9999px; top: -9999px; width: 0px; height: 0px; overflow: hidden;"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "餐券核销码页面",
|
||||
"screenId": "ccfa6298eba7462ea2d6b52c1d61d602",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:27.865Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" 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@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">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"outline-variant": "#e2bebc",
|
||||
"aged-amber": "#FFBF00",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"subtle-gray": "#999999",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary": "#820012",
|
||||
"surface-container": "#efeeec",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"primary-container": "#a61d24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"outline": "#8d706e",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface-tint": "#b3272c",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"background": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-dim": "#dadad8",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-container": "#ffb9b4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
|
||||
"headline-md": ["18px", { "lineHeight": "26px", "fontWeight": "600" }],
|
||||
"headline-lg-mobile": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"headline-xl": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.premium-bg {
|
||||
background: radial-gradient(circle at 50% 50%, #faf9f7 0%, #f4f3f1 100%);
|
||||
background-image:
|
||||
url("https://www.transparenttextures.com/patterns/natural-paper.png"),
|
||||
radial-gradient(circle at 50% 50%, #faf9f7 0%, #f4f3f1 100%);
|
||||
}
|
||||
.cloud-pattern {
|
||||
opacity: 0.03;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/oriental-tiles.png");
|
||||
pointer-events: none;
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(15px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.location-glow {
|
||||
box-shadow: 0 0 40px 10px rgba(166, 29, 36, 0.08);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-ink-black min-h-screen flex flex-col items-center premium-bg relative overflow-hidden">
|
||||
<!-- Decorative Pattern Overlay -->
|
||||
<div class="absolute inset-0 cloud-pattern"></div>
|
||||
<!-- Subtle Border -->
|
||||
<div class="absolute inset-4 border border-heritage-red/5 pointer-events-none rounded-xl"></div>
|
||||
<main class="relative z-10 flex-1 w-full max-w-md flex flex-col items-center justify-center px-margin-page py-12 text-center">
|
||||
<!-- Logo Section -->
|
||||
<div class="mb-12 fade-in" style="animation-delay: 0.1s;">
|
||||
<img alt="Dukang Royal Logo" class="w-[150px] h-[150px] object-contain drop-shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3IUJWK-i7jw318irlvTJsKs_8962q64yBy8I6f6yl41ra6iiam_rcrDPFufjn1n4sNi9QCTWA8NisLnb51mMFoTOTj7lqRdNx6dOWTD-aRyW1LjqkrnJLlGDV5z5GeUhMmFquCwhpVm3Xrt4RBfs7RcBOBm06jB2QspOuEn-2nLvtpipBoBzmrqdAIpEAWNGIhgBUFVb6IDoeHy1hc4z2umn0dXF4vljKx9IHLpZJZL-a8wQhPBFjQKEXTXpG6SfVZOLOtG6kvWU">
|
||||
</div>
|
||||
<!-- Enhanced Location Illustration -->
|
||||
<div class="mb-10 fade-in" style="animation-delay: 0.2s;">
|
||||
<div class="relative inline-flex items-center justify-center">
|
||||
<!-- Multi-layered animated background -->
|
||||
<div class="absolute w-28 h-28 bg-heritage-red/5 rounded-full animate-ping opacity-20"></div>
|
||||
<div class="absolute w-24 h-24 bg-heritage-red/10 rounded-full location-glow"></div>
|
||||
<div class="relative w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-md">
|
||||
<span class="material-symbols-outlined text-heritage-red text-5xl" style="font-variation-settings: 'FILL' 1, 'wght' 300;">location_on</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Section -->
|
||||
<div class="space-y-4 mb-14 fade-in" style="animation-delay: 0.3s;">
|
||||
<h2 class="text-headline-xl font-headline-xl text-on-surface tracking-tight">发现本地服务</h2>
|
||||
<p class="text-body-lg font-body-lg text-on-surface-variant leading-relaxed px-4">
|
||||
开启位置权限，为您匹配最近的配送城市及本地专属优惠。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Action Buttons Section -->
|
||||
<div class="w-full space-y-5 fade-in px-2" style="animation-delay: 0.4s;">
|
||||
<!-- Primary Button -->
|
||||
<button class="w-full h-14 bg-heritage-red hover:bg-primary transition-all text-white rounded-xl font-headline-md text-headline-md flex items-center justify-center shadow-[0_8px_20px_-6px_rgba(166,29,36,0.35)] active:scale-[0.98] active:shadow-inner">
|
||||
允许获取位置
|
||||
</button>
|
||||
<!-- Secondary Button -->
|
||||
<button class="w-full h-14 bg-transparent text-on-surface-variant font-body-md text-body-md flex items-center justify-center hover:bg-white/50 rounded-xl transition-colors border border-outline/10">
|
||||
手动选择城市
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
document.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('touchstart', () => {
|
||||
button.style.transform = 'scale(0.97)';
|
||||
});
|
||||
button.addEventListener('touchend', () => {
|
||||
button.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "定位授权页面 - 中文版",
|
||||
"screenId": "c5555bc49c5b43b1be6a285f9cc6968b",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:15.999Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
||||
<title>我的 - 杜康好客</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-tint": "#b3272c",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"primary": "#820012",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface": "#faf9f7",
|
||||
"status-blue": "#2A6EBB",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-primary-fixed": "#410004",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#dadad8",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-surface": "#1a1c1b",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container": "#efeeec",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"background": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"inverse-surface": "#2f3130",
|
||||
"outline": "#8d706e",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e3e2e0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.heritage-gradient {
|
||||
background: linear-gradient(135deg, #820012 0%, #A61D24 40%, #D4A373 100%);
|
||||
}
|
||||
.paper-texture {
|
||||
background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png");
|
||||
opacity: 0.05;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.active-scale:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- Top Profile Header -->
|
||||
<header class="relative w-full heritage-gradient pt-16 pb-24 px-margin-page overflow-hidden">
|
||||
<!-- Background texture overlay -->
|
||||
<div class="absolute inset-0 paper-texture pointer-events-none"></div>
|
||||
<!-- Profile Content -->
|
||||
<div class="relative flex items-center space-x-4">
|
||||
<div class="relative">
|
||||
<div class="w-20 h-20 rounded-full border-2 border-white/30 overflow-hidden bg-white shadow-lg">
|
||||
<img class="w-full h-full object-cover" data-alt="A high-quality, professional headshot of a sophisticated middle-aged man with a warm and welcoming expression. He is dressed in business casual attire. The lighting is soft and cinematic, with a warm amber glow reflecting the premium Heritage Modernism aesthetic. The background is a blurred, elegant interior of a high-end hospitality lounge featuring traditional Chinese elements." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz_9Pnpk_Md4sEU6PXkeybus8oLZO9e-3pOpLuSwBX0jm_Z0JCfX1w2oZxz1VZayTh0PKUPjwjSuxJVX410fjtWFGR_f55f-nWppXWUweHRnEC7WyIWEqx4AyVHt-k02OhyaSGQfvY5cHG5IuRe9EqdcHy47gBQ82_cxGgX-DrKV4oYcwLoNRynAV0_xv2p1GOhisnQVulHwZcQClUJcP8q4nTY0Y3DR1w4ioa0DYTHePE43mLDJptjZcQqS7V8LihJdn4ze6fvQA">
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 bg-aged-amber rounded-full flex items-center justify-center border-2 border-primary shadow-sm">
|
||||
<span class="material-symbols-outlined text-[14px] text-primary" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-primary">李先生</h1>
|
||||
<div class="flex items-center mt-1 space-x-2">
|
||||
<span class="font-label-md text-label-md text-on-primary/80 tracking-wider">ID: DK88293401</span>
|
||||
<span class="bg-white/10 px-2 py-0.5 rounded-full font-label-md text-[10px] text-on-primary/90">至尊会员</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-on-primary active-scale">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Abstract Shapes for Modernism -->
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/5 rounded-full blur-3xl"></div>
|
||||
</header>
|
||||
<!-- Main Content Container -->
|
||||
<main class="relative -mt-10 px-margin-page pb-32 space-y-gutter-card">
|
||||
<!-- My Assets Section -->
|
||||
<section class="glass-card rounded-xl p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black flex items-center">
|
||||
<span class="material-symbols-outlined mr-2 text-primary">account_balance_wallet</span>
|
||||
我的资产
|
||||
</h2>
|
||||
<a class="font-label-md text-label-md text-subtle-gray flex items-center active-scale" href="#">
|
||||
查看明细 <span class="material-symbols-outlined text-[16px] ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-end justify-between bg-surface-container-lowest p-4 rounded-lg border border-outline-variant/30 relative overflow-hidden">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mb-1">好客权益余额</p>
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="font-coupon-amount text-coupon-amount text-primary">¥</span>
|
||||
<span class="font-coupon-amount text-[32px] text-primary">1,280.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md active-scale">
|
||||
去使用
|
||||
</button>
|
||||
</div>
|
||||
<!-- Subtle Amber Notch Decoration -->
|
||||
<div class="absolute -right-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-surface rounded-full"></div>
|
||||
<div class="absolute top-0 bottom-0 right-[4.5rem] border-r border-dashed border-outline-variant/50"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- My Orders Section -->
|
||||
<section class="glass-card rounded-xl p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">我的订单</h2>
|
||||
<a class="font-label-md text-label-md text-subtle-gray flex items-center active-scale" href="#">
|
||||
全部订单 <span class="material-symbols-outlined text-[16px] ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2"><button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">payments</span>
|
||||
<span class="absolute -top-1 -right-2 w-4 h-4 bg-primary text-white text-[10px] rounded-full flex items-center justify-center">2</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">待付款</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">package_2</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">待发货</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">local_shipping</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">配送中</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">task_alt</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">已完成</span>
|
||||
</button></div>
|
||||
</section>
|
||||
<!-- Services List -->
|
||||
<section class="glass-card rounded-xl overflow-hidden border border-heritage-red/5">
|
||||
<div class="divide-y divide-outline-variant/20">
|
||||
<!-- Service Item 1 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">location_on</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">地址管理</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
<!-- Service Item 2 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">storefront</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">可用门店</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
<!-- Service Item 3 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">headset_mic</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">联系客服</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="font-label-md text-label-md text-primary mr-1">在线中</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
</button>
|
||||
<!-- Service Item 4 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">info</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">关于我们</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- App Version/Sign Out -->
|
||||
<div class="py-4 text-center">
|
||||
<p class="font-label-md text-label-md text-subtle-gray/60">杜康好客 V2.4.0</p>
|
||||
<button class="mt-4 font-label-md text-label-md text-primary active:opacity-60 transition-opacity">
|
||||
退出当前账号
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar (JSON Mapping) -->
|
||||
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 pb-safe bg-surface shadow-lg border-t border-outline-variant/30"><!-- Home -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<!-- Stores -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">storefront</span>
|
||||
<span class="font-label-md text-label-md mt-1">门店</span>
|
||||
</a>
|
||||
<!-- Benefits -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md mt-1">好客权益</span>
|
||||
</a>
|
||||
<!-- Profile (Active) -->
|
||||
<a class="flex flex-col items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a></nav>
|
||||
<script>
|
||||
// Micro-interactions for scrolling
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
const scroll = window.scrollY;
|
||||
if (scroll > 100) {
|
||||
// Potential header shrinkage or styling change
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "我的 - 个人中心页",
|
||||
"screenId": "70b6f4222d2d4331a7cdf3e185a4c961",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:33.707Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN" style="width: 390px; height: 1090px; 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;500;600;700&family=Inter:wght@400;500;600&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": {
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-tint": "#b3272c",
|
||||
"tertiary-container": "#4e5852",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-dim": "#dadad8",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary": "#37413b",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-surface": "#1a1c1b",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary": "#735c00",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-primary-fixed": "#410004",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"subtle-gray": "#999999",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.coupon-notch {
|
||||
mask: radial-gradient(circle at left, transparent 8px, black 8.5px),
|
||||
radial-gradient(circle at right, transparent 8px, black 8.5px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
::-webkit-scrollbar { display: none; }
|
||||
body { -webkit-tap-highlight-color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright text-on-surface font-body-md selection:bg-heritage-red selection:text-white">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex items-center px-4 h-12 bg-surface dark:bg-surface">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 w-6 h-6 flex items-center justify-center"><span class="material-symbols-outlined text-on-surface">arrow_back</span></button>
|
||||
<div class="flex-1 text-center">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-on-surface">我的订单</h1>
|
||||
</div>
|
||||
<div class="w-6"></div> <!-- Spacer for balance -->
|
||||
</header>
|
||||
<!-- NavigationDrawer (Horizontal Filter) -->
|
||||
<nav class="sticky top-12 w-full z-40 flex justify-around bg-surface-bright px-margin-page h-10 items-center">
|
||||
<!-- 全部 (All) -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-heritage-red border-b-2 border-heritage-red font-bold transition-all duration-200">
|
||||
全部
|
||||
</button>
|
||||
<!-- 待付款 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
待付款
|
||||
</button>
|
||||
<!-- 待收货 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
待收货
|
||||
</button>
|
||||
<!-- 已完成 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
已完成
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Order List Container -->
|
||||
<main class="px-margin-page pt-8 pb-32 space-y-6"><div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20231005002</span>
|
||||
<span class="px-2 py-0.5 bg-heritage-red/5 text-heritage-red text-[10px] font-bold rounded border border-heritage-red/20">补发单</span>
|
||||
</div>
|
||||
<span class="text-heritage-red font-semibold font-body-md">补发中</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdcSLoRpx3rhqCdX-VYMZxzwzRcH0pfl-CXhEcRpy1rai4ewG685xjrHs4_vO5IxJj22Z2sUTMEJsyW_hsKaGgJSIa8me_aCtAbrok9Op1AX3P7RxEWa6ow-1PtwZVZW_pfDeohRYU47JBUlC9eZo51GSqRd6PNR63hjRBpi4NoTu2ITFDsiElIQadQrQ3yh7oKUmGSm2VGqVgCDjZfHO47mYPdxK9uo5YyrzOjpJK1gZ4XnvmEV4zkQZQVQa1cYae-RxyGpl9ErM"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·御享15代</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x1</span>
|
||||
<span class="font-headline-md text-ink-black">¥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reshipment Info Banner -->
|
||||
<div class="bg-surface-container-low rounded-lg px-3 py-2 flex items-center gap-2 mb-4">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[18px]">info</span>
|
||||
<span class="text-on-surface-variant font-body-md">由于商品破损，为您免费补发中</span>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-outline rounded-xl font-body-md text-on-surface-variant active:opacity-70 transition-opacity">
|
||||
查看详情
|
||||
</button>
|
||||
<button class="px-5 py-2 bg-heritage-red rounded-xl font-body-md text-white font-medium active:opacity-90 transition-opacity shadow-sm">
|
||||
查看进度
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 1: In Transit -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20230915001</span>
|
||||
<span class="text-heritage-red font-semibold font-body-md">配送中</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0" data-alt="A professional studio product shot of a premium Chinese Baijiu bottle, Dukang Royal Selection 15, with elegant gold detailing on deep crimson glass. The bottle is set against a clean, off-white minimalist background with soft cinematic lighting. The style is sophisticated and high-end, reflecting Heritage Modernism with crisp edges and realistic textures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdcSLoRpx3rhqCdX-VYMZxzwzRcH0pfl-CXhEcRpy1rai4ewG685xjrHs4_vO5IxJj22Z2sUTMEJsyW_hsKaGgJSIa8me_aCtAbrok9Op1AX3P7RxEWa6ow-1PtwZVZW_pfDeohRYU47JBUlC9eZo51GSqRd6PNR63hjRBpi4NoTu2ITFDsiElIQadQrQ3yh7oKUmGSm2VGqVgCDjZfHO47mYPdxK9uo5YyrzOjpJK1gZ4XnvmEV4zkQZQVQa1cYae-RxyGpl9ErM"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·御享15代</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x1</span>
|
||||
<span class="font-headline-md text-ink-black">¥899.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Banner -->
|
||||
<div class="bg-[#FFF9E6] border border-aged-amber/20 rounded-lg px-3 py-2 flex items-center justify-between mb-4 relative overflow-hidden">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[18px]">confirmation_number</span>
|
||||
<span class="text-on-secondary-fixed-variant font-body-md font-medium">好客权益: ¥100 <span class="text-subtle-gray text-xs ml-1">(待使用)</span></span>
|
||||
</div>
|
||||
<div class="w-4 h-4 rounded-full bg-surface-container-lowest absolute -left-2 top-1/2 -translate-y-1/2"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-surface-container-lowest absolute -right-2 top-1/2 -translate-y-1/2"></div>
|
||||
<button class="relative z-10 px-3 py-1 border border-heritage-red/20 bg-white/50 rounded-full font-label-md text-label-md text-heritage-red active:bg-heritage-red/5 transition-colors">立即使用</button></div>
|
||||
<!-- Summary -->
|
||||
<div class="text-right mb-4">
|
||||
<p class="text-on-surface-variant font-label-md">共1件商品 实付: <span class="text-heritage-red font-headline-md ml-1">¥899.00</span></p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-outline rounded-xl font-body-md text-on-surface-variant active:opacity-70 transition-opacity">
|
||||
查看详情
|
||||
</button>
|
||||
<button class="px-5 py-2 bg-heritage-red rounded-xl font-body-md text-white font-medium active:opacity-90 transition-opacity shadow-sm">
|
||||
确认收货
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 2: Completed -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20230822089</span>
|
||||
<span class="text-subtle-gray font-body-md">已完成</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4 opacity-80">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0 grayscale-[20%]" data-alt="A macro shot focusing on the intricate gold embossed label of a high-quality Chinese spirit bottle. The lighting is warm and amber-toned, emphasizing the tactile quality of the paper and the reflective gold foil. The background is a soft, out-of-focus wooden texture, suggesting tradition and age. The composition is artistic and editorial, adhering to the Dukang brand's premium aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZ5TEXr9Jr5ynuWE9C6HMVgbA0MyNdqpPZIXy0oA_uiXKVH36Szt16lmEV7haENNemHAU59vKkqFMDZSrlkV681fK1rWjyV2RZOx32o6OKKouqX4f-R2xFKpTdZvhoHx0XLbyhMKZWX7KeGLkGpBb7VVjcW9zeyCQ4fD_nXhj1gL_o7s0gkz0M8dTmKGFf7-9vErPqyCFI_9hpidK8OnLriBP193Tfua3K3V8WkfVs8Pe570H54y5TwkSGuqASl1F-dc4K-rHRaq8"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·陈酿珍藏款</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 42% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x2</span>
|
||||
<span class="font-headline-md text-ink-black">¥1,258.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Banner (Already used state) -->
|
||||
<div class="bg-surface-container px-3 py-2 rounded-lg flex items-center justify-between mb-4 grayscale">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-subtle-gray text-[18px]">confirmation_number</span>
|
||||
<span class="text-subtle-gray font-body-md">好客权益: ¥200 (已使用)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summary -->
|
||||
<div class="text-right mb-4">
|
||||
<p class="text-on-surface-variant font-label-md">共2件商品 实付: <span class="text-ink-black font-headline-md ml-1">¥1,258.00</span></p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-heritage-red rounded-xl font-body-md text-heritage-red font-medium active:bg-heritage-red/5 transition-colors">
|
||||
再次购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Hint (Optional) -->
|
||||
<div class="py-12 flex flex-col items-center justify-center opacity-30">
|
||||
<span class="material-symbols-outlined text-[48px] text-subtle-gray mb-2">inventory_2</span>
|
||||
<p class="font-label-md text-subtle-gray">没有更多订单了</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<script>
|
||||
// Simple Interaction Logic
|
||||
document.querySelectorAll('nav button').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('nav button').forEach(t => {
|
||||
t.classList.remove('text-heritage-red', 'border-b-2', 'border-heritage-red', 'font-bold');
|
||||
t.classList.add('text-on-surface-variant');
|
||||
});
|
||||
tab.classList.add('text-heritage-red', 'border-b-2', 'border-heritage-red', 'font-bold');
|
||||
tab.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
|
||||
// Add haptic-like feedback for buttons
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', () => btn.classList.add('opacity-70'));
|
||||
btn.addEventListener('touchend', () => btn.classList.remove('opacity-70'));
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "我的订单 - 增加补发订单示例",
|
||||
"screenId": "132b9ad9f7be472f9e6c8956c18b15b3",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:37.482Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,255 @@
|
||||
<!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">
|
||||
<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&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": {
|
||||
"subtle-gray": "#999999",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"error-container": "#ffdad6",
|
||||
"primary": "#820012",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container": "#efeeec",
|
||||
"error": "#ba1a1a",
|
||||
"surface-tint": "#b3272c",
|
||||
"secondary-container": "#fed65b",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"status-blue": "#2A6EBB",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary": "#735c00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"tertiary": "#37413b",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"outline": "#8d706e",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-fixed": "#ffdad7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "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;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.login-card {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.divider-line {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, #e3e2e0 50%, transparent 100%);
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #A61D24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col font-body-md text-on-surface">
|
||||
<!-- Header Section -->
|
||||
<header class="pt-16 pb-10 flex flex-col items-center px-margin-page animate-fade-in">
|
||||
<div class="w-24 h-24 mb-8 relative">
|
||||
<img alt="杜康好客 Logo" class="w-full h-full object-contain rounded-xl shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC49aR5uZokcT3T2jQc1raT2-A2g3CXybLEiG4oMyc--lK1Q5QI3-75nAX1NPtFs7Duq8g5zOLNUu5rGzjrJOwDXzsSn9PcaCm2fOoWZTIetnVCGL_BqxbatpFURpXXBslwAwpYdOA--PFqk5dnpfS3bRK-s_16KxorSVLAPDkAU1o8NB7Yio0QZiRnVnzgo_mlwcw7uoErWqSQe5f0NYV0ew230GUsvTTf-UKD6f-PbQrO2sQiSS1TXNCM16yJ7sxo83tUEm49pN4">
|
||||
<div class="absolute -bottom-2 -right-2 bg-heritage-red text-white text-[10px] px-2 py-0.5 rounded-full font-bold">官方</div>
|
||||
</div>
|
||||
<div class="text-center space-y-2">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black tracking-tight">欢迎来到杜康好客</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant opacity-80">买美酒，享好礼</p>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Login Content -->
|
||||
<main class="flex-grow px-margin-page pb-12">
|
||||
<div class="max-w-md mx-auto space-y-8">
|
||||
<!-- WeChat One-Click Login -->
|
||||
|
||||
<!-- Divider -->
|
||||
|
||||
<!-- SMS Login Form -->
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-6 login-card space-y-6">
|
||||
<h3 class="text-on-surface font-headline-md text-headline-md mb-2">手机验证码登录</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Phone Input -->
|
||||
<div class="relative flex items-center border-b border-surface-variant pb-2 focus-within:border-heritage-red transition-colors">
|
||||
<span class="text-body-lg font-medium text-on-surface mr-3">+86</span>
|
||||
<input class="flex-grow bg-transparent border-none p-0 text-body-lg placeholder:text-subtle-gray focus:ring-0" placeholder="请输入手机号" type="tel">
|
||||
</div>
|
||||
<!-- OTP Input -->
|
||||
<div class="relative flex items-center border-b border-surface-variant pb-2 focus-within:border-heritage-red transition-colors">
|
||||
<input class="flex-grow bg-transparent border-none p-0 text-body-lg placeholder:text-subtle-gray focus:ring-0" placeholder="请输入验证码" type="number">
|
||||
<button class="text-heritage-red font-medium text-body-md hover:opacity-80 transition-opacity" id="get-code">
|
||||
获取验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full h-[48px] border border-heritage-red/20 text-heritage-red rounded-xl font-headline-md text-headline-md hover:bg-heritage-red/5 active:scale-[0.98] transition-all">
|
||||
登录
|
||||
</button>
|
||||
</div><button class="w-full h-[56px] bg-heritage-red text-white rounded-xl flex items-center justify-center gap-3 active:scale-[0.98] transition-transform duration-150 shadow-lg shadow-heritage-red/10 mt-8">
|
||||
<span class="material-symbols-outlined !text-[24px]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
<span class="font-headline-md text-headline-md">微信一键授权</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer & Agreements -->
|
||||
<footer class="px-margin-page pb-safe-offset-8 mt-auto">
|
||||
<div class="max-w-md mx-auto flex items-start gap-2 py-6">
|
||||
<div class="relative flex items-center pt-0.5">
|
||||
<input class="w-4 h-4 rounded border-outline-variant text-heritage-red focus:ring-heritage-red focus:ring-offset-0 transition-all cursor-pointer" id="agreement" type="checkbox">
|
||||
</div>
|
||||
<label class="text-label-md font-label-md text-on-surface-variant leading-relaxed" for="agreement">
|
||||
我已阅读并同意
|
||||
<a class="text-heritage-red hover:underline" href="#">《用户协议》</a>
|
||||
和
|
||||
<a class="text-heritage-red hover:underline" href="#">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Visual Embellishment: Subtle Heritage Texture -->
|
||||
<div class="fixed inset-0 pointer-events-none opacity-[0.03] z-[-1]" style="background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png')"></div>
|
||||
<script>
|
||||
// Simple micro-interaction for the "Get Code" button
|
||||
const getCodeBtn = document.getElementById('get-code');
|
||||
let countdown = 0;
|
||||
|
||||
getCodeBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (countdown > 0) return;
|
||||
|
||||
// Basic validation simulation
|
||||
const phoneInput = document.querySelector('input[type="tel"]');
|
||||
if (phoneInput.value.length < 11) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
countdown = 60;
|
||||
this.classList.add('text-subtle-gray');
|
||||
this.classList.remove('text-heritage-red');
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (countdown <= 0) {
|
||||
clearInterval(timer);
|
||||
this.innerText = '重新获取';
|
||||
this.classList.remove('text-subtle-gray');
|
||||
this.classList.add('text-heritage-red');
|
||||
} else {
|
||||
this.innerText = `${countdown}s 后重新获取`;
|
||||
countdown--;
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Toggle button states based on agreement
|
||||
const loginBtn = document.querySelector('button.bg-heritage-red');
|
||||
const secondaryLoginBtn = document.querySelector('button.border-heritage-red\\/20');
|
||||
const agreementCheckbox = document.getElementById('agreement');
|
||||
|
||||
[loginBtn, secondaryLoginBtn].forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
if (!agreementCheckbox.checked) {
|
||||
e.preventDefault();
|
||||
// Shake effect simulation
|
||||
agreementCheckbox.parentElement.classList.add('animate-bounce');
|
||||
setTimeout(() => agreementCheckbox.parentElement.classList.remove('animate-bounce'), 1000);
|
||||
alert('请先勾选并同意用户协议');
|
||||
} else {
|
||||
// Logic for actual login redirect
|
||||
console.log('Login attempt allowed');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
.pb-safe-offset-8 {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "用户登录页 - C端小程序",
|
||||
"screenId": "ef33d5a498ab47f686116432fb07da62",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:21.335Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN" style="width: 390px; height: 1090px; 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;500;600;700&family=Inter:wght@400;500;600&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": {
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-tint": "#b3272c",
|
||||
"tertiary-container": "#4e5852",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-dim": "#dadad8",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary": "#37413b",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-surface": "#1a1c1b",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary": "#735c00",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-primary-fixed": "#410004",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"subtle-gray": "#999999",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.coupon-notch {
|
||||
mask: radial-gradient(circle at left, transparent 8px, black 8.5px),
|
||||
radial-gradient(circle at right, transparent 8px, black 8.5px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
::-webkit-scrollbar { display: none; }
|
||||
body { -webkit-tap-highlight-color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright text-on-surface font-body-md selection:bg-heritage-red selection:text-white">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex items-center px-4 h-12 bg-surface dark:bg-surface">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 w-6 h-6 flex items-center justify-center"><span class="material-symbols-outlined text-on-surface">arrow_back</span></button>
|
||||
<div class="flex-1 text-center">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-on-surface">我的订单</h1>
|
||||
</div>
|
||||
<div class="w-6"></div> <!-- Spacer for balance -->
|
||||
</header>
|
||||
<!-- NavigationDrawer (Horizontal Filter) -->
|
||||
<nav class="sticky top-12 w-full z-40 flex justify-around bg-surface-bright px-margin-page h-10 items-center">
|
||||
<!-- 全部 (All) -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-heritage-red border-b-2 border-heritage-red font-bold transition-all duration-200">
|
||||
全部
|
||||
</button>
|
||||
<!-- 待付款 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
待付款
|
||||
</button>
|
||||
<!-- 待收货 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
待收货
|
||||
</button>
|
||||
<!-- 已完成 -->
|
||||
<button class="h-full flex items-center font-label-md text-label-md text-on-surface-variant active:bg-surface-container-high transition-all duration-200 px-2">
|
||||
已完成
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Order List Container -->
|
||||
<main class="px-margin-page pt-8 pb-32 space-y-6"><div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20231005002</span>
|
||||
<span class="px-2 py-0.5 bg-heritage-red/5 text-heritage-red text-[10px] font-bold rounded border border-heritage-red/20">补发单</span>
|
||||
</div>
|
||||
<span class="text-heritage-red font-semibold font-body-md">补发中</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdcSLoRpx3rhqCdX-VYMZxzwzRcH0pfl-CXhEcRpy1rai4ewG685xjrHs4_vO5IxJj22Z2sUTMEJsyW_hsKaGgJSIa8me_aCtAbrok9Op1AX3P7RxEWa6ow-1PtwZVZW_pfDeohRYU47JBUlC9eZo51GSqRd6PNR63hjRBpi4NoTu2ITFDsiElIQadQrQ3yh7oKUmGSm2VGqVgCDjZfHO47mYPdxK9uo5YyrzOjpJK1gZ4XnvmEV4zkQZQVQa1cYae-RxyGpl9ErM"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·御享15代</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x1</span>
|
||||
<span class="font-headline-md text-ink-black">¥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reshipment Info Banner -->
|
||||
<div class="bg-surface-container-low rounded-lg px-3 py-2 flex items-center gap-2 mb-4">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[18px]">info</span>
|
||||
<span class="text-on-surface-variant font-body-md">由于商品破损，为您免费补发中</span>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-outline rounded-xl font-body-md text-on-surface-variant active:opacity-70 transition-opacity">
|
||||
查看详情
|
||||
</button>
|
||||
<button class="px-5 py-2 bg-heritage-red rounded-xl font-body-md text-white font-medium active:opacity-90 transition-opacity shadow-sm">
|
||||
查看进度
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 1: In Transit -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20230915001</span>
|
||||
<span class="text-heritage-red font-semibold font-body-md">配送中</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0" data-alt="A professional studio product shot of a premium Chinese Baijiu bottle, Dukang Royal Selection 15, with elegant gold detailing on deep crimson glass. The bottle is set against a clean, off-white minimalist background with soft cinematic lighting. The style is sophisticated and high-end, reflecting Heritage Modernism with crisp edges and realistic textures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdcSLoRpx3rhqCdX-VYMZxzwzRcH0pfl-CXhEcRpy1rai4ewG685xjrHs4_vO5IxJj22Z2sUTMEJsyW_hsKaGgJSIa8me_aCtAbrok9Op1AX3P7RxEWa6ow-1PtwZVZW_pfDeohRYU47JBUlC9eZo51GSqRd6PNR63hjRBpi4NoTu2ITFDsiElIQadQrQ3yh7oKUmGSm2VGqVgCDjZfHO47mYPdxK9uo5YyrzOjpJK1gZ4XnvmEV4zkQZQVQa1cYae-RxyGpl9ErM"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·御享15代</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x1</span>
|
||||
<span class="font-headline-md text-ink-black">¥899.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Banner -->
|
||||
<div class="bg-[#FFF9E6] border border-aged-amber/20 rounded-lg px-3 py-2 flex items-center justify-between mb-4 relative overflow-hidden">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[18px]">confirmation_number</span>
|
||||
<span class="text-on-secondary-fixed-variant font-body-md font-medium">好客权益: ¥100 <span class="text-subtle-gray text-xs ml-1">(待使用)</span></span>
|
||||
</div>
|
||||
<div class="w-4 h-4 rounded-full bg-surface-container-lowest absolute -left-2 top-1/2 -translate-y-1/2"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-surface-container-lowest absolute -right-2 top-1/2 -translate-y-1/2"></div>
|
||||
<button class="relative z-10 px-3 py-1 border border-heritage-red/20 bg-white/50 rounded-full font-label-md text-label-md text-heritage-red active:bg-heritage-red/5 transition-colors">立即使用</button></div>
|
||||
<!-- Summary -->
|
||||
<div class="text-right mb-4">
|
||||
<p class="text-on-surface-variant font-label-md">共1件商品 实付: <span class="text-heritage-red font-headline-md ml-1">¥899.00</span></p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-outline rounded-xl font-body-md text-on-surface-variant active:opacity-70 transition-opacity">
|
||||
查看详情
|
||||
</button>
|
||||
<button class="px-5 py-2 bg-heritage-red rounded-xl font-body-md text-white font-medium active:opacity-90 transition-opacity shadow-sm">
|
||||
确认收货
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 2: Completed -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 pb-3 border-b border-surface-container">
|
||||
<span class="font-label-md text-on-surface-variant">订单号: DK20230822089</span>
|
||||
<span class="text-subtle-gray font-body-md">已完成</span>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex gap-4 mb-4 opacity-80">
|
||||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container flex-shrink-0 grayscale-[20%]" data-alt="A macro shot focusing on the intricate gold embossed label of a high-quality Chinese spirit bottle. The lighting is warm and amber-toned, emphasizing the tactile quality of the paper and the reflective gold foil. The background is a soft, out-of-focus wooden texture, suggesting tradition and age. The composition is artistic and editorial, adhering to the Dukang brand's premium aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZ5TEXr9Jr5ynuWE9C6HMVgbA0MyNdqpPZIXy0oA_uiXKVH36Szt16lmEV7haENNemHAU59vKkqFMDZSrlkV681fK1rWjyV2RZOx32o6OKKouqX4f-R2xFKpTdZvhoHx0XLbyhMKZWX7KeGLkGpBb7VVjcW9zeyCQ4fD_nXhj1gL_o7s0gkz0M8dTmKGFf7-9vErPqyCFI_9hpidK8OnLriBP193Tfua3K3V8WkfVs8Pe570H54y5TwkSGuqASl1F-dc4K-rHRaq8"/>
|
||||
<div class="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface leading-tight">杜康·陈酿珍藏款</h3>
|
||||
<p class="text-subtle-gray font-label-md mt-1">500ml | 42% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-label-md text-on-surface-variant">x2</span>
|
||||
<span class="font-headline-md text-ink-black">¥1,258.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Banner (Already used state) -->
|
||||
<div class="bg-surface-container px-3 py-2 rounded-lg flex items-center justify-between mb-4 grayscale">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-subtle-gray text-[18px]">confirmation_number</span>
|
||||
<span class="text-subtle-gray font-body-md">好客权益: ¥200 (已使用)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summary -->
|
||||
<div class="text-right mb-4">
|
||||
<p class="text-on-surface-variant font-label-md">共2件商品 实付: <span class="text-ink-black font-headline-md ml-1">¥1,258.00</span></p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="px-5 py-2 border border-heritage-red rounded-xl font-body-md text-heritage-red font-medium active:bg-heritage-red/5 transition-colors">
|
||||
再次购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Hint (Optional) -->
|
||||
<div class="py-12 flex flex-col items-center justify-center opacity-30">
|
||||
<span class="material-symbols-outlined text-[48px] text-subtle-gray mb-2">inventory_2</span>
|
||||
<p class="font-label-md text-subtle-gray">没有更多订单了</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<script>
|
||||
// Simple Interaction Logic
|
||||
document.querySelectorAll('nav button').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('nav button').forEach(t => {
|
||||
t.classList.remove('text-heritage-red', 'border-b-2', 'border-heritage-red', 'font-bold');
|
||||
t.classList.add('text-on-surface-variant');
|
||||
});
|
||||
tab.classList.add('text-heritage-red', 'border-b-2', 'border-heritage-red', 'font-bold');
|
||||
tab.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
|
||||
// Add haptic-like feedback for buttons
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', () => btn.classList.add('opacity-70'));
|
||||
btn.addEventListener('touchend', () => btn.classList.remove('opacity-70'));
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "我的订单 - 增加补发订单示例",
|
||||
"screenId": "132b9ad9f7be472f9e6c8956c18b15b3",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:24.587Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html><html class="light" 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">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=Manrope:wght@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">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#735c00",
|
||||
"background": "#faf9f7",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#37413b",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-background": "#1a1c1b",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"aged-amber": "#FFBF00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-secondary-container": "#745c00",
|
||||
"success-green": "#2D6A4F"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.notch-badge {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 8px 50%);
|
||||
}
|
||||
.custom-shadow {
|
||||
shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #A61D24 !important;
|
||||
ring: 1px #A61D24;
|
||||
}
|
||||
/* Mobile-first scroll behavior */
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: #faf9f7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-surface-bright dark:bg-surface-dim text-heritage-red w-full top-0 sticky z-40 shadow-sm flex justify-between items-center px-margin-page h-16">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 duration-150 p-2 -ml-2">
|
||||
<span class="material-symbols-outlined text-2xl">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md">门店详情</h1>
|
||||
</div>
|
||||
<div class="h-10 w-10 rounded-full overflow-hidden border border-outline-variant/30">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-3xl mx-auto px-margin-page pt-stack-md pb-32 space-y-stack-md">
|
||||
<!-- Section 1: Store Status Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-label-md text-label-md text-subtle-gray uppercase tracking-wider">运营状态</h3>
|
||||
<span class="px-3 py-1 bg-success-green/10 text-success-green rounded-full font-label-md text-xs flex items-center gap-1">
|
||||
<span class="w-2 h-2 rounded-full bg-success-green animate-pulse"></span>
|
||||
营业中
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button class="flex-1 py-2 rounded-lg border border-heritage-red bg-heritage-red text-white text-body-md font-medium transition-all active:scale-95">
|
||||
营业中
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-high text-body-md transition-all active:scale-95">
|
||||
暂停服务
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-high text-body-md transition-all active:scale-95">
|
||||
已下线
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 2: Basic Information -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 space-y-4">
|
||||
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-heritage-red pl-3">基本信息</h3>
|
||||
<!-- Store Image -->
|
||||
<div class="relative group aspect-video rounded-xl overflow-hidden mb-6 border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" data-alt="A wide-angle, high-end photography shot of a traditional Chinese luxury storefront. The architecture features exquisite dark wood carvings and a prominent red Dukang distillery plaque. The lighting is early evening golden hour, casting long, warm shadows and highlighting the texture of the stone entrance. The mood is distinguished and historically significant." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhXxH5suJxjt-FApbJCnPF9-_TPCAhW-5H56_7hGT9drTHIDW0sahcNak9IPbJHEwe1Y7KkYIykCbt8_pXhYL1NBpWeEGEeflH_otAzJ06lWOkyLe2gWKv7hGe-o4EMARs8pxalDNduzK8zCB2Y6zBI-coIeZsNTJA6wH1GHwJHQLes8pdaw6H7aj9f2QJaO6PizCWjJ_FcO4Bnlht1ZgLBHuDdYVTY-qxyocwaWVmGkXKco-wTpmeNFGkOhNaPxuipLaMfEa5pUQ">
|
||||
<div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
|
||||
<div class="bg-white/90 p-3 rounded-full shadow-lg flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">photo_camera</span>
|
||||
<span class="text-heritage-red font-medium text-sm">更换封面</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fields -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店名称</label>
|
||||
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-lg font-medium focus:border-heritage-red transition-colors" type="text" value="杜康大酒店（洛阳总店）">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">联系电话</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-subtle-gray text-xl">call</span>
|
||||
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg pl-11 pr-4 py-3 text-body-lg focus:border-heritage-red transition-colors" type="tel" value="0379-6888 8888">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店地址</label>
|
||||
<div class="relative group">
|
||||
<textarea class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors pr-12" rows="2">河南省洛阳市涧西区中州西路188号杜康大厦1-3层</textarea>
|
||||
<button class="absolute right-3 top-3 text-heritage-red p-1 bg-heritage-red/10 rounded-md active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-xl">location_on</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店简介</label>
|
||||
<textarea class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" placeholder="请输入门店简介（10-500字）" rows="4">传承千年杜康酿酒技艺，本店不仅是杜康酒的品鉴中心，更是集餐饮、商务宴请、文化交流于一体的高端社交场所。室内装修融合古典意蕴与现代简约，旨在为宾客提供最正宗的酒文化体验。</textarea>
|
||||
<div class="text-right mt-1">
|
||||
<span class="text-xs text-subtle-gray font-label-md">112 / 500</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 3: Environment Photos -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex justify-between items-end mb-4">
|
||||
<h3 class="font-headline-md text-on-surface border-l-4 border-heritage-red pl-3">店内环境</h3>
|
||||
<span class="font-label-md text-subtle-gray">最多12张</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up detailed shot of a luxury private dining room in a high-end Chinese restaurant. The table is set with premium porcelain, crystal Dukang liquor glasses, and a centerpiece of fresh flowers. The lighting is dramatic and moody, utilizing warm internal lights and deep shadows to emphasize a sense of exclusivity and heritage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEBbbm-JsKY5XjmTsDOPg0qbyqjv43IUIIbPpCWKOgjYUyh-8CV3RY4gr3WGJpIMth8WvwreLXmjKGlFyDiU_2YRLqRuXbwHSbsdR4_FcW-V4q5sjVkWJej8rx3HzgFXRiX9f-xtcUweBt1V2cULqtoHwND3BkXToJUJvyO7hbV2PL3MMH6JOLNDORJHkuifxRITH3geleLgpcaFTCsOI1vnxa3OPkJ6oQPy4fR-d32G-frna0c0KrXkYQD27NeQXvmUsawYysjNA">
|
||||
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
|
||||
<span class="material-symbols-outlined text-xs">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" data-alt="A photograph of a modern wine cellar featuring backlit wooden racks holding premium bottles of Dukang liquor. The space is minimalist and sleek, with polished concrete floors reflecting the warm amber glow from the liquor cabinets. The overall style is clean, modern, and high-tech, showcasing the brand's contemporary authority." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq41eRQEwpPhHu-yAzUvGcZTFHmbOj6J-vVSgis2TVn0pSBvuVN2lWhATbI70ULgwQ02gvD3rPqdjtsz4Ua_mo5BwnASjhNhrH0sNfOod9OX_qH4FBsFeBOxWUUIAO8hb5ZRmqYkqE5P3lD7jlp9LsKWyLmozOK3FPuXEX6unCQR7QIZlUrMj5EjFEaCSwSGJh_FpyeDX5S6GIspDiotomAx04Mg9p-EgG_HI97D0-8Gq0Gq5E5AS3AQ_UY_7RwVrKEPfky5fLJz8">
|
||||
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
|
||||
<span class="material-symbols-outlined text-xs">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" data-alt="A wide view of a spacious hotel lobby inspired by ancient Chinese architecture but with modern structural elements. The ceiling features hanging lanterns that cast a soft glow over a seating area with plush furniture in heritage red and charcoal gray. The atmosphere is hospitable and grand, suitable for a flagship brand headquarters." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDErxfde49JRf-xx2ffZFOoS-ACC4pybtIVbs3PY_5R5-kZ6x9rQ9XOVVd-q-TGrde9qr6Qo8jXK8D95rNG3JYSwTO5YUWDWl7Ts_cTsofToLbHCvEc434vvbxPTXEzROZYS-gq66muvofIrB-fGW1g4hHWIyM2AAo01uPvgVNp4avs9C8kiH8HalRwAc5SpoLJILa-C8amvuKAp1BFBLUiibNREw17YUlwlyInZzcUX6B5BYg4fD-_Y973c1Q1uMo0xqxebOThPow">
|
||||
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
|
||||
<span class="material-symbols-outlined text-xs">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="aspect-square rounded-lg border-2 border-dashed border-outline-variant flex flex-col items-center justify-center gap-1 text-subtle-gray hover:text-heritage-red hover:border-heritage-red hover:bg-heritage-red/5 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-2xl">add</span>
|
||||
<span class="text-xs font-label-md">添加照片</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 4: Contract & Settlement -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 space-y-4">
|
||||
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-heritage-red pl-3">签约与结算</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">合同扫描件</label>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden border border-outline-variant/30 flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A high-quality scan of a business contract document on a clean desk surface. The document features official red seals and clear black typography. Beside the document sits a high-end fountain pen. The image is lit with soft natural daylight, conveying a sense of transparency, legality, and business integrity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiyrkgb9O3t0hN48YdiiR_WsuavXZhJeel8qQQi523HD_vOlBVCbMt0_yeiewIIvGj99g6U32kaZurYWlaL5IxWnhCd-QIxTOg3Tlli1lFSjjRRu2ufUxQtN1-OZNFh_tAhpeBjfQuXXWpxvzexFfRC0Fn0vQQWitR3KCSf5ND_CNIcnnHE3F3z6bZf__E-slvzVXybkNjucPMwbu0ufNqKgnl6QztmeA-TogAqx5ArNC5SID60YINvk-SONarxL5JOklo9yVhxZk">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-subtle-gray mb-2">已上传《杜康品牌联营入驻合同_v2.pdf》</p>
|
||||
<button class="text-heritage-red font-medium text-sm flex items-center gap-1 hover:underline">
|
||||
<span class="material-symbols-outlined text-lg">upload_file</span>
|
||||
重新上传
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">银行卡号</label>
|
||||
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" type="text" value="6222 0000 1111 2222 888">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">持卡人姓名</label>
|
||||
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" type="text" value="王大伟">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 5: Management Info (Readonly) -->
|
||||
<section class="bg-surface-container rounded-xl p-stack-md border border-outline-variant/10 space-y-4">
|
||||
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-subtle-gray pl-3">管理信息</h3>
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-6">
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-0.5">关联城市合伙人</label>
|
||||
<p class="text-body-md font-medium text-on-surface">张三 (138 1234 5678)</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-0.5">申请类型</label>
|
||||
<p class="text-body-md font-medium text-on-surface">首次入驻</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-0.5">入驻时间</label>
|
||||
<p class="text-body-md font-medium text-on-surface">2023-10-15</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-subtle-gray mb-0.5">后台ID</label>
|
||||
<p class="text-body-md font-mono text-on-surface">DK-ST-20231015-01</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Sticky Bottom Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 bg-white/80 backdrop-blur-md border-t border-outline-variant/20 px-margin-page py-4 pb-safe-offset-4">
|
||||
<div class="max-w-3xl mx-auto flex items-center gap-4">
|
||||
<button class="flex-[1] h-12 rounded-xl border border-outline-variant text-on-surface-variant font-medium active:scale-95 transition-all">
|
||||
取消
|
||||
</button>
|
||||
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-medium shadow-lg shadow-heritage-red/20 active:scale-95 active:bg-primary transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-xl">save</span>
|
||||
保存修改
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Safe area padding for iPhones -->
|
||||
<style>
|
||||
.pb-safe-offset-4 {
|
||||
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Simple Interaction logic
|
||||
document.querySelectorAll('.grid > button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
// If it's the status buttons
|
||||
if (this.parentElement.parentElement.querySelector('h3').textContent.includes('状态')) {
|
||||
this.parentElement.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('bg-heritage-red', 'text-white', 'border-heritage-red');
|
||||
b.classList.add('border-outline-variant', 'text-on-surface-variant');
|
||||
});
|
||||
this.classList.remove('border-outline-variant', 'text-on-surface-variant');
|
||||
this.classList.add('bg-heritage-red', 'text-white', 'border-heritage-red');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle focus state for visual feedback
|
||||
const inputs = document.querySelectorAll('input, textarea');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.classList.add('scale-[1.01]');
|
||||
input.parentElement.style.transition = 'transform 0.2s ease';
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
input.parentElement.classList.remove('scale-[1.01]');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店详情编辑页",
|
||||
"screenId": "dd6ecea758ca4597bdf8260e1bf01411",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:39.140Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1967px; 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">
|
||||
<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": {
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface": "#faf9f7",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-background": "#1a1c1b",
|
||||
"outline": "#8d706e",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"subtle-gray": "#999999",
|
||||
"on-secondary": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary": "#735c00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-primary": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-container": "#fed65b",
|
||||
"primary": "#820012",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-bright": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-container": "#745c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-highest": "#e3e2e0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"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;
|
||||
}
|
||||
.fill-icon {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.ticket-notch {
|
||||
position: relative;
|
||||
}
|
||||
.ticket-notch::before, .ticket-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #faf9f7;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
.ticket-notch::before { top: 20%; }
|
||||
.ticket-notch::after { bottom: 20%; }
|
||||
|
||||
#carousel-container {
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.carousel-item {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface selection:bg-heritage-red selection:text-white">
|
||||
<!-- Top AppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex items-center justify-between px-margin-page h-14 transition-all duration-300 bg-transparent" id="top-app-bar">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full glass-effect active:scale-95 transition-transform bg-white/20" onclick="history.back()">
|
||||
<span class="material-symbols-outlined text-on-surface">arrow_back</span>
|
||||
</button>
|
||||
<div class="font-headline-md text-headline-md text-heritage-red font-bold transition-opacity duration-300 opacity-0" id="header-title">杜康·白水古酿</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full glass-effect active:scale-95 transition-transform bg-white/20">
|
||||
<span class="material-symbols-outlined text-on-surface">share</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pb-24">
|
||||
<!-- Image Carousel -->
|
||||
<section class="relative w-full aspect-square bg-white overflow-hidden">
|
||||
<div class="flex w-full h-full overflow-x-auto hide-scrollbar" id="carousel-container">
|
||||
<div class="carousel-item flex-shrink-0 w-full h-full">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium close-up studio photograph of a Dukang Baijiu bottle, featuring elegant Chinese calligraphy and heritage branding. The bottle is set against a warm parchment background with soft, sophisticated lighting that highlights the crystalline liquid and the intricate label design. The mood is authoritative and distinguished, reflecting a thousand-year legacy." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiJm2VWrwCv8wnC-dBgSfvlf66izs6faELgWXlyIAUpYWOKrLwfeyB0c0XT0vmDVJnfIkzbLNm_4NYASwH_ce7BotJDLCJcd3SfnxKIe7eso-c4mzzR-4LTv4y3ELhpXHfxVyu-5LVUEwuofvUuzdJELV6CK4MIcLW_9rMaOuXSADfz0mpP-MspQvhKhxJ0wpdAiBxBq8rqHNSKjx8dU7lcVc_smZGunmtkbhmnjAn4JU8nCDnvuDU5HECng82FbFM6rzdkFHoYR0">
|
||||
</div>
|
||||
<div class="carousel-item flex-shrink-0 w-full h-full">
|
||||
<img class="w-full h-full object-cover" data-alt="A lifestyle product shot of a Dukang liquor gift box opened on a dark wood table. Inside, the bottle sits nestled in gold silk lining. Beside it is a small traditional ceramic cup. The background is softly blurred, showing a high-end Chinese dining environment with warm amber lighting. The aesthetic is minimalist with cultural depth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzBBRn0yOqhRJ4CbTEOx1aF4fJVIhsbIZgFR9RgdB5E0xcs_RdR1khLyR0OzysGzkW_tnrZTb0avVEZ91Nd81KRItrlTjrEFvrYj0Qag45iRo5wioY8E2gK5NGhILvDpWxakuSPIGGp00nLY_5HuuLwr-0_8ZabaUFAR4C9loXIX_lgCAgRMt7An_H0AitIOBvwOfNVTMkz-P7dXQFzSUvYpFvcmvzAOIWsbipnTrgNU5H8Os37-soM-eWUCfNtJUaD_uqQ3mwJI8">
|
||||
</div>
|
||||
<div class="carousel-item flex-shrink-0 w-full h-full">
|
||||
<img class="w-full h-full object-cover" data-alt="A macro shot detailing the texture of the Dukang liquor label, showing embossed gold foil lettering and red seal of quality. The paper has a subtle tactile texture like aged rice paper. The lighting is high-key and professional, emphasizing the premium quality and craftsmanship of the product." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSSmH1ygwminKXiiIqOymnukbKJfnhfHnmCJTbNN2BEN2yF3vPtoMYOBAsDHxuldT9xg_ZBZhjh6QJjabvhu_HFB3WcNU53q_AjsD0mVWXInongiXqjOh8R-B2QW9Jfs786j3TSi2gVE57Ad1WskJji-xytI3aFEuk873xGXgdkn6EgzoAMOsKRaWF27DE3GBa48qAARYR92aEyMU_hcte6L2lkaF9brXshSmujiA_3ACK21TLsT2DCJ1Djacvh25J0LZ8v7BYVkk">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="absolute bottom-4 left-0 w-full flex justify-center gap-1.5 pointer-events-none">
|
||||
<div class="dot w-6 h-1 rounded-full bg-heritage-red transition-all duration-300"></div>
|
||||
<div class="dot w-1.5 h-1 rounded-full bg-subtle-gray/30 transition-all duration-300"></div>
|
||||
<div class="dot w-1.5 h-1 rounded-full bg-subtle-gray/30 transition-all duration-300"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Info Section -->
|
||||
<section class="px-margin-page pt-stack-md">
|
||||
<div class="flex items-baseline gap-1 mb-2">
|
||||
<span class="font-headline-md text-heritage-red text-[16px]">¥</span>
|
||||
<span class="font-headline-xl text-headline-xl text-heritage-red">599</span>
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black font-bold mb-1">杜康·白水古酿 500ml</h1>
|
||||
<p class="font-body-md text-on-surface-variant mb-6">清香型 52度 礼盒装</p>
|
||||
<!-- Promotion Card -->
|
||||
<div class="relative bg-gradient-to-br from-[#FFF9E6] to-[#FFF0C2] rounded-xl p-4 mb-stack-lg shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-aged-amber/10 overflow-hidden">
|
||||
<!-- Decorative element -->
|
||||
<div class="absolute -right-4 -top-4 w-20 h-20 bg-heritage-red/5 rounded-full blur-2xl"></div>
|
||||
<div class="flex items-center gap-3 mb-2 relative z-10">
|
||||
<div class="w-10 h-10 rounded-full bg-heritage-red flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-[20px] fill-icon">confirmation_number</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-secondary-fixed-variant font-bold">买杜康美酒 · 享全城好客礼遇 <span class="text-heritage-red ml-1">¥200</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-md text-on-secondary-fixed-variant/80 pl-13 leading-relaxed relative z-10">购酒即享本城专属好客权益，为您安排一场地道饭局。权益金可直接用于本地签约门店消费，到店享用，醇香美酒配佳肴。</p>
|
||||
<div class="absolute bottom-2 right-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-[64px]">restaurant</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Details -->
|
||||
<section class="bg-white rounded-t-3xl pt-stack-lg">
|
||||
<div class="px-margin-page mb-stack-md flex items-center gap-2">
|
||||
<div class="w-1 h-5 bg-heritage-red rounded-full"></div>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">商品详情</h2>
|
||||
</div>
|
||||
<div class="space-y-0">
|
||||
<div class="w-full">
|
||||
<img class="w-full block" data-alt="An elegant long-form digital graphic for the product description. Top part shows a wide landscape of the traditional Dukang brewery area with mist-covered mountains and ancient architecture. Middle part features poetic Chinese typography explaining the brewing heritage and the 52-degree purity. The style is clean, modern, and editorial with a high-end parchment texture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2-IVt-apnEkj9QQ4rkjN5lb0oymgiJX1XfzAH8pRzSFzMVjYDtlMWE8GwpS7I6sth7CXJiKwNm9c-hpsYKqQ6pyb48yUO6NG8vky4E6qCjwgaCsCnlvoOVLroG4bmmL16-xl4-o28ZMvtzMoCKIiUK-_dQF7lx66nwnxFOP7PcUddDK-UItoO-Gp5iqxf6kp_-t_tjoPpo_ba25DBPG1QThlI8IJYqb9bNng5mIQzdnNul24rBy_JmgS5nsaYK0Wvo7907WT3ch4">
|
||||
</div>
|
||||
<div class="px-margin-page py-stack-lg space-y-6">
|
||||
<div class="text-center space-y-2">
|
||||
<h4 class="font-headline-md text-heritage-red font-bold">千年杜康 · 唯有此处</h4>
|
||||
<p class="font-body-md text-on-surface-variant leading-relaxed">
|
||||
选自白水杜康核心产区，取山泉之灵气，集五谷之精华。古法酿造工艺，历经九九八十一道工序，方得这一口醇厚绵甜。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Feature Grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-low p-4 rounded-xl text-center space-y-2 border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-heritage-red">water_drop</span>
|
||||
<div class="font-headline-md text-ink-black text-[14px]">泉水酿造</div>
|
||||
<div class="text-[12px] text-subtle-gray">甘冽清甜 灵动自然</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-4 rounded-xl text-center space-y-2 border border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-heritage-red">grain</span>
|
||||
<div class="font-headline-md text-ink-black text-[14px]">精选五谷</div>
|
||||
<div class="text-[12px] text-subtle-gray">传统比例 匠心发酵</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<img class="w-full block" data-alt="A high-resolution image of the bottle in a professional lifestyle setting. A hand is seen pouring the clear liquid into a small glass, capturing the viscous 'oil' like quality of the high-grade baijiu. The lighting is moody and warm, creating high contrast and a premium luxury feel. Soft background elements of a high-end restaurant table are visible." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBe0yoN6VDKu2SVqwOy9RedE-6Rh56-a_5ygo5raDOU3Y65m1fz9hNmqbrIpvTW8RsqAwPd3zfHnw96Bb4Ct7jtmq-pil1MEvPBL4G3C8Sym_LVuEzK---hgdim1wVx-qP1v1EPex2fXpVQEY27rEVINVaXk2L1F5elWKQhMHWVXjU8B2jvtyNzmlXBpynsocnCgcwM4RhaqYdVf1JZxcfScmJ34dO3QAUIli-RPzEYynLtnW2x4lEbRrpAdBnK2fuSggLnJU1nfSw">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 bg-white/90 glass-effect border-t border-outline-variant/10 px-4 pb-safe pt-3 h-20 flex items-center gap-4">
|
||||
<div class="flex gap-4 px-2">
|
||||
<button class="flex flex-col items-center justify-center gap-1 active:opacity-70 transition-opacity">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">home</span>
|
||||
<span class="text-[10px] font-medium text-on-surface-variant">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center gap-1 active:opacity-70 transition-opacity">
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<button class="flex-1 bg-heritage-red text-white h-12 rounded-full font-bold flex items-center justify-center shadow-lg active:scale-[0.98] transition-all duration-150">
|
||||
立即购买
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
// Scroll interaction for TopAppBar
|
||||
const header = document.getElementById('top-app-bar');
|
||||
const headerTitle = document.getElementById('header-title');
|
||||
const carousel = document.getElementById('carousel-container');
|
||||
const dots = document.querySelectorAll('.dot');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 100) {
|
||||
header.classList.add('bg-white', 'shadow-sm');
|
||||
header.classList.remove('bg-transparent');
|
||||
headerTitle.classList.add('opacity-100');
|
||||
headerTitle.classList.remove('opacity-0');
|
||||
// Update icon colors for white background
|
||||
header.querySelectorAll('.material-symbols-outlined').forEach(icon => {
|
||||
icon.classList.add('text-on-surface');
|
||||
});
|
||||
header.querySelectorAll('button').forEach(btn => {
|
||||
btn.classList.remove('bg-white/20');
|
||||
btn.classList.add('bg-transparent');
|
||||
});
|
||||
} else {
|
||||
header.classList.remove('bg-white', 'shadow-sm');
|
||||
header.classList.add('bg-transparent');
|
||||
headerTitle.classList.remove('opacity-100');
|
||||
headerTitle.classList.add('opacity-0');
|
||||
header.querySelectorAll('button').forEach(btn => {
|
||||
btn.classList.add('bg-white/20');
|
||||
btn.classList.remove('bg-transparent');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Carousel dots interaction
|
||||
carousel.addEventListener('scroll', () => {
|
||||
const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
|
||||
dots.forEach((dot, i) => {
|
||||
if (i === index) {
|
||||
dot.classList.add('w-6', 'bg-heritage-red');
|
||||
dot.classList.remove('w-1.5', 'bg-subtle-gray/30');
|
||||
} else {
|
||||
dot.classList.remove('w-6', 'bg-heritage-red');
|
||||
dot.classList.add('w-1.5', 'bg-subtle-gray/30');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "商品详情页",
|
||||
"screenId": "335c364915bb472d97e0ce2e2e60e21c",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:29.549Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html><html class="light" 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&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": {
|
||||
"outline": "#8d706e",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-primary": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary-container": "#fed65b",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#b3272c",
|
||||
"tertiary": "#37413b",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"primary-container": "#a61d24",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-container": "#4e5852",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#735c00",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary-fixed": "#ffdad7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.pay-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-md text-body-md">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 w-full z-50 flex items-center justify-between px-margin-page h-14 w-full bg-background">
|
||||
<button class="active:scale-95 transition-transform text-on-surface-variant flex items-center" onclick="window.history.back()">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">微信支付</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for balance -->
|
||||
</header>
|
||||
<main class="flex-1 pt-20 pb-32 px-margin-page overflow-y-auto">
|
||||
<!-- Order Summary Section -->
|
||||
<section class="flex flex-col items-center justify-center py-stack-lg mb-stack-lg">
|
||||
<div class="w-[60px] h-[60px] mb-stack-md rounded-xl overflow-hidden border border-outline-variant pay-shadow bg-surface">
|
||||
<img alt="Dukang Hospitality Logo" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLR81sOE7QSa5GthGekT_h8-8PyVXPo7yFRpK6-6XOWtxqZXTVd3pRUeileIX-biO_5wxBDbEv3SvVtC7A37xhWZVWEaXT64fAWTX0CgYeQcB5-Fp_Q25u6rEfZtrDOqpsqtg-IAotkSiAicuBK9sNB6Z2kZ5uZqQJEAd_RIJD_d_hcRJ5qaAdel3_ITruQ1BvqoFyIGhM8eRiRw9OLoyoRANkc26unFPA2CGv8Nbtl3TbVxZA8k0CyfwTCqTDF736Mwg1Ts6MB0A">
|
||||
</div>
|
||||
<p class="font-headline-md text-headline-md text-on-surface mb-stack-sm">杜康好客</p>
|
||||
<h2 class="font-headline-xl text-headline-xl text-primary font-bold">¥899.00</h2>
|
||||
</section>
|
||||
<!-- Payment Method List -->
|
||||
<section class="bg-surface-container-lowest rounded-xl pay-shadow overflow-hidden border border-surface-variant">
|
||||
<div class="px-margin-page py-stack-md flex items-center justify-between border-b border-surface-variant">
|
||||
<span class="text-on-surface-variant font-medium">订单信息</span>
|
||||
<span class="text-on-surface">酒水套餐 & 好客权益</span>
|
||||
</div>
|
||||
<!-- WeChat Pay Row -->
|
||||
<div class="px-margin-page py-stack-lg flex items-center justify-between active:bg-surface-container-low transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-stack-md">
|
||||
<div class="bg-[#07C160] w-9 h-9 rounded-full flex items-center justify-center">
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.15 14.85C17.15 15.68 16.48 16.35 15.65 16.35H8.35C7.52 16.35 6.85 15.68 6.85 14.85V9.15C6.85 8.32 7.52 7.65 8.35 7.65H15.65C16.48 7.65 17.15 8.32 17.15 9.15V14.85Z" fill="white"></path>
|
||||
<path d="M10.5 10.5C10.5 11.05 10.05 11.5 9.5 11.5C8.95 11.5 8.5 11.05 8.5 10.5C8.5 9.95 8.95 9.5 9.5 9.5C10.05 9.5 10.5 9.95 10.5 10.5Z" fill="white"></path>
|
||||
<path d="M15.5 10.5C15.5 11.05 15.05 11.5 14.5 11.5C13.95 11.5 13.5 11.05 13.5 10.5C13.5 9.95 13.95 9.5 14.5 9.5C15.05 9.5 15.5 9.95 15.5 10.5Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-lg text-body-lg text-on-surface font-medium">微信支付</p>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">推荐使用，便捷安全</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-success-green" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Informational Hint -->
|
||||
<div class="mt-stack-lg flex items-start gap-2 px-stack-sm">
|
||||
<span class="material-symbols-outlined text-outline text-[18px]">info</span>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant leading-relaxed">订单包含 ¥500 好客权益，支付成功后将发放至您的个人账户。</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Area -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 px-margin-page py-stack-md bg-surface border-t border-surface-variant/50">
|
||||
<button class="w-full bg-heritage-red text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-[0.98] transition-all pay-shadow mb-stack-md" id="pay-trigger">
|
||||
立即支付 ¥899.00
|
||||
</button>
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">verified_user</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">支付安全由微信支付保障</span>
|
||||
</div>
|
||||
<div class="h-6"></div> <!-- iPhone Safe Area Spacer -->
|
||||
</footer>
|
||||
<!-- Success Modal -->
|
||||
<div class="fixed inset-0 z-[100] hidden flex items-end justify-center" id="success-modal">
|
||||
<div class="absolute inset-0 bg-ink-black/40 backdrop-blur" onclick="closeModal()"></div>
|
||||
<div class="relative bg-surface w-full max-w-md rounded-t-3xl p-stack-lg animate-[slide-up_0.3s_ease-out] shadow-2xl">
|
||||
<div class="w-12 h-1 bg-surface-variant rounded-full mx-auto mb-stack-lg"></div>
|
||||
<div class="flex flex-col items-center py-stack-lg">
|
||||
<div class="w-20 h-20 bg-success-green/10 rounded-full flex items-center justify-center mb-stack-md">
|
||||
<span class="material-symbols-outlined text-success-green text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-stack-sm">支付成功</h3>
|
||||
<p class="text-body-md font-body-md text-on-surface-variant text-center max-w-[240px] mb-stack-lg">
|
||||
您的订单已处理完成，感谢您对杜康好客的支持。
|
||||
</p>
|
||||
<div class="w-full space-y-stack-md">
|
||||
<button class="w-full bg-primary text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-95 transition-transform" onclick="closeModal()">
|
||||
返回订单列表
|
||||
</button>
|
||||
<button class="w-full border border-outline text-on-surface font-body-lg text-body-lg py-4 rounded-xl active:bg-surface-variant transition-colors" onclick="closeModal()">
|
||||
查看订单详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes slide-up {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const payTrigger = document.getElementById('pay-trigger');
|
||||
const successModal = document.getElementById('success-modal');
|
||||
|
||||
payTrigger.addEventListener('click', () => {
|
||||
// Simulate payment loading
|
||||
payTrigger.disabled = true;
|
||||
payTrigger.innerHTML = '<span class="inline-block animate-spin mr-2">◌</span> 正在安全支付...';
|
||||
|
||||
setTimeout(() => {
|
||||
successModal.classList.remove('hidden');
|
||||
payTrigger.disabled = false;
|
||||
payTrigger.innerHTML = '立即支付 ¥899.00';
|
||||
}, 1200);
|
||||
});
|
||||
|
||||
function closeModal() {
|
||||
successModal.classList.add('hidden');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "微信支付页",
|
||||
"screenId": "e72f2cf24af34e2bb29ae2e753bb57a1",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:40.944Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -0,0 +1,359 @@
|
||||
<!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;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"/>
|
||||
<!-- Shared Tailwind Config -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-background": "#1a1c1b",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"aged-amber": "#FFBF00",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error-container": "#93000a",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"subtle-gray": "#999999",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed": "#410004",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"outline-variant": "#e2bebc",
|
||||
"error-container": "#ffdad6",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"outline": "#8d706e",
|
||||
"surface-tint": "#b3272c",
|
||||
"ink-black": "#1A1A1A",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary": "#37413b",
|
||||
"on-error": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.coupon-notch-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: inset 1px 0 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: #faf9f7;
|
||||
}
|
||||
|
||||
.hero-texture {
|
||||
background-image: radial-gradient(circle at 20% 30%, rgba(166, 29, 36, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(166, 29, 36, 0.03) 0%, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background dark:bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<div class="flex items-center gap-1 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="location_on">location_on</span>
|
||||
<span class="font-label-md text-label-md text-on-surface">洛阳市</span>
|
||||
</div>
|
||||
<h1 class="font-headline-md text-headline-md-mobile font-bold text-primary dark:text-inverse-primary absolute left-1/2 -translate-x-1/2">
|
||||
好客权益
|
||||
</h1>
|
||||
<button class="flex items-center justify-center h-10 w-10 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 px-margin-page space-y-stack-md">
|
||||
<!-- Benefits Hero Card -->
|
||||
<section class="relative overflow-hidden rounded-xl bg-surface-container-lowest border border-outline-variant/20 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-stack-md hero-texture">
|
||||
<div class="flex justify-between items-start mb-stack-md">
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant">当前好客权益余额</p>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-xl text-primary">¥</span>
|
||||
<span class="font-headline-xl text-primary text-[40px]">1,280.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<img alt="Dukang Logo" class="w-12 h-12 opacity-90 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCA8CB5k6AHjxBUOWxWS9fH8YbI3X4XAIs0UfAoj0m3G-MhuVkkRU6e5-hdA53Y5wsZYk9khbJfr4L7gUmGe2vdXCRo1MJrdqv1uwIYfoqsWzJ7i1OzMJmSkLZEUMnD7qY7PbXqZmgAIxDY5ll1bPGPVf8fS-uuBrJ3W2qiHUWEL5uncVvAUa4vJIu7AtjcMnwlSIIGdaErwmkWGZxUj5CSkwcPmXFmJ5eU-3BrQF_Bx1xt2TQAfYzf31fxudx-imHatOL-PhOKuDc"/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-6">
|
||||
<button class="flex items-center gap-1 text-primary active:scale-95 transition-transform group">
|
||||
<span class="font-label-md text-label-md font-semibold">查看权益明细</span>
|
||||
<span class="material-symbols-outlined text-[16px] group-hover:translate-x-0.5 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quick Action Button -->
|
||||
<section>
|
||||
<button class="w-full bg-heritage-red text-on-primary py-4 rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 shadow-[0px_4px_12px_rgba(166,29,36,0.2)] active:scale-[0.98] transition-all" onclick="handleStoreNavigation()">
|
||||
<span class="material-symbols-outlined" data-icon="storefront" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
去使用
|
||||
</button>
|
||||
</section>
|
||||
<!-- Tabs for Filtering -->
|
||||
<nav class="flex border-b border-outline-variant/10">
|
||||
<button class="flex-1 py-3 font-label-md text-label-md border-b-2 transition-all text-primary font-bold border-primary" id="tab-available" onclick="switchTab('available')">待使用</button>
|
||||
<button class="flex-1 py-3 font-label-md text-label-md transition-all text-on-surface-variant" id="tab-history" onclick="switchTab('history')">已用完/已过期</button>
|
||||
</nav>
|
||||
<!-- Benefit Cards List -->
|
||||
<div class="space-y-4" id="content-available">
|
||||
<!-- Card 1 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">500</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">杜康好客权益券</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">适用于合作酒店餐饮消费</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥200</span>
|
||||
<span>未使用 ¥300</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK998231</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">200</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">洛阳宴会专供券</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">指定门店可用，不设找零</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥50</span>
|
||||
<span>未使用 ¥150</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK881023</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="relative bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5">
|
||||
<div class="flex min-h-[128px]">
|
||||
<!-- Left Side: Value -->
|
||||
<div class="w-[100px] flex-shrink-0 bg-aged-amber flex flex-col items-center justify-center relative p-3 text-center">
|
||||
<span class="font-label-md text-[10px] text-on-secondary-container/80 mb-1 uppercase tracking-wider">好客权益</span>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<span class="text-sm font-bold text-on-secondary-container">¥</span>
|
||||
<span class="font-coupon-amount text-2xl text-on-secondary-container">580</span>
|
||||
</div>
|
||||
<div class="coupon-notch-right"></div>
|
||||
</div>
|
||||
<!-- Right Side: Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between overflow-hidden">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<h3 class="font-headline-md text-sm text-on-surface line-clamp-1 flex-1">杜康·大师系列好客权益</h3>
|
||||
<span class="bg-primary/10 text-primary text-[10px] px-2 py-0.5 rounded-full font-bold whitespace-nowrap flex-shrink-0">永久有效</span>
|
||||
</div>
|
||||
<p class="font-label-md text-[11px] text-on-surface-variant line-clamp-1">杜康村原址餐厅通用券</p>
|
||||
<div class="space-y-1.5 pt-1">
|
||||
<div class="flex justify-between text-[10px] font-label-md text-on-surface-variant">
|
||||
<span>已使用 ¥0</span>
|
||||
<span>未使用 ¥580</span>
|
||||
</div>
|
||||
<div class="w-full h-1.5 bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<span class="font-label-md text-[10px] text-subtle-gray/60 italic uppercase">NO. DK776512</span>
|
||||
<button class="text-primary font-bold font-label-md text-xs active:opacity-60 transition-opacity">立即核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-20 space-y-4 hidden" id="content-history">
|
||||
<span class="material-symbols-outlined text-[64px] text-outline-variant" data-icon="history_edu">history_edu</span>
|
||||
<p class="font-body-md text-on-surface-variant">暂无过期或已使用的权益记录</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center py-base px-2 bg-surface pb-safe z-50 rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] border-t border-outline-variant/10"><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="home">home</span>
|
||||
<span class="font-label-md text-label-md">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
|
||||
<span class="font-label-md text-label-md">门店</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-primary font-bold hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="card_giftcard" style="font-variation-settings: 'FILL' 1;">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md">好客权益</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-label-md text-label-md">我的</span>
|
||||
</a></nav>
|
||||
<script>
|
||||
function switchTab(tab) {
|
||||
const availableTab = document.getElementById('tab-available');
|
||||
const historyTab = document.getElementById('tab-history');
|
||||
const availableContent = document.getElementById('content-available');
|
||||
const historyContent = document.getElementById('content-history');
|
||||
|
||||
if (tab === 'available') {
|
||||
availableTab.classList.add('text-primary', 'font-bold', 'border-primary');
|
||||
availableTab.classList.remove('text-on-surface-variant');
|
||||
historyTab.classList.remove('text-primary', 'font-bold', 'border-primary');
|
||||
historyTab.classList.add('text-on-surface-variant');
|
||||
|
||||
availableContent.classList.remove('hidden');
|
||||
historyContent.classList.add('hidden');
|
||||
} else {
|
||||
historyTab.classList.add('text-primary', 'font-bold', 'border-primary');
|
||||
historyTab.classList.remove('text-on-surface-variant');
|
||||
availableTab.classList.remove('text-primary', 'font-bold', 'border-primary');
|
||||
availableTab.classList.add('text-on-surface-variant');
|
||||
|
||||
historyContent.classList.remove('hidden');
|
||||
availableContent.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function handleStoreNavigation() {
|
||||
const btn = event.currentTarget;
|
||||
btn.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
btn.style.transform = '';
|
||||
alert('正在为您寻找附近的合作餐厅...');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.active\\:scale-95').forEach(el => {
|
||||
el.addEventListener('touchstart', () => el.style.transform = 'scale(0.95)');
|
||||
el.addEventListener('touchend', () => el.style.transform = '');
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "好客权益专页",
|
||||
"screenId": "8bda47b8349443afb19d5b22251e4b21",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:44.362Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,332 @@
|
||||
<!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" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400&family=Inter:wght@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">
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.coupon-notch::before { left: -8px; }
|
||||
.coupon-notch::after { right: -8px; }
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.number-input::-webkit-inner-spin-button,
|
||||
.number-input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse-red {
|
||||
0% { box-shadow: 0 0 0 0 rgba(166, 29, 36, 0.2); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(166, 29, 36, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(166, 29, 36, 0); }
|
||||
}
|
||||
.active-timer {
|
||||
animation: pulse-red 2s infinite;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"error-container": "#ffdad6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary": "#735c00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface selection:bg-heritage-red/20">
|
||||
<!-- Top AppBar -->
|
||||
<header class="bg-surface dark:bg-on-background w-full sticky top-0 flex items-center justify-between px-margin-page h-16 z-50 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<button class="hover:opacity-80 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-heritage-red">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">好客权益核销</h1>
|
||||
<button class="hover:opacity-80 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-heritage-red">help_outline</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="px-margin-page py-stack-md pb-32">
|
||||
<!-- Balance Card -->
|
||||
<section class="mb-stack-lg">
|
||||
<div class="relative overflow-hidden rounded-xl bg-primary-container p-stack-lg shadow-[0px_4px_20px_rgba(166,29,36,0.1)] text-on-primary-container">
|
||||
<!-- Background texture/pattern -->
|
||||
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 24px 24px;"></div>
|
||||
<div class="relative z-10 flex flex-col items-center text-center">
|
||||
<span class="font-label-md text-label-md uppercase tracking-widest opacity-80 mb-2">当前好客权益可用余额</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-lg text-headline-lg">¥</span>
|
||||
<span class="font-headline-xl text-[48px] leading-none tracking-tight">500.00</span>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Transaction Form -->
|
||||
<div class="space-y-stack-md">
|
||||
<!-- Store Selector -->
|
||||
|
||||
<!-- Amount Input -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-surface-container-highest">
|
||||
<label class="block font-label-md text-on-surface-variant mb-4">核销金额 (¥)</label>
|
||||
<div class="flex items-center border-b-2 border-surface-container-highest focus-within:border-heritage-red transition-colors pb-2">
|
||||
<span class="text-headline-xl text-ink-black mr-2">¥</span>
|
||||
<input class="number-input w-full bg-transparent border-none focus:ring-0 text-[40px] font-bold text-ink-black placeholder:text-surface-container-highest h-16" placeholder="0.00" step="0.01" type="number">
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between items-center text-label-md">
|
||||
<span class="text-on-surface-variant">单次最高可核销 ¥500.00</span>
|
||||
<button class="text-heritage-red font-bold">全部核销</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Button -->
|
||||
<button class="w-full bg-heritage-red text-on-primary py-4 rounded-xl font-headline-md text-headline-md shadow-lg shadow-heritage-red/20 active:scale-95 transition-all flex items-center justify-center gap-2" id="generate-btn">
|
||||
<span class="material-symbols-outlined">qr_code_2</span>
|
||||
生成核销码
|
||||
</button>
|
||||
</div>
|
||||
<!-- Security Notice -->
|
||||
<div class="mt-stack-lg flex items-start gap-2 px-2">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[18px]">shield</span>
|
||||
<p class="text-[12px] text-on-surface-variant leading-relaxed">
|
||||
安全提示：请在核销前核实金额，核销码将在 5 分钟后自动失效。
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- QR Code Modal (Hidden by default) -->
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center p-margin-page opacity-0 pointer-events-none transition-all duration-300" id="qr-modal">
|
||||
<div class="absolute inset-0 bg-ink-black/60 backdrop-blur-sm"></div>
|
||||
<div class="relative w-full max-w-sm bg-surface-container-lowest rounded-2xl overflow-hidden shadow-2xl scale-90 transition-transform duration-300" id="qr-container">
|
||||
<div class="p-6 text-center border-b border-surface-container">
|
||||
<h3 class="font-headline-md text-headline-md text-heritage-red mb-1">正在核销</h3>
|
||||
<p class="text-body-md text-on-surface-variant">请向收银员出示此码</p>
|
||||
</div>
|
||||
<div class="p-8 flex flex-col items-center">
|
||||
<!-- QR Placeholder -->
|
||||
<div class="relative p-3 border-4 border-heritage-red/10 rounded-xl mb-6">
|
||||
<div class="w-48 h-48 bg-white flex items-center justify-center relative">
|
||||
<img class="w-full h-full object-contain" data-alt="A clean, minimalist high-contrast digital QR code on a pristine white background. The QR code has a small circular logo in the center featuring a stylized Chinese character for 'Du'. The visual style is premium, sharp, and modern, illuminated by soft studio lighting with a slight heritage-red accent border around the code area." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOWO_blN4PtKLz6L9PsWbRPoG5Kl7BCROKAIfGW1cegiEfRUvcmEvOWAT5AbhgCgbXpzlfPmqFJ3GJS9vGzE7kimBIZMVPysnDOUc7vBPmsepAGy9-2DLpGIaa_j_cLS2ukP835eFXS3ER0n6uRhv7RV231q8Bx3ma_wgOkJPqnO9K8BXIfa21PaBo459_GfYQcfrJJVtu1YaL23eKLNG5dF4nhI0pbVY5jhMwbXtfa_R1_xyiG1CACH7zZpO2njENTEZvB-BrZ3s">
|
||||
<!-- Scanning line animation -->
|
||||
<div class="absolute inset-x-0 h-1 bg-heritage-red/40 shadow-[0_0_10px_rgba(166,29,36,0.5)] top-0 animate-[scan_3s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-headline-lg font-bold text-ink-black" id="timer">04:59</span>
|
||||
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest">失效倒计时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-surface-container-low rounded-lg p-3 text-center">
|
||||
<p class="text-label-md text-on-surface-variant">待核销金额</p>
|
||||
<p class="text-headline-md text-heritage-red">¥ <span id="confirm-amount" class="">200.00</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-4 bg-surface-container-highest text-ink-black font-bold hover:bg-surface-variant transition-colors" id="close-modal">
|
||||
取消核销
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Sheet Store Selector (Hidden by default) -->
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
|
||||
<script>
|
||||
// Modal Logic
|
||||
const generateBtn = document.getElementById('generate-btn');
|
||||
const qrModal = document.getElementById('qr-modal');
|
||||
const qrContainer = document.getElementById('qr-container');
|
||||
const closeModal = document.getElementById('close-modal');
|
||||
const amountInput = document.querySelector('input[type="number"]');
|
||||
const confirmAmount = document.getElementById('confirm-amount');
|
||||
|
||||
generateBtn.addEventListener('click', () => {
|
||||
const val = amountInput.value || "0.00";
|
||||
confirmAmount.textContent = parseFloat(val).toFixed(2);
|
||||
qrModal.classList.remove('opacity-0', 'pointer-events-none');
|
||||
qrContainer.classList.remove('scale-90');
|
||||
startTimer();
|
||||
});
|
||||
|
||||
closeModal.addEventListener('click', () => {
|
||||
qrModal.classList.add('opacity-0', 'pointer-events-none');
|
||||
qrContainer.classList.add('scale-90');
|
||||
stopTimer();
|
||||
});
|
||||
|
||||
// Timer Logic
|
||||
let timerInterval;
|
||||
function startTimer() {
|
||||
let seconds = 300;
|
||||
const timerEl = document.getElementById('timer');
|
||||
timerEl.parentElement.classList.add('active-timer');
|
||||
|
||||
timerInterval = setInterval(() => {
|
||||
seconds--;
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
timerEl.textContent = `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timerInterval);
|
||||
alert('核销码已失效，请重新生成');
|
||||
closeModal.click();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopTimer() {
|
||||
clearInterval(timerInterval);
|
||||
document.getElementById('timer').textContent = "05:00";
|
||||
document.getElementById('timer').parentElement.classList.remove('active-timer');
|
||||
}
|
||||
|
||||
// Bottom Sheet Logic
|
||||
function toggleBottomSheet() {
|
||||
const sheet = document.getElementById('bottom-sheet');
|
||||
const content = document.getElementById('sheet-content');
|
||||
|
||||
if (sheet.classList.contains('opacity-0')) {
|
||||
sheet.classList.remove('opacity-0', 'pointer-events-none');
|
||||
content.classList.remove('translate-y-full');
|
||||
} else {
|
||||
sheet.classList.add('opacity-0', 'pointer-events-none');
|
||||
content.classList.add('translate-y-full');
|
||||
}
|
||||
}
|
||||
|
||||
// Simple keyframe for scanning line (embedded in HTML style above)
|
||||
</script>
|
||||
<style>
|
||||
@keyframes scan {
|
||||
0%, 100% { top: 0%; opacity: 0.1; }
|
||||
50% { top: 95%; opacity: 0.8; }
|
||||
}
|
||||
.pb-safe {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "餐券核销页",
|
||||
"screenId": "5c456aac9410425dbccefb4c9ed25c4e",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:37.999Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" 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@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">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"outline-variant": "#e2bebc",
|
||||
"aged-amber": "#FFBF00",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"subtle-gray": "#999999",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary": "#820012",
|
||||
"surface-container": "#efeeec",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"primary-container": "#a61d24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"outline": "#8d706e",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface-tint": "#b3272c",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"background": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-dim": "#dadad8",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-container": "#ffb9b4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
|
||||
"headline-md": ["18px", { "lineHeight": "26px", "fontWeight": "600" }],
|
||||
"headline-lg-mobile": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"headline-xl": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.premium-bg {
|
||||
background: radial-gradient(circle at 50% 50%, #faf9f7 0%, #f4f3f1 100%);
|
||||
background-image:
|
||||
url("https://www.transparenttextures.com/patterns/natural-paper.png"),
|
||||
radial-gradient(circle at 50% 50%, #faf9f7 0%, #f4f3f1 100%);
|
||||
}
|
||||
.cloud-pattern {
|
||||
opacity: 0.03;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/oriental-tiles.png");
|
||||
pointer-events: none;
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(15px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.location-glow {
|
||||
box-shadow: 0 0 40px 10px rgba(166, 29, 36, 0.08);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-ink-black min-h-screen flex flex-col items-center premium-bg relative overflow-hidden">
|
||||
<!-- Decorative Pattern Overlay -->
|
||||
<div class="absolute inset-0 cloud-pattern"></div>
|
||||
<!-- Subtle Border -->
|
||||
<div class="absolute inset-4 border border-heritage-red/5 pointer-events-none rounded-xl"></div>
|
||||
<main class="relative z-10 flex-1 w-full max-w-md flex flex-col items-center justify-center px-margin-page py-12 text-center">
|
||||
<!-- Logo Section -->
|
||||
<div class="mb-12 fade-in" style="animation-delay: 0.1s;">
|
||||
<img alt="Dukang Royal Logo" class="w-[150px] h-[150px] object-contain drop-shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3IUJWK-i7jw318irlvTJsKs_8962q64yBy8I6f6yl41ra6iiam_rcrDPFufjn1n4sNi9QCTWA8NisLnb51mMFoTOTj7lqRdNx6dOWTD-aRyW1LjqkrnJLlGDV5z5GeUhMmFquCwhpVm3Xrt4RBfs7RcBOBm06jB2QspOuEn-2nLvtpipBoBzmrqdAIpEAWNGIhgBUFVb6IDoeHy1hc4z2umn0dXF4vljKx9IHLpZJZL-a8wQhPBFjQKEXTXpG6SfVZOLOtG6kvWU">
|
||||
</div>
|
||||
<!-- Enhanced Location Illustration -->
|
||||
<div class="mb-10 fade-in" style="animation-delay: 0.2s;">
|
||||
<div class="relative inline-flex items-center justify-center">
|
||||
<!-- Multi-layered animated background -->
|
||||
<div class="absolute w-28 h-28 bg-heritage-red/5 rounded-full animate-ping opacity-20"></div>
|
||||
<div class="absolute w-24 h-24 bg-heritage-red/10 rounded-full location-glow"></div>
|
||||
<div class="relative w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-md">
|
||||
<span class="material-symbols-outlined text-heritage-red text-5xl" style="font-variation-settings: 'FILL' 1, 'wght' 300;">location_on</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Section -->
|
||||
<div class="space-y-4 mb-14 fade-in" style="animation-delay: 0.3s;">
|
||||
<h2 class="text-headline-xl font-headline-xl text-on-surface tracking-tight">发现本地服务</h2>
|
||||
<p class="text-body-lg font-body-lg text-on-surface-variant leading-relaxed px-4">
|
||||
开启位置权限，为您匹配最近的配送城市及本地专属优惠。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Action Buttons Section -->
|
||||
<div class="w-full space-y-5 fade-in px-2" style="animation-delay: 0.4s;">
|
||||
<!-- Primary Button -->
|
||||
<button class="w-full h-14 bg-heritage-red hover:bg-primary transition-all text-white rounded-xl font-headline-md text-headline-md flex items-center justify-center shadow-[0_8px_20px_-6px_rgba(166,29,36,0.35)] active:scale-[0.98] active:shadow-inner">
|
||||
允许获取位置
|
||||
</button>
|
||||
<!-- Secondary Button -->
|
||||
<button class="w-full h-14 bg-transparent text-on-surface-variant font-body-md text-body-md flex items-center justify-center hover:bg-white/50 rounded-xl transition-colors border border-outline/10">
|
||||
手动选择城市
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
document.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('touchstart', () => {
|
||||
button.style.transform = 'scale(0.97)';
|
||||
});
|
||||
button.addEventListener('touchend', () => {
|
||||
button.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "定位授权页面 - 中文版",
|
||||
"screenId": "c5555bc49c5b43b1be6a285f9cc6968b",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:48.711Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -0,0 +1,394 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN" style="width: 390px; height: 1292px; 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
.coupon-notch::before { top: -6px; }
|
||||
.coupon-notch::after { bottom: -6px; }
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
right: -20px;
|
||||
height: 2px;
|
||||
background-color: #e3e2e0;
|
||||
z-index: 0;
|
||||
}
|
||||
.step-line-active {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
|
||||
/* Smooth backdrop blur for premium feel */
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"error-container": "#ffdad6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary": "#735c00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen pb-32">
|
||||
<!-- Top Navigation Anchor -->
|
||||
<header class="bg-surface sticky top-0 w-full z-50 flex items-center justify-between px-margin-page h-16 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">arrow_back_ios</span>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">share</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">more_horiz</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page py-stack-md space-y-stack-md">
|
||||
<!-- Status Banner -->
|
||||
<section class="relative overflow-hidden bg-heritage-red rounded-xl p-6 text-on-primary shadow-lg">
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute -right-10 -top-10 opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile font-bold">配送中</h2>
|
||||
</div>
|
||||
<p class="font-body-md opacity-90">您的佳酿正在赶往您的餐桌，请保持电话畅通</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Delivery Tracker -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex justify-between items-start pt-2 px-2">
|
||||
<!-- Step 1 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line step-line-active"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[16px] text-white">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-on-surface">下单成功</span>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line step-line-active"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[16px] text-white">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-on-surface">出库中</span>
|
||||
</div>
|
||||
<!-- Step 3 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red ring-4 ring-primary-fixed flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-heritage-red font-bold">配送中</span>
|
||||
</div>
|
||||
<!-- Step 4 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-highest flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-subtle-gray">待签收</span>
|
||||
</div>
|
||||
<!-- Step 5 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-highest flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-subtle-gray">完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Details -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex gap-4 mb-4">
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium close-up studio photograph of a traditional Chinese Baijiu bottle, Dukang brand, with intricate red and gold labels. The bottle is set against a soft, creamy white background with elegant lighting that emphasizes its crystalline glass texture and heritage design. The aesthetic is luxurious, modern, and clean." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzuUQHbRF9nOvLF67TdN4XXaspszoFFZ5xOzi2XZfOTe9luzpHxRmFm5dcWCpC19FnbbjQUZX-zmIjLa47A3m164tMTLEQuhtQOLDgpC4-vXGSmE9y0yg97HOVaJRtmGNf_Rl7IP_9ykADHu5LIrtrTRHcxgA-Au7vEn8skrNHeDsWnJ1z0wb3gzGCZREiS3l7QfRJX33b2Q4sBBmJpjaDuNgQ4eOWsgkB_V-5JIUcQTljWvxkyCoMh2eRCEf0B9t06NNL0951UsI"/>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md leading-tight mb-1">杜康·御享15年 52度 浓香型白酒 500ml</h3>
|
||||
<p class="text-on-surface-variant text-label-md">规格：单瓶装（带礼袋）</p>
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-heritage-red font-bold text-label-md">¥</span>
|
||||
<span class="text-heritage-red font-bold text-headline-lg-mobile">1,288</span>
|
||||
</div>
|
||||
<span class="text-on-surface-variant text-body-md font-medium">x1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Special Section -->
|
||||
<div class="bg-aged-amber/10 rounded-lg p-4 mt-4 border border-aged-amber/20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-aged-amber rounded-full flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-md text-headline-md text-secondary-fixed-variant">¥200</span>
|
||||
<span class="font-label-md text-label-md text-on-secondary-fixed-variant">好客权益</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-secondary-fixed-variant opacity-70">全城100+餐厅通用</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-aged-amber text-on-secondary-fixed-variant font-bold px-4 py-2 rounded-full text-label-md shadow-sm hover:opacity-90 transition-opacity">
|
||||
去使用
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Receiver Information -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h4 class="font-headline-md text-headline-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">location_on</span>
|
||||
收货信息
|
||||
</h4>
|
||||
<button class="flex items-center gap-1 text-heritage-red font-medium text-label-md active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
<span>修改</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">收货人</span>
|
||||
<span class="font-medium">张思远 138****8888</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start text-right">
|
||||
<span class="text-on-surface-variant flex-shrink-0">收货地址</span>
|
||||
<span class="font-medium ml-8">河南省洛阳市龙门大道266号 洛阳国宾酒店 102包间</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">配送方式</span>
|
||||
<span class="font-medium">小飞侠配送</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Order Metadata -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">info</span>
|
||||
订单信息
|
||||
</h4>
|
||||
<div class="space-y-3 pb-4 border-b border-surface-variant/30">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">订单编号</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">DK202310279981</span>
|
||||
<span class="text-heritage-red text-[10px] border border-heritage-red/30 px-1 rounded">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">创建时间</span>
|
||||
<span class="font-medium">2023-10-27 18:42:15</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">支付方式</span>
|
||||
<span class="font-medium">微信支付</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 space-y-2">
|
||||
<div class="flex justify-between text-on-surface-variant text-label-md">
|
||||
<span class="">商品总额</span>
|
||||
<span class="">¥1,288.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-on-surface-variant text-label-md">
|
||||
<span class="">运费</span>
|
||||
<span class="">¥0.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline pt-2">
|
||||
<span class="font-bold text-on-surface">实付金额</span>
|
||||
<span class="text-heritage-red font-bold text-headline-lg-mobile">¥1,288.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Action Bar (C-04 Customer Support focus) -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 bg-surface-container-lowest/90 glass-effect shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] px-margin-page pt-4 pb-safe flex gap-4">
|
||||
<button class="flex-1 border border-heritage-red text-heritage-red py-3 rounded-xl font-bold flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-[20px]">headset_mic</span>
|
||||
联系客服
|
||||
</button>
|
||||
<button class="flex-[1.5] bg-heritage-red text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 active:scale-95 transition-transform shadow-md">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory</span>
|
||||
确认收货
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Bottom Nav (Hidden on detail page as per rules, using action bar instead) -->
|
||||
<script>
|
||||
// Simple logic for the "Copy" interaction
|
||||
document.querySelector('.border-heritage-red\/30').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
btn.textContent = '已复制';
|
||||
btn.classList.add('bg-heritage-red', 'text-white');
|
||||
setTimeout(() => {
|
||||
btn.textContent = '复制';
|
||||
btn.classList.remove('bg-heritage-red', 'text-white');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Toggle sticky header shadow on scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (window.scrollY > 0) {
|
||||
header.classList.add('shadow-md');
|
||||
} else {
|
||||
header.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center p-margin-page">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-ink-black/60 backdrop-blur-sm"></div>
|
||||
<!-- Modal Container -->
|
||||
<div class="relative bg-surface rounded-xl w-full max-w-md overflow-hidden shadow-lg animate-in fade-in zoom-in duration-200">
|
||||
<div class="p-6 space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-2 text-heritage-red">
|
||||
<span class="material-symbols-outlined">location_on</span>
|
||||
<h3 class="font-headline-md text-headline-md">修改收货地址</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="bg-surface-container-low p-4 rounded-lg">
|
||||
<p class="text-body-md text-on-surface-variant leading-relaxed">
|
||||
温馨提示：系统将尝试为您拦截并修改地址。若拦截未成功，请在配送员联系时及时告知。若商品已按原地址签收，则无法支持二次派送，敬请谅解。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col gap-3 pt-2">
|
||||
<button class="w-full bg-heritage-red text-white py-3 rounded-xl font-bold active:scale-95 transition-transform shadow-md">
|
||||
确认修改
|
||||
</button>
|
||||
<button class="w-full border border-outline text-on-surface-variant py-3 rounded-xl font-bold active:scale-95 transition-transform">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "订单详情页 - 修改地址确认弹窗",
|
||||
"screenId": "0d6b680b635a4f3b8ef2f8c18cec463c",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:39.599Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
||||
<title>我的 - 杜康好客</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-tint": "#b3272c",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"primary": "#820012",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface": "#faf9f7",
|
||||
"status-blue": "#2A6EBB",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-primary-fixed": "#410004",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#dadad8",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-surface": "#1a1c1b",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"heritage-red": "#A61D24",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container": "#efeeec",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"background": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"inverse-surface": "#2f3130",
|
||||
"outline": "#8d706e",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e3e2e0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.heritage-gradient {
|
||||
background: linear-gradient(135deg, #820012 0%, #A61D24 40%, #D4A373 100%);
|
||||
}
|
||||
.paper-texture {
|
||||
background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png");
|
||||
opacity: 0.05;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.active-scale:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- Top Profile Header -->
|
||||
<header class="relative w-full heritage-gradient pt-16 pb-24 px-margin-page overflow-hidden">
|
||||
<!-- Background texture overlay -->
|
||||
<div class="absolute inset-0 paper-texture pointer-events-none"></div>
|
||||
<!-- Profile Content -->
|
||||
<div class="relative flex items-center space-x-4">
|
||||
<div class="relative">
|
||||
<div class="w-20 h-20 rounded-full border-2 border-white/30 overflow-hidden bg-white shadow-lg">
|
||||
<img class="w-full h-full object-cover" data-alt="A high-quality, professional headshot of a sophisticated middle-aged man with a warm and welcoming expression. He is dressed in business casual attire. The lighting is soft and cinematic, with a warm amber glow reflecting the premium Heritage Modernism aesthetic. The background is a blurred, elegant interior of a high-end hospitality lounge featuring traditional Chinese elements." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz_9Pnpk_Md4sEU6PXkeybus8oLZO9e-3pOpLuSwBX0jm_Z0JCfX1w2oZxz1VZayTh0PKUPjwjSuxJVX410fjtWFGR_f55f-nWppXWUweHRnEC7WyIWEqx4AyVHt-k02OhyaSGQfvY5cHG5IuRe9EqdcHy47gBQ82_cxGgX-DrKV4oYcwLoNRynAV0_xv2p1GOhisnQVulHwZcQClUJcP8q4nTY0Y3DR1w4ioa0DYTHePE43mLDJptjZcQqS7V8LihJdn4ze6fvQA">
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 bg-aged-amber rounded-full flex items-center justify-center border-2 border-primary shadow-sm">
|
||||
<span class="material-symbols-outlined text-[14px] text-primary" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-primary">李先生</h1>
|
||||
<div class="flex items-center mt-1 space-x-2">
|
||||
<span class="font-label-md text-label-md text-on-primary/80 tracking-wider">ID: DK88293401</span>
|
||||
<span class="bg-white/10 px-2 py-0.5 rounded-full font-label-md text-[10px] text-on-primary/90">至尊会员</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-on-primary active-scale">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Abstract Shapes for Modernism -->
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/5 rounded-full blur-3xl"></div>
|
||||
</header>
|
||||
<!-- Main Content Container -->
|
||||
<main class="relative -mt-10 px-margin-page pb-32 space-y-gutter-card">
|
||||
<!-- My Assets Section -->
|
||||
<section class="glass-card rounded-xl p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black flex items-center">
|
||||
<span class="material-symbols-outlined mr-2 text-primary">account_balance_wallet</span>
|
||||
我的资产
|
||||
</h2>
|
||||
<a class="font-label-md text-label-md text-subtle-gray flex items-center active-scale" href="#">
|
||||
查看明细 <span class="material-symbols-outlined text-[16px] ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-end justify-between bg-surface-container-lowest p-4 rounded-lg border border-outline-variant/30 relative overflow-hidden">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-on-surface-variant mb-1">好客权益余额</p>
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="font-coupon-amount text-coupon-amount text-primary">¥</span>
|
||||
<span class="font-coupon-amount text-[32px] text-primary">1,280.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md active-scale">
|
||||
去使用
|
||||
</button>
|
||||
</div>
|
||||
<!-- Subtle Amber Notch Decoration -->
|
||||
<div class="absolute -right-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-surface rounded-full"></div>
|
||||
<div class="absolute top-0 bottom-0 right-[4.5rem] border-r border-dashed border-outline-variant/50"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- My Orders Section -->
|
||||
<section class="glass-card rounded-xl p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">我的订单</h2>
|
||||
<a class="font-label-md text-label-md text-subtle-gray flex items-center active-scale" href="#">
|
||||
全部订单 <span class="material-symbols-outlined text-[16px] ml-1">chevron_right</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2"><button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">payments</span>
|
||||
<span class="absolute -top-1 -right-2 w-4 h-4 bg-primary text-white text-[10px] rounded-full flex items-center justify-center">2</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">待付款</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">package_2</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">待发货</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">local_shipping</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">配送中</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-2 active-scale">
|
||||
<span class="material-symbols-outlined text-[28px] text-on-surface-variant">task_alt</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">已完成</span>
|
||||
</button></div>
|
||||
</section>
|
||||
<!-- Services List -->
|
||||
<section class="glass-card rounded-xl overflow-hidden border border-heritage-red/5">
|
||||
<div class="divide-y divide-outline-variant/20">
|
||||
<!-- Service Item 1 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">location_on</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">地址管理</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
<!-- Service Item 2 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">storefront</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">可用门店</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
<!-- Service Item 3 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">headset_mic</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">联系客服</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="font-label-md text-label-md text-primary mr-1">在线中</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
</button>
|
||||
<!-- Service Item 4 -->
|
||||
<button class="w-full flex items-center justify-between p-5 active:bg-surface-container-low transition-colors text-left group">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">info</span>
|
||||
</div>
|
||||
<span class="font-body-md text-body-md text-ink-black">关于我们</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- App Version/Sign Out -->
|
||||
<div class="py-4 text-center">
|
||||
<p class="font-label-md text-label-md text-subtle-gray/60">杜康好客 V2.4.0</p>
|
||||
<button class="mt-4 font-label-md text-label-md text-primary active:opacity-60 transition-opacity">
|
||||
退出当前账号
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar (JSON Mapping) -->
|
||||
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 pb-safe bg-surface shadow-lg border-t border-outline-variant/30"><!-- Home -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<!-- Stores -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">storefront</span>
|
||||
<span class="font-label-md text-label-md mt-1">门店</span>
|
||||
</a>
|
||||
<!-- Benefits -->
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md mt-1">好客权益</span>
|
||||
</a>
|
||||
<!-- Profile (Active) -->
|
||||
<a class="flex flex-col items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-surface-container-low py-1 flex-1 transition-transform active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a></nav>
|
||||
<script>
|
||||
// Micro-interactions for scrolling
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
const scroll = window.scrollY;
|
||||
if (scroll > 100) {
|
||||
// Potential header shrinkage or styling change
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "我的 - 个人中心页",
|
||||
"screenId": "70b6f4222d2d4331a7cdf3e185a4c961",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:46.744Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,241 @@
|
||||
<!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, viewport-fit=cover" name="viewport">
|
||||
<title>确认订单 - 杜康·礼遇</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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": {
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"outline-variant": "#e2bebc",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"primary": "#820012",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-container": "#fed65b",
|
||||
"error": "#ba1a1a",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-surface": "#1a1c1b",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"success-green": "#2D6A4F"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.coupon-notch::before { left: -6px; }
|
||||
.coupon-notch::after { right: -6px; }
|
||||
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface flex items-center px-margin-page h-14 transition-transform active:scale-95">
|
||||
<button class="mr-4 text-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red">确认订单</h1>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 px-margin-page space-y-stack-md">
|
||||
<!-- Address Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex gap-3 active:opacity-80 transition-all cursor-pointer items-center">
|
||||
<div class="text-heritage-red">
|
||||
<span class="material-symbols-outlined" data-icon="location_on" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
||||
</div>
|
||||
<div class="flex-1"><span class="text-body-lg text-subtle-gray">请选择收货地址</span></div>
|
||||
<div class="self-center text-outline-variant">
|
||||
<span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-24 h-24 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium bottle of Dukang Imperial Reserve 15th Generation Chinese Baijiu displayed on a minimalist white pedestal. The bottle features elegant calligraphy and deep red accents, shot with soft, high-end studio lighting that highlights the amber liquid and crystalline glass. The background is a clean, heritage-style off-white with subtle paper texture, embodying the Heritage Modernism aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfqy5X1jKiMBB-L5amwR3xfLYbFBc_qsPbB9mdQZxWlV3rrOARPFVhLRDlW7r8Ig03O6c_ZJKLcVEsgYCblwKg8FZ4-EWwcc5bMNc3UsmBycu3bZ5E6S_aH9UBv0_nEP0sMD8rJsC_rMYBiGDMvRbd52taX-Ir_sfRiVvQu7ImFV-YvU54iXE2x51naVuR8qxwmK7YKitPClg0Pysga859a2-yiJ_ID0QR5xM2o84QbMwNyOEoDDTKSDNqG6J9jfeTsiIYb5vdVmc">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-ink-black">杜康·御享15代</h3>
|
||||
<p class="text-label-md text-subtle-gray mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<span class="font-headline-md text-heritage-red">¥899</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-8 h-8 rounded-lg border border-outline-variant flex items-center justify-center text-heritage-red active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-body-lg">remove</span>
|
||||
</button>
|
||||
<span class="font-headline-md text-ink-black w-4 text-center">1</span>
|
||||
<button class="w-8 h-8 rounded-lg bg-heritage-red flex items-center justify-center text-white active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-body-lg">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Coupon Preview -->
|
||||
<section class="bg-[#FFF5F5] border border-aged-amber/30 rounded-xl p-stack-md flex items-center justify-between coupon-notch overflow-hidden shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-2 py-1 rounded text-[10px] font-bold">好客权益</div>
|
||||
<span class="font-headline-md text-heritage-red">本单可享好客权益 ¥100</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Delivery Option -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex justify-between items-center">
|
||||
<span class="text-body-lg text-on-surface">配送方式</span>
|
||||
<div class="text-right">
|
||||
<p class="text-body-md text-on-surface">小飞侠配送</p>
|
||||
<p class="text-label-md text-success-green">预计24 小时内送达</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Price Summary -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] space-y-3">
|
||||
<div class="flex justify-between items-center text-body-md text-on-surface-variant">
|
||||
<span class="">商品总额</span>
|
||||
<span class="">¥899</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-body-md text-on-surface-variant">
|
||||
<span class="">运费</span>
|
||||
<span class="text-success-green">¥0.00</span>
|
||||
</div>
|
||||
<div class="pt-3 border-t border-surface-variant flex justify-between items-center">
|
||||
<span class="font-headline-md text-ink-black">合计</span>
|
||||
<span class="font-headline-xl text-heritage-red">¥899</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Bar -->
|
||||
<footer class="fixed bottom-0 w-full z-50 bg-surface-container-lowest rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] safe-area-bottom">
|
||||
<div class="flex justify-between items-center h-20 px-margin-page">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-body-md text-on-surface-variant">实付:</span>
|
||||
<span class="text-headline-xl text-heritage-red font-bold">¥899</span>
|
||||
</div>
|
||||
<button class="bg-heritage-red text-white font-headline-md px-10 py-3.5 rounded-xl shadow-lg active:scale-95 transition-transform" id="payButton">
|
||||
微信支付
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Interaction Script -->
|
||||
<script>
|
||||
document.getElementById('payButton').addEventListener('click', function() {
|
||||
this.innerHTML = '<span class="flex items-center gap-2"><svg class="animate-spin h-5 w-5 text-white" 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>';
|
||||
this.classList.add('opacity-80', 'pointer-events-none');
|
||||
|
||||
setTimeout(() => {
|
||||
this.innerHTML = '微信支付';
|
||||
this.classList.remove('opacity-80', 'pointer-events-none');
|
||||
alert('订单支付成功！感谢您选择杜康。');
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "确认订单页 - 增加跨城物流提醒版",
|
||||
"screenId": "6012cab3676744ea8fdb65f14c24d87e",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:51.226Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,264 @@
|
||||
<!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;600&family=Be+Vietnam+Pro: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": {
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"secondary": "#735c00",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"status-blue": "#2A6EBB",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface": "#faf9f7",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary": "#37413b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.coupon-notch {
|
||||
mask-image: radial-gradient(circle at left, transparent 6px, black 6px), radial-gradient(circle at right, transparent 6px, black 6px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex items-center px-4 h-12 bg-surface">
|
||||
<button class="active:opacity-70 transition-opacity duration-200 flex items-center justify-center w-10 h-10 -ml-2" onclick="history.back()">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[24px]">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center font-headline-lg-mobile text-headline-lg-mobile font-semibold text-on-surface mr-8">我的地址</h1>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="pt-16 pb-32 px-margin-page min-h-screen">
|
||||
<!-- Address List Scrollable Container -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Address Card 1 (Default) -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl transition-transform duration-150 active:scale-[0.98] shadow-[0px_4px_20px_rgba(166,29,26,0.05)] border border-heritage-red/5">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">张先生</span>
|
||||
<span class="font-body-lg text-body-lg text-subtle-gray">138****5678</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-heritage-red text-white text-[10px] font-bold rounded-sm tracking-wider uppercase">默认</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant line-clamp-2 mb-4 leading-relaxed">
|
||||
河南省洛阳市涧西区开元大道248号杜康大厦12层
|
||||
</p>
|
||||
<div class="h-[1px] w-full bg-surface-container-highest mb-4"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center text-heritage-red gap-1 opacity-80">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="text-[12px] font-medium">默认地址</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
<span class="text-label-md font-label-md">编辑</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
<span class="text-label-md font-label-md">删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Address Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl transition-transform duration-150 active:scale-[0.98] shadow-[0px_4px_20px_rgba(166,29,26,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">李女士</span>
|
||||
<span class="font-body-lg text-body-lg text-subtle-gray">159****2201</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant line-clamp-2 mb-4 leading-relaxed">
|
||||
河南省郑州市金水区郑东新区商务内环路8号杜康大厦
|
||||
</p>
|
||||
<div class="h-[1px] w-full bg-surface-container-highest mb-4"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="flex items-center gap-1 text-subtle-gray active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
|
||||
<span class="text-[12px] font-medium">设为默认</span>
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
<span class="text-label-md font-label-md">编辑</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
<span class="text-label-md font-label-md">删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Address Card 3 -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl transition-transform duration-150 active:scale-[0.98] shadow-[0px_4px_20px_rgba(166,29,26,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">王先生</span>
|
||||
<span class="font-body-lg text-body-lg text-subtle-gray">135****8888</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant line-clamp-2 mb-4 leading-relaxed">
|
||||
河南省洛阳市龙门大道杜康村生产基地
|
||||
</p>
|
||||
<div class="h-[1px] w-full bg-surface-container-highest mb-4"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="flex items-center gap-1 text-subtle-gray active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
|
||||
<span class="text-[12px] font-medium">设为默认</span>
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
<span class="text-label-md font-label-md">编辑</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1 text-on-surface-variant active:opacity-60 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
<span class="text-label-md font-label-md">删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Atmospheric Visual Element -->
|
||||
<div class="mt-8 opacity-20 flex flex-col items-center justify-center py-8">
|
||||
<div class="w-16 h-16 mb-4 border border-heritage-red rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-heritage-red text-3xl">location_on</span>
|
||||
</div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray tracking-widest">DUKANG HERITAGE SERVICE</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Button Section -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface/80 backdrop-blur-md z-50 border-t border-surface-container-highest/50 px-margin-page safe-bottom pt-4">
|
||||
<button class="w-full bg-heritage-red text-on-primary h-14 rounded-xl flex items-center justify-center gap-2 active:scale-[0.98] transition-transform duration-150 shadow-lg shadow-heritage-red/10">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
<span class="font-headline-md text-headline-md">新增收货地址</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Address Selection feedback
|
||||
const addressCards = document.querySelectorAll('main > div > div');
|
||||
addressCards.forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
// Avoid trigger if clicking on action buttons
|
||||
if (e.target.closest('button')) return;
|
||||
|
||||
// Simple select animation
|
||||
card.classList.add('bg-surface-container-high');
|
||||
setTimeout(() => {
|
||||
card.classList.remove('bg-surface-container-high');
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "地址管理列表页",
|
||||
"screenId": "69704ee5a1a04b3780a67f062e3b2378",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:55.102Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1292px; 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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">
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
.coupon-notch::before { top: -6px; }
|
||||
.coupon-notch::after { bottom: -6px; }
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
right: -20px;
|
||||
height: 2px;
|
||||
background-color: #e3e2e0;
|
||||
z-index: 0;
|
||||
}
|
||||
.step-line-active {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
|
||||
/* Smooth backdrop blur for premium feel */
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"error-container": "#ffdad6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary": "#735c00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen pb-32">
|
||||
<!-- Top Navigation Anchor -->
|
||||
<header class="bg-surface sticky top-0 w-full z-50 flex items-center justify-between px-margin-page h-16 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">arrow_back_ios</span>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">share</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">more_horiz</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page py-stack-md space-y-stack-md">
|
||||
<!-- Status Banner -->
|
||||
<section class="relative overflow-hidden bg-heritage-red rounded-xl p-6 text-on-primary shadow-lg">
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute -right-10 -top-10 opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile font-bold">配送中</h2>
|
||||
</div>
|
||||
<p class="font-body-md opacity-90">您的佳酿正在赶往您的餐桌，请保持电话畅通</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Delivery Tracker -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex justify-between items-start pt-2 px-2">
|
||||
<!-- Step 1 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line step-line-active"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[16px] text-white">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-on-surface">下单成功</span>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line step-line-active"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[16px] text-white">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-on-surface">出库中</span>
|
||||
</div>
|
||||
<!-- Step 3 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-heritage-red ring-4 ring-primary-fixed flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-heritage-red font-bold">配送中</span>
|
||||
</div>
|
||||
<!-- Step 4 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="step-line"></div>
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-highest flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-subtle-gray">待签收</span>
|
||||
</div>
|
||||
<!-- Step 5 -->
|
||||
<div class="flex flex-col items-center flex-1 relative">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-highest flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md mt-2 text-subtle-gray">完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Details -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex gap-4 mb-4">
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium close-up studio photograph of a traditional Chinese Baijiu bottle, Dukang brand, with intricate red and gold labels. The bottle is set against a soft, creamy white background with elegant lighting that emphasizes its crystalline glass texture and heritage design. The aesthetic is luxurious, modern, and clean." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzuUQHbRF9nOvLF67TdN4XXaspszoFFZ5xOzi2XZfOTe9luzpHxRmFm5dcWCpC19FnbbjQUZX-zmIjLa47A3m164tMTLEQuhtQOLDgpC4-vXGSmE9y0yg97HOVaJRtmGNf_Rl7IP_9ykADHu5LIrtrTRHcxgA-Au7vEn8skrNHeDsWnJ1z0wb3gzGCZREiS3l7QfRJX33b2Q4sBBmJpjaDuNgQ4eOWsgkB_V-5JIUcQTljWvxkyCoMh2eRCEf0B9t06NNL0951UsI">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md leading-tight mb-1">杜康·御享15年 52度 浓香型白酒 500ml</h3>
|
||||
<p class="text-on-surface-variant text-label-md">规格：单瓶装（带礼袋）</p>
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-heritage-red font-bold text-label-md">¥</span>
|
||||
<span class="text-heritage-red font-bold text-headline-lg-mobile">1,288</span>
|
||||
</div>
|
||||
<span class="text-on-surface-variant text-body-md font-medium">x1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Special Section -->
|
||||
<div class="bg-aged-amber/10 rounded-lg p-4 mt-4 border border-aged-amber/20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-aged-amber rounded-full flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-md text-headline-md text-secondary-fixed-variant">¥200</span>
|
||||
<span class="font-label-md text-label-md text-on-secondary-fixed-variant">好客权益</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-secondary-fixed-variant opacity-70">全城100+餐厅通用</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-aged-amber text-on-secondary-fixed-variant font-bold px-4 py-2 rounded-full text-label-md shadow-sm hover:opacity-90 transition-opacity">
|
||||
去使用
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Receiver Information -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">location_on</span>
|
||||
收货信息
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">收货人</span>
|
||||
<span class="font-medium">张思远 138****8888</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start text-right">
|
||||
<span class="text-on-surface-variant flex-shrink-0">收货地址</span>
|
||||
<span class="font-medium ml-8">河南省洛阳市龙门大道266号 洛阳国宾酒店 102包间</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">配送方式</span>
|
||||
<span class="font-medium">小飞侠配送</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Order Metadata -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">info</span>
|
||||
订单信息
|
||||
</h4>
|
||||
<div class="space-y-3 pb-4 border-b border-surface-variant/30">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">订单编号</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">DK202310279981</span>
|
||||
<span class="text-heritage-red text-[10px] border border-heritage-red/30 px-1 rounded">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">创建时间</span>
|
||||
<span class="font-medium">2023-10-27 18:42:15</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">支付方式</span>
|
||||
<span class="font-medium">微信支付</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 space-y-2">
|
||||
<div class="flex justify-between text-on-surface-variant text-label-md">
|
||||
<span class="">商品总额</span>
|
||||
<span class="">¥1,288.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-on-surface-variant text-label-md">
|
||||
<span class="">运费</span>
|
||||
<span class="">¥0.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline pt-2">
|
||||
<span class="font-bold text-on-surface">实付金额</span>
|
||||
<span class="text-heritage-red font-bold text-headline-lg-mobile">¥1,288.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Action Bar (C-04 Customer Support focus) -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 bg-surface-container-lowest/90 glass-effect shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] px-margin-page pt-4 pb-safe flex gap-4">
|
||||
<button class="flex-1 border border-heritage-red text-heritage-red py-3 rounded-xl font-bold flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-[20px]">headset_mic</span>
|
||||
联系客服
|
||||
</button>
|
||||
<button class="flex-[1.5] bg-heritage-red text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 active:scale-95 transition-transform shadow-md">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory</span>
|
||||
确认收货
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Bottom Nav (Hidden on detail page as per rules, using action bar instead) -->
|
||||
<script>
|
||||
// Simple logic for the "Copy" interaction
|
||||
document.querySelector('.border-heritage-red\/30').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
btn.textContent = '已复制';
|
||||
btn.classList.add('bg-heritage-red', 'text-white');
|
||||
setTimeout(() => {
|
||||
btn.textContent = '复制';
|
||||
btn.classList.remove('bg-heritage-red', 'text-white');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Toggle sticky header shadow on scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (window.scrollY > 0) {
|
||||
header.classList.add('shadow-md');
|
||||
} else {
|
||||
header.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="fixed inset-0 z-[100] flex flex-col justify-end" id="contact-modal">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-black/50 transition-opacity"></div>
|
||||
<!-- Bottom Sheet -->
|
||||
<div class="relative bg-surface rounded-t-xl w-full max-w-md mx-auto shadow-lg animate-slide-up">
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">联系客服</h3>
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer" onclick="document.getElementById('contact-modal').remove()">close</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Phone Option -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-lg border border-surface-variant/30 active:scale-95 transition-transform">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-heritage-red/10 rounded-full flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined">call</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-on-surface">拨打总部客服电话</p>
|
||||
<p class="text-label-md text-on-surface-variant">400-888-1234</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
<!-- Online Chat Option -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-lg border border-surface-variant/30 active:scale-95 transition-transform">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-heritage-red/10 rounded-full flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-on-surface">在线客服</p>
|
||||
<p class="text-label-md text-on-surface-variant">专业客服实时解答</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-4 bg-surface-container-highest text-on-surface font-bold rounded-xl active:scale-95 transition-transform" onclick="document.getElementById('contact-modal').remove()">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-safe bg-surface-container-highest"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes slide-up {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out forwards;
|
||||
}
|
||||
</style></body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "订单详情页 - 联系客服弹窗效果",
|
||||
"screenId": "d1087155dd374372b389e7e84d74e15a",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:33:55.999Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>添加地址 - 杜康招待所</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=Manrope:wght@400;600;700&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">
|
||||
<!-- Tailwind Config Execution -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#735c00",
|
||||
"outline-variant": "#e2bebc",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-background": "#1a1c1b",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary-container": "#a61d24",
|
||||
"background": "#faf9f7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"tertiary": "#37413b",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#b3272c",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-surface": "#1a1c1b",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-bright": "#faf9f7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"aged-amber": "#FFBF00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed": "#410004"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "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;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.form-input-focus:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
.custom-toggle:checked + .toggle-dot {
|
||||
transform: translateX(100%);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.custom-toggle:checked ~ .toggle-bg {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
|
||||
/* Ambient scroll bar for premium feel */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #faf9f7;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e2bebc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen pb-32">
|
||||
<!-- TopAppBar Execution -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<button aria-label="返回" class="active:scale-95 transition-transform text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">添加收货地址</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for centering -->
|
||||
</header>
|
||||
<main class="pt-20 px-margin-page">
|
||||
<!-- Decoration Background Element -->
|
||||
<div class="fixed top-0 right-0 -z-10 opacity-5 pointer-events-none">
|
||||
<div class="w-64 h-64 bg-contain bg-no-repeat" data-alt="A subtle, high-end background pattern featuring traditional Chinese cloud motifs and calligraphy brushstrokes. The design is minimalist, rendered in soft amber and pale gold tones on an off-white paper-textured background. The aesthetic is sophisticated and evokes the heritage of the Dukang liquor brand, maintaining a premium, tranquil mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDmJPCuB68Dg74VEHsaXsNtZzRmYEViYHJXRRLVICTK9XTsDj27gnq84WZL_Fj2GUWj0LXL5XiZ7FElLOPjdiIsMznQC9n9L2o512SIGKTmEuHiMvopwTnGKlzHsASd3LV9ocgAuN4M1zO5blxr4o35pSGb3hpIIItpaaONK5QctwL210uT8PyKyWt3Wb2xY8cXBwgqhwIdIkQg3unLwC_5FLcVfMwv9zH-N9ZskV3zlmhKXgGrduFoXS-S14RHdrzHqr4ReF_QcXs')"></div>
|
||||
</div>
|
||||
<!-- Form Section -->
|
||||
<section class="space-y-stack-md">
|
||||
<!-- Card Container -->
|
||||
<div class="bg-white rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-primary/5">
|
||||
<!-- Contact Name -->
|
||||
<div class="mb-6">
|
||||
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">收货人姓名</label>
|
||||
<div class="form-input-focus flex items-center border-b border-outline-variant py-2 transition-all">
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray" placeholder="请输入姓名" type="text">
|
||||
<span class="material-symbols-outlined text-outline text-sm">person</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phone Number -->
|
||||
<div class="mb-6">
|
||||
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">手机号码</label>
|
||||
<div class="form-input-focus flex items-center border-b border-outline-variant py-2 transition-all">
|
||||
<span class="text-body-lg font-body-lg mr-2 text-on-surface-variant">+86</span>
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray" placeholder="请输入手机号" type="tel">
|
||||
<span class="material-symbols-outlined text-outline text-sm">smartphone</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Region Picker -->
|
||||
<div class="mb-6 cursor-pointer group" onclick="togglePicker()">
|
||||
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">所在地区</label>
|
||||
<div class="flex items-center justify-between border-b border-outline-variant py-2 group-active:opacity-70 transition-all">
|
||||
<div class="text-body-lg font-body-lg text-subtle-gray" id="region-display">请选择省/市/区</div>
|
||||
<span class="material-symbols-outlined text-outline">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed Address -->
|
||||
<div class="mb-2">
|
||||
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">详细地址</label>
|
||||
<div class="form-input-focus border border-outline-variant rounded-lg p-3 transition-all bg-surface-container-low">
|
||||
<textarea class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray resize-none" placeholder="街道、门牌号、小区名称等" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Default Address Toggle -->
|
||||
<div class="bg-white rounded-xl p-stack-md flex items-center justify-between shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-primary/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-xl" style="font-variation-settings: 'FILL' 1;">stars</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">设为默认地址</h3>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">每次下单时将优先使用此地址</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input class="sr-only peer custom-toggle" type="checkbox">
|
||||
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer transition-all toggle-bg"></div>
|
||||
<div class="absolute left-[2px] top-[2px] bg-white border-gray-300 border rounded-full h-5 w-5 transition-all toggle-dot"></div>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Location Tip Section -->
|
||||
<div class="mt-8 flex items-center justify-center gap-2 text-primary/60">
|
||||
<span class="material-symbols-outlined text-lg">location_on</span>
|
||||
<span class="text-label-md font-label-md">已通过杜康云安全加密处理</span>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar Execution as "Bottom Actions" -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-between items-center px-margin-page py-stack-md bg-surface shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
|
||||
<button class="flex items-center justify-center text-on-surface-variant dark:text-on-tertiary-fixed-variant px-6 py-3 w-1/3 mx-2 border border-outline rounded-lg active:scale-98 transition-all hover:bg-primary-container/10">
|
||||
<span class="material-symbols-outlined mr-2">close</span>
|
||||
<span class="font-label-md text-label-md">取消</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center bg-heritage-red text-white rounded-lg px-6 py-3 w-2/3 mx-2 active:scale-98 transition-all shadow-lg hover:opacity-80">
|
||||
<span class="material-symbols-outlined mr-2">publish</span>
|
||||
<span class="font-label-md text-label-md">保存并发布</span>
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Simple Overlay for Selection Mockup -->
|
||||
<div class="fixed inset-0 z-[100] bg-ink-black/40 backdrop-blur-[4px] hidden items-end justify-center transition-opacity duration-300 opacity-0" id="region-picker">
|
||||
<div class="bg-background w-full rounded-t-3xl p-stack-lg transform translate-y-full transition-transform duration-300">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h4 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">选择地区</h4>
|
||||
<button class="text-on-surface-variant" onclick="togglePicker()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto">
|
||||
<!-- Mock Region List -->
|
||||
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center active:bg-primary-fixed transition-colors">
|
||||
<span class="font-body-lg text-body-lg">北京市 东城区</span>
|
||||
<span class="material-symbols-outlined text-primary">check_circle</span>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
|
||||
<span class="font-body-lg text-body-lg">上海市 黄浦区</span>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
|
||||
<span class="font-body-lg text-body-lg">河南省 洛阳市</span>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
|
||||
<span class="font-body-lg text-body-lg">陕西省 西安市</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-8 bg-primary text-on-primary py-4 rounded-xl font-headline-md text-headline-md active:scale-95 transition-transform" onclick="togglePicker()">
|
||||
确认选择
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function togglePicker() {
|
||||
const picker = document.getElementById('region-picker');
|
||||
const content = picker.querySelector('div');
|
||||
|
||||
if (picker.classList.contains('hidden')) {
|
||||
picker.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
picker.classList.remove('opacity-0');
|
||||
picker.classList.add('flex', 'opacity-100');
|
||||
content.classList.remove('translate-y-full');
|
||||
content.classList.add('translate-y-0');
|
||||
}, 10);
|
||||
} else {
|
||||
picker.classList.remove('opacity-100');
|
||||
picker.classList.add('opacity-0');
|
||||
content.classList.remove('translate-y-0');
|
||||
content.classList.add('translate-y-full');
|
||||
setTimeout(() => {
|
||||
picker.classList.add('hidden');
|
||||
picker.classList.remove('flex');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Simple form interaction logging
|
||||
document.querySelectorAll('input, textarea').forEach(el => {
|
||||
el.addEventListener('focus', () => {
|
||||
el.parentElement.classList.add('border-primary');
|
||||
});
|
||||
el.addEventListener('blur', () => {
|
||||
el.parentElement.classList.remove('border-primary');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "新增地址页面",
|
||||
"screenId": "d74560d0542b46ce99b716c291f9bdf2",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:06:56.870Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,307 @@
|
||||
<!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" name="viewport">
|
||||
<title>Dukang Heritage - Store Detail</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;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": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"tertiary": "#37413b",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"subtle-gray": "#999999",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error-container": "#93000a",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.bento-inner-shadow {
|
||||
box-shadow: inset 0 0 40px rgba(166, 29, 36, 0.02);
|
||||
}
|
||||
.notch-left, .notch-right {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #faf9f7;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-left { left: -6px; }
|
||||
.notch-right { right: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md shadow-sm transition-all duration-300">
|
||||
<div class="flex justify-between items-center px-margin-page h-16 max-w-screen-md mx-auto">
|
||||
<button class="flex items-center justify-center p-2 rounded-full hover:bg-surface-container-high transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile text-primary tracking-tight">门店详情</h1>
|
||||
<button class="flex items-center justify-center p-2 rounded-full hover:bg-surface-container-high transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined text-primary">share</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-screen-md mx-auto pt-16 pb-32">
|
||||
<!-- ImageHero: Gallery -->
|
||||
<section class="relative w-full aspect-[4/3] overflow-hidden group">
|
||||
<div class="flex h-full w-full overflow-x-auto snap-x snap-mandatory no-scrollbar scroll-smooth" id="gallery-container">
|
||||
<div class="flex-none w-full h-full snap-center relative">
|
||||
<img class="w-full h-full object-cover" data-alt="A grand luxury hotel entrance for a heritage spirit brand, featuring traditional Chinese architecture elements blended with modern glass and warm wood. The lighting is golden hour, casting long soft shadows on the stone courtyard. Deep heritage red flags and banners accentuate the entrance, reflecting a premium and hospitable atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqN0DeYRsWNcXyfSRec8k2fhjJsqdji3-7zrtegkiEs5lwt3Sx4l79Uzmfys2pnl_gUY_m3Dpy5cAM8HW7JcR8qPtfO2G8YNcZ3x0DGSN1DUPJPq4emVhmIuwmaLEQ944UT9hjpNQsjdqieKV8R-X-2YvSOrsEa74kyfI5UNgRQaGdinhLw6co29ji3F9BRgfgWCQ1KqjotRBC4r9lzWBdeue-xryXvN8jEp_7hjwrBNOOZoIDPnKkpQQwLLpaa7Di6kfEfwzamCg">
|
||||
</div>
|
||||
<div class="flex-none w-full h-full snap-center relative">
|
||||
<img class="w-full h-full object-cover" data-alt="The opulent interior dining hall of a high-end Chinese restaurant. Circular tables are set with fine white porcelain and crystal glassware. The ceiling features elegant minimalist chandeliers and warm wood paneling. Subtle amber lighting mimics the glow of aged liquor. The mood is sophisticated, quiet, and deeply cultural." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAW3oxOc6XpywVJmpwYxIPBlP32ftPIOUB8JbYcqOAcLg1gbzKIgbDgBaPVUyH0gjdoWa7Hi0u1-NBYBwc5Jd3YpqufVWIou_ySFB2oLXA6T0u7DgUWKhtxbMnqMue-oasf8GlEy_e7-Rh41ZxVFkc30tQVAYz-Psm3CNgfRFqXoHDXCZAZz5ggOFOB2dScURBVN9qp_Ribo4DuE4LARgf19R8eKZR8mbDQdHesLaVl0icifdcQEb75QM6-VqCR3ch9BNKzLJ5hKMM">
|
||||
</div>
|
||||
<div class="flex-none w-full h-full snap-center relative">
|
||||
<img class="w-full h-full object-cover" data-alt="A private tasting room for premium spirits, showcasing rows of aged clay jars and backlit glass display cases with ornate bottles. The room uses a palette of dark charcoal, rich oak, and Heritage Red accents. A large circular window looks out onto a serene Zen garden, creating a peaceful and authoritative space for connoisseurs." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuv4URDejJ5j26kuBPG2fqmOmI90qQomZki-aHr3MmdF47Pq5HM7tiH68E77rrF0XjeaZjkQ0e39j5gY1-N_981-eguGZn8VIRZI0n6t-f8QVIhAyjL8kg-5ZD2yRsfgw5mnOYYPMyNUI54efLiU4M6mni6nJvTAXMvX0oBMXtTItj5U66d9BIvie7VfHoVYMelEW9ppZsSRzA7ZoIu6aRp_72OwAIcTFuiI2zccaAmfTk7dChjjHIHZ85B8dDc2G8Tym34SuJAZc">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Gallery Indicators -->
|
||||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 px-3 py-1 bg-black/20 backdrop-blur-md rounded-full">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-white" style="opacity: 0.4; transform: scale(1);"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-white/40" style="opacity: 1; transform: scale(1.2);"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-white/40" style="opacity: 0.4; transform: scale(1);"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- StoreInfoCard -->
|
||||
<section class="px-margin-page -mt-6 relative z-10">
|
||||
<div class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<div class="flex justify-between items-start mb-base">
|
||||
<div>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black mb-1">洛阳盛世明珠酒店</h2><p class="text-label-md text-on-surface-variant mt-1">营业时间：09:30 - 22:00</p>
|
||||
|
||||
</div>
|
||||
<div class="px-2 py-1 bg-success-green/10 text-success-green rounded-lg flex items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-success-green mr-1.5 animate-pulse"></div>
|
||||
<span class="font-label-md text-label-md">营业中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-stack-md">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section><section class="px-margin-page mt-stack-md">
|
||||
<div class="bg-surface-container-low p-3 rounded-lg border border-heritage-red/10 flex gap-2 items-start">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[18px]">info</span>
|
||||
<p class="text-label-md text-on-surface-variant leading-snug">温馨提示：为保证服务品质，如用餐规模超过2桌，请提前电话联系门店确认可用性。</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- LocationSection -->
|
||||
<section class="px-margin-page mt-stack-lg">
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="relative h-40 w-full bg-surface-dim">
|
||||
<img class="w-full h-full object-cover opacity-90" src="https://lh3.googleusercontent.com/aida-public/AB6AXuByauC4oncButUsGa_t2ntIVz-iPk9zVUnYA6_P_URyFYzrWALFa2TKfdpEyrGs61N_sEjRYksO_HeKCZGJQXfRhXqf1iXrk8JPIfzDwb33bDacTr2J0HM-cSnNjcM1c5l6r_yuzsE0zuLBZpuAWVPwkOJUkdfk6xxNpABh-OQ0B6736YmxFQM-WJ5h0eLHpRB7RuyTFr5c_TwTysKyY6QVDZ-oJrx9Vc3FQE7Pc64o3bzP6qW3GEqdqm4WVIAMKiNKqUcXvkN8E48" alt="Luxury map illustration with heritage red pin">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/40 to-transparent"></div>
|
||||
</div>
|
||||
<div class="p-stack-md flex items-center gap-stack-md">
|
||||
<div class="flex-1">
|
||||
<p class="font-body-md text-on-surface leading-snug">河南省洛阳市涧西区中州中路 428 号盛世明珠酒店一层</p>
|
||||
<p class="text-label-md text-subtle-gray mt-1 flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">near_me</span>
|
||||
距离您 2.4km
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="w-11 h-11 flex items-center justify-center rounded-xl bg-surface-container-high text-primary hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined">call</span>
|
||||
</button>
|
||||
<button class="w-11 h-11 flex items-center justify-center rounded-xl bg-primary text-white hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined">directions</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ServiceSection -->
|
||||
<section class="px-margin-page mt-stack-lg">
|
||||
<h3 class="font-headline-md text-headline-md text-ink-black mb-stack-md">设施服务</h3>
|
||||
<div class="grid grid-cols-4 gap-gutter-card">
|
||||
<div class="flex flex-col items-center p-base bg-surface-container-low rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary mb-1">wifi</span>
|
||||
<span class="text-label-md text-on-surface-variant">WiFi</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-base bg-surface-container-low rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary mb-1">local_parking</span>
|
||||
<span class="text-label-md text-on-surface-variant">免费停车</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-base bg-surface-container-low rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary mb-1">meeting_room</span>
|
||||
<span class="text-label-md text-on-surface-variant">独立包间</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-base bg-surface-container-low rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary mb-1">table_restaurant</span>
|
||||
<span class="text-label-md text-on-surface-variant">宴会大厅</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- DescriptionSection -->
|
||||
<section class="px-margin-page mt-stack-lg">
|
||||
<h3 class="font-headline-md text-headline-md text-ink-black mb-stack-md">门店介绍</h3>
|
||||
<div class="bg-surface-container-lowest p-stack-md rounded-xl border-l-4 border-heritage-red relative overflow-hidden bento-inner-shadow">
|
||||
<p class="font-body-md text-on-surface-variant leading-relaxed text-justify">
|
||||
盛世明珠酒店作为洛阳首屈一指的文化餐饮地标，完美融合了河洛文化的厚重底蕴与现代高净值社交需求。酒店内设有杜康文化体验区，陈列着各年份的杜康珍藏佳酿，让宾客在用餐之余领略“慨当以慷，忧思难忘”的魏晋风骨。
|
||||
<br><br>
|
||||
主打精品豫菜与融合创意菜，其招牌菜品“杜康醉排骨”选用杜康老酒烹制，香气醇厚而不烈。餐厅氛围庄重而不失亲和力，是商务宴请、亲友小聚以及文化交流的理想场所。我们致力于提供最高水准的杜康配套用酒服务，让每一位食客都能在推杯换盏间感受中华酒祖的千年传承。
|
||||
</p>
|
||||
<div class="mt-stack-md flex items-center justify-between pt-base border-t border-surface-container-high">
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface-container-lowest bg-surface-dim"></div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface-container-lowest bg-surface-container-high"></div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface-container-lowest bg-primary-fixed"></div>
|
||||
</div>
|
||||
<span class="text-label-md text-subtle-gray">已有 1.2w 人到店体验</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Preview (Extra) -->
|
||||
|
||||
</main>
|
||||
<!-- ActionButton Fixed Bottom -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-margin-page bg-surface/90 backdrop-blur-lg z-50 border-t border-surface-container-high">
|
||||
<div class="max-w-screen-md mx-auto flex items-center gap-stack-md">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-label-md text-subtle-gray">可用额度</span>
|
||||
<span class="font-headline-md text-headline-md text-primary">¥1,200.00</span>
|
||||
</div>
|
||||
<button class="flex-1 bg-heritage-red text-white py-4 rounded-xl font-headline-md text-headline-md shadow-lg shadow-heritage-red/20 hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
去核销
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Simple Gallery Interaction
|
||||
const container = document.getElementById('gallery-container');
|
||||
const dots = document.querySelectorAll('.absolute.bottom-4 > div');
|
||||
|
||||
container.addEventListener('scroll', () => {
|
||||
const index = Math.round(container.scrollLeft / container.offsetWidth);
|
||||
dots.forEach((dot, i) => {
|
||||
dot.style.opacity = i === index ? '1' : '0.4';
|
||||
dot.style.transform = i === index ? 'scale(1.2)' : 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// TopAppBar transparency on scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (window.scrollY > 100) {
|
||||
header.classList.remove('bg-surface/80');
|
||||
header.classList.add('bg-surface/100', 'shadow-md');
|
||||
} else {
|
||||
header.classList.add('bg-surface/80');
|
||||
header.classList.remove('bg-surface/100', 'shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店详情页",
|
||||
"screenId": "f8ac6726b01d4bca9dd7b701a82f7b43",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:34:15.243Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,299 @@
|
||||
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400&family=Inter:wght@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">
|
||||
<!-- Use Tailwind Config from Design System -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"error-container": "#ffdad6",
|
||||
"surface": "#faf9f7",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"heritage-red": "#A61D24",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"background": "#faf9f7",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"on-primary": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"secondary-container": "#fed65b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline-variant": "#e2bebc",
|
||||
"secondary": "#735c00",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-error-container": "#93000a",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary": "#37413b",
|
||||
"on-surface": "#1a1c1b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-family: 'Be Vietnam Pro', sans-serif;
|
||||
background-color: #faf9f7; /* surface-bright */
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.active-tab {
|
||||
position: relative;
|
||||
color: #820012; /* primary */
|
||||
font-weight: 600;
|
||||
}
|
||||
.active-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 16px;
|
||||
height: 3px;
|
||||
background-color: #A61D24; /* heritage-red */
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright min-h-screen text-on-surface">
|
||||
<!-- TopAppBar (Based on Shared Components JSON) -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile font-bold text-primary">权益明细</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform text-primary">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Area -->
|
||||
<main class="pt-14 pb-safe">
|
||||
<!-- SummaryHeader Card [Sticky] -->
|
||||
<div class="sticky top-14 z-40 bg-surface-bright/80 backdrop-blur-md px-margin-page py-stack-md">
|
||||
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 relative overflow-hidden" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<!-- Abstract Heritage Pattern (Animated Shader) -->
|
||||
<div class="absolute inset-0 opacity-[0.03] pointer-events-none">
|
||||
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mb-2">当前好客权益余额</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-headline-md font-bold text-heritage-red">¥</span>
|
||||
<span class="font-coupon-amount text-coupon-amount text-heritage-red">1,280.00</span>
|
||||
</div>
|
||||
<div class="mt-4 w-full flex justify-center gap-base">
|
||||
<button class="px-4 py-2 bg-heritage-red text-on-primary rounded-full font-label-md text-label-md active:scale-95 transition-all">立即使用</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FilterTabs -->
|
||||
<div class="px-margin-page border-b border-outline-variant/10 mb-stack-md bg-surface-bright">
|
||||
<div class="flex items-center gap-8 overflow-x-auto hide-scrollbar py-3">
|
||||
<button class="active-tab whitespace-nowrap font-label-md text-label-md transition-colors" onclick="switchTab(this)">全部</button>
|
||||
<button class="whitespace-nowrap font-label-md text-label-md text-on-surface-variant transition-colors hover:text-primary" onclick="switchTab(this)">获取记录</button>
|
||||
<button class="whitespace-nowrap font-label-md text-label-md text-on-surface-variant transition-colors hover:text-primary" onclick="switchTab(this)">消费记录</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionList -->
|
||||
<div class="px-margin-page space-y-4 pb-20">
|
||||
<!-- Group Label -->
|
||||
<h2 class="font-label-md text-label-md text-subtle-gray py-2">2026年6月</h2>
|
||||
<!-- TransactionItem 1 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">restaurant_menu</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">门店消费(洛阳宴会专供)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-18 14:20:05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-on-surface font-bold">-¥200.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionItem 2 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200 border-l-4 border-heritage-red/20" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container/10 flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">liquor</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">购酒赠送(杜康·酒祖)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-15 09:30:12</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-heritage-red font-bold">+¥500.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TransactionItem 3 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">local_dining</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">门店消费(杜康·大师系列)</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-06-10 18:45:30</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-on-surface font-bold">-¥580.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Group Label -->
|
||||
<h2 class="font-label-md text-label-md text-subtle-gray py-2">2026年5月</h2>
|
||||
<!-- TransactionItem 4 (Older Data) -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between active:bg-surface-container-low transition-colors duration-200 border-l-4 border-heritage-red/20" style="opacity: 1; transform: translateY(0px); transition: 0.4s ease-out;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container/10 flex items-center justify-center text-heritage-red">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">card_giftcard</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-[15px] text-ink-black">新人入会赠送</h3>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mt-0.5">2026-05-20 10:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline-md text-heritage-red font-bold">+¥1560.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Spacer -->
|
||||
<div class="flex flex-col items-center py-stack-lg opacity-40">
|
||||
<div class="w-12 h-[1px] bg-outline-variant mb-4"></div>
|
||||
<p class="font-label-md text-label-md">已加载全部明细</p>
|
||||
</div>
|
||||
</div>
|
||||
</main><nav class="fixed bottom-0 w-full z-50 bg-surface-bright border-t border-outline-variant/10 px-margin-page pb-safe">
|
||||
|
||||
</nav>
|
||||
<!-- Bottom Navigation Bar (Based on Shared Components JSON) -->
|
||||
|
||||
<script>
|
||||
function switchTab(el) {
|
||||
// Remove active classes
|
||||
document.querySelectorAll('.active-tab').forEach(tab => {
|
||||
tab.classList.remove('active-tab', 'text-primary', 'font-bold');
|
||||
tab.classList.add('text-on-surface-variant');
|
||||
});
|
||||
|
||||
// Add active classes to selected
|
||||
el.classList.add('active-tab');
|
||||
el.classList.remove('text-on-surface-variant');
|
||||
}
|
||||
|
||||
// Simple scroll reveal for list items
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.bg-surface-container-lowest').forEach(item => {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(10px)';
|
||||
item.style.transition = 'all 0.4s ease-out';
|
||||
observer.observe(item);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "好客权益明细页",
|
||||
"screenId": "03d85af3bdd140df869b3a3c72b3c7c3",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:34:25.197Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,247 @@
|
||||
<!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" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"error-container": "#ffdad6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary": "#735c00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"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;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.coupon-notch::before { left: -4px; }
|
||||
.coupon-notch::after { right: -4px; }
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen">
|
||||
<!-- Top Navigation Anchor (Shared Component: TopAppBar) -->
|
||||
<header class="bg-surface dark:bg-on-background shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full sticky top-0 z-50 flex items-center justify-between px-margin-page h-16 transition-opacity duration-200">
|
||||
<button class="hover:opacity-80 transition-opacity">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
|
||||
<div class="flex items-center gap-4"><div class="flex items-center gap-1 text-heritage-red">
|
||||
<span class="material-symbols-outlined text-[20px]">location_on</span>
|
||||
<span class="font-label-md">洛阳市</span>
|
||||
</div></div>
|
||||
</header>
|
||||
<main class="pb-24">
|
||||
<!-- Brand Banner Section -->
|
||||
<!-- Category Tabs -->
|
||||
<nav class="mt-stack-lg border-b border-surface-container overflow-x-auto hide-scrollbar flex px-margin-page items-center sticky top-16 bg-background/80 backdrop-blur-md z-40 justify-center gap-[10px]"><div class="px-4 py-2 text-center font-headline-md border-b-2 border-heritage-red text-heritage-red whitespace-nowrap">清香型</div><div class="px-4 py-2 text-center font-headline-md text-subtle-gray opacity-50 cursor-not-allowed whitespace-nowrap">酱香型</div><div class="px-4 py-2 text-center font-headline-md text-subtle-gray opacity-50 cursor-not-allowed whitespace-nowrap">浓香型</div></nav>
|
||||
<!-- Product List Vertical Scroll -->
|
||||
<section class="px-margin-page mt-stack-md flex flex-col gap-gutter-card"><!-- Product Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPgomduaq2f4aEoth48mxljblAo9Gu2UTHkRGj_xoWsgTMVzKExTMy0dY8mtL4PcgyJ6COvMbYSjBOlkp_9DAfQ3FEDX_1BWDRFVHY9HEv2UliiRm5IdmbpDSWl5wWJR644KxcaVuxbEktYpHoOxwU8573Q8ke_3WDBZh8XCSdIRTg-uSEe3R5xlzDhtlxDbpQl_eYibEziT2wh5PNtbPFuOFAmbu_QQ1fzaJhnbZX2z9uTWViZjtwASsSi0ruoPCMEEdYriHhXaA">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·白水古酿 500ml</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥599</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">清香型 52度 礼盒装</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥200 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Product Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJAzdmaEBB3ootOMWOn1lZ9MBBvfLsNGX1t5uTxkMrPJAZVNqEYigsGAJql0gJsvvQT5fI5OAaF1jenuLdb7nQloWs-x4DrketXF9cFiBcH8J59hDHdGCdXAAMJTwFuk815QoH6qPShQIKgweoamLQdD5lwlM5JBXZBuMYDms4woEV-AyXEFXHJGZCyJYSxz7UWuOO2rvcvxuC9bOTU8gR_4SJWYY6PwKGlKDECXflYYC89bB6hrmhFchtjr1VeeO_HpLKC5zlaIM">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·年份陈酿 (十年)</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥880</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">清香型 42度 纯粮酿造</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥350 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Product Card 3 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAZpYFTg1BRtTpAyLeHWa0JKFmgJ3SqBu3K58_qPpXZInSjFARlxKo8BPH5uoo3nI2s8oFVa4Pvkq1hEY1HxA59QAUQ4Dtk6WC_Ic-1sF5cGGG9KJ2ZVvK_1WgUS3aZtz7nh_RI13W7T_PymFa7N-twAoOzSNiLNcIn4Aq4vS6LTeRhS_xwGQwwNNjhVaSfIs--pP2BF512pYjioXTTH4MlAdwgYSn5mvpycs60_p_sjE1-wu2elkmPchlaNmrSPYVw8rUSPyas2Q">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·御享1号 珍藏版</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥1299</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">高端定制 限量发售</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥500 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div></section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell (Shared Component: BottomNavBar) -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-2 pb-safe px-4 bg-surface-container-lowest shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl"><a class="flex flex-col items-center justify-center text-heritage-red font-bold transition-transform scale-95 active:scale-90" href="#"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">home</span><span class="font-label-md text-label-md">首页</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">storefront</span><span class="font-label-md text-label-md">门店</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">card_giftcard</span><span class="font-label-md text-label-md">好客权益</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">person</span><span class="font-label-md text-label-md">我的</span></a></footer>
|
||||
<script>
|
||||
// Micro-interaction for add to cart
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.classList.add('scale-90');
|
||||
});
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.classList.remove('scale-90');
|
||||
});
|
||||
});
|
||||
|
||||
// Simple observer for reveal effects
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('opacity-100', 'translate-y-0');
|
||||
entry.target.classList.remove('opacity-0', 'translate-y-4');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('section > div').forEach(el => {
|
||||
el.classList.add('transition-all', 'duration-500', 'opacity-0', 'translate-y-4');
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "小程序首页 - 大图商品布局优化",
|
||||
"screenId": "6299c14c8f5b4a0d89b454a09904e8b9",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:07:01.612Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html><html class="light" 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&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": {
|
||||
"outline": "#8d706e",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-primary": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary-container": "#fed65b",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#b3272c",
|
||||
"tertiary": "#37413b",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"primary-container": "#a61d24",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-container": "#4e5852",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#735c00",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"primary-fixed": "#ffdad7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.pay-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-md text-body-md">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 w-full z-50 flex items-center justify-between px-margin-page h-14 w-full bg-background">
|
||||
<button class="active:scale-95 transition-transform text-on-surface-variant flex items-center" onclick="window.history.back()">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">微信支付</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for balance -->
|
||||
</header>
|
||||
<main class="flex-1 pt-20 pb-32 px-margin-page overflow-y-auto">
|
||||
<!-- Order Summary Section -->
|
||||
<section class="flex flex-col items-center justify-center py-stack-lg mb-stack-lg">
|
||||
<div class="w-[60px] h-[60px] mb-stack-md rounded-xl overflow-hidden border border-outline-variant pay-shadow bg-surface">
|
||||
<img alt="Dukang Hospitality Logo" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLR81sOE7QSa5GthGekT_h8-8PyVXPo7yFRpK6-6XOWtxqZXTVd3pRUeileIX-biO_5wxBDbEv3SvVtC7A37xhWZVWEaXT64fAWTX0CgYeQcB5-Fp_Q25u6rEfZtrDOqpsqtg-IAotkSiAicuBK9sNB6Z2kZ5uZqQJEAd_RIJD_d_hcRJ5qaAdel3_ITruQ1BvqoFyIGhM8eRiRw9OLoyoRANkc26unFPA2CGv8Nbtl3TbVxZA8k0CyfwTCqTDF736Mwg1Ts6MB0A">
|
||||
</div>
|
||||
<p class="font-headline-md text-headline-md text-on-surface mb-stack-sm">杜康好客</p>
|
||||
<h2 class="font-headline-xl text-headline-xl text-primary font-bold">¥899.00</h2>
|
||||
</section>
|
||||
<!-- Payment Method List -->
|
||||
<section class="bg-surface-container-lowest rounded-xl pay-shadow overflow-hidden border border-surface-variant">
|
||||
<div class="px-margin-page py-stack-md flex items-center justify-between border-b border-surface-variant">
|
||||
<span class="text-on-surface-variant font-medium">订单信息</span>
|
||||
<span class="text-on-surface">酒水套餐 & 好客权益</span>
|
||||
</div>
|
||||
<!-- WeChat Pay Row -->
|
||||
<div class="px-margin-page py-stack-lg flex items-center justify-between active:bg-surface-container-low transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-stack-md">
|
||||
<div class="bg-[#07C160] w-9 h-9 rounded-full flex items-center justify-center">
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.15 14.85C17.15 15.68 16.48 16.35 15.65 16.35H8.35C7.52 16.35 6.85 15.68 6.85 14.85V9.15C6.85 8.32 7.52 7.65 8.35 7.65H15.65C16.48 7.65 17.15 8.32 17.15 9.15V14.85Z" fill="white"></path>
|
||||
<path d="M10.5 10.5C10.5 11.05 10.05 11.5 9.5 11.5C8.95 11.5 8.5 11.05 8.5 10.5C8.5 9.95 8.95 9.5 9.5 9.5C10.05 9.5 10.5 9.95 10.5 10.5Z" fill="white"></path>
|
||||
<path d="M15.5 10.5C15.5 11.05 15.05 11.5 14.5 11.5C13.95 11.5 13.5 11.05 13.5 10.5C13.5 9.95 13.95 9.5 14.5 9.5C15.05 9.5 15.5 9.95 15.5 10.5Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-lg text-body-lg text-on-surface font-medium">微信支付</p>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">推荐使用，便捷安全</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-success-green" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Informational Hint -->
|
||||
<div class="mt-stack-lg flex items-start gap-2 px-stack-sm">
|
||||
<span class="material-symbols-outlined text-outline text-[18px]">info</span>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant leading-relaxed">订单包含 ¥500 好客权益，支付成功后将发放至您的个人账户。</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Area -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 px-margin-page py-stack-md bg-surface border-t border-surface-variant/50">
|
||||
<button class="w-full bg-heritage-red text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-[0.98] transition-all pay-shadow mb-stack-md" id="pay-trigger">
|
||||
立即支付 ¥899.00
|
||||
</button>
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">verified_user</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">支付安全由微信支付保障</span>
|
||||
</div>
|
||||
<div class="h-6"></div> <!-- iPhone Safe Area Spacer -->
|
||||
</footer>
|
||||
<!-- Success Modal -->
|
||||
<div class="fixed inset-0 z-[100] hidden flex items-end justify-center" id="success-modal">
|
||||
<div class="absolute inset-0 bg-ink-black/40 backdrop-blur" onclick="closeModal()"></div>
|
||||
<div class="relative bg-surface w-full max-w-md rounded-t-3xl p-stack-lg animate-[slide-up_0.3s_ease-out] shadow-2xl">
|
||||
<div class="w-12 h-1 bg-surface-variant rounded-full mx-auto mb-stack-lg"></div>
|
||||
<div class="flex flex-col items-center py-stack-lg">
|
||||
<div class="w-20 h-20 bg-success-green/10 rounded-full flex items-center justify-center mb-stack-md">
|
||||
<span class="material-symbols-outlined text-success-green text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-stack-sm">支付成功</h3>
|
||||
<p class="text-body-md font-body-md text-on-surface-variant text-center max-w-[240px] mb-stack-lg">
|
||||
您的订单已处理完成，感谢您对杜康好客的支持。
|
||||
</p>
|
||||
<div class="w-full space-y-stack-md">
|
||||
<button class="w-full bg-primary text-on-primary font-headline-md text-headline-md py-4 rounded-xl active:scale-95 transition-transform" onclick="closeModal()">
|
||||
返回订单列表
|
||||
</button>
|
||||
<button class="w-full border border-outline text-on-surface font-body-lg text-body-lg py-4 rounded-xl active:bg-surface-variant transition-colors" onclick="closeModal()">
|
||||
查看订单详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes slide-up {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const payTrigger = document.getElementById('pay-trigger');
|
||||
const successModal = document.getElementById('success-modal');
|
||||
|
||||
payTrigger.addEventListener('click', () => {
|
||||
// Simulate payment loading
|
||||
payTrigger.disabled = true;
|
||||
payTrigger.innerHTML = '<span class="inline-block animate-spin mr-2">◌</span> 正在安全支付...';
|
||||
|
||||
setTimeout(() => {
|
||||
successModal.classList.remove('hidden');
|
||||
payTrigger.disabled = false;
|
||||
payTrigger.innerHTML = '立即支付 ¥899.00';
|
||||
}, 1200);
|
||||
});
|
||||
|
||||
function closeModal() {
|
||||
successModal.classList.add('hidden');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "微信支付页",
|
||||
"screenId": "e72f2cf24af34e2bb29ae2e753bb57a1",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:34:30.301Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,255 @@
|
||||
<!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, viewport-fit=cover" name="viewport">
|
||||
<title>确认订单 - 杜康·礼遇</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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": {
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"outline-variant": "#e2bebc",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"primary": "#820012",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-container": "#fed65b",
|
||||
"error": "#ba1a1a",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-surface": "#1a1c1b",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"success-green": "#2D6A4F"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.coupon-notch::before { left: -6px; }
|
||||
.coupon-notch::after { right: -6px; }
|
||||
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface flex items-center px-margin-page h-14 transition-transform active:scale-95">
|
||||
<button class="mr-4 text-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red">确认订单</h1>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 px-margin-page space-y-stack-md">
|
||||
<!-- Address Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex gap-3 active:opacity-80 transition-all cursor-pointer items-center"><div class="text-heritage-red flex-shrink-0">
|
||||
<span class="material-symbols-outlined" data-icon="location_on" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-ink-black">张先生</span>
|
||||
<span class="text-body-md text-on-surface-variant">138****8888</span>
|
||||
</div>
|
||||
<p class="text-body-md text-on-surface-variant leading-relaxed">
|
||||
河南省洛阳市涧西区南昌路街道102号
|
||||
</p>
|
||||
</div>
|
||||
<div class="self-center text-outline-variant">
|
||||
<span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
|
||||
</div></section><section class="bg-[#FFF5F5] border border-heritage-red/10 rounded-xl p-stack-md flex gap-3 items-start shadow-sm">
|
||||
<div class="text-heritage-red flex-shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="warning">warning</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-label-md text-heritage-red leading-relaxed">
|
||||
提示：该地址超出同城配送范围，将由总部通过物流快递发货。物流费用需由您承担（到付），请确认是否继续。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-24 h-24 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium bottle of Dukang Imperial Reserve 15th Generation Chinese Baijiu displayed on a minimalist white pedestal. The bottle features elegant calligraphy and deep red accents, shot with soft, high-end studio lighting that highlights the amber liquid and crystalline glass. The background is a clean, heritage-style off-white with subtle paper texture, embodying the Heritage Modernism aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfqy5X1jKiMBB-L5amwR3xfLYbFBc_qsPbB9mdQZxWlV3rrOARPFVhLRDlW7r8Ig03O6c_ZJKLcVEsgYCblwKg8FZ4-EWwcc5bMNc3UsmBycu3bZ5E6S_aH9UBv0_nEP0sMD8rJsC_rMYBiGDMvRbd52taX-Ir_sfRiVvQu7ImFV-YvU54iXE2x51naVuR8qxwmK7YKitPClg0Pysga859a2-yiJ_ID0QR5xM2o84QbMwNyOEoDDTKSDNqG6J9jfeTsiIYb5vdVmc">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-ink-black">杜康·御享15代</h3>
|
||||
<p class="text-label-md text-subtle-gray mt-1">500ml | 52% vol</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<span class="font-headline-md text-heritage-red">¥899</span>
|
||||
<div class="flex items-center gap-3 border border-surface-variant rounded-lg px-2 py-1">
|
||||
<button class="text-heritage-red flex items-center justify-center active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="font-headline-md text-ink-black min-w-[20px] text-center">1</span>
|
||||
<button class="text-heritage-red flex items-center justify-center active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Coupon Preview -->
|
||||
<section class="bg-[#FFF5F5] border border-aged-amber/30 rounded-xl p-stack-md flex items-center justify-between coupon-notch overflow-hidden shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-2 py-1 rounded text-[10px] font-bold">好客权益</div>
|
||||
<span class="font-headline-md text-heritage-red">本单可享好客权益 ¥100</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Delivery Option -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex justify-between items-center">
|
||||
<span class="text-body-lg text-on-surface">配送方式</span>
|
||||
<div class="text-right">
|
||||
<p class="text-body-md text-on-surface">物流配送</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Price Summary -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] space-y-3">
|
||||
<div class="flex justify-between items-center text-body-md text-on-surface-variant">
|
||||
<span class="">商品总额</span>
|
||||
<span class="">¥899</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-body-md text-on-surface-variant">
|
||||
<span class="">运费</span>
|
||||
<span class="text-heritage-red font-bold">到付</span>
|
||||
</div>
|
||||
<div class="pt-3 border-t border-surface-variant flex justify-between items-center">
|
||||
<span class="font-headline-md text-ink-black">合计</span>
|
||||
<span class="font-headline-xl text-heritage-red">¥899</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Bar -->
|
||||
<footer class="fixed bottom-0 w-full z-50 bg-surface-container-lowest rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] safe-area-bottom">
|
||||
<div class="flex justify-between items-center h-20 px-margin-page">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-body-md text-on-surface-variant">实付:</span>
|
||||
<span class="text-headline-xl text-heritage-red font-bold">¥899</span>
|
||||
</div>
|
||||
<button class="bg-heritage-red text-white font-headline-md px-10 py-3.5 rounded-xl shadow-lg active:scale-95 transition-transform" id="payButton">
|
||||
微信支付
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Interaction Script -->
|
||||
<script>
|
||||
document.getElementById('payButton').addEventListener('click', function() {
|
||||
this.innerHTML = '<span class="flex items-center gap-2"><svg class="animate-spin h-5 w-5 text-white" 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>';
|
||||
this.classList.add('opacity-80', 'pointer-events-none');
|
||||
|
||||
setTimeout(() => {
|
||||
this.innerHTML = '微信支付';
|
||||
this.classList.remove('opacity-80', 'pointer-events-none');
|
||||
alert('订单支付成功！感谢您选择杜康。');
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "确认订单页 - 物流到付版",
|
||||
"screenId": "367f698cf121427da9b0d044142e3414",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:07:05.569Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,302 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 914px; 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Manrope:wght@600;700;800&family=Inter:wght@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">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-background": "#1a1c1b",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-surface": "#1a1c1b",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary": "#820012",
|
||||
"error": "#ba1a1a",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-dim": "#dadad8",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface": "#faf9f7",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary": "#735c00",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"outline": "#8d706e",
|
||||
"background": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"subtle-gray": "#999999",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"ink-black": "#1A1A1A",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container": "#efeeec"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"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"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.store-card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface antialiased">
|
||||
<!-- Top Navigation Anchor (Sticky Shell) -->
|
||||
<header class="sticky top-0 z-50 bg-surface shadow-none">
|
||||
<!-- TopAppBar Component -->
|
||||
<div class="flex items-center justify-between px-margin-page w-full h-14 bg-surface">
|
||||
<button class="active:scale-95 duration-100 hover:opacity-80">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">可用门店</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for center alignment -->
|
||||
</div>
|
||||
<!-- Location & Search Bar -->
|
||||
<div class="px-margin-page pb-4 bg-surface space-y-3">
|
||||
<div class="flex items-center space-x-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
||||
<span class="font-label-md text-label-md">洛阳市 · 涧西区</span>
|
||||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-outline text-[20px]">search</span>
|
||||
</div>
|
||||
<input class="w-full h-11 pl-10 pr-4 bg-surface-container-low border-none rounded-xl text-body-md focus:ring-1 focus:ring-primary/20 transition-all outline-none" placeholder="搜索门店名称或地址" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Tabs -->
|
||||
<div class="bg-surface border-b border-outline-variant/10">
|
||||
<div class="flex overflow-x-auto hide-scrollbar px-margin-page py-3 space-x-8">
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-primary tab-active">全部</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">火锅</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">地方菜</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">高端餐饮</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">烧烤烤肉</button>
|
||||
<button class="relative whitespace-nowrap font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors">西餐</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="px-margin-page py-6 space-y-4 pb-24">
|
||||
<!-- Store Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional architectural photograph of a luxury hotel restaurant entrance in Luoyang, featuring warm amber lighting, traditional Chinese design elements with a modern minimalist twist, and polished surfaces. The scene is elegant and inviting, reflecting high-end hospitality with a rich heritage-red accent color visible in the decor." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_VmvHNE8E5ueryg9QkL1sQiCXZCrgCzyb95Nm5gb3UNtvVC7QglRa_47ep_U9s1k3s6JMh8Mk5_qlbGHQHuwLFRpv2f3rjbmFBR94J58SAP1TceUVhavyX7ZWTzES97V-MPPGbfqcBIZlb9e742Tm_HpnwxiIeTz3QO3YZxW33iviMjrvO30tH9GhkQLFGLnePHE8tRlY9siSXCpoU6wILU5RwdCje-iJ-sn6-B9xMhclgNRc9ZvrCuQ6-CUpNNRVksf4_nD_NJY">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">洛阳盛世明珠酒店</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">800m</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区南昌路128号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="High-end interior design of a modern Chinese hotpot restaurant. The lighting is moody with warm orange and red tones. Tables are arranged neatly with high-quality porcelain. Minimalist aesthetics with heritage-red walls and sleek furniture. Professional food photography style, bright yet atmospheric." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfubdPkH17DScXyeevSq-y0GiS5Ig07xnMFyZBVt1X-iDKmKd9CVw3Emgqxdu-J3Adxrx4SG61w5jfrw--1upwraWTWaxjjLltYi4eNluF52wAKKa6D6rsFP2IlQINobtVvF9mUNRGxyP4t3_9MRdvso-3AOli0dUJUmjQtLcb7qqMH4iOUNedOhZ2aNN8WTthEmqagzXNacdq4ab3fvXrrwmmPD0fx0p3NC5yRy334Q32eW7p4QlFPx3QtzuCrBUwsqk1j83aoEs">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">杜康印象·私房菜</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">1.2km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区西苑路杜康大厦1F</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 3 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1); transition: transform 0.1s;">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A gourmet local Luoyang cuisine restaurant interior, showcasing traditional craftsmanship through contemporary design. Wooden textures, elegant table settings, and soft focal lighting on a signature dish. The atmosphere is sophisticated and authentic. Red silk accents and golden lighting create a premium hospitable feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgc_4UfJqJ1rHKWIi9Wey6rhStiK6UKlgdKmWGTJ-GTExLWaIpYVKw75g4ayAjV2JqBMGs97GV3s90Nos8EnlhD3IM-P7LwxDVzmHDL8pwifoxEGGntx1WXi8tRhblZj7XGOvin_FEhzTdVRbzh7jP2sfX00zE-dyNy0a96ehvR49tnM2eqnVPqpqE_DJG6rw_aOvxJz8U85GdBZpsXru8wBy4FtheGbSRCGOg1ZXG6nBkS8oV9ZGzUqm0MWUtcOE49sh5sEvozB0">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">真不同饭店(老城店)</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">3.5km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 09:30-21:30</span></div>
|
||||
<div class="flex items-center space-x-2 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">老城区中州东路359号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store Card 4 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-3 store-card-shadow flex gap-4 border border-heritage-red/5" style="transform: scale(1);">
|
||||
<div class="relative flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="Luxury banquet hall in a five-star hotel. Crystal chandeliers reflecting on polished marble floors. A palette of off-white, gold, and deep red. High-end dining tables with elegant floral arrangements. The shot is wide and captures a sense of grandeur and professional excellence in hospitality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7WPfxko8NVVhn8RGSqwBCDZpOzt_zCykpzLbg8ykhrDBdiIURTozRhMuT1SgpB83im7QSnW3Zo1gmtv0O1xuHZ59i__mk2Fw5ps6zKPvXr74hCQhFE2578H031AVKCwWQgnYSwDQR6hVkJ0dn-hfzAkWvdtMyLwPKT1NkMEJzCVvrF1QLiaJOsRlYXaK7DSQ-UCyW1sfCTbQ4UH9RwB1vi51iRtOdps85pCLvcklKes6LEuCJjZbo8Buw1lFEZxdHR0Y9IDdpsnU">
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-grow min-w-0">
|
||||
<div class="space-y-0.5">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate">洛阳友谊宾馆中餐厅</h3>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">1.5km</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 mt-1"><span class="px-1.5 py-0.5 bg-success-green/10 text-success-green font-label-md text-[10px] rounded">营业中</span><span class="font-label-md text-label-md text-on-surface-variant">营业时间: 10:00-22:00</span></div>
|
||||
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<p class="font-label-md text-label-md text-on-surface-variant truncate mr-4">涧西区中州西路6号</p>
|
||||
<button class="flex-shrink-0 px-4 py-1.5 bg-heritage-red text-white font-label-md text-label-md rounded-lg active:scale-95 transition-transform">去核销</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More spacing for scroll -->
|
||||
<div class="py-4 text-center">
|
||||
<span class="text-outline text-label-md font-label-md">没有更多门店了</span>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar Component -->
|
||||
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 pb-safe bg-surface shadow-lg border-t border-outline-variant/30"><button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="font-label-md text-label-md">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-primary active:scale-90 transition-transform px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
<span class="font-label-md text-label-md">门店</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">card_giftcard</span>
|
||||
<span class="font-label-md text-label-md">好客权益</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:bg-surface-container-low transition-colors px-4 py-1 rounded-lg">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-label-md text-label-md">我的</span>
|
||||
</button></nav>
|
||||
<script>
|
||||
// Micro-interaction for tabs
|
||||
const tabs = document.querySelectorAll('.whitespace-nowrap');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('text-primary', 'tab-active');
|
||||
t.classList.add('text-on-surface-variant');
|
||||
});
|
||||
tab.classList.add('text-primary', 'tab-active');
|
||||
tab.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
|
||||
// Store card click ripple-like effect
|
||||
const cards = document.querySelectorAll('.store-card-shadow');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousedown', () => {
|
||||
card.style.transform = 'scale(0.98)';
|
||||
card.style.transition = 'transform 0.1s ease';
|
||||
});
|
||||
card.addEventListener('mouseup', () => {
|
||||
card.style.transform = 'scale(1)';
|
||||
});
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "可用门店列表页",
|
||||
"screenId": "ffa51fc9808445a0aaaa07a9b0b523ce",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T08:07:07.649Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,247 @@
|
||||
<!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" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@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": {
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"status-blue": "#2A6EBB",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"error-container": "#ffdad6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"subtle-gray": "#999999",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary": "#735c00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline": "#8d706e",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"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;
|
||||
}
|
||||
.coupon-notch {
|
||||
position: relative;
|
||||
}
|
||||
.coupon-notch::before, .coupon-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.coupon-notch::before { left: -4px; }
|
||||
.coupon-notch::after { right: -4px; }
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen">
|
||||
<!-- Top Navigation Anchor (Shared Component: TopAppBar) -->
|
||||
<header class="bg-surface dark:bg-on-background shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full sticky top-0 z-50 flex items-center justify-between px-margin-page h-16 transition-opacity duration-200">
|
||||
<button class="hover:opacity-80 transition-opacity">
|
||||
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
|
||||
<div class="flex items-center gap-4"><div class="flex items-center gap-1 text-heritage-red">
|
||||
<span class="material-symbols-outlined text-[20px]">location_on</span>
|
||||
<span class="font-label-md">洛阳市</span>
|
||||
</div></div>
|
||||
</header>
|
||||
<main class="pb-24">
|
||||
<!-- Brand Banner Section -->
|
||||
<!-- Category Tabs -->
|
||||
<nav class="mt-stack-lg border-b border-surface-container overflow-x-auto hide-scrollbar flex px-margin-page items-center sticky top-16 bg-background/80 backdrop-blur-md z-40 justify-center gap-[10px]"><div class="px-4 py-2 text-center font-headline-md border-b-2 border-heritage-red text-heritage-red whitespace-nowrap">清香型</div><div class="px-4 py-2 text-center font-headline-md text-subtle-gray opacity-50 cursor-not-allowed whitespace-nowrap">酱香型</div><div class="px-4 py-2 text-center font-headline-md text-subtle-gray opacity-50 cursor-not-allowed whitespace-nowrap">浓香型</div></nav>
|
||||
<!-- Product List Vertical Scroll -->
|
||||
<section class="px-margin-page mt-stack-md flex flex-col gap-gutter-card"><!-- Product Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPgomduaq2f4aEoth48mxljblAo9Gu2UTHkRGj_xoWsgTMVzKExTMy0dY8mtL4PcgyJ6COvMbYSjBOlkp_9DAfQ3FEDX_1BWDRFVHY9HEv2UliiRm5IdmbpDSWl5wWJR644KxcaVuxbEktYpHoOxwU8573Q8ke_3WDBZh8XCSdIRTg-uSEe3R5xlzDhtlxDbpQl_eYibEziT2wh5PNtbPFuOFAmbu_QQ1fzaJhnbZX2z9uTWViZjtwASsSi0ruoPCMEEdYriHhXaA">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·白水古酿 500ml</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥599</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">清香型 52度 礼盒装</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥200 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Product Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJAzdmaEBB3ootOMWOn1lZ9MBBvfLsNGX1t5uTxkMrPJAZVNqEYigsGAJql0gJsvvQT5fI5OAaF1jenuLdb7nQloWs-x4DrketXF9cFiBcH8J59hDHdGCdXAAMJTwFuk815QoH6qPShQIKgweoamLQdD5lwlM5JBXZBuMYDms4woEV-AyXEFXHJGZCyJYSxz7UWuOO2rvcvxuC9bOTU8gR_4SJWYY6PwKGlKDECXflYYC89bB6hrmhFchtjr1VeeO_HpLKC5zlaIM">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·年份陈酿 (十年)</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥880</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">清香型 42度 纯粮酿造</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥350 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Product Card 3 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col group active:scale-[0.98] transition-all duration-500 opacity-100 translate-y-0"><div class="w-full relative bg-surface-container aspect-[21/9]">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAZpYFTg1BRtTpAyLeHWa0JKFmgJ3SqBu3K58_qPpXZInSjFARlxKo8BPH5uoo3nI2s8oFVa4Pvkq1hEY1HxA59QAUQ4Dtk6WC_Ic-1sF5cGGG9KJ2ZVvK_1WgUS3aZtz7nh_RI13W7T_PymFa7N-twAoOzSNiLNcIn4Aq4vS6LTeRhS_xwGQwwNNjhVaSfIs--pP2BF512pYjioXTTH4MlAdwgYSn5mvpycs60_p_sjE1-wu2elkmPchlaNmrSPYVw8rUSPyas2Q">
|
||||
</div>
|
||||
<div class="p-3 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline-md text-on-surface line-clamp-1">杜康·御享1号 珍藏版</h3>
|
||||
<span class="text-heritage-red font-headline-lg">¥1299</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md">高端定制 限量发售</p>
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<div class="bg-aged-amber text-on-secondary-fixed-variant px-3 py-1 rounded-sm text-label-md font-bold coupon-notch inline-flex items-center">享 ¥500 好客权益</div>
|
||||
<button class="bg-heritage-red text-white px-6 py-2 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div></div></section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell (Shared Component: BottomNavBar) -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-2 pb-safe px-4 bg-surface-container-lowest shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl"><a class="flex flex-col items-center justify-center text-heritage-red font-bold transition-transform scale-95 active:scale-90" href="#"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">home</span><span class="font-label-md text-label-md">首页</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">storefront</span><span class="font-label-md text-label-md">门店</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">card_giftcard</span><span class="font-label-md text-label-md">好客权益</span></a><a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-transform active:scale-90" href="#"><span class="material-symbols-outlined">person</span><span class="font-label-md text-label-md">我的</span></a></footer>
|
||||
<script>
|
||||
// Micro-interaction for add to cart
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.classList.add('scale-90');
|
||||
});
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.classList.remove('scale-90');
|
||||
});
|
||||
});
|
||||
|
||||
// Simple observer for reveal effects
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('opacity-100', 'translate-y-0');
|
||||
entry.target.classList.remove('opacity-0', 'translate-y-4');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('section > div').forEach(el => {
|
||||
el.classList.add('transition-all', 'duration-500', 'opacity-0', 'translate-y-4');
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "小程序首页 - 大图商品布局优化",
|
||||
"screenId": "6299c14c8f5b4a0d89b454a09904e8b9",
|
||||
"category": "user",
|
||||
"syncedAt": "2026-06-29T02:34:36.115Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user