feat: multi-module iteration
This commit is contained in:
@@ -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-29T08:07:26.468Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Reference in New Issue
Block a user