home.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html class="" lang="zh-CN"><head>
  3. <meta charset="utf-8"/>
  4. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  5. <title>闽南文化|首页</title>
  6. <script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
  7. <script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
  8. <style>
  9. * { -webkit-tap-highlight-color: transparent; }
  10. body { margin: 0; background: #e9e4da; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
  11. .scrollbar-hide::-webkit-scrollbar { display: none; }
  12. .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  13. .paper-pattern {
  14. background-color: #f9f3e7;
  15. background-image: radial-gradient(circle at 14% 8%, rgba(166,53,35,.055) 0 1px, transparent 1px), radial-gradient(circle at 76% 24%, rgba(181,137,52,.05) 0 1px, transparent 1px), linear-gradient(135deg, transparent 0 48%, rgba(166,53,35,.025) 49% 50%, transparent 51% 100%);
  16. background-size: 18px 18px, 24px 24px, 44px 44px;
  17. }
  18. .ornament { background-image: linear-gradient(90deg, transparent, rgba(183,137,43,.55), transparent); }
  19. .slide { transition: opacity .45s ease, transform .45s ease; }
  20. .slide-hidden { opacity: 0; transform: scale(1.025); pointer-events: none; }
  21. .slide-show { opacity: 1; transform: scale(1); pointer-events: auto; }
  22. </style>
  23. </head>
  24. <body class="min-h-screen flex items-center justify-center p-3 sm:p-8" style="opacity: 1;">
  25. <main class="w-[375px] h-[812px] overflow-hidden bg-[#f9f3e7] flex flex-col paper-pattern">
  26. <header class="flex-none px-5 pt-3 pb-2 bg-[#f9f3e7]/95 border-b border-[#eadcc5]">
  27. <div class="flex items-center justify-between text-xs text-[#716660]">
  28. <span class="font-semibold">9:41</span>
  29. <div class="flex items-center gap-1.5"><iconify-icon icon="solar:cellular-linear" width="14"></iconify-icon><iconify-icon icon="solar:wifi-router-linear" width="14"></iconify-icon><iconify-icon icon="solar:battery-charge-linear" width="17"></iconify-icon></div>
  30. </div>
  31. <div class="mt-3 flex items-center justify-between">
  32. <div class="flex items-center gap-2.5">
  33. <div aria-label="闽南文化标志" class="w-9 h-9 flex items-center justify-center overflow-hidden">
  34. <svg aria-label="Minnan cultural logo" class="w-[31px] h-[31px]" role="img" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  35. <path d="M13 31C28 26 36 16 42 7c5 8 10 13 18 16 8-3 13-8 18-16 6 9 14 19 29 24-12-9-19-18-25-29-6 8-13 13-22 16C51 15 44 10 38 2 32 13 25 22 13 31Z" fill="#f05a25"></path>
  36. <path d="M7 43c18 8 34-2 46-2 7 0 10 2 7 5-3 3-8 4-8 9 0 5 8 7 16 5 11-3 18-10 31-9-17-8-28 0-40 4-8 3-13 1-13-2 0-4 8-7 8-10 0-6-13-4-23-2-9 2-14 4-17 2Z" fill="#008db8"></path>
  37. <path d="M57 55c13-3 25-10 42-4-17-3-26 7-40 10-9 2-16 0-17-4 3 1 8 1 15-2Z" fill="#0755aa"></path>
  38. <text fill="#0b397d" font-family="Arial, sans-serif" font-size="19" font-weight="700" letter-spacing="1" x="10" y="82">MINNAN</text>
  39. <rect fill="#c8312b" height="17" rx="1" width="14" x="76" y="66"></rect><text fill="white" font-family="serif" font-size="12" font-weight="700" x="78" y="80">闽</text>
  40. </svg>
  41. </div>
  42. <div class="min-w-0"><h1 class="whitespace-nowrap text-[16px] font-bold tracking-[-.02em] text-[#9d3829] leading-tight">闽南文化(漳州)生态保护区</h1><p class="text-[10px] text-[#9f8660] mt-0.5">一城烟火 · 千年传承</p></div>
  43. </div>
  44. </div>
  45. </header>
  46. <div class="flex-1 min-h-0 overflow-y-auto scrollbar-hide pb-3">
  47. <section class="px-4 pt-4">
  48. <div class="relative h-[178px] overflow-hidden rounded-2xl border border-[#d1aa58] bg-[#7a2f27] shadow-[0_8px_18px_rgba(113,52,36,.18)]" id="carousel" ontouchend="touchEnd(event)" ontouchstart="touchStart(event)">
  49. <article class="slide absolute inset-0 slide-hidden" data-slide="0" onclick="showToast('已进入:古城慢游专题')">
  50. <img alt="Sunset view of Zhangzhou ancient city with traditional Minnan red brick houses" class="w-full h-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/8b37d6e9e1d74b9fb48c953f0e199c71.jpg"/>
  51. <div class="absolute inset-0 bg-gradient-to-t from-[#52241e] via-[#52241e]/25 to-transparent"></div>
  52. <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">古城实景</div>
  53. <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">Z H A N G Z H O U</p><h2 class="mt-1 text-xl font-bold">红砖古厝里的夏日烟火</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">在千年古城,遇见闽南生活美学</p></div>
  54. </article>
  55. <article class="slide absolute inset-0 slide-show" data-slide="1" onclick="showToast('已进入:布袋木偶非遗专题')">
  56. <img alt="Traditional Chinese glove puppet performance on a brightly lit stage" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/e6fa0fac0a834dcc9389dccae0c8308d.jpg"/>
  57. <div class="absolute inset-0 bg-gradient-to-t from-[#55231f] via-[#55231f]/25 to-transparent"></div>
  58. <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">国家级非遗</div>
  59. <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">LIVING HERITAGE</p><h2 class="mt-1 text-xl font-bold">掌中乾坤 · 布袋木偶戏</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">一方戏台,演尽闽南百年故事</p></div>
  60. </article>
  61. <article class="slide absolute inset-0 slide-hidden" data-slide="2" onclick="showToast('已进入:非遗市集专题')">
  62. <img alt="Festive Minnan intangible heritage market with red lanterns and craft stalls" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/e00e4cebe5254522aeb935928765429f.jpg"/>
  63. <div class="absolute inset-0 bg-gradient-to-t from-[#55231f] via-[#55231f]/25 to-transparent"></div>
  64. <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">本周推荐</div>
  65. <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">CULTURAL MARKET</p><h2 class="mt-1 text-xl font-bold">一场热闹的非遗市集</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">手作、食味与匠心,在此相逢</p></div>
  66. </article>
  67. <button aria-label="上一张" class="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/20 text-white flex items-center justify-center" onclick="prevSlide(event)"><iconify-icon icon="solar:alt-arrow-left-linear" width="16"></iconify-icon></button>
  68. <button aria-label="下一张" class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/20 text-white flex items-center justify-center" onclick="nextSlide(event)"><iconify-icon icon="solar:alt-arrow-right-linear" width="16"></iconify-icon></button>
  69. <div class="absolute bottom-3 right-4 flex gap-1.5" id="dots"><span class="w-1.5 h-1.5 rounded-full bg-white/65"></span><span class="w-4 h-1.5 rounded-full bg-[#f8dc99]"></span><span class="w-1.5 h-1.5 rounded-full bg-white/65"></span></div>
  70. </div>
  71. </section>
  72. <section class="mx-4 mt-4 rounded-2xl bg-white/85 border border-[#eadcc5] px-2 py-3 shadow-sm">
  73. <div class="grid grid-cols-4 gap-x-1 gap-y-3 px-1">
  74. <a class="flex w-full flex-col items-center gap-1.5" href="heritage.html"><span class="w-11 h-11 rounded-2xl bg-[#f9e7df] text-[#a83f2d] flex items-center justify-center border border-[#edcabd]"><iconify-icon icon="ph:mask-happy-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">非遗项目</span></a>
  75. <a class="flex w-full flex-col items-center gap-1.5" href="heritage.html"><span class="w-11 h-11 rounded-2xl bg-[#fff1d8] text-[#a87a27] flex items-center justify-center border border-[#ead4a3]"><iconify-icon icon="ph:person-simple-tai-chi-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">非遗传承人</span></a>
  76. <a class="flex w-full flex-col items-center gap-1.5" href="protected-areas.html"><span class="w-11 h-11 rounded-2xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:shield-check-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">重点区域</span></a>
  77. <a class="flex w-full flex-col items-center gap-1.5" href="cultural-relics.html"><span class="w-11 h-11 rounded-2xl bg-[#f9e8e1] text-[#a83f2d] flex items-center justify-center border border-[#ead0c8]"><iconify-icon icon="ph:building-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">文物古迹</span></a>
  78. <a class="flex w-full flex-col items-center gap-1.5" href="travel.html"><span class="w-11 h-11 rounded-2xl bg-[#edf2e8] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:map-pin-area-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">文化地图</span></a>
  79. <a class="flex w-full flex-col items-center gap-1.5" href="heritage-experience.html"><span class="w-11 h-11 rounded-2xl bg-[#fff1d8] text-[#a87a27] flex items-center justify-center border border-[#ead4a3]"><iconify-icon icon="ph:hand-heart-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">传承体验</span></a>
  80. <a class="flex w-full flex-col items-center gap-1.5" href="theory-research.html"><span class="w-11 h-11 rounded-2xl bg-[#f2ebe3] text-[#8b4935] flex items-center justify-center border border-[#dfcbb8]"><iconify-icon icon="ph:books-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">理论研究</span></a>
  81. <a class="flex w-full flex-col items-center gap-1.5" href="cultural-achievements.html"><span class="w-11 h-11 rounded-2xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:trophy-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">特色成果</span></a>
  82. </div>
  83. </section>
  84. <section class="mt-5">
  85. </section>
  86. <section class="mt-5">
  87. <div class="px-4 flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#b48732]"></span><h2 class="text-[16px] font-bold text-[#983726]">精选推荐</h2></div></div><button class="text-[11px] text-[#a83f2d] flex items-center" onclick="showToast('更多精选内容正在加载')">更多<iconify-icon icon="solar:alt-arrow-right-linear" width="13"></iconify-icon></button></div>
  88. <div class="mt-3 pl-4 flex gap-3 overflow-x-auto scrollbar-hide pr-4">
  89. <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#762d25] cursor-pointer" onclick="showToast('进入木偶戏沉浸体验详情')"><img alt="Close-up of colorful traditional Minnan glove puppets" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/57cb448b9cad417eaff26bd1ea34fc10.jpg"/><span class="absolute left-2 top-2 rounded-md bg-[#9f3728]/85 px-1.5 py-0.5 text-[9px] text-white">非遗体验</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">木偶戏沉浸体验</h3><p class="mt-1 text-[9px] text-[#8c7e74]">古城剧场 · 90分钟</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'木偶戏沉浸体验')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('木偶戏沉浸体验')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至古城剧场')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
  90. <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#5b756a] cursor-pointer" onclick="showToast('进入云洞岩打卡点详情')"><img alt="Scenic mountain trail and ancient carved rocks at Yundongyan Zhangzhou" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/4c62b95d09954e9dbfb8eefffa11317c.png"/><span class="absolute left-2 top-2 rounded-md bg-[#59755d]/90 px-1.5 py-0.5 text-[9px] text-white">打卡点</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">云洞岩摩崖石刻</h3><p class="mt-1 text-[9px] text-[#8c7e74]">龙文区 · 山野清凉</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'云洞岩摩崖石刻')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('云洞岩摩崖石刻')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至云洞岩')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
  91. <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#a96638] cursor-pointer" onclick="showToast('进入土楼研学详情')"><img alt="Children learning in front of a round Fujian tulou building" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/c442391b73bf46f99a6d09d414c04306.jpg"/><span class="absolute left-2 top-2 rounded-md bg-[#a76737]/90 px-1.5 py-0.5 text-[9px] text-white">亲子研学</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">土楼营造技艺研学</h3><p class="mt-1 text-[9px] text-[#8c7e74]">南靖县 · 周末成团</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'土楼营造技艺研学')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('土楼营造技艺研学')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至南靖土楼')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
  92. </div>
  93. </section>
  94. <section class="mt-5 px-4">
  95. <div class="flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#a83f2d]"></span><h2 class="text-[16px] font-bold text-[#983726]">最新资讯</h2></div></div><button class="text-[11px] text-[#a83f2d]" onclick="showToast('已切换到资讯列表')">查看全部</button></div>
  96. <div class="mt-3 overflow-hidden rounded-2xl border border-[#eadcc5] bg-white/90 divide-y divide-[#f0e6d5]">
  97. <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:非遗线下展演通知')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#f9e5df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:theater-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">漳州古城周末非遗展演安排公布</b><small class="mt-1 block text-[9px] text-[#9a8c82]">精彩戏曲、南音与传统技艺轮番上演</small></span><time class="text-[9px] text-[#a99686]">今天</time></button>
  98. <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:文旅惠民活动公告')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#fff0d8] text-[#a87a27] flex items-center justify-center"><iconify-icon icon="ph:ticket-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">暑期文旅惠民消费券即将发放</b><small class="mt-1 block text-[9px] text-[#9a8c82]">覆盖景区、文创、研学等多个场景</small></span><time class="text-[9px] text-[#a99686]">08-05</time></button>
  99. <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:传统民俗节庆预告')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center"><iconify-icon icon="ph:calendar-heart-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">中秋博饼民俗活动报名通道开启</b><small class="mt-1 block text-[9px] text-[#9a8c82]">感受闽南传统团圆仪式与欢乐</small></span><time class="text-[9px] text-[#a99686]">08-03</time></button>
  100. <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:闽南文化政策解读')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#f2ebe3] text-[#78675a] flex items-center justify-center"><iconify-icon icon="ph:scroll-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">闽南文化生态保护区建设政策解读</b><small class="mt-1 block text-[9px] text-[#9a8c82]">守护文化根脉,激活传承新活力</small></span><time class="text-[9px] text-[#a99686]">08-01</time></button>
  101. </div>
  102. </section>
  103. <section class="mt-5 px-4">
  104. <div class="flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#b48732]"></span><h2 class="text-[16px] font-bold text-[#983726]">志愿者组织</h2></div></div><button class="text-[11px] text-[#a83f2d]" onclick="showToast('更多志愿组织正在招募')">查看全部</button></div>
  105. <div class="mt-3 space-y-2.5">
  106. <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:古城文化讲解志愿队招募详情')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#f9e5df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:megaphone-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">古城文化讲解志愿队</b></span><span class="rounded-md bg-[#e8f0e7] px-1.5 py-1 text-[9px] text-[#5f795d]">招募中</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">每周末 · 漳州古城</span><span class="text-[#a83f2d]">查看详情 ›</span></span></button>
  107. <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:非遗传承助力团参与入口')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#fff0d8] text-[#a87a27] flex items-center justify-center"><iconify-icon icon="ph:hand-heart-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">非遗传承助力团</b></span><span class="rounded-md bg-[#fff0d8] px-1.5 py-1 text-[9px] text-[#a87a27]">长期开放</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">灵活参与 · 线上报名</span><span class="text-[#a83f2d]">立即参与 ›</span></span></button>
  108. <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:乡村文化记录计划报名入口')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">乡村文化记录计划</b></span><span class="rounded-md bg-[#f2ebe3] px-1.5 py-1 text-[9px] text-[#78675a]">即将开始</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">每月主题 · 南靖县</span><span class="text-[#a83f2d]">预约报名 ›</span></span></button>
  109. </div>
  110. </section>
  111. </div>
  112. <nav class="flex-none bg-[#fffaf1] border-t border-[#e9dbc5] px-3 pt-2 pb-3">
  113. <div class="flex justify-between">
  114. <button class="nav-item text-[#a83f2d] flex flex-col items-center gap-0.5 w-12" onclick="setNav(this,'首页')"><iconify-icon icon="ph:house-fill" width="21"></iconify-icon><span class="text-[10px] font-semibold">首页</span></button>
  115. <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="heritage.html"><iconify-icon icon="ph:hand-heart-duotone" width="21"></iconify-icon><span class="text-[10px]">传承</span></a>
  116. <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="explore.html"><iconify-icon icon="ph:compass-duotone" width="21"></iconify-icon><span class="text-[10px]">资讯</span></a>
  117. <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="travel.html"><iconify-icon icon="ph:map-trifold-duotone" width="21"></iconify-icon><span class="text-[10px]">文旅</span></a>
  118. <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="profile.html"><iconify-icon icon="ph:user-circle-duotone" width="21"></iconify-icon><span class="text-[10px]">我的</span></a>
  119. </div>
  120. </nav>
  121. </main>
  122. <div class="fixed left-1/2 top-8 -translate-x-1/2 z-50 max-w-[300px] rounded-full bg-[#3f312d]/95 px-4 py-2 text-center text-xs text-white shadow-lg hidden" id="toast">打开元宵花灯会详情,可导航前往</div>
  123. <script>
  124. let currentSlide = 0, startX = 0, timer;
  125. const slides = () => Array.from(document.querySelectorAll('[data-slide]'));
  126. function renderSlide(index) {
  127. const all = slides(); currentSlide = (index + all.length) % all.length;
  128. all.forEach((slide, i) => { slide.classList.toggle('slide-show', i === currentSlide); slide.classList.toggle('slide-hidden', i !== currentSlide); });
  129. document.querySelectorAll('#dots span').forEach((dot, i) => { dot.className = i === currentSlide ? 'w-4 h-1.5 rounded-full bg-[#f8dc99]' : 'w-1.5 h-1.5 rounded-full bg-white/65'; });
  130. }
  131. function nextSlide(e) { if (e) e.stopPropagation(); renderSlide(currentSlide + 1); resetTimer(); }
  132. function prevSlide(e) { if (e) e.stopPropagation(); renderSlide(currentSlide - 1); resetTimer(); }
  133. function resetTimer() { clearInterval(timer); timer = setInterval(() => renderSlide(currentSlide + 1), 4200); }
  134. function touchStart(e) { startX = e.changedTouches[0].clientX; }
  135. function touchEnd(e) { const delta = e.changedTouches[0].clientX - startX; if (Math.abs(delta) > 35) delta > 0 ? prevSlide() : nextSlide(); }
  136. function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('hidden'); clearTimeout(window.toastTimer); window.toastTimer = setTimeout(() => toast.classList.add('hidden'), 1900); }
  137. function toggleSave(button, title) { const icon = button.querySelector('iconify-icon'); const saved = icon.getAttribute('icon').includes('bold'); icon.setAttribute('icon', saved ? 'solar:bookmark-linear' : 'solar:bookmark-bold'); showToast(saved ? '已取消收藏:' + title : '已收藏:' + title); }
  138. function shareItem(title) { showToast('已生成“' + title + '”分享卡片'); }
  139. function setNav(button, name) { document.querySelectorAll('.nav-item').forEach(item => { item.classList.remove('text-[#a83f2d]'); item.classList.add('text-[#a79d93]'); const icon = item.querySelector('iconify-icon'); icon.setAttribute('icon', icon.getAttribute('icon').replace('-fill','-duotone')); }); button.classList.remove('text-[#a79d93]'); button.classList.add('text-[#a83f2d]'); if (name === '首页') button.querySelector('iconify-icon').setAttribute('icon','ph:house-fill'); showToast('已切换至' + name + '模块'); }
  140. resetTimer();
  141. </script>
  142. </body></html>