feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
---
|
||||
name: Dukang Hospitality Heritage
|
||||
colors:
|
||||
surface: '#faf9f7'
|
||||
surface-dim: '#dadad8'
|
||||
surface-bright: '#faf9f7'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f4f3f1'
|
||||
surface-container: '#efeeec'
|
||||
surface-container-high: '#e9e8e6'
|
||||
surface-container-highest: '#e3e2e0'
|
||||
on-surface: '#1a1c1b'
|
||||
on-surface-variant: '#5a413f'
|
||||
inverse-surface: '#2f3130'
|
||||
inverse-on-surface: '#f1f1ef'
|
||||
outline: '#8d706e'
|
||||
outline-variant: '#e2bebc'
|
||||
surface-tint: '#b3272c'
|
||||
primary: '#820012'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#a61d24'
|
||||
on-primary-container: '#ffb9b4'
|
||||
inverse-primary: '#ffb3ae'
|
||||
secondary: '#735c00'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#fed65b'
|
||||
on-secondary-container: '#745c00'
|
||||
tertiary: '#37413b'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#4e5852'
|
||||
on-tertiary-container: '#c2cdc6'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#ffdad7'
|
||||
primary-fixed-dim: '#ffb3ae'
|
||||
on-primary-fixed: '#410004'
|
||||
on-primary-fixed-variant: '#910817'
|
||||
secondary-fixed: '#ffe088'
|
||||
secondary-fixed-dim: '#e9c349'
|
||||
on-secondary-fixed: '#241a00'
|
||||
on-secondary-fixed-variant: '#574500'
|
||||
tertiary-fixed: '#dae5dd'
|
||||
tertiary-fixed-dim: '#bec9c2'
|
||||
on-tertiary-fixed: '#141e19'
|
||||
on-tertiary-fixed-variant: '#3f4943'
|
||||
background: '#faf9f7'
|
||||
on-background: '#1a1c1b'
|
||||
surface-variant: '#e3e2e0'
|
||||
heritage-red: '#A61D24'
|
||||
aged-amber: '#FFBF00'
|
||||
ink-black: '#1A1A1A'
|
||||
subtle-gray: '#999999'
|
||||
success-green: '#2D6A4F'
|
||||
status-blue: '#2A6EBB'
|
||||
typography:
|
||||
headline-xl:
|
||||
fontFamily: Manrope
|
||||
fontSize: 32px
|
||||
fontWeight: '700'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Manrope
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: 32px
|
||||
headline-md:
|
||||
fontFamily: Manrope
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 26px
|
||||
body-lg:
|
||||
fontFamily: Be Vietnam Pro
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: Be Vietnam Pro
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
coupon-amount:
|
||||
fontFamily: Manrope
|
||||
fontSize: 28px
|
||||
fontWeight: '700'
|
||||
lineHeight: 28px
|
||||
headline-lg-mobile:
|
||||
fontFamily: Manrope
|
||||
fontSize: 20px
|
||||
fontWeight: '600'
|
||||
lineHeight: 28px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
base: 8px
|
||||
margin-page: 20px
|
||||
gutter-card: 12px
|
||||
stack-sm: 4px
|
||||
stack-md: 16px
|
||||
stack-lg: 32px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system embodies "Heritage Modernism." It bridges the thousand-year legacy of Dukang liquor with the frictionless convenience of a modern WeChat Mini Program. The brand personality is **distinguished, hospitable, and authoritative**, designed to appeal to a premium demographic that values quality and tradition without wanting the clutter of typical e-commerce.
|
||||
|
||||
The visual style is **Minimalist with Tactile Accents**. We use heavy whitespace and a strict grid to signify "Premium," while using rich, physical metaphors (like subtle amber gradients and paper-textured backgrounds) to ground the digital experience in the physical world of aged spirits and fine dining.
|
||||
|
||||
**Key Principles:**
|
||||
- **Clarity Over Promotion:** No loud sales banners. The "Buy Liquor, Get Dining Coupons" value proposition is integrated into the product architecture, not shouted through pop-ups.
|
||||
- **Cultural Resonance:** Use of Chinese Red is intentional and restrained—acting as a seal of quality rather than a generic background color.
|
||||
- **Trustworthy Flow:** Transactional transparency is maintained through clear step-indicators and clean information density.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is rooted in the "Five Elements" and traditional Chinese aesthetics, refined for digital screens.
|
||||
|
||||
- **Primary (Heritage Red):** A deep, scholarly red used for primary actions, brand marks, and high-level status. It evokes the "Red Seal" of authenticity.
|
||||
- **Secondary (Warm Gold/Amber):** Represents the liquid gold of aged liquor. Used for the "Coupon Badge" and premium highlights.
|
||||
- **Background (Off-White):** We avoid pure white in favor of a warm, paper-like neutral (`#F9F8F6`) to reduce eye strain and feel more organic.
|
||||
- **Accent (Success Green):** A soft, natural green used for "In Business" status and successful verification states, providing a calming contrast to the red.
|
||||
|
||||
**Color Mode:** Fixed Light Mode to maintain the "clean and modern" hospitality aesthetic required for WeChat environments.
|
||||
|
||||
## Typography
|
||||
|
||||
The system uses a mix of high-quality sans-serifs to ensure maximum legibility within the WeChat environment while maintaining a refined edge.
|
||||
|
||||
- **Manrope (Headlines):** Chosen for its modern, balanced geometric shapes. It provides a contemporary contrast to the traditional brand elements.
|
||||
- **Be Vietnam Pro (Body):** An approachable and highly readable font that works exceptionally well at small sizes for product descriptions.
|
||||
- **Inter (Labels):** Used for functional UI elements like buttons and status tags due to its systematic, utilitarian nature.
|
||||
|
||||
**Hierarchy Rules:**
|
||||
- Price and Coupon amounts should always use `Manrope` Bold to emphasize value.
|
||||
- Product descriptions must implement a `2-line-clamp` to maintain grid consistency.
|
||||
- Navigation titles use `headline-md`.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The design system utilizes a **Fluid Grid** with a specific focus on card-based containers.
|
||||
|
||||
**Grid Architecture:**
|
||||
- **Margins:** A generous 20px page margin is mandatory to create an "Editorial" feel.
|
||||
- **Rhythm:** An 8px base unit governs all spacing.
|
||||
- **Product Display:** Product images are strictly 1:1 (square) to emphasize the bottle design and label.
|
||||
- **Banners:** Use a 16:6 aspect ratio for the home page header to keep focus on the product list below.
|
||||
|
||||
**Responsive Behavior:**
|
||||
- On smaller mobile screens, the 2-column product grid reflows into a single-column list to ensure product photography remains impactful.
|
||||
- Bottom sheets should never exceed 80% of the screen height.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
We avoid heavy shadows in favor of **Tonal Layers** and **Ambient Depth**.
|
||||
|
||||
- **Level 0 (Base):** Off-white background (`#F9F8F6`).
|
||||
- **Level 1 (Cards):** Pure White (`#FFFFFF`) with a very soft, 12% opacity shadow: `0px 4px 20px rgba(166, 29, 36, 0.05)`. Note the subtle red tint in the shadow to harmonize with the primary color.
|
||||
- **Level 2 (Active Elements):** For interaction states, we use a slightly more pronounced shadow and a 1px border of `heritage-red` at 10% opacity.
|
||||
- **Layering:** Bottom sheets and Modals use a background blur (Backdrop Filter: 10px) to provide focus on the selection task without losing the context of the shop.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is **"Modern Softness."**
|
||||
|
||||
- **Cards:** Use a 16px corner radius to feel approachable and high-end.
|
||||
- **Buttons:** Primary buttons use a slightly reduced radius (12px) to look more "contained" and professional compared to more playful social apps.
|
||||
- **Badges:** Success tags and product categories use a "Pill" shape (fully rounded) to differentiate them from functional card elements.
|
||||
- **Photography:** Images should maintain the 16px radius when placed inside cards to ensure a cohesive silhouette.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Background in Heritage Red, White text, 12px radius. High-contrast and centered.
|
||||
- **Secondary:** Transparent background with a 1px Heritage Red border.
|
||||
|
||||
### The Coupon Badge (¥XXX餐券)
|
||||
- **Design:** This is the hero of the product card. It features a Warm Amber (`#FFBF00`) background with a decorative "ticket" notch on the sides.
|
||||
- **Placement:** Positioned at the bottom-left of the product image or top-right of the card container.
|
||||
|
||||
### Status Indicators (Step-Tracking)
|
||||
- Horizontal layout with thin 2px lines.
|
||||
- Completed steps are Heritage Red with a Checkmark icon.
|
||||
- Pending steps are Subtle Gray with a simple dot.
|
||||
|
||||
### Bottom Sheets
|
||||
- Used for city selection and address picking.
|
||||
- Must include a clear "Grabber" bar at the top and a fixed "Confirm" button at the base.
|
||||
|
||||
### Cards
|
||||
- Standard `ProductCard` features a 1:1 image at the top, followed by 12px padding for the title, price, and the Amber Coupon Badge.
|
||||
- `OrderCard` uses a horizontal layout for quick status scanning.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html><html class="h-full" 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@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">
|
||||
<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;
|
||||
}
|
||||
|
||||
/* Carousel Styles */
|
||||
.carousel-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.carousel-item {
|
||||
flex: 0 0 100%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md h-full flex flex-col overflow-hidden">
|
||||
<!-- Top Navigation Anchor -->
|
||||
<header class="bg-surface dark:bg-on-background shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full flex-none z-50 flex items-center justify-between px-margin-page h-16">
|
||||
<button class="hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-heritage-red">menu</span>
|
||||
</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 Content Area - Scrollable -->
|
||||
<main class="flex-1 overflow-y-auto hide-scrollbar pb-24">
|
||||
<!-- Category Tabs - Sticky inside main -->
|
||||
<nav class="sticky top-0 bg-background/90 backdrop-blur-md z-40 flex px-margin-page items-center justify-center gap-2 border-b border-surface-container py-2">
|
||||
<div class="px-3 py-1.5 text-center font-headline-md border-b-2 border-heritage-red text-heritage-red whitespace-nowrap">清香型</div>
|
||||
<div class="px-3 py-1.5 text-center font-headline-md text-subtle-gray opacity-50 cursor-not-allowed whitespace-nowrap">酱香型</div>
|
||||
<div class="px-3 py-1.5 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-4 flex flex-col gap-4">
|
||||
<!-- 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 transition-all duration-300">
|
||||
<div class="relative w-full aspect-[21/10] bg-surface-container overflow-hidden">
|
||||
<div class="carousel-container h-full">
|
||||
<div class="carousel-item">
|
||||
<img alt="Product View 1" 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="carousel-item">
|
||||
<img alt="Product View 2" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJAzdmaEBB3ootOMWOn1lZ9MBBvfLsNGX1t5uTxkMrPJAZVNqEYigsGAJql0gJsvvQT5fI5OAaF1jenuLdb7nQloWs-x4DrketXF9cFiBcH8J59hDHdGCdXAAMJTwFuk815QoH6qPShQIKgweoamLQdD5lwlM5JBXZBuMYDms4woEV-AyXEFXHJGZCyJYSxz7UWuOO2rvcvxuC9bOTU8gR_4SJWYY6PwKGlKDECXflYYC89bB6hrmhFchtjr1VeeO_HpLKC5zlaIM">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel Indicator -->
|
||||
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1 px-2 py-1 rounded-full bg-black/20 backdrop-blur-sm pointer-events-none">
|
||||
<div class="w-1 h-1 rounded-full bg-white"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-white/50"></div>
|
||||
</div>
|
||||
</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-5 py-1.5 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 transition-all duration-300">
|
||||
<div class="relative w-full aspect-[21/10] bg-surface-container overflow-hidden">
|
||||
<div class="carousel-container h-full">
|
||||
<div class="carousel-item">
|
||||
<img alt="Product View 1" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJAzdmaEBB3ootOMWOn1lZ9MBBvfLsNGX1t5uTxkMrPJAZVNqEYigsGAJql0gJsvvQT5fI5OAaF1jenuLdb7nQloWs-x4DrketXF9cFiBcH8J59hDHdGCdXAAMJTwFuk815QoH6qPShQIKgweoamLQdD5lwlM5JBXZBuMYDms4woEV-AyXEFXHJGZCyJYSxz7UWuOO2rvcvxuC9bOTU8gR_4SJWYY6PwKGlKDECXflYYC89bB6hrmhFchtjr1VeeO_HpLKC5zlaIM">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img alt="Product View 2" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPgomduaq2f4aEoth48mxljblAo9Gu2UTHkRGj_xoWsgTMVzKExTMy0dY8mtL4PcgyJ6COvMbYSjBOlkp_9DAfQ3FEDX_1BWDRFVHY9HEv2UliiRm5IdmbpDSWl5wWJR644KxcaVuxbEktYpHoOxwU8573Q8ke_3WDBZh8XCSdIRTg-uSEe3R5xlzDhtlxDbpQl_eYibEziT2wh5PNtbPFuOFAmbu_QQ1fzaJhnbZX2z9uTWViZjtwASsSi0ruoPCMEEdYriHhXaA">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1 px-2 py-1 rounded-full bg-black/20 backdrop-blur-sm pointer-events-none">
|
||||
<div class="w-1 h-1 rounded-full bg-white"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-white/50"></div>
|
||||
</div>
|
||||
</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-5 py-1.5 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 transition-all duration-300">
|
||||
<div class="relative w-full aspect-[21/10] bg-surface-container overflow-hidden">
|
||||
<div class="carousel-container h-full">
|
||||
<div class="carousel-item">
|
||||
<img alt="Product View 1" 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="carousel-item">
|
||||
<img alt="Product View 2" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJAzdmaEBB3ootOMWOn1lZ9MBBvfLsNGX1t5uTxkMrPJAZVNqEYigsGAJql0gJsvvQT5fI5OAaF1jenuLdb7nQloWs-x4DrketXF9cFiBcH8J59hDHdGCdXAAMJTwFuk815QoH6qPShQIKgweoamLQdD5lwlM5JBXZBuMYDms4woEV-AyXEFXHJGZCyJYSxz7UWuOO2rvcvxuC9bOTU8gR_4SJWYY6PwKGlKDECXflYYC89bB6hrmhFchtjr1VeeO_HpLKC5zlaIM">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1 px-2 py-1 rounded-full bg-black/20 backdrop-blur-sm pointer-events-none">
|
||||
<div class="w-1 h-1 rounded-full bg-white"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-white/50"></div>
|
||||
</div>
|
||||
</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-5 py-1.5 rounded-full font-label-md hover:opacity-90 transition-all active:scale-90">立即购买</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell (Fixed) -->
|
||||
<footer class="flex-none 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)] border-t border-surface-container rounded-t-xl h-20">
|
||||
<a class="flex flex-col items-center justify-center text-heritage-red font-bold transition-transform 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">receipt_long</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 and navigation
|
||||
document.querySelectorAll('button, a').forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.classList.add('scale-95');
|
||||
});
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.classList.remove('scale-95');
|
||||
});
|
||||
});
|
||||
|
||||
// Carousel Scroll Indicator Update
|
||||
document.querySelectorAll('.carousel-container').forEach(carousel => {
|
||||
const indicators = carousel.parentElement.querySelectorAll('.absolute div');
|
||||
carousel.addEventListener('scroll', () => {
|
||||
const scrollPosition = carousel.scrollLeft;
|
||||
const width = carousel.offsetWidth;
|
||||
const index = Math.round(scrollPosition / width);
|
||||
|
||||
indicators.forEach((dot, i) => {
|
||||
if (i === index) {
|
||||
dot.classList.add('bg-white');
|
||||
dot.classList.remove('bg-white/50');
|
||||
} else {
|
||||
dot.classList.remove('bg-white');
|
||||
dot.classList.add('bg-white/50');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<FIFE Image failed to fetch>
|
||||
@@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Reference in New Issue
Block a user