<!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;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.model-showcase::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0.5;
} */
.model-showcase {
position: relative;
width: 100%;
height: 500px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.showcase-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.model-showcase:hover .showcase-image {
transform: scale(1.05);
}
</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">
<img src="shanshui.jpg" alt="山水意境" class="showcase-image" />
</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>邮箱：contact@shaoxinghuangjiu.com</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>© 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>
<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>