深色暗金奢华腕表电商页面设计：Airbnb系统融合极简美学

By 表歌, 4 May, 2026

推理

The user wants me to create a luxury minimalist e-commerce product page for a high-end designer watch. Let me break down the requirements:

1. **Product**: High-end designer wristwatch
2. **Layout**: Editorial-grade large imagery, refined "Add to Cart" button, elegant customer reviews module
3. **Theme**: Dark theme with dark gold accents for premium brand experience
4. **Lighting**: Professional product photography lighting effects
5. **Design System**: Airbnb-based but adapted for luxury watch e-commerce

However, the design system provided is Airbnb's which is a light, white-canvas marketplace. The user wants a dark theme with gold accents. I need to adapt the Airbnb design system fundamentals (typography, spacing, rounded corners, component patterns) to a dark luxury theme.

Let me first get the design system recommendations for luxury watches, then get assets.

Let me call the design system tool and assets tool in parallel.I have the design system and assets. The watch image I can use is `/assets/images/products/product-29.jpg` - a minimalist round watch with gold case, white dial, black leather strap.

Now let me plan the layout based on the Airbnb design system adapted for dark luxury theme:

The design system recommends:
- Dark background (#0a0a0a), dark gold accent (#d4a537)
- Minimalism style
- Hero + Features + CTA layout
- But I need to adapt Airbnb fundamentals

Let me think about the page structure for a luxury watch e-commerce product page:

1. **Top Nav** - Minimal dark nav with brand logo, links
2. **Hero Section** - Large editorial product image with subtle lighting effects
3. **Product Details** - Watch specs, materials, description
4. **Add to Cart** - Refined CTA with price
5. **Customer Reviews** - Elegant review cards
6. **Footer** - Minimal footer

I'll blend:
- Airbnb's typography scale and spacing system
- Dark theme with gold accents (#d4a537)
- Airbnb's rounded corners philosophy (soft, pill shapes)
- The watch asset we got

Let me design this with:
- Deep dark background (#0a0a0a with subtle warm undertones)
- Gold accent (#d4a537 / warm gold)
- Clean white text with proper hierarchy
- Professional lighting effects (radial gradients, subtle glow)
- Editorial large imagery

The product image is a watch with gold case and black leather strap on white background - I'll use it as the hero image. But since it's on a white background, I need to frame it well in a dark theme context.

Let me create the full HTML now. I'll use Tailwind CSS and custom CSS for luxury effects.

Key design decisions:
- Font: Since Airbnb Cereal VF isn't available via Google Fonts, I'll use "Cormorant Garamond" for display (editorial luxury feel) and "Inter" for body as the design system suggests
- Colors: Dark background #0a0a0a, gold #d4a537, white text
- Subtle gold gradients and glow effects for the "professional photography lighting"
- Airbnb's spacing system: 8px base, section at 64px
- Airbnb's rounded corners: sm (8px), md (14px), lg (20px), full (9999px)

Let me structure the page:

1. Top navigation bar - minimal
2. Hero with large product image + product name + price
3. Product details section (materials, specs, description)
4. Add to cart section with refined button
5. Customer reviews in elegant format
6. Footer

For the professional photography lighting effects, I'll use CSS radial gradients and glow behind the product image to simulate studio lighting.

Let me also think about how to handle the watch image since it's on a white background. I'll place it in a dark container with a subtle gold glow/radial gradient behind it to create the studio lighting effect.

Now let me write the complete HTML. I need to be careful about:
- No emojis
- Font Awesome icons only
- Chinese text
- Dark theme with gold accents
- Responsive design

Let me build this out.

For the reviews, I need to create fictional but convincing customer reviews in Chinese.

Let me also think about the product specs:
- Swiss movement
- Sapphire crystal
- Gold case (18K)
- Italian leather strap
- Water resistant
- 42mm case
- Limited edition

Now, the "Add to Cart" button should be refined - using the gold accent color with dark text for contrast, pill-shaped following Airbnb's philosophy.

Let me also incorporate some subtle animations - like a subtle pulse on the add to cart, or the product image having a subtle glow animation.

I'll use CSS variables consistent with Airbnb's approach.

For the asset, I have product-29.jpg which is a watch on white background. To make it work in dark theme, I'll place it on a dark card or use a frame approach. Actually, I'll use it as is - the white dial and gold case will pop beautifully against the dark background.

Let me finalize the structure:

```
- nav (dark, minimal)
- hero (split: large image left, product info right)
- product name, tagline
- price
- key features
- add to cart button
- details section (materials, specs)
- reviews section
- footer
```

I think a split hero works great - large watch image on one side, product details on the other. This gives the editorial feel.

For mobile, it stacks vertically.

Let me also add some subtle decorative elements - golden lines, subtle patterns, etc.

Now let me code this up. I'll use Cormorant Garamond for the display/editorial headings and Inter for body text. This gives a nice luxury contrast between the elegant serif display and clean sans-serif body.

Actually, I should also consider Playfair Display for the luxury watch feel. Let me go with:
- Cormorant Garamond - for the main product name (elegant, editorial)
- Inter - for body text (clean, modern, as design system suggests)

Wait, the design system from get_design_system says Inter for both heading and body. But for a luxury watch page, I think a serif display font adds that editorial quality. Let me use Cormorant Garamond for the display headings and Inter for body - this is a creative choice that elevates the luxury feel beyond what a pure sans-serif system would deliver.

Actually, let me reconsider. The Airbnb design system says to use Airbnb Cereal VF. For a luxury adaptation, Playfair Display would be excellent for headings. Let me use:
- Playfair Display for headings (luxurious, editorial serif)
- Inter for body (clean, modern)

This combination is classic for luxury brands.

Now let me write the complete HTML. I'll make it responsive with breakpoints at 744px, 1128px following Airbnb's responsive behavior.

For the glowing effects, I'll create radial gradients behind the product to simulate professional studio lighting.

Let me also add some subtle particle or light streak effects to enhance the luxury feel.

OK let me write it all out now. This is going to be a substantial page.

One more thing - the "Add to Cart" button. In Airbnb terms, this would be a `button-primary` but with gold instead of Rausch. Let me make it a refined pill shape with gold accent, dark text on gold background, with a subtle hover glow effect.

For the customer reviews, I'll create 3 elegant review cards with star ratings (Font Awesome stars), customer names, and thoughtful reviews about the watch.

Now let me map the spacing using Airbnb tokens:
- Section padding: 64px (spacing.section)
- Card padding: 24px (spacing.lg)
- Gap between elements: 16px (spacing.base)
- Button height: 48px

Colors adapted:
- Primary accent: #d4a537 (warm gold) instead of Rausch
- Background: #0a0a0a
- Surface cards: #151515 / #1a1a1a
- Text primary: #f5f5f5
- Text muted: #888888
- Borders: #222222

Let me create the complete code now.

For the product image, I'll use it with a framing technique - the watch image on a dark card with golden glow behind it. The white dial of the watch will create beautiful contrast.

I need to be very careful about the image path: `/assets/images/products/product-29.jpg`

Let me craft the full HTML. I want it to feel like a high-end editorial spread - think Hodinkee or a luxury watch brand's product page.

Structure:
1. Top bar (brand + nav links)
2. Hero section: large image (left 55%) + product info (right 45%)
- Product name large
- Tagline
- Price
- Key features list
- Add to cart button
3. Story/Materials section
4. Technical specs
5. Reviews
6. Footer

Let me now write the complete HTML. I'll make it visually stunning with:
- Radial gradient glow behind product
- Gold accent lines and dividers
- Subtle text animations
- Elegant typography hierarchy
- Professional studio lighting simulation

I need to make sure the watch image works. The image is product-29.jpg - a minimalist watch with gold case, white dial, black leather strap. Since it's on a white/light background in the image, I'll frame it in a way that works with the dark theme. Maybe I'll use a subtle card or frame around it, or place it over a dark surface with a light glow behind.

Actually, looking at this more carefully, the image likely has a white/light background. I could:
1. Use CSS mix-blend-mode or filters to help it blend
2. Frame it elegantly with a subtle border
3. Use it as-is - the white dial will actually create a nice focal point against the dark background

I think option 3 works best. The white dial of the watch against the dark theme will create a stunning contrast, and the gold case will tie into the gold accent color. I'll place it with a subtle golden glow/radial gradient behind it.

Let me write the complete code now.

Actually, I realize I should use a dark card/frame for the product image to make it feel integrated. Let me create a beautiful presentation with a dark surface that has subtle golden rim lighting.

For the reviews section, I need star ratings. Font Awesome has star icons: `fa-star` (solid) and `fa-star-half-stroke`. I'll use those.

Let me finalize everything and write the complete HTML. I'll aim for approximately a full-featured product page that's visually stunning.

Here's my plan for the custom CSS effects:
- `.gold-glow` - radial gradient simulating studio light behind product
- `.gold-text-gradient` - linear gradient for special headings
- `.card-hover-lift` - subtle elevation on hover (Airbnb style)
- `.light-streak` - subtle animated light streak for luxury feel
- `.gold-border` - subtle gold border effect
- Custom scrollbar styling

For animations:
- Hero section: subtle fade-in on load
- Review cards: subtle staggered fade-in
- Add to cart button: subtle pulse/glow on hover

Let me write it all now. I'll use Tailwind extensively but add custom CSS for the special effects.

One thing - I need to be careful about the image. Since I'm using `/assets/images/products/product-29.jpg`, I need to make sure the path is correct. Based on the assets response, this is the correct path.

Now let me create the complete HTML document.

I think I should also add a subtle grain texture overlay for the editorial feel. Since we have access to transparenttextures.com, I could use a subtle noise pattern, but let me keep it simpler and use CSS for the grain effect.

Actually, let me keep things clean. The luxury minimalism style benefits from restraint. I'll use:
- Dark background with subtle warm undertone
- Gold accents used sparingly
- Clean typography
- Strategic use of glow/lighting effects

Let me write the complete HTML now.

角色

assistant

content

```json{
"summary": "打造了一款以深色主题搭配暗金点缀的高端腕表电商产品页。采用 Airbnb 设计系统的间距与圆角体系，融合奢华极简美学——编辑级大图展示区配以金色光晕模拟专业影棚布光效果，精炼的暗金「加入购物车」按钮，以及优雅的客户评价卡片模块。字体选用 Playfair Display（展示标题）+ Inter（正文）组合，传递高端品牌体验。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Aethel Luxe | 匠心时计</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,4…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --gold: #d4a537;\n --gold-light: #e8c85a;\n --gold-dark: #a07828;\n --gold-muted: #b8943e;\n --bg-deep: #0a0a0a;\n --bg-surface: #141414;\n --bg-card: #1a1a1a;\n --bg-elevated: #1f1f1f;\n --text-primary: #f5f0ea;\n --text-secondary: #b0a89e;\n --text-muted: #7a7268;\n --hairline: #2a2a2a;\n --hairline-soft: #1f1f1f;\n --ink: #f5f0ea;\n --body: #b0a89e;\n --muted: #7a7268;\n --rounded-sm: 8px;\n --rounded-md: 14px;\n --rounded-lg: 20px;\n --rounded-xl: 32px;\n --rounded-full: 9999px;\n --spacing-section: 64px;\n --spacing-lg: 24px;\n --spacing-base: 16px;\n --shadow-card: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);\n --shadow-hover: 0 0 0 1px rgba(212,165,55,0.15), 0 4px 16px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3);\n --transition-base: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --transition-fast: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --transition-slow: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n * {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n background-color: var(--bg-deep);\n }\n\n body {\n font-family: 'Inter', -apple-system, system-ui, 'Helvetica Neue', sans-serif;\n background-color: var(--bg-deep);\n color: var(--text-primary);\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n .font-display {\n font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;\n }\n\n /* Studio Lighting Glow behind product */\n .studio-glow {\n position: relative;\n }\n .studio-glow::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n height: 75%;\n background: radial-gradient(ellipse, rgba(212,165,55,0.18) 0%, rgba(212,165,55,0.06) 35%, rgba(212,165,55,0.01) 55%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 0;\n animation: glowBreathe 5s ease-in-out infinite;\n }\n .studio-glow::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 48%;\n transform: translate(-50%, -50%);\n width: 30%;\n height: 30%;\n background: radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 60%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 1;\n animation: glowBreathe 5s ease-in-out 1.5s infinite;\n }\n\n @keyframes glowBreathe {\n 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }\n 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }\n }\n\n /* Gold accent line */\n .gold-line {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold-muted), var(--gold), var(--gold-muted), transparent);\n border: none;\n width: 100%;\n }\n\n .gold-line-short {\n height: 1px;\n background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);\n border: none;\n width: 80px;\n }\n\n /* Gold text gradient */\n .text-gold-gradient {\n background: linear-gradient(135deg, #e8c85a 0%, #d4a537 30%, #c49a2f 60%, #e8c85a 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* Button hover glow */\n .btn-gold {\n background: linear-gradient(135deg, #d4a537 0%, #c49a2f 50%, #b8902e 100%);\n color: #0a0a0a;\n border: none;\n border-radius: var(--rounded-sm);\n padding: 14px 32px;\n height: 52px;\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.5px;\n cursor: pointer;\n transition: all var(--transition-base);\n position: relative;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .btn-gold::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: left 0.6s ease;\n }\n .btn-gold:hover::after {\n left: 100%;\n }\n .btn-gold:hover {\n box-shadow: 0 0 32px rgba(212,165,55,0.35), 0 0 64px rgba(212,165,55,0.15);\n transform: translateY(-1px);\n }\n .btn-gold:active {\n transform: translateY(0);\n box-shadow: 0 0 16px rgba(212,165,55,0.25);\n background: linear-gradient(135deg, #c49a2f 0%, #b8902e 100%);\n }\n\n .btn-outline-gold {\n background: transparent;\n color: var(--gold);\n border: 1px solid var(--gold);\n border-radius: var(--rounded-sm);\n padding: 13px 31px;\n height: 52px;\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.5px;\n cursor: pointer;\n transition: all var(--transition-base);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .btn-outline-gold:hover {\n background: rgba(212,165,55,0.08);\n border-color: var(--gold-light);\n color: var(--gold-light);\n box-shadow: 0 0 20px rgba(212,165,55,0.12);\n }\n\n /* Review card */\n .review-card {\n background: var(--bg-card);\n border: 1px solid var(--hairline);\n border-radius: var(--rounded-md);\n padding: 28px;\n transition: all var(--transition-base);\n position: relative;\n }\n .review-card:hover {\n border-color: rgba(212,165,55,0.3);\n box-shadow: var(--shadow-hover);\n transform: translateY(-2px);\n }\n .review-card::before {\n content: '\\201C';\n font-family: 'Playfair Display', Georgia, serif;\n position: absolute;\n top: 12px;\n left: 24px;\n font-size: 64px;\n color: rgba(212,165,55,0.12);\n line-height: 1;\n pointer-events: none;\n }\n\n /* Star rating */\n .stars {\n display: inline-flex;\n gap: 3px;\n color: var(--gold);\n }\n\n /* Spec item */\n .spec-item {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n padding: 14px 0;\n border-bottom: 1px solid var(--hairline-soft);\n }\n .spec-item:last-child {\n border-bottom: none;\n }\n .spec-icon {\n color: var(--gold);\n font-size: 18px;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Nav link */\n .nav-link {\n color: var(--text-secondary);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n transition: color var(--transition-fast);\n cursor: pointer;\n position: relative;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 1px;\n background: var(--gold);\n transition: width var(--transition-base);\n }\n .nav-link:hover {\n color: var(--text-primary);\n }\n .nav-link:hover::after {\n width: 100%;\n }\n\n /* Toast / notification style */\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-out forwards;\n }\n .animate-fade-in-up {\n animation: fadeInUp 0.7s ease-out forwards;\n opacity: 0;\n }\n .delay-100 { animation-delay: 0.1s; }\n .delay-200 { animation-delay: 0.2s; }\n .delay-300 { animation-delay: 0.3s; }\n .delay-400 { animation-delay: 0.4s; }\n .delay-500 { animation-delay: 0.5s; }\n .delay-600 { animation-delay: 0.6s; }\n\n /* Product image frame */\n .product-frame {\n background: radial-gradient(ellipse at center, #1f1f1f 0%, #141414 50%, #0a0a0a 100%);\n border-radius: var(--rounded-lg);\n overflow: hidden;\n position: relative;\n }\n .product-frame::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--rounded-lg);\n border: 1px solid rgba(212,165,55,0.12);\n pointer-events: none;\n }\n\n /* Scrollbar */\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: var(--bg-deep);\n }\n ::-webkit-scrollbar-thumb {\n background: #2a2a2a;\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #3a3a3a;\n }\n\n /* Quantity selector */\n .qty-btn {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 1px solid var(--hairline);\n background: transparent;\n color: var(--text-primary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all var(--transition-fast);\n font-size: 16px;\n }\n .qty-btn:hover {\n border-color: var(--gold);\n color: var(--gold);\n }\n\n /* Notification toast */\n .toast {\n position: fixed;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%) translateY(100px);\n background: var(--bg-elevated);\n border: 1px solid rgba(212,165,55,0.4);\n color: var(--text-primary);\n padding: 14px 28px;\n border-radius: var(--rounded-full);\n font-size: 14px;\n font-weight: 500;\n z-index: 1000;\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n box-shadow: 0 8px 32px rgba(0,0,0,0.5);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .toast.show {\n transform: translateX(-50%) translateY(0);\n }\n </style>\n</head>\n<body>\n \n <div id=\"toast\" class=\"toast\">\n <i class=\"fa-solid fa-circle-check\" style=\"color: var(--gold);\"></i>\n <span id=\"toast-msg\">已加入购物车</span>\n </div>\n\n \n <nav class=\"fixed top-0 left-0 right-0 z-50\" style=\"background: rgba(10,10,10,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--hairline); height: 72px;\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10 h-full flex items-center justify-between\">\n \n <a href=\"#\" class=\"flex items-center gap-2 no-underline\">\n <span class=\"font-display text-2xl font-bold tracking-wide text-gold-gradient\">Aethel</span>\n <span class=\"hidden sm:inline text-xs tracking-[0.3em] uppercase\" style=\"color: var(--text-muted); font-weight: 400; margin-top: 2px;\">Luxe</span>\n </a>\n \n <div class=\"hidden md:flex items-center gap-8\">\n <span class=\"nav-link\">时计系列</span>\n <span class=\"nav-link\">品牌故事</span>\n <span class=\"nav-link\">匠心工艺</span>\n <span class=\"nav-link\">专属服务</span>\n </div>\n \n <div class=\"flex items-center gap-5\">\n <button class=\"bg-transparent border-none cursor-pointer p-2 rounded-full transition-colors hover:bg-[#1f1f1f]\" style=\"color: var(--text-secondary);\" aria-label=\"搜索\">\n <i class=\"fa-solid fa-magnifying-glass\" style=\"font-size: 16px;\"></i>\n </button>\n <button class=\"bg-transparent border-none cursor-pointer p-2 rounded-full transition-colors hover:bg-[#1f1f1f] relative\" style=\"color: var(--text-secondary);\" aria-label=\"账户\">\n <i class=\"fa-regular fa-user\" style=\"font-size: 16px;\"></i>\n </button>\n <button id=\"cart-btn\" class=\"bg-transparent border-none cursor-pointer p-2 rounded-full transition-colors hover:bg-[#1f1f1f] relative\" style=\"color: var(--text-secondary);\" aria-label=\"购物车\">\n <i class=\"fa-solid fa-bag-shopping\" style=\"font-size: 16px;\"></i>\n <span id=\"cart-count\" class=\"absolute -top-0.5 -right-0.5 w-[18px] h-[18px] rounded-full flex items-center justify-center text-[10px] font-bold\" style=\"background: var(--gold); color: #0a0a0a; display: none;\">0</span>\n </button>\n <button class=\"md:hidden bg-transparent border-none cursor-pointer p-2 rounded-full transition-colors hover:bg-[#1f1f1f]\" style=\"color: var(--text-secondary);\" aria-label=\"菜单\">\n <i class=\"fa-solid fa-bars\" style=\"font-size: 18px;\"></i>\n </button>\n </div>\n </div>\n </nav>\n\n \n <main class=\"pt-[72px]\">\n \n <section class=\"max-w-7xl mx-auto px-6 lg:px-10\" style=\"padding-top: var(--spacing-section); padding-bottom: var(--spacing-section);\">\n <div class=\"flex flex-col lg:flex-row gap-10 lg:gap-16 items-center\">\n \n <div class=\"w-full lg:w-[55%] product-frame studio-glow animate-fade-in\">\n <div class=\"relative z-[2] aspect-[4/3] lg:aspect-[5/4] flex items-center justify-center p-8 lg:p-12\">\n <img\n src=\"/assets/images/products/product-29.jpg\"\n alt=\"Aethel 经典金壳腕表\"\n class=\"w-full h-full object-contain drop-shadow-2xl\"\n style=\"filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 60px rgba(212,165,55,0.1));\"\n loading=\"eager\"\n />\n </div>\n \n <div class=\"absolute top-5 left-5 z-10 rounded-full px-3 py-1.5 flex items-center gap-1.5\" style=\"background: rgba(10,10,10,0.8); backdrop-filter: blur(10px); border: 1px solid rgba(212,165,55,0.25);\">\n <i class=\"fa-solid fa-gem\" style=\"font-size: 9px; color: var(--gold);\"></i>\n <span style=\"font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--gold); text-transform: uppercase;\">限量典藏</span>\n </div>\n \n <button id=\"wishlist-btn\" class=\"absolute top-5 right-5 z-10 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 border-none\" style=\"background: rgba(10,10,10,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary);\" aria-label=\"收藏\">\n <i class=\"fa-regular fa-heart text-lg\"></i>\n </button>\n \n <div class=\"absolute bottom-5 left-1/2 -translate-x-1/2 z-10 flex gap-2\">\n <span class=\"w-2 h-2 rounded-full\" style=\"background: var(--gold);\"></span>\n <span class=\"w-2 h-2 rounded-full\" style=\"background: rgba(255,255,255,0.2);\"></span>\n <span class=\"w-2 h-2 rounded-full\" style=\"background: rgba(255,255,255,0.2);\"></span>\n </div>\n </div>\n\n \n <div class=\"w-full lg:w-[45%] flex flex-col gap-6\">\n \n <div class=\"animate-fade-in-up delay-100\">\n <span style=\"font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;\">Classique 系列</span>\n </div>\n\n \n <h1 class=\"font-display animate-fade-in-up delay-200\" style=\"font-size: clamp(28px, 4vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; color: var(--text-primary); margin: 0;\">\n Artisan 金臻<br class=\"hidden sm:block\">自动机械腕表\n </h1>\n\n \n <p class=\"animate-fade-in-up delay-300\" style=\"font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 420px;\">\n 瑞士手工打造，18K 玫瑰金表壳搭配意大利小牛皮表带。每一枚时计均经手工抛光打磨，承载百年制表传承。\n </p>\n\n \n <hr class=\"gold-line-short animate-fade-in-up delay-300\" style=\"margin: 4px 0;\">\n\n \n <div class=\"animate-fade-in-up delay-400 flex items-baseline gap-2\">\n <span class=\"font-display\" style=\"font-size: 36px; font-weight: 700; color: var(--text-primary); line-height: 1;\">¥28,800</span>\n <span style=\"font-size: 14px; color: var(--text-muted);\">CNY</span>\n </div>\n\n \n <div class=\"flex flex-wrap gap-x-6 gap-y-2 animate-fade-in-up delay-400\" style=\"font-size: 13px; color: var(--text-secondary);\">\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-circle\" style=\"font-size: 4px; color: var(--gold);\"></i> 瑞士自动机芯</span>\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-circle\" style=\"font-size: 4px; color: var(--gold);\"></i> 蓝宝石水晶镜面</span>\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-circle\" style=\"font-size: 4px; color: var(--gold);\"></i> 42mm 表径</span>\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-circle\" style=\"font-size: 4px; color: var(--gold);\"></i> 50米防水</span>\n </div>\n\n \n <div class=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3 animate-fade-in-up delay-500\" style=\"margin-top: 4px;\">\n \n <div class=\"flex items-center gap-0 rounded-lg overflow-hidden\" style=\"border: 1px solid var(--hairline); height: 52px;\">\n <button id=\"qty-minus\" class=\"qty-btn border-none rounded-none\" style=\"height: 52px; width: 40px;\">\n <i class=\"fa-solid fa-minus\" style=\"font-size: 12px;\"></i>\n </button>\n <span id=\"qty-display\" class=\"flex items-center justify-center font-semibold\" style=\"width: 44px; font-size: 15px; color: var(--text-primary);\">1</span>\n <button id=\"qty-plus\" class=\"qty-btn border-none rounded-none\" style=\"height: 52px; width: 40px;\">\n <i class=\"fa-solid fa-plus\" style=\"font-size: 12px;\"></i>\n </button>\n </div>\n \n <button id=\"add-to-cart\" class=\"btn-gold flex-1\" style=\"min-width: 200px;\">\n <i class=\"fa-solid fa-bag-shopping\"></i>\n 加入购物车\n </button>\n </div>\n\n \n <div class=\"flex flex-wrap gap-4 animate-fade-in-up delay-600\" style=\"margin-top: 2px;\">\n <button class=\"btn-outline-gold flex-1 sm:flex-none\" style=\"min-width: 140px;\">\n <i class=\"fa-regular fa-calendar\"></i>\n 预约鉴赏\n </button>\n <button class=\"btn-outline-gold flex-1 sm:flex-none\" style=\"min-width: 140px;\">\n <i class=\"fa-solid fa-gift\"></i>\n 礼品包装\n </button>\n </div>\n\n \n <div class=\"flex flex-wrap gap-5 animate-fade-in-up delay-600\" style=\"margin-top: 4px; font-size: 12px; color: var(--text-muted);\">\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-shield-halved\" style=\"color: var(--gold); font-size: 11px;\"></i> 5年全球联保</span>\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-truck-fast\" style=\"color: var(--gold); font-size: 11px;\"></i> 免费配送</span>\n <span class=\"flex items-center gap-1.5\"><i class=\"fa-solid fa-rotate-left\" style=\"color: var(--gold); font-size: 11px;\"></i> 30天无忧退换</span>\n </div>\n </div>\n </div>\n </section>\n\n \n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <hr class=\"gold-line\">\n </div>\n\n \n <section class=\"max-w-7xl mx-auto px-6 lg:px-10\" style=\"padding-top: var(--spacing-section); padding-bottom: var(--spacing-section);\">\n <div class=\"flex flex-col lg:flex-row gap-12 lg:gap-20\">\n \n <div class=\"w-full lg:w-[50%]\">\n <span style=\"font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;\">匠心传承</span>\n <h2 class=\"font-display mt-3 mb-5\" style=\"font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.2; color: var(--text-primary);\">\n 时间的艺术\n </h2>\n <div style=\"font-size: 15px; line-height: 1.75; color: var(--text-secondary); max-width: 480px;\">\n <p class=\"mb-4\">每一枚 Aethel Artisan 均由瑞士汝山谷的资深制表师手工组装与调校。机芯夹板饰以日内瓦条纹，摆陀镌刻专属编号，透过蓝宝石水晶底盖尽览精密机械之美。</p>\n <p>18K 玫瑰金表壳经多道手工抛光工序，呈现柔和的缎面光泽。表盘采用大明火珐琅工艺，历久弥新，色泽温润如玉。</p>\n </div>\n \n <div class=\"flex gap-3 mt-6\">\n <div class=\"rounded-lg overflow-hidden flex-1 aspect-[4/3]\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--text-muted); font-size: 12px;\">\n <i class=\"fa-solid fa-gear\" style=\"font-size: 28px; color: rgba(212,165,55,0.3);\"></i>\n </div>\n </div>\n <div class=\"rounded-lg overflow-hidden flex-1 aspect-[4/3]\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--text-muted); font-size: 12px;\">\n <i class=\"fa-solid fa-gem\" style=\"font-size: 28px; color: rgba(212,165,55,0.3);\"></i>\n </div>\n </div>\n <div class=\"rounded-lg overflow-hidden flex-1 aspect-[4/3]\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--text-muted); font-size: 12px;\">\n <i class=\"fa-solid fa-hand-sparkles\" style=\"font-size: 28px; color: rgba(212,165,55,0.3);\"></i>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"w-full lg:w-[50%]\">\n <span style=\"font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;\">技术规格</span>\n <h2 class=\"font-display mt-3 mb-6\" style=\"font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.2; color: var(--text-primary);\">\n 精密参数\n </h2>\n <div class=\"rounded-xl p-6 lg:p-8\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-clock spec-icon\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">机芯</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">Cal. AE-3001 自动上链机械机芯，72小时动力储备</div>\n </div>\n </div>\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-circle spec-icon\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">表壳</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">18K 玫瑰金，42mm 直径，厚度 9.8mm</div>\n </div>\n </div>\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-gem spec-icon\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">表盘</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">大明火珐琅白色表盘，玫瑰金立体时标</div>\n </div>\n </div>\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-shield spec-icon\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">镜面</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">双面防反光处理蓝宝石水晶玻璃</div>\n </div>\n </div>\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-water spec-icon\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">防水</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">50米 / 5 ATM</div>\n </div>\n </div>\n <div class=\"spec-item\">\n <i class=\"fa-solid fa-strap spec-icon\" style=\"transform: rotate(-45deg);\"></i>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">表带</div>\n <div style=\"font-size: 13px; color: var(--text-muted); margin-top: 2px;\">意大利手工小牛皮，玫瑰金针扣，20mm 表耳宽度</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <hr class=\"gold-line\">\n </div>\n\n \n <section class=\"max-w-7xl mx-auto px-6 lg:px-10\" style=\"padding-top: var(--spacing-section); padding-bottom: var(--spacing-section);\">\n <div class=\"text-center mb-10 lg:mb-14\">\n <span style=\"font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase;\">客户心声</span>\n <h2 class=\"font-display mt-3 mb-3\" style=\"font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; color: var(--text-primary);\">\n 藏家品鉴\n </h2>\n <div class=\"flex items-center justify-center gap-3\" style=\"color: var(--text-secondary); font-size: 14px;\">\n <div class=\"stars\">\n <i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i>\n </div>\n <span>4.9 · 共 186 条评价</span>\n </div>\n </div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <div class=\"review-card\">\n <div class=\"stars mb-3\">\n <i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i>\n </div>\n <p style=\"font-size: 14px; line-height: 1.65; color: var(--text-secondary); position: relative; z-index: 1; min-height: 80px;\">\n 实物比照片更加惊艳。玫瑰金的温润色泽在不同光线下呈现出丰富的层次变化，表盘珐琅工艺的质感令人沉醉。每一次抬手看时间都是一种享受。\n </p>\n <div class=\"flex items-center gap-3 mt-4 pt-4\" style=\"border-top: 1px solid var(--hairline-soft);\">\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center font-display text-sm font-bold\" style=\"background: var(--bg-elevated); color: var(--gold);\">陈</div>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">陈志远</div>\n <div style=\"font-size: 12px; color: var(--text-muted);\">收藏家 · 上海</div>\n </div>\n <div style=\"margin-left: auto; font-size: 12px; color: var(--text-muted);\">\n <i class=\"fa-regular fa-clock\"></i> 3 天前\n </div>\n </div>\n </div>\n\n \n <div class=\"review-card\">\n <div class=\"stars mb-3\">\n <i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i>\n </div>\n <p style=\"font-size: 14px; line-height: 1.65; color: var(--text-secondary); position: relative; z-index: 1; min-height: 80px;\">\n 送给先生的周年礼物，他爱不释手。包装精美，配送极快。客服团队还帮忙调整了表带长度，服务堪称一流。\n </p>\n <div class=\"flex items-center gap-3 mt-4 pt-4\" style=\"border-top: 1px solid var(--hairline-soft);\">\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center font-display text-sm font-bold\" style=\"background: var(--bg-elevated); color: var(--gold);\">林</div>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">林婉清</div>\n <div style=\"font-size: 12px; color: var(--text-muted);\">品牌主理人 · 杭州</div>\n </div>\n <div style=\"margin-left: auto; font-size: 12px; color: var(--text-muted);\">\n <i class=\"fa-regular fa-clock\"></i> 1 周前\n </div>\n </div>\n </div>\n\n \n <div class=\"review-card\">\n <div class=\"stars mb-3\">\n <i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star-half-stroke\"></i>\n </div>\n <p style=\"font-size: 14px; line-height: 1.65; color: var(--text-secondary); position: relative; z-index: 1; min-height: 80px;\">\n 走时精准，每日误差在 +3 秒以内。皮质表带柔软舒适，佩戴两周后更贴合手腕。唯一小遗憾是表扣略紧，但瑕不掩瑜。\n </p>\n <div class=\"flex items-center gap-3 mt-4 pt-4\" style=\"border-top: 1px solid var(--hairline-soft);\">\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center font-display text-sm font-bold\" style=\"background: var(--bg-elevated); color: var(--gold);\">周</div>\n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">周明哲</div>\n <div style=\"font-size: 12px; color: var(--text-muted);\">建筑师 · 北京</div>\n </div>\n <div style=\"margin-left: auto; font-size: 12px; color: var(--text-muted);\">\n <i class=\"fa-regular fa-clock\"></i> 2 周前\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"text-center mt-8\">\n <button class=\"btn-outline-gold\">\n 查看全部 186 条评价\n <i class=\"fa-solid fa-arrow-right\" style=\"font-size: 12px;\"></i>\n </button>\n </div>\n </section>\n\n \n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <hr class=\"gold-line\">\n </div>\n\n \n <section class=\"max-w-7xl mx-auto px-6 lg:px-10\" style=\"padding-top: var(--spacing-section); padding-bottom: var(--spacing-section);\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <div class=\"text-center p-6 rounded-xl\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <i class=\"fa-solid fa-certificate mb-4\" style=\"font-size: 28px; color: var(--gold);\"></i>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">瑞士官方认证</div>\n <div style=\"font-size: 12px; color: var(--text-muted); margin-top: 6px;\">COSC 天文台认证</div>\n </div>\n <div class=\"text-center p-6 rounded-xl\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <i class=\"fa-solid fa-shield-halved mb-4\" style=\"font-size: 28px; color: var(--gold);\"></i>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">5 年质保</div>\n <div style=\"font-size: 12px; color: var(--text-muted); margin-top: 6px;\">全球联保服务</div>\n </div>\n <div class=\"text-center p-6 rounded-xl\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <i class=\"fa-solid fa-box-open mb-4\" style=\"font-size: 28px; color: var(--gold);\"></i>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">精美礼盒</div>\n <div style=\"font-size: 12px; color: var(--text-muted); margin-top: 6px;\">手工樱桃木表盒</div>\n </div>\n <div class=\"text-center p-6 rounded-xl\" style=\"background: var(--bg-card); border: 1px solid var(--hairline);\">\n <i class=\"fa-solid fa-headset mb-4\" style=\"font-size: 28px; color: var(--gold);\"></i>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary);\">专属顾问</div>\n <div style=\"font-size: 12px; color: var(--text-muted); margin-top: 6px;\">一对一贵宾服务</div>\n </div>\n </div>\n </section>\n </main>\n\n \n <footer style=\"background: var(--bg-surface); border-top: 1px solid var(--hairline);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\" style=\"padding-top: 48px; padding-bottom: 48px;\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-16\">\n \n <div class=\"col-span-2 md:col-span-1\">\n <span class=\"font-display text-xl font-bold text-gold-gradient\">Aethel</span>\n <p class=\"mt-3\" style=\"font-size: 13px; color: var(--text-muted); line-height: 1.6;\">\n 以匠心致敬时间。<br>自 1928 年起传承瑞士制表工艺。\n </p>\n </div>\n \n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;\">探索</div>\n <div class=\"flex flex-col gap-2.5\">\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">时计系列</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">限量典藏</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">表带配件</a>\n </div>\n </div>\n \n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;\">服务</div>\n <div class=\"flex flex-col gap-2.5\">\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">专属顾问</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">维修保养</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">常见问题</a>\n </div>\n </div>\n \n <div>\n <div style=\"font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px;\">品牌</div>\n <div class=\"flex flex-col gap-2.5\">\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">品牌故事</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">匠心工艺</a>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">可持续发展</a>\n </div>\n </div>\n </div>\n\n \n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4 mt-10 pt-6\" style=\"border-top: 1px solid var(--hairline-soft);\">\n <div style=\"font-size: 12px; color: var(--text-muted);\">\n © 2026 Aethel Luxe SA. 保留所有权利。\n </div>\n <div class=\"flex items-center gap-5\" style=\"font-size: 12px; color: var(--text-muted);\">\n <a href=\"#\" style=\"color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">隐私政策</a>\n <a href=\"#\" style=\"color: var(--text-muted); text-decoration: none; transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">服务条款</a>\n <span class=\"flex items-center gap-1.5 cursor-pointer\" style=\"transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\">\n <i class=\"fa-solid fa-globe\"></i> 简体中文\n </span>\n </div>\n \n <div class=\"flex items-center gap-4\">\n <a href=\"#\" style=\"color: var(--text-muted); transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\"><i class=\"fa-brands fa-weixin\"></i></a>\n <a href=\"#\" style=\"color: var(--text-muted); transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\"><i class=\"fa-brands fa-weibo\"></i></a>\n <a href=\"#\" style=\"color: var(--text-muted); transition: color 0.15s;\" onmouseover=\"this.style.color='var(--gold)'\" onmouseout=\"this.style.color='var(--text-muted)'\"><i class=\"fa-brands fa-instagram\"></i></a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n (function() {\n // Cart state\n let cartCount = 0;\n let quantity = 1;\n let isWishlisted = false;\n\n const qtyDisplay = document.getElementById('qty-display');\n const qtyMinus = document.getElementById('qty-minus');\n const qtyPlus = document.getElementById('qty-plus');\n const addToCart = document.getElementById('add-to-cart');\n const cartCountEl = document.getElementById('cart-count');\n const wishlistBtn = document.getElementById('wishlist-btn');\n const toast = document.getElementById('toast');\n const toastMsg = document.getElementById('toast-msg');\n\n // Quantity\n qtyMinus.addEventListener('click', function() {\n if (quantity > 1) {\n quantity--;\n qtyDisplay.textContent = quantity;\n }\n });\n\n qtyPlus.addEventListener('click', function() {\n if (quantity < 10) {\n quantity++;\n qtyDisplay.textContent = quantity;\n }\n });\n\n // Add to Cart\n function showToast(msg) {\n toastMsg.textContent = msg;\n toast.classList.add('show');\n clearTimeout(toast._timeout);\n toast._timeout = setTimeout(function() {\n toast.classList.remove('show');\n }, 2500);\n }\n\n addToCart.addEventListener('click', function() {\n cartCount += quantity;\n cartCountEl.textContent = cartCount;\n cartCountEl.style.display = 'flex';\n showToast('已加入购物车 · ' + quantity + ' 件');\n\n // Button feedback\n addToCart.style.transform = 'scale(0.97)';\n setTimeout(function() {\n addToCart.style.transform = '';\n }, 150);\n });\n\n // Wishlist\n wishlistBtn.addEventListener('click', function() {\n isWishlisted = !isWishlisted;\n var icon = wishlistBtn.querySelector('i');\n if (isWishlisted) {\n icon.className = 'fa-solid fa-heart text-lg';\n wishlistBtn.style.color = 'var(--gold)';\n wishlistBtn.style.borderColor = 'rgba(212,165,55,0.4)';\n showToast('已添加至收藏');\n } else {\n icon.className = 'fa-regular fa-heart text-lg';\n wishlistBtn.style.color = 'var(--text-secondary)';\n wishlistBtn.style.borderColor = 'rgba(255,255,255,0.1)';\n }\n });\n\n // Cart button click\n document.getElementById('cart-btn').addEventListener('click', function() {\n if (cartCount === 0) {\n showToast('购物车为空');\n } else {\n showToast('购物车中有 ' + cartCount + ' 件商品');\n }\n });\n })();\n </script>\n</body>\n</html>"
},
"next": [
"添加表盘360度旋转展示",
"增加限量编号选择器",
"嵌入制表工艺纪录短片",
"提供个性化刻字服务入口",
"增加多款表带快速切换预览"
],
"breakpoint": "none"
}
```

total_tokens

29745

summary

打造了一款以深色主题搭配暗金点缀的高端腕表电商产品页。采用 Airbnb 设计系统的间距与圆角体系，融合奢华极简美学——编辑级大图展示区配以金色光晕模拟专业影棚布光效果，精炼的暗金「加入购物车」按钮，以及优雅的客户评价卡片模块。字体选用 Playfair Display（展示标题）+ Inter（正文）组合，传递高端品牌体验。

uiParsing

关闭