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