Hugging Face's logo

Spaces:
mistpe
/
showWine
Running

App Files Community
mistpe commited on
Commit
b9e3d6c
·
verified ·
1 Parent(s): 35ea0a1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1876 -18
index.html CHANGED
@@ -1,19 +1,1877 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>绍兴黄酒 - 传承·创新</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
10
+
11
+ :root {
12
+ --primary-color: #FFB42E; /* 明亮温暖的金黄 */
13
+ --secondary-color: #FF8264; /* 暖橙色 */
14
+ --accent-color: #FF6B6B; /* 活力红色 */
15
+ --bg-light: #FFF9F0; /* 温暖的背景色 */
16
+ --text-dark: #2D232E; /* 深紫色文字 */
17
+ --text-light: #FFF9F0; /* 浅色文字 */
18
+ --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
19
+ --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Noto Serif SC', serif;
30
+ background: var(--bg-light);
31
+ color: var(--text-dark);
32
+ overflow-x: hidden;
33
+ }
34
+
35
+ /* 现代导航栏 */
36
+ .navigation {
37
+ position: fixed;
38
+ top: 0;
39
+ left: 0;
40
+ right: 0;
41
+ padding: 1rem 2rem;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ background: rgba(255, 249, 240, 0.8);
46
+ backdrop-filter: blur(10px);
47
+ z-index: 1000;
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .navigation.scrolled {
52
+ background: rgba(255, 249, 240, 0.95);
53
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
54
+ padding: 0.8rem 2rem;
55
+ }
56
+
57
+ .nav-logo {
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 1rem;
61
+ text-decoration: none;
62
+ }
63
+
64
+ .logo-text {
65
+ font-size: 1.5rem;
66
+ font-weight: bold;
67
+ background: var(--gradient-1);
68
+ -webkit-background-clip: text;
69
+ -webkit-text-fill-color: transparent;
70
+ position: relative;
71
+ }
72
+
73
+ .logo-text::after {
74
+ content: '';
75
+ position: absolute;
76
+ bottom: -5px;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 2px;
80
+ background: var(--gradient-1);
81
+ transform: scaleX(0);
82
+ transition: transform 0.3s ease;
83
+ transform-origin: right;
84
+ }
85
+
86
+ .nav-logo:hover .logo-text::after {
87
+ transform: scaleX(1);
88
+ transform-origin: left;
89
+ }
90
+
91
+ .nav-links {
92
+ display: flex;
93
+ gap: 2rem;
94
+ align-items: center;
95
+ }
96
+
97
+ .nav-link {
98
+ text-decoration: none;
99
+ color: var(--text-dark);
100
+ font-size: 1rem;
101
+ padding: 0.8rem 1.5rem;
102
+ border-radius: 25px;
103
+ transition: all 0.3s ease;
104
+ position: relative;
105
+ overflow: hidden;
106
+ background: transparent;
107
+ border: 2px solid transparent;
108
+ }
109
+
110
+ .nav-link::before {
111
+ content: '';
112
+ position: absolute;
113
+ inset: 0;
114
+ background: var(--gradient-1);
115
+ opacity: 0;
116
+ transition: all 0.3s ease;
117
+ z-index: -1;
118
+ }
119
+
120
+ .nav-link:hover {
121
+ color: white;
122
+ border-color: transparent;
123
+ }
124
+
125
+ .nav-link:hover::before {
126
+ opacity: 1;
127
+ }
128
+
129
+ .nav-link.active {
130
+ background: var(--gradient-1);
131
+ color: white;
132
+ box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
133
+ }
134
+
135
+ /* 英雄区域 */
136
+ .hero {
137
+ min-height: 100vh;
138
+ padding-top: 80px;
139
+ position: relative;
140
+ overflow: hidden;
141
+ display: flex;
142
+ align-items: center;
143
+ }
144
+
145
+ .hero-content {
146
+ width: 100%;
147
+ max-width: 1200px;
148
+ margin: 0 auto;
149
+ padding: 2rem;
150
+ display: grid;
151
+ grid-template-columns: 1fr 1fr;
152
+ gap: 4rem;
153
+ align-items: center;
154
+ position: relative;
155
+ z-index: 2;
156
+ }
157
+
158
+ .hero-text {
159
+ position: relative;
160
+ }
161
+
162
+ .hero-subtitle {
163
+ font-size: 1.2rem;
164
+ color: var(--accent-color);
165
+ margin-bottom: 1rem;
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 1rem;
169
+ }
170
+
171
+ .hero-subtitle::before {
172
+ content: '';
173
+ width: 50px;
174
+ height: 2px;
175
+ background: var(--gradient-1);
176
+ }
177
+
178
+ .hero-title {
179
+ font-size: clamp(2.5rem, 5vw, 4rem);
180
+ line-height: 1.2;
181
+ margin-bottom: 1.5rem;
182
+ position: relative;
183
+ }
184
+
185
+ .hero-title .highlight {
186
+ display: inline-block;
187
+ position: relative;
188
+ color: var(--primary-color);
189
+ }
190
+
191
+ .hero-title .highlight::after {
192
+ content: '';
193
+ position: absolute;
194
+ bottom: 5px;
195
+ left: 0;
196
+ width: 100%;
197
+ height: 8px;
198
+ background: var(--gradient-1);
199
+ opacity: 0.3;
200
+ z-index: -1;
201
+ }
202
+
203
+ .hero-description {
204
+ font-size: 1.1rem;
205
+ line-height: 1.8;
206
+ color: var(--text-dark);
207
+ opacity: 0.8;
208
+ margin-bottom: 2rem;
209
+ position: relative;
210
+ }
211
+
212
+ .hero-cta {
213
+ display: flex;
214
+ gap: 1.5rem;
215
+ margin-top: 2rem;
216
+ }
217
+
218
+ .cta-button {
219
+ padding: 1rem 2rem;
220
+ border: none;
221
+ border-radius: 30px;
222
+ font-size: 1rem;
223
+ font-weight: bold;
224
+ cursor: pointer;
225
+ transition: all 0.3s ease;
226
+ position: relative;
227
+ overflow: hidden;
228
+ }
229
+
230
+ .cta-primary {
231
+ background: var(--gradient-1);
232
+ color: white;
233
+ box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
234
+ }
235
+
236
+ .cta-primary::after {
237
+ content: '';
238
+ position: absolute;
239
+ inset: 0;
240
+ background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
241
+ opacity: 0;
242
+ transition: opacity 0.3s ease;
243
+ }
244
+
245
+ .cta-primary:hover {
246
+ transform: translateY(-2px);
247
+ box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
248
+ }
249
+
250
+ .cta-primary:hover::after {
251
+ opacity: 1;
252
+ }
253
+
254
+ .cta-secondary {
255
+ background: transparent;
256
+ border: 2px solid var(--primary-color);
257
+ color: var(--text-dark);
258
+ }
259
+
260
+ .cta-secondary:hover {
261
+ background: var(--gradient-2);
262
+ color: white;
263
+ border-color: transparent;
264
+ }
265
+
266
+ /* 装饰元素 */
267
+ .hero-decoration {
268
+ position: absolute;
269
+ inset: 0;
270
+ pointer-events: none;
271
+ overflow: hidden;
272
+ }
273
+
274
+ .decoration-circle {
275
+ position: absolute;
276
+ border-radius: 50%;
277
+ background: var(--gradient-1);
278
+ opacity: 0.1;
279
+ filter: blur(40px);
280
+ }
281
+
282
+ .circle-1 {
283
+ width: 400px;
284
+ height: 400px;
285
+ top: -100px;
286
+ right: -100px;
287
+ }
288
+
289
+ .circle-2 {
290
+ width: 300px;
291
+ height: 300px;
292
+ bottom: -50px;
293
+ left: -50px;
294
+ background: var(--gradient-2);
295
+ }
296
+
297
+ .floating-text {
298
+ position: absolute;
299
+ font-size: clamp(5rem, 15vw, 10rem);
300
+ font-weight: bold;
301
+ opacity: 0.03;
302
+ white-space: nowrap;
303
+ color: var(--text-dark);
304
+ }
305
+
306
+ .floating-text-1 {
307
+ top: 20%;
308
+ left: -10%;
309
+ transform: rotate(-15deg);
310
+ }
311
+
312
+ .floating-text-2 {
313
+ bottom: 10%;
314
+ right: -5%;
315
+ transform: rotate(10deg);
316
+ }
317
+
318
+ /* 动态背景图案 */
319
+ .bg-pattern {
320
+ position: absolute;
321
+ inset: 0;
322
+ background-image:
323
+ radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
324
+ radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
325
+ opacity: 0.5;
326
+ animation: patternMove 20s linear infinite;
327
+ }
328
+
329
+ @keyframes patternMove {
330
+ 0% {
331
+ background-position: 0% 0%;
332
+ }
333
+ 100% {
334
+ background-position: 100% 100%;
335
+ }
336
+ }
337
+
338
+ /* 3D展示区占位 */
339
+ /* .model-showcase {
340
+ position: relative;
341
+ width: 100%;
342
+ height: 500px;
343
+ background: rgba(255, 255, 255, 0.1);
344
+ border-radius: 20px;
345
+ backdrop-filter: blur(10px);
346
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
347
+ overflow: hidden;
348
+ }
349
+
350
+ .model-showcase::before {
351
+ content: '';
352
+ position: absolute;
353
+ inset: 0;
354
+ background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
355
+ opacity: 0.5;
356
+ } */
357
+ .model-showcase {
358
+ position: relative;
359
+ width: 100%;
360
+ height: 500px;
361
+ border-radius: 20px;
362
+ overflow: hidden;
363
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
364
+ }
365
+
366
+ .showcase-image {
367
+ width: 100%;
368
+ height: 100%;
369
+ object-fit: cover;
370
+ transition: transform 0.3s ease;
371
+ }
372
+
373
+ .model-showcase:hover .showcase-image {
374
+ transform: scale(1.05);
375
+ }
376
+ </style>
377
+ </head>
378
+ <body>
379
+ <!-- 导航栏 -->
380
+ <nav class="navigation">
381
+ <a href="index.html" class="nav-logo">
382
+ <span class="logo-text">绍兴黄酒</span>
383
+ </a>
384
+ <div class="nav-links">
385
+ <a href="culture.html" class="nav-link">文化底蕴</a>
386
+ <a href="products.html" class="nav-link">臻品佳酿</a>
387
+ <a href="innovation.html" class="nav-link">创新未来</a>
388
+ <a href="contact.html" class="nav-link">联系我们</a>
389
+ <a href="shop.html" class="nav-link active">立即品鉴</a>
390
+ </div>
391
+ </nav>
392
+
393
+ <!-- 英雄区域 -->
394
+ <section class="hero">
395
+ <!-- 背景装饰 -->
396
+ <div class="hero-decoration">
397
+ <div class="bg-pattern"></div>
398
+ <div class="decoration-circle circle-1"></div>
399
+ <div class="decoration-circle circle-2"></div>
400
+ <div class="floating-text floating-text-1">匠心</div>
401
+ <div class="floating-text floating-text-2">传承</div>
402
+ </div>
403
+
404
+ <!-- 主要内容 -->
405
+ <div class="hero-content">
406
+ <div class="hero-text">
407
+ <div class="hero-subtitle">传承千年 · 创新未来</div>
408
+ <h1 class="hero-title">
409
+ 遇见 <span class="highlight">绍兴黄酒</span><br>
410
+ 品味时光之美
411
+ </h1>
412
+ <p class="hero-description">
413
+ 从春秋战国延续至今，绍兴黄酒凝聚着千年匠心与智慧，
414
+ 以现代创新演绎传统魅力，让年轻一代遇见最纯正的东方美酒。
415
+ </p>
416
+ <div class="hero-cta">
417
+ <button class="cta-button cta-primary">探索产品</button>
418
+ <button class="cta-button cta-secondary">了解文化</button>
419
+ </div>
420
+ </div>
421
+ <div class="model-showcase">
422
+ <img src="shanshui.jpg" alt="山水意境" class="showcase-image" />
423
+ </div>
424
+ </div>
425
+ </section>
426
+ <!-- 页面中部分(接续上部分) -->
427
+
428
+ <!-- 特色展示区 -->
429
+ <section class="features">
430
+ <div class="section-header">
431
+ <h2 class="section-title">匠心臻品</h2>
432
+ <p class="section-subtitle">传统与创新的完美融合</p>
433
+ </div>
434
+
435
+ <div class="feature-grid">
436
+ <div class="feature-card">
437
+ <div class="feature-icon">
438
+ <svg viewBox="0 0 24 24" width="40" height="40">
439
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
440
+ 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
441
+ M12,6 L12,12 L16,16">
442
+ </path>
443
+ <!-- 创建渐变 -->
444
+ <defs>
445
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
446
+ <stop offset="0%" style="stop-color:#FFB42E"/>
447
+ <stop offset="100%" style="stop-color:#FF6B6B"/>
448
+ </linearGradient>
449
+ </defs>
450
+ </svg>
451
+ </div>
452
+ <h3>千年传承</h3>
453
+ <p>源自春秋的酿造工艺，千年匠心传承，完美呈现东方美酒精髓。</p>
454
+ </div>
455
+
456
+ <div class="feature-card">
457
+ <div class="feature-icon">
458
+ <svg viewBox="0 0 24 24" width="40" height="40">
459
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
460
+ 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
461
+ M12,8 L12,16 M8,12 L16,12">
462
+ </path>
463
+ </svg>
464
+ </div>
465
+ <h3>匠心工艺</h3>
466
+ <p>严选上乘原料，遵循传统酿造工序，每一滴都是匠心臻品。</p>
467
+ </div>
468
+
469
+ <div class="feature-card">
470
+ <div class="feature-icon">
471
+ <svg viewBox="0 0 24 24" width="40" height="40">
472
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
473
+ 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
474
+ M12,7 L12,13 M9,10 L15,10">
475
+ </path>
476
+ </svg>
477
+ </div>
478
+ <h3>品质保证</h3>
479
+ <p>现代化品控体系，严格把控每道工序，确保卓越品质。</p>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- 产品展示区 -->
485
+ <section class="products">
486
+ <div class="section-header">
487
+ <h2 class="section-title">臻品系列</h2>
488
+ <p class="section-subtitle">每一款都是时光的礼赞</p>
489
+ </div>
490
+
491
+ <div class="product-showcase">
492
+ <!-- 第一个产品卡片：传统系列 -->
493
+ <div class="product-card active">
494
+ <div class="product-image">
495
+ <div class="product-decoration">
496
+ <svg viewBox="0 0 100 100" class="decoration-circle">
497
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
498
+ stroke-width="1" stroke-dasharray="8 4"/>
499
+ </svg>
500
+ </div>
501
+ <div class="image-placeholder"></div>
502
+ </div>
503
+ <div class="product-info">
504
+ <span class="product-category">传统系列</span>
505
+ <h3 class="product-name">十年陈酿</h3>
506
+ <p class="product-description">
507
+ 经典黄酒，十年陈酿，醇厚绵长，回味无穷。
508
+ </p>
509
+ <div class="product-meta">
510
+ <div class="meta-item">
511
+ <svg viewBox="0 0 24 24" width="20" height="20">
512
+ <path fill="none" stroke="currentColor" stroke-width="2"
513
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
514
+ </path>
515
+ </svg>
516
+ <span>酒精度：14%</span>
517
+ </div>
518
+ <div class="meta-item">
519
+ <svg viewBox="0 0 24 24" width="20" height="20">
520
+ <path fill="none" stroke="currentColor" stroke-width="2"
521
+ d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
522
+ </path>
523
+ </svg>
524
+ <span>容量：500ml</span>
525
+ </div>
526
+ </div>
527
+ <button class="product-btn">了解更多</button>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- 第二个产品卡片：青春系列 -->
532
+ <div class="product-card">
533
+ <div class="product-image">
534
+ <div class="product-decoration">
535
+ <svg viewBox="0 0 100 100" class="decoration-circle">
536
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
537
+ stroke-width="1" stroke-dasharray="8 4"/>
538
+ </svg>
539
+ </div>
540
+ <div class="image-placeholder youth-series"></div>
541
+ </div>
542
+ <div class="product-info">
543
+ <span class="product-category">青春系列</span>
544
+ <h3 class="product-name">桂花米酒</h3>
545
+ <p class="product-description">
546
+ 融入新鲜桂花，清甜怡人，低度微醺，专为年轻人打造的清新黄酒体验。
547
+ </p>
548
+ <div class="product-meta">
549
+ <div class="meta-item">
550
+ <svg viewBox="0 0 24 24" width="20" height="20">
551
+ <path fill="none" stroke="currentColor" stroke-width="2"
552
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
553
+ </path>
554
+ </svg>
555
+ <span>酒精度：8%</span>
556
+ </div>
557
+ <div class="meta-item">
558
+ <svg viewBox="0 0 24 24" width="20" height="20">
559
+ <path fill="none" stroke="currentColor" stroke-width="2"
560
+ d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
561
+ </path>
562
+ </svg>
563
+ <span>容量：330ml</span>
564
+ </div>
565
+ </div>
566
+ <button class="product-btn">了解更多</button>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- 第三个产品卡片：调制系列 -->
571
+ <div class="product-card">
572
+ <div class="product-image">
573
+ <div class="product-decoration">
574
+ <svg viewBox="0 0 100 100" class="decoration-circle">
575
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
576
+ stroke-width="1" stroke-dasharray="8 4"/>
577
+ </svg>
578
+ </div>
579
+ <div class="image-placeholder cocktail-series"></div>
580
+ </div>
581
+ <div class="product-info">
582
+ <span class="product-category">调制系列</span>
583
+ <h3 class="product-name">东方气泡</h3>
584
+ <p class="product-description">
585
+ 经典黄酒邂逅气泡水，加入精选花果茶，创新演绎东方美酒，清爽怡人。
586
+ </p>
587
+ <div class="product-meta">
588
+ <div class="meta-item">
589
+ <svg viewBox="0 0 24 24" width="20" height="20">
590
+ <path fill="none" stroke="currentColor" stroke-width="2"
591
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
592
+ </path>
593
+ </svg>
594
+ <span>酒精度：5%</span>
595
+ </div>
596
+ <div class="meta-item">
597
+ <svg viewBox="0 0 24 24" width="20" height="20">
598
+ <path fill="none" stroke="currentColor" stroke-width="2"
599
+ d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
600
+ </path>
601
+ </svg>
602
+ <span>容量：330ml</span>
603
+ </div>
604
+ </div>
605
+ <button class="product-btn">了解更多</button>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- 第四个产品卡片：季节限定 -->
610
+ <div class="product-card">
611
+ <div class="product-image">
612
+ <div class="product-decoration">
613
+ <svg viewBox="0 0 100 100" class="decoration-circle">
614
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
615
+ stroke-width="1" stroke-dasharray="8 4"/>
616
+ </svg>
617
+ </div>
618
+ <div class="image-placeholder season-series"></div>
619
+ </div>
620
+ <div class="product-info">
621
+ <span class="product-category">季节限定</span>
622
+ <h3 class="product-name">雪梨暖冬</h3>
623
+ <p class="product-description">
624
+ 冬季限定，精选雪梨果汁调配，温热饮用，让传统黄酒焕发冬日温暖魅力。
625
+ </p>
626
+ <div class="product-meta">
627
+ <div class="meta-item">
628
+ <svg viewBox="0 0 24 24" width="20" height="20">
629
+ <path fill="none" stroke="currentColor" stroke-width="2"
630
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
631
+ </path>
632
+ </svg>
633
+ <span>酒精度：11%</span>
634
+ </div>
635
+ <div class="meta-item">
636
+ <svg viewBox="0 0 24 24" width="20" height="20">
637
+ <path fill="none" stroke="currentColor" stroke-width="2"
638
+ d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
639
+ </path>
640
+ </svg>
641
+ <span>容量：400ml</span>
642
+ </div>
643
+ </div>
644
+ <button class="product-btn">了解更多</button>
645
+ </div>
646
+ </div>
647
+
648
+ <!-- 第五个产品卡片：融合系列 -->
649
+ <div class="product-card">
650
+ <div class="product-image">
651
+ <div class="product-decoration">
652
+ <svg viewBox="0 0 100 100" class="decoration-circle">
653
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
654
+ stroke-width="1" stroke-dasharray="8 4"/>
655
+ </svg>
656
+ </div>
657
+ <div class="image-placeholder fusion-series"></div>
658
+ </div>
659
+ <div class="product-info">
660
+ <span class="product-category">融合系列</span>
661
+ <h3 class="product-name">玫瑰青梅</h3>
662
+ <p class="product-description">
663
+ 传统黄酒与玫瑰、青梅的完美融合，清新淡雅，既有传统韵味又充满创新精神。
664
+ </p>
665
+ <div class="product-meta">
666
+ <div class="meta-item">
667
+ <svg viewBox="0 0 24 24" width="20" height="20">
668
+ <path fill="none" stroke="currentColor" stroke-width="2"
669
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
670
+ </path>
671
+ </svg>
672
+ <span>酒精度：10%</span>
673
+ </div>
674
+ <div class="meta-item">
675
+ <svg viewBox="0 0 24 24" width="20" height="20">
676
+ <path fill="none" stroke="currentColor" stroke-width="2"
677
+ d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12">
678
+ </path>
679
+ </svg>
680
+ <span>容量：375ml</span>
681
+ </div>
682
+ </div>
683
+ <button class="product-btn">了解更多</button>
684
+ </div>
685
+ </div>
686
+
687
+ <!-- 第六个产品卡片：轻奢系列 -->
688
+ <div class="product-card">
689
+ <div class="product-image">
690
+ <div class="product-decoration">
691
+ <svg viewBox="0 0 100 100" class="decoration-circle">
692
+ <circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)"
693
+ stroke-width="1" stroke-dasharray="8 4"/>
694
+ </svg>
695
+ </div>
696
+ <div class="image-placeholder premium-series"></div>
697
+ </div>
698
+ <div class="product-info">
699
+ <span class="product-category">轻奢系列</span>
700
+ <h3 class="product-name">金箔流光</h3>
701
+ <p class="product-description">
702
+ 匠心五年陈酿，搭配食用金箔，现代工艺与传统技术的完美结合，视觉与味觉的双重享受。
703
+ </p>
704
+ <div class="product-meta">
705
+ <div class="meta-item">
706
+ <svg viewBox="0 0 24 24" width="20" height="20">
707
+ <path fill="none" stroke="currentColor" stroke-width="2"
708
+ d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z">
709
+ </path>
710
+ </svg>
711
+ <span>酒精度：12%</span>
712
+ </div>
713
+ </div>
714
+ <button class="product-btn">了解更多</button>
715
+ </div>
716
+ </div>
717
+
718
+ </div>
719
+
720
+ <!-- 旋转展示控件 -->
721
+ <div class="showcase-controls">
722
+ <button class="control-btn prev">
723
+ <svg viewBox="0 0 24 24" width="24" height="24">
724
+ <path fill="none" stroke="currentColor" stroke-width="2"
725
+ d="M15,6 L9,12 L15,18">
726
+ </path>
727
+ </svg>
728
+ </button>
729
+ <div class="showcase-indicators">
730
+ <span class="indicator active"></span>
731
+ <span class="indicator"></span>
732
+ <span class="indicator"></span>
733
+ <span class="indicator"></span>
734
+ <span class="indicator"></span>
735
+ <span class="indicator"></span>
736
+ </div>
737
+ <button class="control-btn next">
738
+ <svg viewBox="0 0 24 24" width="24" height="24">
739
+ <path fill="none" stroke="currentColor" stroke-width="2"
740
+ d="M9,6 L15,12 L9,18">
741
+ </path>
742
+ </svg>
743
+ </button>
744
+ </div>
745
+ </section>
746
+
747
+ <style>
748
+ /* 产品展示区新增样式 */
749
+ .product-card {
750
+ display: none !important; /* 使用!important确保样式不被覆盖 */
751
+ grid-template-columns: 1fr 1fr;
752
+ gap: 4rem;
753
+ align-items: center;
754
+ padding: 2rem;
755
+ background: white;
756
+ border-radius: 30px;
757
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
758
+ position: relative;
759
+ overflow: hidden;
760
+ opacity: 0;
761
+ transition: opacity 0.3s ease;
762
+ }
763
+
764
+ .product-card.active {
765
+ display: grid !important; /* 使用!important确保样式不被覆盖 */
766
+ opacity: 1;
767
+ animation: fadeIn 0.5s ease forwards;
768
+ }
769
+
770
+ @keyframes fadeIn {
771
+ from {
772
+ opacity: 0;
773
+ transform: translateX(50px);
774
+ }
775
+ to {
776
+ opacity: 1;
777
+ transform: translateX(0);
778
+ }
779
+ }
780
+ </style>
781
+ <style>
782
+ /* 特色展示区样式 */
783
+ .features {
784
+ padding: 6rem 2rem;
785
+ background: var(--bg-light);
786
+ position: relative;
787
+ overflow: hidden;
788
+ }
789
+
790
+ .section-header {
791
+ text-align: center;
792
+ margin-bottom: 4rem;
793
+ position: relative;
794
+ }
795
+
796
+ .section-title {
797
+ font-size: 2.5rem;
798
+ color: var(--text-dark);
799
+ margin-bottom: 1rem;
800
+ position: relative;
801
+ display: inline-block;
802
+ }
803
+
804
+ .section-title::after {
805
+ content: '';
806
+ position: absolute;
807
+ bottom: -10px;
808
+ left: 50%;
809
+ transform: translateX(-50%);
810
+ width: 60%;
811
+ height: 3px;
812
+ background: var(--gradient-1);
813
+ border-radius: 2px;
814
+ }
815
+
816
+ .section-subtitle {
817
+ font-size: 1.2rem;
818
+ color: var(--text-dark);
819
+ opacity: 0.7;
820
+ }
821
+
822
+ .feature-grid {
823
+ display: grid;
824
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
825
+ gap: 2rem;
826
+ max-width: 1200px;
827
+ margin: 0 auto;
828
+ }
829
+
830
+ .feature-card {
831
+ background: white;
832
+ padding: 2rem;
833
+ border-radius: 20px;
834
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
835
+ transition: all 0.3s ease;
836
+ position: relative;
837
+ overflow: hidden;
838
+ }
839
+
840
+ .feature-card::before {
841
+ content: '';
842
+ position: absolute;
843
+ top: 0;
844
+ left: 0;
845
+ width: 100%;
846
+ height: 100%;
847
+ background: var(--gradient-1);
848
+ opacity: 0;
849
+ transition: all 0.3s ease;
850
+ z-index: 0;
851
+ }
852
+
853
+ .feature-card:hover {
854
+ transform: translateY(-10px);
855
+ }
856
+
857
+ .feature-card:hover::before {
858
+ opacity: 0.05;
859
+ }
860
+
861
+ .feature-icon {
862
+ margin-bottom: 1.5rem;
863
+ position: relative;
864
+ z-index: 1;
865
+ }
866
+
867
+ .feature-card h3 {
868
+ font-size: 1.5rem;
869
+ margin-bottom: 1rem;
870
+ color: var(--text-dark);
871
+ position: relative;
872
+ z-index: 1;
873
+ }
874
+
875
+ .feature-card p {
876
+ color: var(--text-dark);
877
+ opacity: 0.8;
878
+ line-height: 1.6;
879
+ position: relative;
880
+ z-index: 1;
881
+ }
882
+
883
+ /* 产品展示区样式 */
884
+ .products {
885
+ padding: 6rem 2rem;
886
+ background: linear-gradient(135deg, #fff5e6, #fff9f0);
887
+ position: relative;
888
+ }
889
+
890
+ .product-showcase {
891
+ max-width: 1200px;
892
+ margin: 0 auto;
893
+ padding: 2rem 0;
894
+ position: relative;
895
+ }
896
+
897
+ .product-card {
898
+ display: grid;
899
+ grid-template-columns: 1fr 1fr;
900
+ gap: 4rem;
901
+ align-items: center;
902
+ padding: 2rem;
903
+ background: white;
904
+ border-radius: 30px;
905
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
906
+ position: relative;
907
+ overflow: hidden;
908
+ }
909
+
910
+ .product-image {
911
+ position: relative;
912
+ padding-top: 100%;
913
+ background: var(--gradient-2);
914
+ border-radius: 20px;
915
+ overflow: hidden;
916
+ }
917
+
918
+ .image-placeholder {
919
+ position: absolute;
920
+ inset: 0;
921
+ background: rgba(255, 255, 255, 0.1);
922
+ }
923
+
924
+ .product-decoration {
925
+ position: absolute;
926
+ inset: 0;
927
+ display: flex;
928
+ align-items: center;
929
+ justify-content: center;
930
+ animation: rotate 20s linear infinite;
931
+ }
932
+
933
+ .decoration-circle {
934
+ width: 100%;
935
+ height: 100%;
936
+ }
937
+
938
+ .product-info {
939
+ padding: 2rem;
940
+ }
941
+
942
+ .product-category {
943
+ display: inline-block;
944
+ padding: 0.5rem 1rem;
945
+ background: var(--gradient-1);
946
+ color: white;
947
+ border-radius: 20px;
948
+ font-size: 0.9rem;
949
+ margin-bottom: 1rem;
950
+ }
951
+
952
+ .product-name {
953
+ font-size: 2rem;
954
+ margin-bottom: 1rem;
955
+ color: var(--text-dark);
956
+ }
957
+
958
+ .product-description {
959
+ color: var(--text-dark);
960
+ opacity: 0.8;
961
+ line-height: 1.6;
962
+ margin-bottom: 2rem;
963
+ }
964
+
965
+ .product-meta {
966
+ display: flex;
967
+ gap: 2rem;
968
+ margin-bottom: 2rem;
969
+ }
970
+
971
+ .meta-item {
972
+ display: flex;
973
+ align-items: center;
974
+ gap: 0.5rem;
975
+ color: var(--text-dark);
976
+ opacity: 0.8;
977
+ }
978
+
979
+ .product-btn {
980
+ padding: 1rem 2rem;
981
+ border: none;
982
+ background: var(--gradient-1);
983
+ color: white;
984
+ border-radius: 25px;
985
+ font-weight: bold;
986
+ cursor: pointer;
987
+ transition: all 0.3s ease;
988
+ }
989
+
990
+ .product-btn:hover {
991
+ transform: translateY(-2px);
992
+ box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
993
+ }
994
+
995
+ .showcase-controls {
996
+ display: flex;
997
+ align-items: center;
998
+ justify-content: center;
999
+ gap: 2rem;
1000
+ margin-top: 3rem;
1001
+ }
1002
+
1003
+ .control-btn {
1004
+ width: 50px;
1005
+ height: 50px;
1006
+ border: none;
1007
+ background: white;
1008
+ border-radius: 50%;
1009
+ cursor: pointer;
1010
+ display: flex;
1011
+ align-items: center;
1012
+ justify-content: center;
1013
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
1014
+ transition: all 0.3s ease;
1015
+ }
1016
+
1017
+ .control-btn:hover {
1018
+ background: var(--gradient-1);
1019
+ color: white;
1020
+ }
1021
+
1022
+ .showcase-indicators {
1023
+ display: flex;
1024
+ gap: 1rem;
1025
+ }
1026
+
1027
+ .indicator {
1028
+ width: 10px;
1029
+ height: 10px;
1030
+ border-radius: 50%;
1031
+ background: var(--text-dark);
1032
+ opacity: 0.2;
1033
+ cursor: pointer;
1034
+ transition: all 0.3s ease;
1035
+ }
1036
+
1037
+ .indicator.active {
1038
+ width: 30px;
1039
+ border-radius: 5px;
1040
+ background: var(--gradient-1);
1041
+ opacity: 1;
1042
+ }
1043
+
1044
+ @keyframes rotate {
1045
+ from {
1046
+ transform: rotate(0deg);
1047
+ }
1048
+ to {
1049
+ transform: rotate(360deg);
1050
+ }
1051
+ }
1052
+ .youth-series {
1053
+ background: linear-gradient(135deg, #FFE4B5, #FFB6C1);
1054
+ }
1055
+
1056
+ .cocktail-series {
1057
+ background: linear-gradient(135deg, #87CEEB, #98FB98);
1058
+ }
1059
+
1060
+ .fusion-series {
1061
+ background: linear-gradient(135deg, #DDA0DD, #FFB6C1);
1062
+ }
1063
+
1064
+ .premium-series {
1065
+ background: linear-gradient(135deg, #FFD700, #FFA07A);
1066
+ }
1067
+
1068
+ .season-series {
1069
+ background: linear-gradient(135deg, #B0C4DE, #FFE4E1);
1070
+ }
1071
+ </style>
1072
+ <!-- 文化传承区域 -->
1073
+ <section class="culture-section">
1074
+ <div class="section-header">
1075
+ <h2 class="section-title">千年酿造，一脉相承</h2>
1076
+ <p class="section-subtitle">探寻绍兴黄酒的文化密码</p>
1077
+ </div>
1078
+
1079
+ <div class="culture-grid">
1080
+ <!-- 历史传承卡片 -->
1081
+ <div class="culture-card">
1082
+ <div class="culture-icon">
1083
+ <svg viewBox="0 0 24 24" width="48" height="48">
1084
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1085
+ 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"/>
1086
+ </svg>
1087
+ </div>
1088
+ <h3>千年酿造工艺</h3>
1089
+ <p>始于春秋，盛于唐宋，绍兴黄酒的酿造技艺被列入国家级非物质文化遗产名录</p>
1090
+ </div>
1091
+
1092
+ <!-- 文化底蕴卡片 -->
1093
+ <div class="culture-card">
1094
+ <div class="culture-icon">
1095
+ <svg viewBox="0 0 24 24" width="48" height="48">
1096
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1097
+ d="M3,12 C3,16.9706 7.02944,21 12,21 C16.9706,21 21,16.9706 21,12"/>
1098
+ </svg>
1099
+ </div>
1100
+ <h3>江南水乡文化</h3>
1101
+ <p>与江南水乡的人文风情密不可分，融入诗词歌赋，见证千年文明</p>
1102
+ </div>
1103
+
1104
+ <!-- 品质传承卡片 -->
1105
+ <div class="culture-card">
1106
+ <div class="culture-icon">
1107
+ <svg viewBox="0 0 24 24" width="48" height="48">
1108
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1109
+ d="M12,2 L15,8 L21,9 L17,14 L18,20 L12,17 L6,20 L7,14 L3,9 L9,8 Z"/>
1110
+ </svg>
1111
+ </div>
1112
+ <h3>匠心品质</h3>
1113
+ <p>秉承传统工艺，融合现代科技，每一滴都是时光的结晶</p>
1114
+ </div>
1115
+ </div>
1116
+ </section>
1117
+
1118
+ <!-- 地方特色展示区 -->
1119
+ <section class="local-features">
1120
+ <div class="section-header">
1121
+ <h2 class="section-title">醉美绍兴</h2>
1122
+ <p class="section-subtitle">感受独特的地方魅力</p>
1123
+ </div>
1124
+
1125
+ <div class="feature-showcase">
1126
+ <!-- 左侧图片展示 -->
1127
+ <div class="showcase-images">
1128
+ <div class="image-grid">
1129
+ <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
1130
+ <div class="image-overlay">
1131
+ <h4>古法酿造</h4>
1132
+ </div>
1133
+ </div>
1134
+ <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
1135
+ <div class="image-overlay">
1136
+ <h4>黄酒街区</h4>
1137
+ </div>
1138
+ </div>
1139
+ <div class="feature-image" style="background-image: url('/api/placeholder/400/300')">
1140
+ <div class="image-overlay">
1141
+ <h4>品鉴文化</h4>
1142
+ </div>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+ <!-- 右侧特色介绍 -->
1147
+ <div class="feature-content">
1148
+ <h3>千年绍兴，一城风味</h3>
1149
+ <p class="feature-description">
1150
+ 绍兴黄酒承载着这座城市的记忆与温度。从古法酿造到现代创新，
1151
+ 从老街深巷到时尚酒吧，处处可见黄酒文化与城市生活的完美融合。
1152
+ </p>
1153
+ <div class="feature-highlights">
1154
+ <div class="highlight-item">
1155
+ <span class="highlight-number">2000+</span>
1156
+ <span class="highlight-text">年酿造历史</span>
1157
+ </div>
1158
+ <div class="highlight-item">
1159
+ <span class="highlight-number">100+</span>
1160
+ <span class="highlight-text">家特色酒坊</span>
1161
+ </div>
1162
+ <div class="highlight-item">
1163
+ <span class="highlight-number">10+</span>
1164
+ <span class="highlight-text">个景点体验</span>
1165
+ </div>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+ </section>
1170
+
1171
+ <!-- 创新发展区 -->
1172
+ <section class="innovation-section">
1173
+ <div class="section-header">
1174
+ <h2 class="section-title">传承创新，引领未来</h2>
1175
+ <p class="section-subtitle">用科技赋能传统，让黄酒文化焕发新生</p>
1176
+ </div>
1177
+
1178
+ <div class="innovation-cards">
1179
+ <!-- 科技创新卡片 -->
1180
+ <div class="innovation-card">
1181
+ <div class="card-icon">
1182
+ <svg viewBox="0 0 24 24" width="48" height="48">
1183
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1184
+ d="M9,2 L15,2 L15,6 L9,6 L9,2 Z M12,6 L12,23"/>
1185
+ </svg>
1186
+ </div>
1187
+ <h3>智能酿造</h3>
1188
+ <p>引入AI温控系统，实现精准发酵，提升产品品质</p>
1189
+ <a href="#" class="learn-more">了解更多</a>
1190
+ </div>
1191
+
1192
+ <!-- 产品创新卡片 -->
1193
+ <div class="innovation-card">
1194
+ <div class="card-icon">
1195
+ <svg viewBox="0 0 24 24" width="48" height="48">
1196
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1197
+ 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"/>
1198
+ </svg>
1199
+ </div>
1200
+ <h3>新品研发</h3>
1201
+ <p>开发低度果酒系列，迎合年轻消费群体需求</p>
1202
+ <a href="#" class="learn-more">了解更多</a>
1203
+ </div>
1204
+
1205
+ <!-- 文化创新卡片 -->
1206
+ <div class="innovation-card">
1207
+ <div class="card-icon">
1208
+ <svg viewBox="0 0 24 24" width="48" height="48">
1209
+ <path fill="none" stroke="url(#gradient1)" stroke-width="2"
1210
+ d="M21,12 A9,9 0 0,1 12,21 A9,9 0 0,1 3,12"/>
1211
+ </svg>
1212
+ </div>
1213
+ <h3>文化体验</h3>
1214
+ <p>打造沉浸式黄酒文化体验馆，传统与现代的完美交融</p>
1215
+ <a href="#" class="learn-more">了解更多</a>
1216
+ </div>
1217
+ </div>
1218
+ </section>
1219
+
1220
+ <!-- 体验中心区域 -->
1221
+ <section class="experience-center">
1222
+ <div class="section-header">
1223
+ <h2 class="section-title">沉浸体验</h2>
1224
+ <p class="section-subtitle">邀您共赏绍兴黄酒的魅力时光</p>
1225
+ </div>
1226
+
1227
+ <div class="experience-container">
1228
+ <!-- 预约体验表单 -->
1229
+ <div class="booking-form">
1230
+ <h3>预约参观</h3>
1231
+ <form class="visit-form">
1232
+ <div class="form-group">
1233
+ <input type="text" placeholder="您的姓名" required>
1234
+ </div>
1235
+ <div class="form-group">
1236
+ <input type="tel" placeholder="联系电话" required>
1237
+ </div>
1238
+ <div class="form-group">
1239
+ <input type="date" placeholder="参观日期" required>
1240
+ </div>
1241
+ <div class="form-group">
1242
+ <select required>
1243
+ <option value="">选择体验项目</option>
1244
+ <option value="1">古法酿造体验</option>
1245
+ <option value="2">品酒鉴赏课程</option>
1246
+ <option value="3">文化展馆导览</option>
1247
+ </select>
1248
+ </div>
1249
+ <button type="submit" class="submit-btn">立即预约</button>
1250
+ </form>
1251
+ </div>
1252
+
1253
+ <!-- 体验项目展示 -->
1254
+ <div class="experience-showcase">
1255
+ <div class="experience-item">
1256
+ <div class="experience-icon">
1257
+ <svg viewBox="0 0 24 24" width="32" height="32">
1258
+ <path fill="none" stroke="currentColor" stroke-width="2"
1259
+ d="M12,2 L12,22 M4,4 L20,4"/>
1260
+ </svg>
1261
+ </div>
1262
+ <h4>古法酿造体验</h4>
1263
+ <p>亲手参与传统酿造工艺，感受非遗文化魅力</p>
1264
+ </div>
1265
+ <div class="experience-item">
1266
+ <div class="experience-icon">
1267
+ <svg viewBox="0 0 24 24" width="32" height="32">
1268
+ <path fill="none" stroke="currentColor" stroke-width="2"
1269
+ d="M12,2 L12,22 M4,4 L20,4"/>
1270
+ </svg>
1271
+ </div>
1272
+ <h4>品酒鉴赏课程</h4>
1273
+ <p>专业品酒师带您领略黄酒的独特韵味</p>
1274
+ </div>
1275
+ <div class="experience-item">
1276
+ <div class="experience-icon">
1277
+ <svg viewBox="0 0 24 24" width="32" height="32">
1278
+ <path fill="none" stroke="currentColor" stroke-width="2"
1279
+ d="M12,2 L12,22 M4,4 L20,4"/>
1280
+ </svg>
1281
+ </div>
1282
+ <h4>文化展馆导览</h4>
1283
+ <p>沉浸式体验千年黄酒文化的魅力传承</p>
1284
+ </div>
1285
+ </div>
1286
+ </div>
1287
+ </section>
1288
+
1289
+ <!-- 页脚区域 -->
1290
+ <footer class="footer">
1291
+ <div class="footer-content">
1292
+ <div class="footer-section">
1293
+ <h3>联系我们</h3>
1294
+ <p>电话：0575-88888888</p>
1295
+ <p>邮箱：[email protected]</p>
1296
+ <p>地址：浙江省绍兴市越城区黄酒文化街区</p>
1297
+ </div>
1298
+
1299
+ <div class="footer-section">
1300
+ <h3>快速链接</h3>
1301
+ <ul>
1302
+ <li><a href="#">关于我们</a></li>
1303
+ <li><a href="#">产品系列</a></li>
1304
+ <li><a href="#">新闻资讯</a></li>
1305
+ <li><a href="#">加入我们</a></li>
1306
+ </ul>
1307
+ </div>
1308
+
1309
+ <div class="footer-section">
1310
+ <h3>关注我们</h3>
1311
+ <div class="social-links">
1312
+ <a href="#" class="social-link">微信</a>
1313
+ <a href="#" class="social-link">微博</a>
1314
+ <a href="#" class="social-link">抖音</a>
1315
+ <a href="#" class="social-link">小红书</a>
1316
+ </div>
1317
+ </div>
1318
+
1319
+ <div class="footer-section">
1320
+ <h3>订阅资讯</h3>
1321
+ <form class="subscribe-form">
1322
+ <input type="email" placeholder="请输入您的邮箱">
1323
+ <button type="submit">订阅</button>
1324
+ </form>
1325
+ </div>
1326
+ </div>
1327
+
1328
+ <div class="footer-bottom">
1329
+ <p>&copy; 2024 绍兴黄酒. All rights reserved.</p>
1330
+ <div class="footer-links">
1331
+ <a href="#">隐私政策</a>
1332
+ <a href="#">使用条款</a>
1333
+ <a href="#">网站地图</a>
1334
+ </div>
1335
+ </div>
1336
+ </footer>
1337
+ <style>
1338
+ /* 文化传承区域样式 */
1339
+ .culture-section {
1340
+ padding: 6rem 2rem;
1341
+ background: linear-gradient(135deg, #fff9f0, #fff5e6);
1342
+ position: relative;
1343
+ overflow: hidden;
1344
+ }
1345
+
1346
+ .culture-grid {
1347
+ display: grid;
1348
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1349
+ gap: 2rem;
1350
+ max-width: 1200px;
1351
+ margin: 0 auto;
1352
+ padding: 2rem;
1353
+ }
1354
+
1355
+ .culture-card {
1356
+ background: white;
1357
+ padding: 2.5rem;
1358
+ border-radius: 20px;
1359
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
1360
+ transition: all 0.3s ease;
1361
+ text-align: center;
1362
+ position: relative;
1363
+ overflow: hidden;
1364
+ }
1365
+
1366
+ .culture-card:hover {
1367
+ transform: translateY(-10px);
1368
+ box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1);
1369
+ }
1370
+
1371
+ .culture-icon {
1372
+ margin-bottom: 1.5rem;
1373
+ height: 80px;
1374
+ display: flex;
1375
+ align-items: center;
1376
+ justify-content: center;
1377
+ }
1378
+
1379
+ .culture-card h3 {
1380
+ font-size: 1.5rem;
1381
+ color: var(--text-dark);
1382
+ margin-bottom: 1rem;
1383
+ }
1384
+
1385
+ .culture-card p {
1386
+ color: var(--text-dark);
1387
+ opacity: 0.8;
1388
+ line-height: 1.6;
1389
+ }
1390
+
1391
+ /* 地方特色展示区样式 */
1392
+ .local-features {
1393
+ padding: 6rem 2rem;
1394
+ background: var(--bg-light);
1395
+ }
1396
+
1397
+ .feature-showcase {
1398
+ max-width: 1200px;
1399
+ margin: 0 auto;
1400
+ display: grid;
1401
+ grid-template-columns: 1fr 1fr;
1402
+ gap: 4rem;
1403
+ align-items: center;
1404
+ }
1405
+
1406
+ .showcase-images {
1407
+ position: relative;
1408
+ }
1409
+
1410
+ .image-grid {
1411
+ display: grid;
1412
+ grid-template-columns: repeat(2, 1fr);
1413
+ gap: 1rem;
1414
+ }
1415
+
1416
+ .feature-image {
1417
+ height: 200px;
1418
+ border-radius: 15px;
1419
+ background-size: cover;
1420
+ background-position: center;
1421
+ position: relative;
1422
+ overflow: hidden;
1423
+ }
1424
+
1425
+ .feature-image:nth-child(1) {
1426
+ grid-column: 1 / -1;
1427
+ height: 300px;
1428
+ }
1429
+
1430
+ .image-overlay {
1431
+ position: absolute;
1432
+ inset: 0;
1433
+ background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
1434
+ display: flex;
1435
+ align-items: flex-end;
1436
+ padding: 1.5rem;
1437
+ color: white;
1438
+ opacity: 0;
1439
+ transition: all 0.3s ease;
1440
+ }
1441
+
1442
+ .feature-image:hover .image-overlay {
1443
+ opacity: 1;
1444
+ }
1445
+
1446
+ .feature-content {
1447
+ padding: 2rem;
1448
+ }
1449
+
1450
+ .feature-content h3 {
1451
+ font-size: 2rem;
1452
+ color: var(--text-dark);
1453
+ margin-bottom: 1.5rem;
1454
+ }
1455
+
1456
+ .feature-description {
1457
+ color: var(--text-dark);
1458
+ opacity: 0.8;
1459
+ line-height: 1.8;
1460
+ margin-bottom: 2rem;
1461
+ }
1462
+
1463
+ .feature-highlights {
1464
+ display: grid;
1465
+ grid-template-columns: repeat(3, 1fr);
1466
+ gap: 1.5rem;
1467
+ }
1468
+
1469
+ .highlight-item {
1470
+ text-align: center;
1471
+ }
1472
+
1473
+ .highlight-number {
1474
+ display: block;
1475
+ font-size: 2.5rem;
1476
+ font-weight: bold;
1477
+ color: var(--primary-color);
1478
+ margin-bottom: 0.5rem;
1479
+ }
1480
+
1481
+ .highlight-text {
1482
+ color: var(--text-dark);
1483
+ opacity: 0.8;
1484
+ }
1485
+
1486
+ /* 创新发展区样式 */
1487
+ .innovation-section {
1488
+ padding: 6rem 2rem;
1489
+ background: linear-gradient(135deg, #fff5e6, #fff9f0);
1490
+ }
1491
+
1492
+ .innovation-cards {
1493
+ display: grid;
1494
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1495
+ gap: 2rem;
1496
+ max-width: 1200px;
1497
+ margin: 0 auto;
1498
+ padding: 2rem;
1499
+ }
1500
+
1501
+ .innovation-card {
1502
+ background: white;
1503
+ padding: 2.5rem;
1504
+ border-radius: 20px;
1505
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
1506
+ transition: all 0.3s ease;
1507
+ text-align: center;
1508
+ }
1509
+
1510
+ .innovation-card:hover {
1511
+ transform: translateY(-10px);
1512
+ box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1);
1513
+ }
1514
+
1515
+ .card-icon {
1516
+ margin-bottom: 1.5rem;
1517
+ height: 80px;
1518
+ display: flex;
1519
+ align-items: center;
1520
+ justify-content: center;
1521
+ }
1522
+
1523
+ .innovation-card h3 {
1524
+ font-size: 1.5rem;
1525
+ color: var(--text-dark);
1526
+ margin-bottom: 1rem;
1527
+ }
1528
+
1529
+ .innovation-card p {
1530
+ color: var(--text-dark);
1531
+ opacity: 0.8;
1532
+ line-height: 1.6;
1533
+ margin-bottom: 1.5rem;
1534
+ }
1535
+
1536
+ .learn-more {
1537
+ display: inline-block;
1538
+ padding: 0.8rem 1.5rem;
1539
+ background: var(--gradient-1);
1540
+ color: white;
1541
+ border-radius: 25px;
1542
+ text-decoration: none;
1543
+ font-weight: 500;
1544
+ transition: all 0.3s ease;
1545
+ }
1546
+
1547
+ .learn-more:hover {
1548
+ transform: translateY(-2px);
1549
+ box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
1550
+ }
1551
+
1552
+ /* 体验中心区域样式 */
1553
+ .experience-center {
1554
+ padding: 6rem 2rem;
1555
+ background: var(--bg-light);
1556
+ }
1557
+
1558
+ .experience-container {
1559
+ max-width: 1200px;
1560
+ margin: 0 auto;
1561
+ display: grid;
1562
+ grid-template-columns: 1fr 1fr;
1563
+ gap: 4rem;
1564
+ align-items: start;
1565
+ }
1566
+
1567
+ .booking-form {
1568
+ background: white;
1569
+ padding: 3rem;
1570
+ border-radius: 20px;
1571
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
1572
+ }
1573
+
1574
+ .booking-form h3 {
1575
+ font-size: 1.8rem;
1576
+ color: var(--text-dark);
1577
+ margin-bottom: 2rem;
1578
+ }
1579
+
1580
+ .form-group {
1581
+ margin-bottom: 1.5rem;
1582
+ }
1583
+
1584
+ .form-group input,
1585
+ .form-group select {
1586
+ width: 100%;
1587
+ padding: 1rem;
1588
+ border: 2px solid rgba(0,0,0,0.1);
1589
+ border-radius: 10px;
1590
+ font-size: 1rem;
1591
+ transition: all 0.3s ease;
1592
+ }
1593
+
1594
+ .form-group input:focus,
1595
+ .form-group select:focus {
1596
+ border-color: var(--primary-color);
1597
+ outline: none;
1598
+ }
1599
+
1600
+ .submit-btn {
1601
+ width: 100%;
1602
+ padding: 1rem;
1603
+ border: none;
1604
+ background: var(--gradient-1);
1605
+ color: white;
1606
+ border-radius: 10px;
1607
+ font-size: 1rem;
1608
+ font-weight: bold;
1609
+ cursor: pointer;
1610
+ transition: all 0.3s ease;
1611
+ }
1612
+
1613
+ .submit-btn:hover {
1614
+ transform: translateY(-2px);
1615
+ box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3);
1616
+ }
1617
+
1618
+ .experience-showcase {
1619
+ display: grid;
1620
+ gap: 2rem;
1621
+ }
1622
+
1623
+ .experience-item {
1624
+ background: white;
1625
+ padding: 2rem;
1626
+ border-radius: 15px;
1627
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
1628
+ transition: all 0.3s ease;
1629
+ }
1630
+
1631
+ .experience-item:hover {
1632
+ transform: translateX(10px);
1633
+ }
1634
+
1635
+ .experience-icon {
1636
+ margin-bottom: 1rem;
1637
+ color: var(--primary-color);
1638
+ }
1639
+
1640
+ .experience-item h4 {
1641
+ font-size: 1.2rem;
1642
+ color: var(--text-dark);
1643
+ margin-bottom: 0.5rem;
1644
+ }
1645
+
1646
+ .experience-item p {
1647
+ color: var(--text-dark);
1648
+ opacity: 0.8;
1649
+ line-height: 1.6;
1650
+ }
1651
+
1652
+ /* 页脚样式 */
1653
+ .footer {
1654
+ background: var(--text-dark);
1655
+ color: var(--text-light);
1656
+ padding: 4rem 2rem 2rem;
1657
+ }
1658
+
1659
+ .footer-content {
1660
+ max-width: 1200px;
1661
+ margin: 0 auto;
1662
+ display: grid;
1663
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1664
+ gap: 3rem;
1665
+ margin-bottom: 3rem;
1666
+ }
1667
+
1668
+ .footer-section h3 {
1669
+ font-size: 1.2rem;
1670
+ margin-bottom: 1.5rem;
1671
+ color: var(--primary-color);
1672
+ }
1673
+
1674
+ .footer-section p {
1675
+ margin-bottom: 0.8rem;
1676
+ opacity: 0.8;
1677
+ }
1678
+
1679
+ .footer-section ul {
1680
+ list-style: none;
1681
+ }
1682
+
1683
+ .footer-section ul li {
1684
+ margin-bottom: 0.8rem;
1685
+ }
1686
+
1687
+ .footer-section a {
1688
+ color: var(--text-light);
1689
+ text-decoration: none;
1690
+ opacity: 0.8;
1691
+ transition: all 0.3s ease;
1692
+ }
1693
+
1694
+ .footer-section a:hover {
1695
+ opacity: 1;
1696
+ color: var(--primary-color);
1697
+ }
1698
+
1699
+ .social-links {
1700
+ display: flex;
1701
+ gap: 1rem;
1702
+ }
1703
+
1704
+ .social-link {
1705
+ padding: 0.5rem 1rem;
1706
+ border: 1px solid rgba(255,255,255,0.2);
1707
+ border-radius: 20px;
1708
+ }
1709
+
1710
+ .subscribe-form {
1711
+ display: flex;
1712
+ gap: 1rem;
1713
+ }
1714
+
1715
+ .subscribe-form input {
1716
+ flex: 1;
1717
+ padding: 0.8rem;
1718
+ border: none;
1719
+ border-radius: 5px;
1720
+ background: rgba(255,255,255,0.1);
1721
+ color: var(--text-light);
1722
+ }
1723
+
1724
+ .subscribe-form button {
1725
+ padding: 0.8rem 1.5rem;
1726
+ border: none;
1727
+ border-radius: 5px;
1728
+ background: var(--primary-color);
1729
+ color: var(--text-dark);
1730
+ cursor: pointer;
1731
+ transition: all 0.3s ease;
1732
+ }
1733
+
1734
+ .subscribe-form button:hover {
1735
+ background: var(--secondary-color);
1736
+ }
1737
+
1738
+ .footer-bottom {
1739
+ max-width: 1200px;
1740
+ margin: 0 auto;
1741
+ padding-top: 2rem;
1742
+ border-top: 1px solid rgba(255,255,255,0.1);
1743
+ display: flex;
1744
+ justify-content: space-between;
1745
+ align-items: center;
1746
+ flex-wrap: wrap;
1747
+ gap: 1rem;
1748
+ }
1749
+
1750
+ .footer-bottom p {
1751
+ opacity: 0.6;
1752
+ }
1753
+
1754
+ .footer-links {
1755
+ display: flex;
1756
+ gap: 2rem;
1757
+ }
1758
+
1759
+ .footer-links a {
1760
+ color: var(--text-light);
1761
+ text-decoration: none;
1762
+ opacity: 0.6;
1763
+ transition: all 0.3s ease;
1764
+ }
1765
+
1766
+ .footer-links a:hover {
1767
+ opacity: 1;
1768
+ }
1769
+
1770
+ /* 响应式设计 */
1771
+ @media (max-width: 768px) {
1772
+ .feature-showcase,
1773
+ .experience-container {
1774
+ grid-template-columns: 1fr;
1775
+ }
1776
+
1777
+ .footer-content {
1778
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1779
+ }
1780
+
1781
+ .footer-bottom {
1782
+ flex-direction: column;
1783
+ text-align: center;
1784
+ }
1785
+
1786
+ .footer-links {
1787
+ justify-content: center;
1788
+ }
1789
+
1790
+ .subscribe-form {
1791
+ flex-direction: column;
1792
+ }
1793
+ }
1794
+
1795
+ @media (max-width: 480px) {
1796
+ .culture-grid,
1797
+ .innovation-cards {
1798
+ grid-template-columns: 1fr;
1799
+ }
1800
+
1801
+ .feature-highlights {
1802
+ grid-template-columns: 1fr;
1803
+ }
1804
+
1805
+ .highlight-item {
1806
+ padding: 1rem 0;
1807
+ border-bottom: 1px solid rgba(0,0,0,0.1);
1808
+ }
1809
+ }
1810
+ </style>
1811
+ <script>
1812
+ // 获取所有需要的元素
1813
+ const productCards = document.querySelectorAll('.product-card');
1814
+ const indicators = document.querySelectorAll('.indicator');
1815
+ const prevButton = document.querySelector('.control-btn.prev');
1816
+ const nextButton = document.querySelector('.control-btn.next');
1817
+
1818
+ // 当前显示的卡片索引
1819
+ let currentIndex = 0;
1820
+
1821
+ // 更新显示状态的函数
1822
+ function updateDisplay() {
1823
+ // 隐藏所有卡片并移除所有指示器的激活状态
1824
+ productCards.forEach(card => card.classList.remove('active'));
1825
+ indicators.forEach(indicator => indicator.classList.remove('active'));
1826
+
1827
+ // 显示当前卡片并激活对应的指示器
1828
+ productCards[currentIndex].classList.add('active');
1829
+ indicators[currentIndex].classList.add('active');
1830
+ }
1831
+
1832
+ // 下一张卡片
1833
+ function showNext() {
1834
+ currentIndex = (currentIndex + 1) % productCards.length;
1835
+ updateDisplay();
1836
+ }
1837
+
1838
+ // 上一张卡片
1839
+ function showPrev() {
1840
+ currentIndex = (currentIndex - 1 + productCards.length) % productCards.length;
1841
+ updateDisplay();
1842
+ }
1843
+
1844
+ // 绑定点击事件
1845
+ nextButton.addEventListener('click', showNext);
1846
+ prevButton.addEventListener('click', showPrev);
1847
+
1848
+ // 为指示器添加点击事件
1849
+ indicators.forEach((indicator, index) => {
1850
+ indicator.addEventListener('click', () => {
1851
+ currentIndex = index;
1852
+ updateDisplay();
1853
+ });
1854
+ });
1855
+
1856
+ // 自动轮播
1857
+ let autoplayInterval;
1858
+
1859
+ function startAutoplay() {
1860
+ autoplayInterval = setInterval(showNext, 5000); // 每5秒切换一次
1861
+ }
1862
+
1863
+ function stopAutoplay() {
1864
+ clearInterval(autoplayInterval);
1865
+ }
1866
+
1867
+ // 鼠标进入停止自动轮播，离开恢复
1868
+ const productShowcase = document.querySelector('.product-showcase');
1869
+ productShowcase.addEventListener('mouseenter', stopAutoplay);
1870
+ productShowcase.addEventListener('mouseleave', startAutoplay);
1871
+
1872
+ // 初始化显示和自动轮播
1873
+ updateDisplay();
1874
+ startAutoplay();
1875
+ </script>
1876
+ </body>
1877
  </html>