init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -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&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@500&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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"
+}