Spaces:

mistpe
/

showWine

Running

App Files Files Community

mistpe commited on Nov 8, 2024

Commit

a7f685e

verified ·

1 Parent(s): dde79e2

Create index3.html

Browse files

Files changed (1) hide show

index3.html +1915 -0

index3.html ADDED Viewed

	@@ -0,0 +1,1915 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>绍兴黄酒 - 传承·创新</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
+        :root {
+            --primary-color: #FFB42E;      /* 明亮温暖的金黄 */
+            --secondary-color: #FF8264;    /* 暖橙色 */
+            --accent-color: #FF6B6B;       /* 活力红色 */
+            --bg-light: #FFF9F0;          /* 温暖的背景色 */
+            --text-dark: #2D232E;         /* 深紫色文字 */
+            --text-light: #FFF9F0;        /* 浅色文字 */
+            --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
+            --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-light);
+            color: var(--text-dark);
+            overflow-x: hidden;
+        }
+        /* 现代导航栏 */
+        .navigation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(255, 249, 240, 0.8);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        .navigation.scrolled {
+            background: rgba(255, 249, 240, 0.95);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+            padding: 0.8rem 2rem;
+        }
+        .nav-logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            text-decoration: none;
+        }
+        .logo-text {
+            font-size: 1.5rem;
+            font-weight: bold;
+            background: var(--gradient-1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+        }
+        .logo-text::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--gradient-1);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+            transform-origin: right;
+        }
+        .nav-logo:hover .logo-text::after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            align-items: center;
+        }
+        .nav-link {
+            text-decoration: none;
+            color: var(--text-dark);
+            font-size: 1rem;
+            padding: 0.8rem 1.5rem;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            background: transparent;
+            border: 2px solid transparent;
+        }
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--gradient-1);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: -1;
+        }
+        .nav-link:hover {
+            color: white;
+            border-color: transparent;
+        }
+        .nav-link:hover::before {
+            opacity: 1;
+        }
+        .nav-link.active {
+            background: var(--gradient-1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
+        }
+        /* 英雄区域 */
+        .hero {
+            min-height: 100vh;
+            padding-top: 80px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+        }
+        .hero-content {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+        }
+        .hero-text {
+            position: relative;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .hero-subtitle::before {
+            content: '';
+            width: 50px;
+            height: 2px;
+            background: var(--gradient-1);
+        }
+        .hero-title {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            line-height: 1.2;
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        .hero-title .highlight {
+            display: inline-block;
+            position: relative;
+            color: var(--primary-color);
+        }
+        .hero-title .highlight::after {
+            content: '';
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: var(--gradient-1);
+            opacity: 0.3;
+            z-index: -1;
+        }
+        .hero-description {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-dark);
+            opacity: 0.8;
+            margin-bottom: 2rem;
+            position: relative;
+        }
+        .hero-cta {
+            display: flex;
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+        .cta-button {
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .cta-primary {
+            background: var(--gradient-1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
+        }
+        .cta-primary::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .cta-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
+        }
+        .cta-primary:hover::after {
+            opacity: 1;
+        }
+        .cta-secondary {
+            background: transparent;
+            border: 2px solid var(--primary-color);
+            color: var(--text-dark);
+        }
+        .cta-secondary:hover {
+            background: var(--gradient-2);
+            color: white;
+            border-color: transparent;
+        }
+        /* 装饰元素 */
+        .hero-decoration {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+        .decoration-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: var(--gradient-1);
+            opacity: 0.1;
+            filter: blur(40px);
+        }
+        .circle-1 {
+            width: 400px;
+            height: 400px;
+            top: -100px;
+            right: -100px;
+        }
+        .circle-2 {
+            width: 300px;
+            height: 300px;
+            bottom: -50px;
+            left: -50px;
+            background: var(--gradient-2);
+        }
+        .floating-text {
+            position: absolute;
+            font-size: clamp(5rem, 15vw, 10rem);
+            font-weight: bold;
+            opacity: 0.03;
+            white-space: nowrap;
+            color: var(--text-dark);
+        }
+        .floating-text-1 {
+            top: 20%;
+            left: -10%;
+            transform: rotate(-15deg);
+        }
+        .floating-text-2 {
+            bottom: 10%;
+            right: -5%;
+            transform: rotate(10deg);
+        }
+        /* 动态背景图案 */
+        .bg-pattern {
+            position: absolute;
+            inset: 0;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
+                radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
+            opacity: 0.5;
+            animation: patternMove 20s linear infinite;
+        }
+        @keyframes patternMove {
+            0% {
+                background-position: 0% 0%;
+            }
+            100% {
+                background-position: 100% 100%;
+            }
+        }
+        /* 3D展示区占位 */
+        .model-showcase {
+                    position: relative;
+                    width: 100%;
+                    height: 500px;
+                    border-radius: 20px;
+                    overflow: hidden;
+                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+                    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+                    backdrop-filter: blur(10px);
+                }
+                #model-container canvas {
+                    width: 100% !important;
+                    height: 100% !important;
+                    border-radius: 20px;
+                }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navigation">
+        <a href="index.html" class="nav-logo">
+            <span class="logo-text">绍兴黄酒</span>
+        </a>
+        <div class="nav-links">
+            <a href="culture.html" class="nav-link">文化底蕴</a>
+            <a href="products.html" class="nav-link">臻品佳酿</a>
+            <a href="innovation.html" class="nav-link">创新未来</a>
+            <a href="contact.html" class="nav-link">联系我们</a>
+            <a href="shop.html" class="nav-link active">立即品鉴</a>
+        </div>
+    </nav>
+    <!-- 英雄区域 -->
+    <section class="hero">
+        <!-- 背景装饰 -->
+        <div class="hero-decoration">
+            <div class="bg-pattern"></div>
+            <div class="decoration-circle circle-1"></div>
+            <div class="decoration-circle circle-2"></div>
+            <div class="floating-text floating-text-1">匠心</div>
+            <div class="floating-text floating-text-2">传承</div>
+        </div>
+        <!-- 主要内容 -->
+        <div class="hero-content">
+            <div class="hero-text">
+                <div class="hero-subtitle">传承千年 · 创新未来</div>
+                <h1 class="hero-title">
+                    遇见 <span class="highlight">绍兴黄酒</span><br>
+                    品味时光之美
+                </h1>
+                <p class="hero-description">
+                    从春秋战国延续至今，绍兴黄酒凝聚着千年匠心与智慧，
+                    以现代创新演绎传统魅力，让年轻一代遇见最纯正的东方美酒。
+                </p>
+                <div class="hero-cta">
+                    <button class="cta-button cta-primary">探索产品</button>
+                    <button class="cta-button cta-secondary">了解文化</button>
+                </div>
+            </div>
+            <div class="model-showcase" id="model-container">
+                <!-- 3D model will be rendered here -->
+            </div>
+        </div>
+    </section>
+<!-- 页面中部分(接续上部分) -->
+<!-- 特色展示区 -->
+<section class="features">
+    <div class="section-header">
+        <h2 class="section-title">匠心臻品</h2>
+        <p class="section-subtitle">传统与创新的完美融合</p>
+    </div>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <div class="feature-icon">
+                <svg viewBox="0 0 24 24" width="40" height="40">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M12,2 C6.5,2 2,6.5 2,12 C2,17.5 6.5,22 12,22 C17.5,22 22,17.5 22,12 C22,6.5 17.5,2 12,2 Z
+                             M12,6 L12,12 L16,16">
+                    </path>
+                    <!-- 创建渐变 -->
+                    <defs>
+                        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#FFB42E"/>
+                            <stop offset="100%" style="stop-color:#FF6B6B"/>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </div>
+            <h3>千年传承</h3>
+            <p>源自春秋的酿造工艺，千年匠心传承，完美呈现东方美酒精髓。</p>
+        </div>
+        <div class="feature-card">
+            <div class="feature-icon">
+                <svg viewBox="0 0 24 24" width="40" height="40">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M12,2 L15,6 L19,7 L19,11 L21,14 L19,17 L19,21 L15,22 L12,20 L9,22 L5,21 L5,17 L3,14 L5,11 L5,7 L9,6 L12,2 Z
+                             M12,8 L12,16 M8,12 L16,12">
+                    </path>
+                </svg>
+            </div>
+            <h3>匠心工艺</h3>
+            <p>严选上乘原料，遵循传统酿造工序，每一滴都是匠心臻品。</p>
+        </div>
+        <div class="feature-card">
+            <div class="feature-icon">
+                <svg viewBox="0 0 24 24" width="40" height="40">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M4,10 C4,6 8,3 12,3 C16,3 20,6 20,10 C20,15 12,21 12,21 C12,21 4,15 4,10 Z
+                             M12,7 L12,13 M9,10 L15,10">
+                    </path>
+                </svg>
+            </div>
+            <h3>品质保证</h3>
+            <p>现代化品控体系，严格把控每道工序，确保卓越品质。</p>
+        </div>
+    </div>
+</section>
+<!-- 产品展示区 -->
+<section class="products">
+    <div class="section-header">
+        <h2 class="section-title">臻品系列</h2>
+        <p class="section-subtitle">每一款都是时光的礼赞</p>
+    </div>
+    <div class="product-showcase">
+        <!-- 第一个产品卡片：传统系列 -->
+        <div class="product-card active">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">传统系列</span>
+                <h3 class="product-name">十年陈酿</h3>
+                <p class="product-description">
+                    经典黄酒，十年陈酿，醇厚绵长，回味无穷。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：14%</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
+                            </path>
+                        </svg>
+                        <span>容量：500ml</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+        <!-- 第二个产品卡片：青春系列 -->
+        <div class="product-card">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder youth-series"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">青春系列</span>
+                <h3 class="product-name">桂花米酒</h3>
+                <p class="product-description">
+                    融入新鲜桂花，清甜怡人，低度微醺，专为年轻人打造的清新黄酒体验。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：8%</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
+                            </path>
+                        </svg>
+                        <span>容量：330ml</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+        <!-- 第三个产品卡片：调制系列 -->
+        <div class="product-card">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder cocktail-series"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">调制系列</span>
+                <h3 class="product-name">东方气泡</h3>
+                <p class="product-description">
+                    经典黄酒邂逅气泡水，加入精选花果茶，创新演绎东方美酒，清爽怡人。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：5%</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
+                            </path>
+                        </svg>
+                        <span>容量：330ml</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+        <!-- 第四个产品卡片：季节限定 -->
+        <div class="product-card">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder season-series"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">季节限定</span>
+                <h3 class="product-name">雪梨暖冬</h3>
+                <p class="product-description">
+                    冬季限定，精选雪梨果汁调配，温热饮用，让传统黄酒焕发冬日温暖魅力。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：11%</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
+                            </path>
+                        </svg>
+                        <span>容量：400ml</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+        <!-- 第五个产品卡片：融合系列 -->
+        <div class="product-card">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder fusion-series"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">融合系列</span>
+                <h3 class="product-name">玫瑰青梅</h3>
+                <p class="product-description">
+                    传统黄酒与玫瑰、青梅的完美融合，清新淡雅，既有传统韵味又充满创新精神。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：10%</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
+                            </path>
+                        </svg>
+                        <span>容量：375ml</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+        <!-- 第六个产品卡片：轻奢系列 -->
+        <div class="product-card">
+            <div class="product-image">
+                <div class="product-decoration">
+                    <svg viewBox="0 0 100 100" class="decoration-circle">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
+                                stroke-width="1" stroke-dasharray="8 4"/>
+                    </svg>
+                </div>
+                <div class="image-placeholder premium-series"></div>
+            </div>
+            <div class="product-info">
+                <span class="product-category">轻奢系列</span>
+                <h3 class="product-name">金箔流光</h3>
+                <p class="product-description">
+                    匠心五年陈酿，搭配食用金箔，现代工艺与传统技术的完美结合，视觉与味觉的双重享受。
+                </p>
+                <div class="product-meta">
+                    <div class="meta-item">
+                        <svg viewBox="0 0 24 24" width="20" height="20">
+                            <path fill="none" stroke="currentColor" stroke-width="2"
+                                  d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
+                            </path>
+                        </svg>
+                        <span>酒精度：12%</span>
+                    </div>
+                </div>
+                <button class="product-btn">了解更多</button>
+            </div>
+        </div>
+    </div>
+    <!-- 旋转展示控件 -->
+    <div class="showcase-controls">
+        <button class="control-btn prev">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="none" stroke="currentColor" stroke-width="2"
+                      d="M15,6 L9,12 L15,18">
+                </path>
+            </svg>
+        </button>
+        <div class="showcase-indicators">
+            <span class="indicator active"></span>
+            <span class="indicator"></span>
+            <span class="indicator"></span>
+            <span class="indicator"></span>
+            <span class="indicator"></span>
+            <span class="indicator"></span>
+        </div>
+        <button class="control-btn next">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="none" stroke="currentColor" stroke-width="2"
+                      d="M9,6 L15,12 L9,18">
+                </path>
+            </svg>
+        </button>
+    </div>
+</section>
+<style>
+/* 产品展示区新增样式 */
+.product-card {
+    display: none !important; /* 使用!important确保样式不被覆盖 */
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    padding: 2rem;
+    background: white;
+    border-radius: 30px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.product-card.active {
+    display: grid !important; /* 使用!important确保样式不被覆盖 */
+    opacity: 1;
+    animation: fadeIn 0.5s ease forwards;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+</style>
+<style>
+/* 特色展示区样式 */
+.features {
+    padding: 6rem 2rem;
+    background: var(--bg-light);
+    position: relative;
+    overflow: hidden;
+}
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+    position: relative;
+}
+.section-title {
+    font-size: 2.5rem;
+    color: var(--text-dark);
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+}
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    height: 3px;
+    background: var(--gradient-1);
+    border-radius: 2px;
+}
+.section-subtitle {
+    font-size: 1.2rem;
+    color: var(--text-dark);
+    opacity: 0.7;
+}
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.feature-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-1);
+    opacity: 0;
+    transition: all 0.3s ease;
+    z-index: 0;
+}
+.feature-card:hover {
+    transform: translateY(-10px);
+}
+.feature-card:hover::before {
+    opacity: 0.05;
+}
+.feature-icon {
+    margin-bottom: 1.5rem;
+    position: relative;
+    z-index: 1;
+}
+.feature-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-dark);
+    position: relative;
+    z-index: 1;
+}
+.feature-card p {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
+}
+/* 产品展示区样式 */
+.products {
+    padding: 6rem 2rem;
+    background: linear-gradient(135deg, #fff5e6, #fff9f0);
+    position: relative;
+}
+.product-showcase {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 0;
+    position: relative;
+}
+.product-card {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    padding: 2rem;
+    background: white;
+    border-radius: 30px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+.product-image {
+    position: relative;
+    padding-top: 100%;
+    background: var(--gradient-2);
+    border-radius: 20px;
+    overflow: hidden;
+}
+.image-placeholder {
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.1);
+}
+.product-decoration {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: rotate 20s linear infinite;
+}
+.decoration-circle {
+    width: 100%;
+    height: 100%;
+}
+.product-info {
+    padding: 2rem;
+}
+.product-category {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--gradient-1);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+}
+.product-name {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--text-dark);
+}
+.product-description {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+}
+.product-meta {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+.meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-dark);
+    opacity: 0.8;
+}
+.product-btn {
+    padding: 1rem 2rem;
+    border: none;
+    background: var(--gradient-1);
+    color: white;
+    border-radius: 25px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.product-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
+}
+.showcase-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 3rem;
+}
+.control-btn {
+    width: 50px;
+    height: 50px;
+    border: none;
+    background: white;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+.control-btn:hover {
+    background: var(--gradient-1);
+    color: white;
+}
+.showcase-indicators {
+    display: flex;
+    gap: 1rem;
+}
+.indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--text-dark);
+    opacity: 0.2;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.indicator.active {
+    width: 30px;
+    border-radius: 5px;
+    background: var(--gradient-1);
+    opacity: 1;
+}
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+.youth-series {
+    background: linear-gradient(135deg, #FFE4B5, #FFB6C1);
+}
+.cocktail-series {
+    background: linear-gradient(135deg, #87CEEB, #98FB98);
+}
+.fusion-series {
+    background: linear-gradient(135deg, #DDA0DD, #FFB6C1);
+}
+.premium-series {
+    background: linear-gradient(135deg, #FFD700, #FFA07A);
+}
+.season-series {
+    background: linear-gradient(135deg, #B0C4DE, #FFE4E1);
+}
+</style>
+<!-- 文化传承区域 -->
+<section class="culture-section">
+    <div class="section-header">
+        <h2 class="section-title">千年酿造，一脉相承</h2>
+        <p class="section-subtitle">探寻绍兴黄酒的文化密码</p>
+    </div>
+    <div class="culture-grid">
+        <!-- 历史传承卡片 -->
+        <div class="culture-card">
+            <div class="culture-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M12,2 L12,22 M4,4 C4,4 8,3 12,3 C16,3 20,4 20,4 L20,20 C20,20 16,19 12,19 C8,19 4,20 4,20 L4,4"/>
+                </svg>
+            </div>
+            <h3>千年酿造工艺</h3>
+            <p>始于春秋，盛于唐宋，绍兴黄酒的酿造技艺被列入国家级非物质文化遗产名录</p>
+        </div>
+        <!-- 文化底蕴卡片 -->
+        <div class="culture-card">
+            <div class="culture-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M3,12 C3,16.9706 7.02944,21 12,21 C16.9706,21 21,16.9706 21,12"/>
+                </svg>
+            </div>
+            <h3>江南水乡文化</h3>
+            <p>与江南水乡的人文风情密不可分，融入诗词歌赋，见证千年文明</p>
+        </div>
+        <!-- 品质传承卡片 -->
+        <div class="culture-card">
+            <div class="culture-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M12,2 L15,8 L21,9 L17,14 L18,20 L12,17 L6,20 L7,14 L3,9 L9,8 Z"/>
+                </svg>
+            </div>
+            <h3>匠心品质</h3>
+            <p>秉承传统工艺，融合现代科技，每一滴都是时光的结晶</p>
+        </div>
+    </div>
+</section>
+<!-- 地方特色展示区 -->
+<section class="local-features">
+    <div class="section-header">
+        <h2 class="section-title">醉美绍兴</h2>
+        <p class="section-subtitle">感受独特的地方魅力</p>
+    </div>
+    <div class="feature-showcase">
+        <!-- 左侧图片展示 -->
+        <div class="showcase-images">
+            <div class="image-grid">
+                <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
+                    <div class="image-overlay">
+                        <h4>古法酿造</h4>
+                    </div>
+                </div>
+                <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
+                    <div class="image-overlay">
+                        <h4>黄酒街区</h4>
+                    </div>
+                </div>
+                <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
+                    <div class="image-overlay">
+                        <h4>品鉴文化</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 右侧特色介绍 -->
+        <div class="feature-content">
+            <h3>千年绍兴，一城风味</h3>
+            <p class="feature-description">
+                绍兴黄酒承载着这座城市的记忆与温度。从古法酿造到现代创新，
+                从老街深巷到时尚酒吧，处处可见黄酒文化与城市生活的完美融合。
+            </p>
+            <div class="feature-highlights">
+                <div class="highlight-item">
+                    <span class="highlight-number">2000+</span>
+                    <span class="highlight-text">年酿造历史</span>
+                </div>
+                <div class="highlight-item">
+                    <span class="highlight-number">100+</span>
+                    <span class="highlight-text">家特色酒坊</span>
+                </div>
+                <div class="highlight-item">
+                    <span class="highlight-number">10+</span>
+                    <span class="highlight-text">个景点体验</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- 创新发展区 -->
+<section class="innovation-section">
+    <div class="section-header">
+        <h2 class="section-title">传承创新，引领未来</h2>
+        <p class="section-subtitle">用科技赋能传统，让黄酒文化焕发新生</p>
+    </div>
+    <div class="innovation-cards">
+        <!-- 科技创新卡片 -->
+        <div class="innovation-card">
+            <div class="card-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M9,2 L15,2 L15,6 L9,6 L9,2 Z M12,6 L12,23"/>
+                </svg>
+            </div>
+            <h3>智能酿造</h3>
+            <p>引入AI温控系统，实现精准发酵，提升产品品质</p>
+            <a href="#" class="learn-more">了解更多</a>
+        </div>
+        <!-- 产品创新卡片 -->
+        <div class="innovation-card">
+            <div class="card-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M12,2 C6.5,2 2,6.5 2,12 C2,17.5 6.5,22 12,22 C17.5,22 22,17.5 22,12 C22,6.5 17.5,2 12,2 Z"/>
+                </svg>
+            </div>
+            <h3>新品研发</h3>
+            <p>开发低度果酒系列，迎合年轻消费群体需求</p>
+            <a href="#" class="learn-more">了解更多</a>
+        </div>
+        <!-- 文化创新卡片 -->
+        <div class="innovation-card">
+            <div class="card-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48">
+                    <path fill="none" stroke="url(#gradient1)" stroke-width="2"
+                          d="M21,12 A9,9 0 0,1 12,21 A9,9 0 0,1 3,12"/>
+                </svg>
+            </div>
+            <h3>文化体验</h3>
+            <p>打造沉浸式黄酒文化体验馆，传统与现代的完美交融</p>
+            <a href="#" class="learn-more">了解更多</a>
+        </div>
+    </div>
+</section>
+<!-- 体验中心区域 -->
+<section class="experience-center">
+    <div class="section-header">
+        <h2 class="section-title">沉浸体验</h2>
+        <p class="section-subtitle">邀您共赏绍兴黄酒的魅力时光</p>
+    </div>
+    <div class="experience-container">
+        <!-- 预约体验表单 -->
+        <div class="booking-form">
+            <h3>预约参观</h3>
+            <form class="visit-form">
+                <div class="form-group">
+                    <input type="text" placeholder="您的姓名" required>
+                </div>
+                <div class="form-group">
+                    <input type="tel" placeholder="联系电话" required>
+                </div>
+                <div class="form-group">
+                    <input type="date" placeholder="参观日期" required>
+                </div>
+                <div class="form-group">
+                    <select required>
+                        <option value="">选择体验项目</option>
+                        <option value="1">古法酿造体验</option>
+                        <option value="2">品酒鉴赏课程</option>
+                        <option value="3">文化展馆导览</option>
+                    </select>
+                </div>
+                <button type="submit" class="submit-btn">立即预约</button>
+            </form>
+        </div>
+        <!-- 体验项目展示 -->
+        <div class="experience-showcase">
+            <div class="experience-item">
+                <div class="experience-icon">
+                    <svg viewBox="0 0 24 24" width="32" height="32">
+                        <path fill="none" stroke="currentColor" stroke-width="2"
+                              d="M12,2 L12,22 M4,4 L20,4"/>
+                    </svg>
+                </div>
+                <h4>古法酿造体验</h4>
+                <p>亲手参与传统酿造工艺，感受非遗文化魅力</p>
+            </div>
+            <div class="experience-item">
+                <div class="experience-icon">
+                    <svg viewBox="0 0 24 24" width="32" height="32">
+                        <path fill="none" stroke="currentColor" stroke-width="2"
+                              d="M12,2 L12,22 M4,4 L20,4"/>
+                    </svg>
+                </div>
+                <h4>品酒鉴赏课程</h4>
+                <p>专业品酒师带您领略黄酒的独特韵味</p>
+            </div>
+            <div class="experience-item">
+                <div class="experience-icon">
+                    <svg viewBox="0 0 24 24" width="32" height="32">
+                        <path fill="none" stroke="currentColor" stroke-width="2"
+                              d="M12,2 L12,22 M4,4 L20,4"/>
+                    </svg>
+                </div>
+                <h4>文化展馆导览</h4>
+                <p>沉浸式体验千年黄酒文化的魅力传承</p>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- 页脚区域 -->
+<footer class="footer">
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>联系我们</h3>
+            <p>电话：0575-88888888</p>
+            <p>邮箱：[email protected]</p>
+            <p>地址：浙江省绍兴市越城区黄酒文化街区</p>
+        </div>
+        <div class="footer-section">
+            <h3>快速链接</h3>
+            <ul>
+                <li><a href="#">关于我们</a></li>
+                <li><a href="#">产品系列</a></li>
+                <li><a href="#">新闻资讯</a></li>
+                <li><a href="#">加入我们</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>关注我们</h3>
+            <div class="social-links">
+                <a href="#" class="social-link">微信</a>
+                <a href="#" class="social-link">微博</a>
+                <a href="#" class="social-link">抖音</a>
+                <a href="#" class="social-link">小红书</a>
+            </div>
+        </div>
+        <div class="footer-section">
+            <h3>订阅资讯</h3>
+            <form class="subscribe-form">
+                <input type="email" placeholder="请输入您的邮箱">
+                <button type="submit">订阅</button>
+            </form>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        <p>&copy; 2024 绍兴黄酒. All rights reserved.</p>
+        <div class="footer-links">
+            <a href="#">隐私政策</a>
+            <a href="#">使用条款</a>
+            <a href="#">网站地图</a>
+        </div>
+    </div>
+</footer>
+<style>
+    /* 文化传承区域样式 */
+.culture-section {
+    padding: 6rem 2rem;
+    background: linear-gradient(135deg, #fff9f0, #fff5e6);
+    position: relative;
+    overflow: hidden;
+}
+.culture-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.culture-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+.culture-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1);
+}
+.culture-icon {
+    margin-bottom: 1.5rem;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.culture-card h3 {
+    font-size: 1.5rem;
+    color: var(--text-dark);
+    margin-bottom: 1rem;
+}
+.culture-card p {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+}
+/* 地方特色展示区样式 */
+.local-features {
+    padding: 6rem 2rem;
+    background: var(--bg-light);
+}
+.feature-showcase {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+}
+.showcase-images {
+    position: relative;
+}
+.image-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+.feature-image {
+    height: 200px;
+    border-radius: 15px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    overflow: hidden;
+}
+.feature-image:nth-child(1) {
+    grid-column: 1 / -1;
+    height: 300px;
+}
+.image-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+    display: flex;
+    align-items: flex-end;
+    padding: 1.5rem;
+    color: white;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+.feature-image:hover .image-overlay {
+    opacity: 1;
+}
+.feature-content {
+    padding: 2rem;
+}
+.feature-content h3 {
+    font-size: 2rem;
+    color: var(--text-dark);
+    margin-bottom: 1.5rem;
+}
+.feature-description {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.8;
+    margin-bottom: 2rem;
+}
+.feature-highlights {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+}
+.highlight-item {
+    text-align: center;
+}
+.highlight-number {
+    display: block;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+}
+.highlight-text {
+    color: var(--text-dark);
+    opacity: 0.8;
+}
+/* 创新发展区样式 */
+.innovation-section {
+    padding: 6rem 2rem;
+    background: linear-gradient(135deg, #fff5e6, #fff9f0);
+}
+.innovation-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.innovation-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    text-align: center;
+}
+.innovation-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1);
+}
+.card-icon {
+    margin-bottom: 1.5rem;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.innovation-card h3 {
+    font-size: 1.5rem;
+    color: var(--text-dark);
+    margin-bottom: 1rem;
+}
+.innovation-card p {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+.learn-more {
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    background: var(--gradient-1);
+    color: white;
+    border-radius: 25px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+.learn-more:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
+}
+/* 体验中心区域样式 */
+.experience-center {
+    padding: 6rem 2rem;
+    background: var(--bg-light);
+}
+.experience-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: start;
+}
+.booking-form {
+    background: white;
+    padding: 3rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+}
+.booking-form h3 {
+    font-size: 1.8rem;
+    color: var(--text-dark);
+    margin-bottom: 2rem;
+}
+.form-group {
+    margin-bottom: 1.5rem;
+}
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 1rem;
+    border: 2px solid rgba(0,0,0,0.1);
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+.form-group input:focus,
+.form-group select:focus {
+    border-color: var(--primary-color);
+    outline: none;
+}
+.submit-btn {
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    background: var(--gradient-1);
+    color: white;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
+}
+.experience-showcase {
+    display: grid;
+    gap: 2rem;
+}
+.experience-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+.experience-item:hover {
+    transform: translateX(10px);
+}
+.experience-icon {
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+.experience-item h4 {
+    font-size: 1.2rem;
+    color: var(--text-dark);
+    margin-bottom: 0.5rem;
+}
+.experience-item p {
+    color: var(--text-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+}
+/* 页脚样式 */
+.footer {
+    background: var(--text-dark);
+    color: var(--text-light);
+    padding: 4rem 2rem 2rem;
+}
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 3rem;
+    margin-bottom: 3rem;
+}
+.footer-section h3 {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+}
+.footer-section p {
+    margin-bottom: 0.8rem;
+    opacity: 0.8;
+}
+.footer-section ul {
+    list-style: none;
+}
+.footer-section ul li {
+    margin-bottom: 0.8rem;
+}
+.footer-section a {
+    color: var(--text-light);
+    text-decoration: none;
+    opacity: 0.8;
+    transition: all 0.3s ease;
+}
+.footer-section a:hover {
+    opacity: 1;
+    color: var(--primary-color);
+}
+.social-links {
+    display: flex;
+    gap: 1rem;
+}
+.social-link {
+    padding: 0.5rem 1rem;
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 20px;
+}
+.subscribe-form {
+    display: flex;
+    gap: 1rem;
+}
+.subscribe-form input {
+    flex: 1;
+    padding: 0.8rem;
+    border: none;
+    border-radius: 5px;
+    background: rgba(255,255,255,0.1);
+    color: var(--text-light);
+}
+.subscribe-form button {
+    padding: 0.8rem 1.5rem;
+    border: none;
+    border-radius: 5px;
+    background: var(--primary-color);
+    color: var(--text-dark);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.subscribe-form button:hover {
+    background: var(--secondary-color);
+}
+.footer-bottom {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+.footer-bottom p {
+    opacity: 0.6;
+}
+.footer-links {
+    display: flex;
+    gap: 2rem;
+}
+.footer-links a {
+    color: var(--text-light);
+    text-decoration: none;
+    opacity: 0.6;
+    transition: all 0.3s ease;
+}
+.footer-links a:hover {
+    opacity: 1;
+}
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .feature-showcase,
+    .experience-container {
+        grid-template-columns: 1fr;
+    }
+    .footer-content {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    .footer-bottom {
+        flex-direction: column;
+        text-align: center;
+    }
+    .footer-links {
+        justify-content: center;
+    }
+    .subscribe-form {
+        flex-direction: column;
+    }
+}
+@media (max-width: 480px) {
+    .culture-grid,
+    .innovation-cards {
+        grid-template-columns: 1fr;
+    }
+    .feature-highlights {
+        grid-template-columns: 1fr;
+    }
+    .highlight-item {
+        padding: 1rem 0;
+        border-bottom: 1px solid rgba(0,0,0,0.1);
+    }
+}
+</style>
+<!-- Three.js and required loaders -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
+<script>
+    // Initialize Three.js scene
+    const container = document.getElementById('model-container');
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.setClearColor(0x000000, 0);
+    container.appendChild(renderer.domElement);
+    // Add lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(5, 5, 5);
+    scene.add(directionalLight);
+    // Add OrbitControls
+    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.screenSpacePanning = false;
+    controls.minDistance = 3;
+    controls.maxDistance = 10;
+    controls.autoRotate = true;
+    controls.autoRotateSpeed = 2.0;
+    // Position camera
+    camera.position.z = 5;
+    // Load OBJ model
+    const loader = new THREE.OBJLoader();
+loader.load('wine.obj', function(object) {
+    scene.add(object);
+});
+    // Animation loop
+    function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+    }
+    animate();
+    // Handle window resize
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+        camera.aspect = container.clientWidth / container.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(container.clientWidth, container.clientHeight);
+    }
+</script>
+<script>
+// 获取所有需要的元素
+const productCards = document.querySelectorAll('.product-card');
+const indicators = document.querySelectorAll('.indicator');
+const prevButton = document.querySelector('.control-btn.prev');
+const nextButton = document.querySelector('.control-btn.next');
+// 当前显示的卡片索引
+let currentIndex = 0;
+// 更新显示状态的函数
+function updateDisplay() {
+    // 隐藏所有卡片并移除所有指示器的激活状态
+    productCards.forEach(card => card.classList.remove('active'));
+    indicators.forEach(indicator => indicator.classList.remove('active'));
+    // 显示当前卡片并激活对应的指示器
+    productCards[currentIndex].classList.add('active');
+    indicators[currentIndex].classList.add('active');
+}
+// 下一张卡片
+function showNext() {
+    currentIndex = (currentIndex + 1) % productCards.length;
+    updateDisplay();
+}
+// 上一张卡片
+function showPrev() {
+    currentIndex = (currentIndex - 1 + productCards.length) % productCards.length;
+    updateDisplay();
+}
+// 绑定点击事件
+nextButton.addEventListener('click', showNext);
+prevButton.addEventListener('click', showPrev);
+// 为指示器添加点击事件
+indicators.forEach((indicator, index) => {
+    indicator.addEventListener('click', () => {
+        currentIndex = index;
+        updateDisplay();
+    });
+});
+// 自动轮播
+let autoplayInterval;
+function startAutoplay() {
+    autoplayInterval = setInterval(showNext, 5000); // 每5秒切换一次
+}
+function stopAutoplay() {
+    clearInterval(autoplayInterval);
+}
+// 鼠标进入停止自动轮播，离开恢复
+const productShowcase = document.querySelector('.product-showcase');
+productShowcase.addEventListener('mouseenter', stopAutoplay);
+productShowcase.addEventListener('mouseleave', startAutoplay);
+// 初始化显示和自动轮播
+updateDisplay();
+startAutoplay();
+</script>
+</body>
+</html>