-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1227 lines (1164 loc) · 86.8 KB
/
Copy pathindex.html
File metadata and controls
1227 lines (1164 loc) · 86.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>西昌4天3晚双人休闲旅游攻略</title>
<!-- 引入资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind 自定义配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF', // 主色：高级湖蓝（邛海主题）
secondary: '#FF9500', // 辅助色：暖琥珀色（古城/彝族风情）
weather: {
sun: '#FFB74D',
cloud: '#90A4AE',
wind: '#81D4FA'
},
neutral: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A',
}
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
},
boxShadow: {
'soft': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)',
'hover': '0 20px 35px -10px rgba(22, 93, 255, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.03)',
'card': '0 2px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03)',
}
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.backdrop-blur-header {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.text-balance {
text-wrap: balance;
}
.timeline-dot {
@apply absolute left-[-5px] top-8 w-2.5 h-2.5 rounded-full bg-white border-2 border-primary z-10;
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.active {
max-height: 800px;
}
.weather-icon {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #165DFF;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
}
</style>
</head>
<body class="bg-neutral-50 font-sans text-neutral-800 scroll-smooth">
<!-- 固定导航栏 -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center gap-2">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="font-bold text-lg">西昌之旅</span>
</div>
<!-- 桌面端导航 -->
<div class="hidden md:flex gap-8">
<a href="#overview" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">行程概览</a>
<a href="#weather" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">天气穿搭</a>
<a href="#day1" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">Day 1</a>
<a href="#day2" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">Day 2</a>
<a href="#day3" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">Day 3</a>
<a href="#day4" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">Day 4</a>
<a href="#tips" class="nav-link text-neutral-600 hover:text-primary transition-colors font-medium">出行贴士</a>
</div>
<!-- 移动端菜单按钮 -->
<button id="mobileMenuBtn" class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- 移动端下拉菜单 -->
<div id="mobileMenu" class="hidden md:hidden bg-white/95 backdrop-blur-header shadow-md">
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col gap-2">
<a href="#overview" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">行程概览</a>
<a href="#weather" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">天气穿搭</a>
<a href="#day1" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">Day 1</a>
<a href="#day2" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">Day 2</a>
<a href="#day3" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">Day 3</a>
<a href="#day4" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">Day 4</a>
<a href="#tips" class="py-2 px-3 rounded-lg hover:bg-neutral-100 font-medium">出行贴士</a>
</div>
</div>
</nav>
<!-- 英雄区 -->
<header class="relative pt-16 min-h-[85vh] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-neutral-900/80 via-primary/40 to-neutral-900/80 z-0">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1575382206693-3b67afc40208?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')] bg-center bg-cover opacity-60 mix-blend-overlay"></div>
</div>
<div class="relative z-10 max-w-4xl mx-auto px-4 text-center text-white">
<div class="fade-in-up" style="animation-delay: 0.1s;">
<span class="inline-block bg-white/10 backdrop-blur-sm px-4 py-1.5 rounded-full text-sm font-medium mb-6 border border-white/20">4天3晚 · 双人休闲之旅</span>
<h1 class="text-balance text-[clamp(2.5rem,8vw,4rem)] font-bold mb-4 leading-[1.1]">西昌慢时光旅行攻略</h1>
<p class="text-balance text-[clamp(1rem,2vw,1.25rem)] text-white/80 mb-8 max-w-2xl mx-auto">4月1日中午抵达 · 4月4日下午离开 | 住漫心酒店 | 自然风光为主 | 含专属写真安排</p>
</div>
<div class="flex flex-wrap justify-center gap-4 fade-in-up" style="animation-delay: 0.3s;">
<span class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm border border-white/20">🏨 核心商圈酒店</span>
<span class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm border border-white/20">📸 旅拍写真安排</span>
<span class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm border border-white/20">🚄 高铁便捷出行</span>
<span class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm border border-white/20">🌿 慢节奏不赶路</span>
</div>
</div>
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/70 animate-bounce">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</header>
<!-- 前置说明 & 行程概览 -->
<section id="overview" class="py-20 bg-neutral-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-center text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">出行前置说明</h2>
<p class="text-center text-neutral-500 max-w-2xl mx-auto mb-16">出发前必看核心信息，让你的旅途全程顺畅</p>
<!-- 前置信息卡片 -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-24">
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<h3 class="font-bold text-lg mb-3">酒店定位</h3>
<p class="text-neutral-500 leading-relaxed">西昌邛海17度火把广场漫心酒店（土司路1号），地处建昌古城&邛海17度双商圈核心，步行5分钟可达建昌古城/唐园，打车10分钟到邛海核心景区，出行极度便利。</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</div>
<h3 class="font-bold text-lg mb-3">市内交通</h3>
<p class="text-neutral-500 leading-relaxed">双人出行优先打车（景点间大多10-30元），邛海周边租电动车（40-60元/天，随走随停），远途景点拼车/包车（螺髻山往返人均100-150元），公交便宜但耗时久，休闲游不推荐。</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<h3 class="font-bold text-lg mb-3">必备物品</h3>
<p class="text-neutral-500 leading-relaxed">高倍防晒霜、遮阳帽、墨镜、舒适运动鞋、薄外套（高原早晚温差大）、保湿护肤品、身份证；4月西昌紫外线极强，防晒为第一优先级。</p>
</div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<h3 class="font-bold text-lg mb-3">写真提前准备</h3>
<p class="text-neutral-500 leading-relaxed">建议提前1-2天线上预约大石板古村旅拍，优先选彝族风情/清新湖景风，最佳拍摄时间为上午9:00-11:00/下午16:00-18:00（避开正午强光），常规套餐399-699元，含服装、妆造、底片+精修，性价比极高。</p>
</div>
</div>
<!-- 行程总览 -->
<h2 class="text-center text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">行程总览</h2>
<p class="text-center text-neutral-500 max-w-2xl mx-auto mb-16">4天慢节奏行程，每天1-2个核心景点，不赶路不拥挤</p>
<div class="grid md:grid-cols-4 gap-6">
<a href="#day1" class="group bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-transparent hover:border-primary/10">
<div class="text-3xl font-bold text-primary mb-2 group-hover:scale-105 transition-transform">Day 1</div>
<div class="text-sm text-neutral-400 mb-3">4月1日</div>
<div class="font-medium mb-2">抵达适配日</div>
<div class="text-neutral-500 text-sm">建昌古城 · 唐园夜游</div>
</a>
<a href="#day2" class="group bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-transparent hover:border-primary/10">
<div class="text-3xl font-bold text-primary mb-2 group-hover:scale-105 transition-transform">Day 2</div>
<div class="text-sm text-neutral-400 mb-3">4月2日</div>
<div class="font-medium mb-2">自然风光核心日</div>
<div class="text-neutral-500 text-sm">螺髻山高山秘境</div>
</a>
<a href="#day3" class="group bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-transparent hover:border-primary/10">
<div class="text-3xl font-bold text-primary mb-2 group-hover:scale-105 transition-transform">Day 3</div>
<div class="text-sm text-neutral-400 mb-3">4月3日</div>
<div class="font-medium mb-2">写真专属日</div>
<div class="text-neutral-500 text-sm">大石板古村 · 邛海日落</div>
</a>
<a href="#day4" class="group bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-transparent hover:border-primary/10">
<div class="text-3xl font-bold text-primary mb-2 group-hover:scale-105 transition-transform">Day 4</div>
<div class="text-sm text-neutral-400 mb-3">4月4日</div>
<div class="font-medium mb-2">返程收官日</div>
<div class="text-neutral-500 text-sm">泸山轻徒步 · 返程</div>
</a>
</div>
</div>
</section>
<!-- 新增：天气&穿搭指南模块 -->
<section id="weather" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">出行天气&每日穿搭指南</h2>
<p class="text-neutral-500 max-w-2xl mx-auto">西昌4月昼夜温差大，紫外线极强，提前备好穿搭，旅途舒适又出片</p>
</div>
<!-- 4天天气卡片 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20">
<!-- Day1 天气 -->
<div class="bg-gradient-to-br from-sky-50 to-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-sky-100">
<div class="flex justify-between items-start mb-4">
<div>
<span class="block text-sm text-neutral-500 mb-1">4月1日</span>
<span class="block font-bold text-lg">Day1 抵达日</span>
</div>
<div class="weather-icon">
<svg class="w-10 h-10 text-weather-sun" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3a1 1 0 011 1v1a1 1 0 11-2 0V4a1 1 0 011-1zm0 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.636 6.343a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zm12.728 12.728a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zM3 12a1 1 0 011-1h1a1 1 0 110 2H4a1 1 0 01-1-1zm16 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM6.343 18.364a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zm12.728-12.728a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM12 7a5 5 0 100 10 5 5 0 000-10z"/>
</svg>
</div>
</div>
<div class="mb-3">
<span class="text-2xl font-bold">晴</span>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-3xl font-bold">27℃</span>
<span class="text-neutral-500">12℃</span>
</div>
<div class="flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs">西南风2级</span>
<span class="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs">紫外线极强</span>
</div>
</div>
<!-- Day2 天气 -->
<div class="bg-gradient-to-br from-neutral-50 to-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-neutral-100">
<div class="flex justify-between items-start mb-4">
<div>
<span class="block text-sm text-neutral-500 mb-1">4月2日</span>
<span class="block font-bold text-lg">Day2 螺髻山</span>
</div>
<div class="weather-icon">
<svg class="w-10 h-10 text-weather-cloud" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.5 19a3.5 3.5 0 100-7h-1.17a5.5 5.5 0 00-10.83 1A4 4 0 105 19h12.5z"/>
</svg>
</div>
</div>
<div class="mb-3">
<span class="text-2xl font-bold">晴转多云</span>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-3xl font-bold">25℃</span>
<span class="text-neutral-500">10℃</span>
</div>
<div class="flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs">微风</span>
<span class="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs">紫外线强</span>
<span class="bg-red-50/10 text-red-500 px-2 py-1 rounded-md text-xs">景区低8-10℃</span>
</div>
</div>
<!-- Day3 天气 -->
<div class="bg-gradient-to-br from-sky-50 to-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-sky-100">
<div class="flex justify-between items-start mb-4">
<div>
<span class="block text-sm text-neutral-500 mb-1">4月3日</span>
<span class="block font-bold text-lg">Day3 写真环湖</span>
</div>
<div class="weather-icon">
<svg class="w-10 h-10 text-weather-sun" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3a1 1 0 011 1v1a1 1 0 11-2 0V4a1 1 0 011-1zm0 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.636 6.343a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zm12.728 12.728a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414zM3 12a1 1 0 011-1h1a1 1 0 110 2H4a1 1 0 01-1-1zm16 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM6.343 18.364a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zm12.728-12.728a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM12 7a5 5 0 100 10 5 5 0 000-10z"/>
</svg>
</div>
</div>
<div class="mb-3">
<span class="text-2xl font-bold">晴</span>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-3xl font-bold">28℃</span>
<span class="text-neutral-500">13℃</span>
</div>
<div class="flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs">微风</span>
<span class="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs">紫外线极强</span>
</div>
</div>
<!-- Day4 天气 -->
<div class="bg-gradient-to-br from-neutral-50 to-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300 border border-neutral-100">
<div class="flex justify-between items-start mb-4">
<div>
<span class="block text-sm text-neutral-500 mb-1">4月4日</span>
<span class="block font-bold text-lg">Day4 返程日</span>
</div>
<div class="weather-icon">
<svg class="w-10 h-10 text-weather-cloud" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.5 19a3.5 3.5 0 100-7h-1.17a5.5 5.5 0 00-10.83 1A4 4 0 105 19h12.5z"/>
</svg>
</div>
</div>
<div class="mb-3">
<span class="text-2xl font-bold">多云转晴</span>
</div>
<div class="flex justify-between items-center mb-3">
<span class="text-3xl font-bold">26℃</span>
<span class="text-neutral-500">11℃</span>
</div>
<div class="flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs">微风</span>
<span class="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs">紫外线强</span>
</div>
</div>
</div>
<!-- 每日穿搭推荐 手风琴 -->
<div class="max-w-4xl mx-auto space-y-4">
<!-- Day1 穿搭 -->
<div class="accordion-item bg-neutral-50 rounded-2xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium hover:bg-neutral-100 transition-colors">
<span class="flex items-center gap-3">
<span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">Day1</span>
抵达日·古城夜游穿搭推荐
</span>
<svg class="accordion-icon w-5 h-5 text-neutral-500 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content px-6 pb-6 active">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 text-xs">♀</span>
女生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 白天：棉麻透气短袖+垂感阔腿裤/浅色系收腰连衣裙，搭配小白鞋/乐福鞋，舒适逛古城</li>
<li>· 外搭：薄款针织开衫/牛仔外套，应对早晚降温，夜游唐园也不会冷</li>
<li>· 配饰：宽檐遮阳帽、墨镜、小巧斜挎包，古城红墙拍照超上镜</li>
<li>· 重点：高倍防晒，露肤部位一定要涂防晒霜</li>
</ul>
</div>
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 text-xs">♂</span>
男生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 白天：纯色宽松短袖T恤+直筒休闲长裤，搭配小白鞋/板鞋，逛古城无压力</li>
<li>· 外搭：薄款牛仔外套/休闲工装夹克，早晚温差大随时可穿</li>
<li>· 配饰：鸭舌帽、墨镜、简约斜挎包，解放双手</li>
<li>· 重点：透气不闷汗，兼顾舒适和出片</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Day2 穿搭 -->
<div class="accordion-item bg-neutral-50 rounded-2xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium hover:bg-neutral-100 transition-colors">
<span class="flex items-center gap-3">
<span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">Day2</span>
螺髻山高海拔穿搭推荐
</span>
<svg class="accordion-icon w-5 h-5 text-neutral-500 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content px-6 pb-6">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 text-xs">♀</span>
女生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 内搭：速干长袖打底衫+休闲卫衣，保暖不闷汗</li>
<li>· 外层：防风冲锋衣/厚款连帽外套，山上风大温度低，必备防风保暖款</li>
<li>· 下装：加绒休闲运动裤/防风束脚裤，拒绝短裙短裤，避免着凉</li>
<li>· 鞋子：防滑舒适运动鞋/登山鞋，台阶多，一定要穿跟脚的鞋</li>
<li>· 备用：薄款保暖裤、暖宝宝，怕冷可随时加</li>
</ul>
</div>
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 text-xs">♂</span>
男生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 内搭：速干长袖T恤+圆领厚卫衣，叠穿应对温度变化</li>
<li>· 外层：防风冲锋衣/休闲夹克，山上风大，防风比厚衣服更重要</li>
<li>· 下装：宽松运动长裤/工装裤，徒步无束缚</li>
<li>· 鞋子：防滑登山鞋/舒适运动鞋，拒绝板鞋，避免打滑</li>
<li>· 配饰：遮阳帽、墨镜，山上紫外线同样很强，不要忽略防晒</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Day3 穿搭 -->
<div class="accordion-item bg-neutral-50 rounded-2xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium hover:bg-neutral-100 transition-colors">
<span class="flex items-center gap-3">
<span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">Day3</span>
写真·环湖日落穿搭推荐
</span>
<svg class="accordion-icon w-5 h-5 text-neutral-500 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content px-6 pb-6">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 text-xs">♀</span>
女生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 写真内搭：浅色系仙气连衣裙/简约纯色长裙，和彝族写真服装适配，拍情侣照也超搭</li>
<li>· 外搭：长款冰丝防晒开衫/薄款披肩，白天防晒，湖边日落防风</li>
<li>· 鞋子：平底小白鞋/温柔凉鞋，骑行和逛沙滩都舒适</li>
<li>· 配饰：草编宽檐帽、编织包、简约项链，湖景和古村拍照氛围感拉满</li>
<li>· 重点：穿浅色无肩带内衣，方便换写真服装，避免穿帮</li>
</ul>
</div>
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 text-xs">♂</span>
男生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 上衣：浅色系短袖衬衫/纯色Polo衫/简约白T，拍情侣合照和女生穿搭适配度高</li>
<li>· 下装：浅灰色休闲西裤/直筒牛仔长裤/纯色休闲短裤，干净清爽</li>
<li>· 外搭：薄款透气防晒衣，白天防晒，早晚可穿</li>
<li>· 鞋子：小白鞋/休闲板鞋，出片又舒适</li>
<li>· 重点：避免穿花哨图案的衣服，简约款更出片，和湖景适配度更高</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Day4 穿搭 -->
<div class="accordion-item bg-neutral-50 rounded-2xl shadow-card overflow-hidden">
<button class="accordion-header w-full flex justify-between items-center p-6 text-left font-medium hover:bg-neutral-100 transition-colors">
<span class="flex items-center gap-3">
<span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">Day4</span>
徒步·返程日穿搭推荐
</span>
<svg class="accordion-icon w-5 h-5 text-neutral-500 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content px-6 pb-6">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 text-xs">♀</span>
女生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 上衣：透气短袖T恤+薄款防晒衣，徒步防晒两不误</li>
<li>· 下装：高弹休闲运动裤/直筒牛仔裤，坐高铁也不会闷</li>
<li>· 鞋子：舒适运动鞋/平底鞋，徒步和赶路都无压力</li>
<li>· 配饰：鸭舌帽、墨镜、双肩包，解放双手，方便装特产和随身物品</li>
<li>· 重点：舒适为主，宽松不勒，应对返程赶路的各种场景</li>
</ul>
</div>
<div class="bg-white rounded-xl p-5">
<h4 class="font-bold text-lg mb-3 flex items-center gap-2">
<span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 text-xs">♂</span>
男生穿搭
</h4>
<ul class="space-y-2 text-neutral-600">
<li>· 上衣：速干短袖T恤+轻薄防晒外套，徒步防晒，高铁上可当空调衫</li>
<li>· 下装：宽松休闲长裤/运动裤，坐高铁不勒腿，徒步也舒适</li>
<li>· 鞋子：舒适运动鞋/板鞋，拒绝新鞋，避免磨脚</li>
<li>· 配饰：鸭舌帽、双肩包，装特产和随身物品超方便</li>
<li>· 重点：宽松舒适，兼顾徒步和返程，不用为了出片牺牲舒适度</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Day1 行程 -->
<section id="day1" class="py-20 bg-neutral-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">Day 1 · 4月1日</span>
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-3">抵达适配日</h2>
<p class="text-neutral-500 max-w-2xl mx-auto">古城烟火 + 唐风夜游 · 轻松不赶路，适配旅途节奏</p>
</div>
<div class="max-w-4xl mx-auto pl-8 relative">
<!-- 时间线竖线 -->
<div class="absolute left-0 top-0 bottom-0 w-px bg-primary/20"></div>
<!-- 时间块1 -->
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">12:00-13:00</span>
<span class="text-neutral-500 text-sm">🚄 抵达入住</span>
</div>
<h3 class="font-bold text-lg mb-4">高铁抵达西昌西站 → 前往酒店办理入住</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
交通详情
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">西站出站后直接打车到酒店，车程约15分钟，费用25-30元；不推荐公交（需换乘，耗时1小时+）</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
美食推荐
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">办理入住后，可在酒店周边吃简餐，推荐<strong>罗天牛羊杂米粉</strong>（步行8分钟），本地人常去的老字号，点牛羊杂米粉+锅盔，人均15元吃到饱，是西昌早餐的灵魂</p>
</div>
</div>
</div>
</div>
<!-- 时间块2 -->
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">14:00-17:30</span>
<span class="text-neutral-500 text-sm">🏛️ 古城慢逛</span>
</div>
<h3 class="font-bold text-lg mb-4">建昌古城深度慢逛</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
交通详情
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">酒店步行5分钟直达古城入口，全程步行游览即可，无需额外交通</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0121 12z"></path>
</svg>
游玩攻略
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">1. 古城免费开放，重点逛涌泉街、大通门、四牌楼，明清古城墙+青石板巷，烟火气拉满，可打卡红墙灯笼机位，随手出片<br>2. 沿途可尝本地小吃：刘末末家卷粉（5元/个）、手摊凉粉、炸洋芋，边走边吃，感受本地市井气息<br>3. 逛累了可在巷子里的老茶馆坐一坐，喝一杯老鹰茶，人均10元，体验本地人慢生活</p>
</div>
</div>
</div>
</div>
<!-- 时间块3 -->
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">18:00-20:00</span>
<span class="text-neutral-500 text-sm">🍖 特色晚餐</span>
</div>
<h3 class="font-bold text-lg mb-4">西昌特色火盆烧烤</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
推荐餐厅
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">古城打车10分钟到<strong>李小肠烧烤园总店</strong>，人均70元，本地人私藏老店，必点高山小猪儿肉、盘龙小肠、包浆豆腐，搭配凉山雪酸奶解腻，是西昌烧烤的天花板</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
备选方案
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">不吃烧烤的话，可选择<strong>阿斯牛牛风情餐厅</strong>，主打彝族特色菜，坨坨肉、酸菜洋芋鸡、苦荞饼都很地道，能体验彝族风情，人均80元</p>
</div>
</div>
</div>
</div>
<!-- 时间块4 -->
<div class="relative scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">20:30-21:30</span>
<span class="text-neutral-500 text-sm">🏮 唐风夜游</span>
</div>
<h3 class="font-bold text-lg mb-4">唐园夜游</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
交通详情
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">餐厅打车5分钟到唐园，或步行10分钟可达，免费开放</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2 flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0121 12z"></path>
</svg>
游玩攻略
</h4>
<p class="text-neutral-500 text-sm leading-relaxed">仿唐建筑群夜景绝美，灯光亮起后氛围感拉满，有“小长安”之称，适合双人散步拍照，不用刻意找点位，随走随拍都出片，逛1小时左右即可，不赶路</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section> <!-- Day2 行程 -->
<section id="day2" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">Day 2 · 4月2日</span>
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-3">自然风光核心日</h2>
<p class="text-neutral-500 max-w-2xl mx-auto">螺髻山高山秘境一日游 · 冰川湖泊 · 原始森林</p>
</div>
<div class="max-w-4xl mx-auto pl-8 relative">
<div class="absolute left-0 top-0 bottom-0 w-px bg-primary/20"></div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">7:30-8:00</span>
<span class="text-neutral-500 text-sm">🍳 酒店早餐</span>
</div>
<h3 class="font-bold text-lg mb-3">酒店早餐</h3>
<p class="text-neutral-500 leading-relaxed">酒店内自助早餐7:00-10:30供应，免费对住客开放，吃饱喝足再出发，不用早起赶时间，可多拿点鸡蛋、小面包当景区内的备用干粮</p>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">8:00-9:30</span>
<span class="text-neutral-500 text-sm">🚗 前往景区</span>
</div>
<h3 class="font-bold text-lg mb-4">酒店 → 螺髻山风景区游客中心</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">交通详情</h4>
<p class="text-neutral-500 text-sm leading-relaxed">提前一天预约拼车/包车，双人包车往返300元左右，拼车人均100元，车程约1小时，路况良好，沿途可看田园风光</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">温馨提示</h4>
<p class="text-neutral-500 text-sm leading-relaxed">不推荐公共交通，大巴需换乘，耗时久，灵活性差，双人出行包车性价比最高，时间自由掌控</p>
</div>
</div>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">9:30-15:30</span>
<span class="text-neutral-500 text-sm">🏔️ 核心游玩</span>
</div>
<h3 class="font-bold text-lg mb-4">螺髻山核心景区游玩</h3>
<div class="bg-primary/5 rounded-xl p-4 mb-4">
<div class="flex flex-wrap gap-4 text-sm">
<span class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-2"></span>门票：旺季90元/人</span>
<span class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-2"></span>观光车：70元/人往返</span>
<span class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-2"></span>索道：130元/人往返</span>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">游玩路线</h4>
<p class="text-neutral-500 text-sm leading-relaxed">1. 景区门口购票后，先坐观光车（必购）到索道下站，车程20分钟<br>2. 乘坐索道直达海拔3600米的黑龙潭，索道上可俯瞰林海云海<br>3. 核心路线：黑龙潭环湖徒步→仙草湖→牵手湖→冰川刻槽遗址，全程平缓栈道，往返徒步约3小时，强度低，不累</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">注意事项</h4>
<p class="text-neutral-500 text-sm leading-relaxed">1. 景区海拔较高，气温比市区低8-10℃，务必带薄外套；不要剧烈奔跑，缓慢行走避免高反<br>2. 4月高山杜鹃陆续开放，黑龙潭周边花海超美，是拍照的绝佳点位<br>3. 索道16:00停止售票，17:00停运，务必把控好下山时间<br>4. 景区内有小卖部，可买热水和简餐，也可自带干粮，不用负重太多</p>
</div>
</div>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">15:30-17:00</span>
<span class="text-neutral-500 text-sm">🔙 返程</span>
</div>
<h3 class="font-bold text-lg mb-3">螺髻山 → 西昌市区酒店</h3>
<p class="text-neutral-500 leading-relaxed">按约定时间返程，车程1小时，回到酒店可稍作休整，缓解旅途疲劳，路上可补觉，保存体力</p>
</div>
</div>
<div class="relative scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">18:00-20:00</span>
<span class="text-neutral-500 text-sm">🐟 湖鲜晚餐</span>
</div>
<h3 class="font-bold text-lg mb-4">邛海湖鲜渔家宴</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">推荐地点</h4>
<p class="text-neutral-500 text-sm leading-relaxed">酒店打车10分钟到邛海月色风情小镇，选湖边农家乐，人均60元</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">必点菜品</h4>
<p class="text-neutral-500 text-sm leading-relaxed">邛海特色一鱼三吃（南瓜鱼头汤、麻辣鱼片、炸鱼骨）、邛海醉虾、银鱼煎蛋，食材都是邛海现捞的，鲜甜地道，坐在湖边吃饭，吹着晚风超惬意</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Day3 行程 -->
<section id="day3" class="py-20 bg-neutral-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">Day 3 · 4月3日</span>
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-3">写真专属日</h2>
<p class="text-neutral-500 max-w-2xl mx-auto">大石板古村旅拍 + 邛海环湖日落 · 双人浪漫氛围感拉满</p>
</div>
<div class="max-w-4xl mx-auto pl-8 relative">
<div class="absolute left-0 top-0 bottom-0 w-px bg-primary/20"></div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">8:30-9:00</span>
<span class="text-neutral-500 text-sm">🚗 前往古村</span>
</div>
<h3 class="font-bold text-lg mb-4">酒店早餐 → 前往大石板古村</h3>
<p class="text-neutral-500 leading-relaxed">酒店打车直达大石板古村，车程25分钟，费用30元左右；也可租电动车前往，沿途看邛海风光，车程40分钟。提前和旅拍店约定9点到店做妆造，预留充足时间，不赶早高峰</p>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">9:00-13:00</span>
<span class="text-neutral-500 text-sm">📸 写真拍摄</span>
</div>
<h3 class="font-bold text-lg mb-4">大石板古村妆造 + 写真拍摄</h3>
<div class="bg-primary/5 rounded-xl p-4 mb-4">
<h4 class="font-medium text-primary mb-3">✨ 核心拍摄点位</h4>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="bg-white rounded-lg p-3 text-center shadow-sm">
<div class="text-2xl mb-1">🏛️</div>
<div class="text-sm font-medium">灵鹰寺橙红古墙</div>
<div class="text-xs text-neutral-500">必拍！标志性出片点</div>
</div>
<div class="bg-white rounded-lg p-3 text-center shadow-sm">
<div class="text-2xl mb-1">🏯</div>
<div class="text-sm font-medium">五省会馆</div>
<div class="text-xs text-neutral-500">历史韵味浓厚</div>
</div>
<div class="bg-white rounded-lg p-3 text-center shadow-sm">
<div class="text-2xl mb-1">🛤️</div>
<div class="text-sm font-medium">青石板古巷</div>
<div class="text-xs text-neutral-500">烟火气十足</div>
</div>
<div class="bg-white rounded-lg p-3 text-center shadow-sm">
<div class="text-2xl mb-1">🌅</div>
<div class="text-sm font-medium">古村观景台</div>
<div class="text-xs text-neutral-500">俯瞰邛海全景</div>
</div>
</div>
</div>
<p class="text-neutral-500 leading-relaxed">全程在古村内完成拍摄，步行即可，无需额外交通。拍摄时长约3小时，中间可休息，不用赶进度，双人可拍情侣合照+单人照，灵活调整。古村免费开放，部分小众院落拍摄可能收5-10元场地费，提前问清再进。</p>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">13:00-14:00</span>
<span class="text-neutral-500 text-sm">🍽️ 古村午餐</span>
</div>
<h3 class="font-bold text-lg mb-4">古村彝族农家乐午餐</h3>
<p class="text-neutral-500 leading-relaxed">古村内的彝族农家乐，人均50元，推荐点彝族坨坨肉、酸菜土豆汤、苦荞粑粑，都是本地特色，味道地道，吃完可稍作休息</p>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">14:00-18:30</span>
<span class="text-neutral-500 text-sm">🚲 邛海环湖</span>
</div>
<h3 class="font-bold text-lg mb-4">邛海环湖休闲游 → 金鳞沙滩追日落</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">骑行路线</h4>
<p class="text-neutral-500 text-sm leading-relaxed">古村门口租电动车，40元/天，沿邛海环海东路骑行，随走随停，全程约20公里，骑行无压力，路线：大石板古村→月亮湾→青龙寺→金鳞沙滩</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">游玩攻略</h4>
<p class="text-neutral-500 text-sm leading-relaxed">1. 邛海湿地公园免费开放，骑行绿道全程无门票，金鳞沙滩免费进入，19:00停止入园<br>2. 沿途可在月亮湾、青龙寺停下拍照，湖边栈道、歪脖子树网红栈道都是绝佳机位，人少景美<br>3. 17:30前抵达金鳞沙滩，这里有“西昌小三亚”之称，白沙滩+棕榈树+湛蓝湖水，傍晚日落时分，夕阳熔金洒满湖面，拍剪影氛围感绝了，是双人旅行的高光时刻</p>
</div>
</div>
</div>
</div>
<div class="relative scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-white rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">19:00-21:00</span>
<span class="text-neutral-500 text-sm">🍢 渔村烧烤</span>
</div>
<h3 class="font-bold text-lg mb-4">小渔村烧烤晚餐</h3>
<p class="text-neutral-500 leading-relaxed">金鳞沙滩打车15分钟到小渔村，人均50元，主打邛海现烤串烧鱼片、烤虾、烤贝壳，搭配烤小肠、五花肉，是西昌本地人最爱的宵夜聚集地，性价比超高，味道地道</p>
</div>
</div>
</div>
</div>
</section>
<!-- Day4 行程 -->
<section id="day4" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">Day 4 · 4月4日</span>
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-3">返程收官日</h2>
<p class="text-neutral-500 max-w-2xl mx-auto">泸山轻徒步 + 本地采购 + 下午高铁离开 · 完美收官</p>
</div>
<div class="max-w-4xl mx-auto pl-8 relative">
<div class="absolute left-0 top-0 bottom-0 w-px bg-primary/20"></div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">8:00-9:00</span>
<span class="text-neutral-500 text-sm">🧳 收拾行李</span>
</div>
<h3 class="font-bold text-lg mb-3">酒店早餐 + 收拾行李</h3>
<p class="text-neutral-500 leading-relaxed">酒店内吃早餐，可把行李寄存在酒店前台，轻装出行，不用拖着行李逛，早餐可打包点小零食，路上吃</p>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">9:00-12:00</span>
<span class="text-neutral-500 text-sm">⛰️ 泸山徒步</span>
</div>
<h3 class="font-bold text-lg mb-4">泸山轻徒步 + 全景俯瞰</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">交通详情</h4>
<p class="text-neutral-500 text-sm leading-relaxed">酒店打车10分钟到泸山景区入口，费用15元左右，景区免费开放</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">轻松游玩路线</h4>
<p class="text-neutral-500 text-sm leading-relaxed">景区入口→光福寺→凉山彝族奴隶社会博物馆→观景台，全程徒步约2小时，强度极低，不累。不想走路可坐索道，单程30元/人，直达山顶观景台，俯瞰整个邛海全景，视野绝佳</p>
</div>
</div>
<div class="mt-4 bg-primary/5 rounded-xl p-4">
<p class="text-neutral-500 text-sm"><strong>温馨提示：</strong>光福寺是千年古刹，红墙竹影超美，可免费参观；沿途会遇到猕猴群，不要投喂、不要近距离逗弄，避免被抓伤；凉山彝族奴隶社会博物馆周一闭馆，若4月4日恰逢周一，可替换为逛火把广场，就在酒店步行10分钟可达。</p>
</div>
</div>
</div>
<div class="relative mb-12 scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">12:00-13:30</span>
<span class="text-neutral-500 text-sm">🛒 午餐采购</span>
</div>
<h3 class="font-bold text-lg mb-4">午餐 + 本地特产采购</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-primary mb-2">午餐推荐</h4>
<p class="text-neutral-500 text-sm leading-relaxed">泸山打车10分钟回酒店周边，推荐<strong>城门洞牛肉粉</strong>，本地人从小吃到大的老字号，人均18元，给西昌之旅收尾</p>
</div>
<div>
<h4 class="font-medium text-primary mb-2">特产采购</h4>
<p class="text-neutral-500 text-sm leading-relaxed">特产可买苦荞茶、邛海银鱼干、彝族特色银饰，酒店附近的万达广场就能买，不用跑远，价格透明不坑人</p>
</div>
</div>
</div>
</div>
<div class="relative scroll-animate">
<div class="timeline-dot"></div>
<div class="bg-neutral-50 rounded-2xl p-6 shadow-card hover:shadow-hover transition-all duration-300">
<div class="flex flex-wrap items-center gap-4 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">14:00-14:30</span>
<span class="text-neutral-500 text-sm">🚄 返程</span>
</div>
<h3 class="font-bold text-lg mb-3">酒店取行李 → 前往西昌西站</h3>
<p class="text-neutral-500 leading-relaxed">酒店打车直达西昌西站，车程15-20分钟，费用25-30元，预留充足的进站检票时间，不赶路。建议提前1.5小时到车站，高铁发车前5分钟停止检票，把控好时间</p>
</div>
</div>
</div>
</div>
</section>
<!-- 出行贴士（手风琴交互，修复点击无反应问题） -->
<section id="tips" class="py-20 bg-neutral-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-3">避坑&出行贴士</h2>