heritage.html 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html 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. .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
  10. .hide-scrollbar::-webkit-scrollbar { display: none; }
  11. </style>
  12. </head>
  13. <body class="min-h-screen bg-[#eee5d8] text-[#51433e] flex justify-center p-3 is-mb-ai-setting">
  14. <main class="relative w-full max-w-[430px] bg-[#fffaf1] flex flex-col">
  15. <header class="flex-none relative overflow-hidden bg-[#9d3829] px-4 pt-4 pb-5 text-white">
  16. <div class="absolute inset-0 opacity-20" style="background-image:linear-gradient(30deg,transparent 45%,#f7d99f 46%,transparent 47%),linear-gradient(150deg,transparent 45%,#f7d99f 46%,transparent 47%);background-size:34px 34px;"></div>
  17. <div class="relative flex items-center justify-between">
  18. <a aria-label="返回首页" class="w-8 h-8 rounded-full bg-white/15 flex items-center justify-center" href="home.html"><iconify-icon icon="ph:caret-left-bold" width="17"></iconify-icon></a>
  19. <div class="text-center"><h1 class="text-[19px] font-bold tracking-[0.2em]">传承</h1></div>
  20. <div class="h-8 rounded-full border border-white/35 bg-white/15 px-2 flex items-center gap-2"><span class="w-3 h-3 rounded-full border border-white"></span><span class="w-4 h-1 rounded-full bg-white"></span><span class="w-4 h-4 rounded-full border border-white flex items-center justify-center text-[9px]">···</span></div>
  21. </div>
  22. <div class="relative mt-4 flex gap-2">
  23. <label class="flex-1 h-10 rounded-xl bg-[#fffaf1] text-[#8a7566] flex items-center px-3 gap-2 shadow-sm"><iconify-icon icon="ph:magnifying-glass" width="18"></iconify-icon><input class="min-w-0 flex-1 bg-transparent outline-none text-[12px] text-[#51433e] placeholder:text-[#ab9b8d]" id="searchInput" oninput="render()" placeholder="搜非遗名称、传承人、技艺、区县"/></label>
  24. <button aria-label="筛选" class="w-10 h-10 rounded-xl bg-[#d7a951] text-white flex items-center justify-center shadow-sm" onclick="toggleModal(true)"><iconify-icon icon="ph:sliders-horizontal-bold" width="18"></iconify-icon></button>
  25. </div>
  26. </header>
  27. <section class="flex-none px-4 pt-3 pb-3 bg-[#fffaf1] border-b border-[#eadcc5]">
  28. <div class="flex items-center justify-between mb-2"><h2 class="text-[13px] font-bold text-[#983726]">非遗数据</h2></div>
  29. <div class="grid grid-cols-2 gap-2">
  30. <div class="border border-[#e5cfa9] bg-[#fff7e9] px-3 py-2"><div class="flex items-center justify-between text-[#a83f2d]"><span class="text-[10px]">非遗项目总数</span></div><p class="mt-1 text-[18px] leading-none font-bold text-[#803020]">1,286<span class="ml-1 text-[10px] font-normal">项</span></p></div>
  31. <div class="border border-[#e5cfa9] bg-[#fff7e9] px-3 py-2"><div class="flex items-center justify-between text-[#a83f2d]"><span class="text-[10px]">传承人总量</span></div><p class="mt-1 text-[18px] leading-none font-bold text-[#803020]">2,560<span class="ml-1 text-[10px] font-normal">人</span></p></div>
  32. <div class="border border-[#e5cfa9] bg-[#fff7e9] px-3 py-2"><div class="flex items-center justify-between text-[#a83f2d]"><span class="text-[10px]">文保单位数量</span><iconify-icon icon="ph:building-columns-duotone" width="16"></iconify-icon></div><p class="mt-1 text-[18px] leading-none font-bold text-[#803020]">486<span class="ml-1 text-[10px] font-normal">处</span></p></div>
  33. <div class="border border-[#e5cfa9] bg-[#fff7e9] px-3 py-2"><div class="flex items-center justify-between text-[#a83f2d]"><span class="text-[10px]">传习工坊数量</span></div><p class="mt-1 text-[18px] leading-none font-bold text-[#803020]">128<span class="ml-1 text-[10px] font-normal">家</span></p></div>
  34. </div>
  35. </section>
  36. <section class="flex-none px-4 pt-3 pb-2 bg-[#fffaf1] border-b border-[#eadcc5]">
  37. <div class="flex items-center justify-between"><h2 class="text-[13px] font-bold text-[#983726]">非遗门类</h2><button class="text-[11px] text-[#a83f2d]" onclick="resetFilters()">重置</button></div>
  38. <div class="hide-scrollbar mt-2 flex gap-2 overflow-x-auto pb-1 text-[11px] whitespace-nowrap" id="categoryTags"><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('民间文学')">民间文学</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统音乐')">传统音乐</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统舞蹈')">传统舞蹈</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统戏剧')">传统戏剧</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('曲艺')">曲艺</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统体育游艺与杂技')">传统体育游艺与杂技</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统美术')">传统美术</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统技艺')">传统技艺</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('传统医药')">传统医药</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectCategory('民俗')">民俗</button></div>
  39. </section>
  40. <div class="bg-[#f8efe2]">
  41. <section class="px-4 py-3 bg-[#fffaf1] border-b border-[#eadcc5]">
  42. <div class="flex items-center justify-between"><h2 class="text-[13px] font-bold text-[#983726]">保护级别</h2><span class="text-[10px] text-[#9b897a]">可多选</span></div>
  43. <div class="mt-2 flex flex-wrap gap-2 text-[11px]" id="levelTags"><button class="px-3 py-1.5 rounded-full border bg-[#a83f2d] border-[#a83f2d] text-white" onclick="toggleLevel('全部')">全部</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="toggleLevel('国家级')">国家级</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="toggleLevel('省级')">省级</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="toggleLevel('市级')">市级</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="toggleLevel('区级')">区级</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="toggleLevel('县级')">县级</button></div>
  44. <div class="mt-3 flex items-center justify-between"><h3 class="text-[12px] font-bold text-[#6c5145]">漳州各区县</h3><span class="text-[10px] text-[#9b897a]">快捷筛选</span></div>
  45. <div class="hide-scrollbar mt-2 flex gap-2 overflow-x-auto pb-1 text-[11px] whitespace-nowrap" id="districtTags"><button class="px-3 py-1.5 rounded-full border bg-[#a83f2d] border-[#a83f2d] text-white" onclick="selectDistrict('全部')">全部</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('芗城')">芗城</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('龙文')">龙文</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('南靖')">南靖</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('东山')">东山</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('云霄')">云霄</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('诏安')">诏安</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('漳浦')">漳浦</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('平和')">平和</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('华安')">华安</button><button class="px-3 py-1.5 rounded-full border bg-white border-[#e6d4bd] text-[#806d5c]" onclick="selectDistrict('长泰')">长泰</button></div>
  46. <p class="mt-2 text-[10px] text-[#9b897a]" id="filterSummary">当前展示全部非遗内容 · 共 16 条</p>
  47. </section>
  48. <div class="pb-4" id="heritageSections">
  49. <section class="px-4 pt-4">
  50. <div class="flex items-end justify-between"><div><h2 class="mt-0.5 text-[16px] font-bold text-[#873324]">非遗项目</h2></div></div>
  51. <div class="hide-scrollbar mt-2.5 flex gap-3 overflow-x-auto pb-2" id="projectList"><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:漳州布袋木偶戏')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:mask-happy-duotone" width="38"></iconify-icon><img alt="Traditional Zhangzhou glove puppet in ornate costume" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/1f97ed0ee987493f84fc0ef8cf01127e.png"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">漳州布袋木偶戏</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">国家级 · 芗城</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">掌中乾坤,一口道尽千古事</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:漳浦剪纸')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:scissors-duotone" width="38"></iconify-icon><img alt="Traditional red Zhangpu paper cutting artwork with Minnan auspicious motifs" class="relative z-10 block h-full w-full rounded-t-xl object-cover mix-blend-multiply sepia saturate-[8] hue-rotate-[325deg] contrast-125" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-07/236e78587aac4527ae84a006f6397167.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">漳浦剪纸</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">国家级 · 漳浦</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">剪刻乡土记忆与吉祥纹样</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:东山歌册')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:music-notes-duotone" width="38"></iconify-icon><img alt="Dongshan folk song book performance" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/49d50567367248718d0d833c46ada65c.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">东山歌册</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">省级 · 东山</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">方言吟唱里的海岛生活</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:南靖土楼营造技艺')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:building-duotone" width="38"></iconify-icon><img alt="Nanjing Tulou traditional construction craft" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/2a2356e6bdb74d3abff8576c1339926f.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">南靖土楼营造技艺</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">市级 · 南靖</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">夯土筑圆楼,聚族而居</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button></div>
  52. </section>
  53. <section class="px-4 pt-4">
  54. <div class="flex items-end justify-between"><div><h2 class="mt-0.5 text-[16px] font-bold text-[#873324]">非遗传承人</h2></div></div>
  55. <div class="hide-scrollbar mt-2.5 flex gap-3 overflow-x-auto pb-2" id="inheritorList"><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:陈黎晖')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:user-focus-duotone" width="38"></iconify-icon><img alt="Glove puppetry inheritor Chen Lihui" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/69916b535e7d4045993ee45b945a67d2.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">陈黎晖</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">布袋木偶戏 · 芗城</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">四十载掌上演绎漳州故事</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:林桃')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:user-focus-duotone" width="38"></iconify-icon><img alt="Paper cutting inheritor Lin Tao" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/ca5ca067074747e8b76d98546b37ea6d.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">林桃</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">剪纸 · 漳浦</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">以剪代笔,留住花鸟人情</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:沈水仙')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:user-focus-duotone" width="38"></iconify-icon><img alt="Folk song inheritor Shen Shuixian" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/33251f5102fe4de18a2cc548b85035fc.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">沈水仙</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">歌册 · 东山</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">乡音传唱海岛古韵</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:简天佑')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:user-focus-duotone" width="38"></iconify-icon><img alt="Bamboo weaving inheritor Jian Tianyou" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/6f7e281e05064529899f0cd60dc9dbf4.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">简天佑</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">竹编 · 平和</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">一篾一挑编出山野风物</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button></div>
  56. </section>
  57. <section class="px-4 pt-4">
  58. <div class="flex items-end justify-between"><div><h2 class="mt-0.5 text-[16px] font-bold text-[#873324]">非遗保护单位</h2></div></div>
  59. <div class="hide-scrollbar mt-2.5 flex gap-3 overflow-x-auto pb-2" id="unitList"><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:漳州市木偶剧团')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:building-columns-duotone" width="38"></iconify-icon><img alt="Zhangzhou Puppet Troupe heritage protection unit" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/40f6b69d9e9a4bf7be8bb81fffa1cb7b.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">漳州市木偶剧团</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">国家级保护单位 · 芗城</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">布袋木偶戏系统保护与展演</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:南靖县文化馆')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:bank-duotone" width="38"></iconify-icon><img alt="Nanjing County Cultural Center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/42d41037be194bdca22ced6a181d08c7.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">南靖县文化馆</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">市级保护单位 · 南靖</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">土楼民俗资料整理与活化</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:东山县文化馆')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:lighthouse-duotone" width="38"></iconify-icon><img alt="Dongshan County Cultural Center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/636da2f41d614f8797833a11f2967743.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">东山县文化馆</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">省级保护单位 · 东山</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">海洋民俗与歌册传承基地</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:诏安县美术馆')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:frame-corners-duotone" width="38"></iconify-icon><img alt="Zhaoan County Art Museum" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/50b938f366134e749616ad065f1b4b32.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">诏安县美术馆</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">县级保护单位 · 诏安</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">书画艺术与民间美术守护</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button></div>
  60. </section>
  61. <section class="px-4 pt-4">
  62. <div class="flex items-end justify-between"><div><h2 class="mt-0.5 text-[16px] font-bold text-[#873324]">非遗传习中心(所)</h2></div></div>
  63. <div class="hide-scrollbar mt-2.5 flex gap-3 overflow-x-auto pb-2" id="centerList"><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:芗城木偶传习所')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:storefront-duotone" width="38"></iconify-icon><img alt="Xiangcheng puppetry learning center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/4f7a53eab8c8493ab98704d4d2d452fd.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">芗城木偶传习所</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">芗城 · 预约开放</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">木偶操演、唱腔与道具体验</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:南靖土楼营造传习中心')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:house-line-duotone" width="38"></iconify-icon><img alt="Nanjing Tulou construction learning center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/5b8c846df27049b1ba38df648280df8d.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">南靖土楼营造传习中心</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">南靖 · 周二至周日</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">夯筑工具与传统工序展示</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:云霄竹塔传习所')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:plant-duotone" width="38"></iconify-icon><img alt="Yunxiao bamboo craft learning center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/dd3693b6cae1420999e57a56aa10e735.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">云霄竹塔传习所</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">云霄 · 公益课堂</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">竹艺制作与节庆文化传习</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button><button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:诏安木版年画传习中心')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon class="absolute" icon="ph:paint-brush-broad-duotone" width="38"></iconify-icon><img alt="Zhaoan woodblock print learning center" class="relative z-10 block h-full w-full rounded-t-xl object-cover" loading="lazy" onerror="this.onerror=null;this.remove()" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/9b460a47a8f34e1dafbf29ecd5260a68.jpg"/><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">诏安木版年画传习中心</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">诏安 · 可现场体验</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">刻版、拓印与年俗课堂</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button></div>
  64. </section>
  65. </div>
  66. <div class="hidden px-4 py-12 text-center" id="emptyState"><iconify-icon class="text-[#c8a66b]" icon="ph:magnifying-glass-duotone" width="40"></iconify-icon><p class="mt-2 text-[13px] font-bold text-[#7f5f50]">暂未找到匹配内容</p><button class="mt-3 text-[11px] text-[#a83f2d]" onclick="resetFilters()">清除筛选条件</button></div>
  67. </div>
  68. <div class="absolute bottom-20 left-1/2 -translate-x-1/2 z-20 rounded-full bg-[#633025] px-4 py-2 text-[11px] text-white shadow-lg whitespace-nowrap hidden" id="toast">已选择:漳州布袋木偶戏</div>
  69. <nav class="flex-none bg-[#fffaf1] border-t border-[#e9dbc5] px-3 pt-2 pb-3"><div class="flex justify-between"><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="home.html"><iconify-icon icon="ph:house-duotone" width="21"></iconify-icon><span class="text-[10px]">首页</span></a><a class="text-[#a83f2d] flex flex-col items-center gap-0.5 w-12" href="heritage.html"><iconify-icon icon="ph:hand-heart-fill" width="21"></iconify-icon><span class="text-[10px] font-semibold">传承</span></a><a class="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><a class="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><a class="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></div></nav>
  70. </main>
  71. <script>
  72. const categories=['民间文学','传统音乐','传统舞蹈','传统戏剧','曲艺','传统体育游艺与杂技','传统美术','传统技艺','传统医药','民俗'];
  73. const levels=['全部','国家级','省级','市级','区级','县级'];
  74. const districts=['全部','芗城','龙文','南靖','东山','云霄','诏安','漳浦','平和','华安','长泰'];
  75. const content={
  76. projectList:[
  77. {name:'漳州布袋木偶戏',meta:'国家级 · 芗城',desc:'掌中乾坤,一口道尽千古事',icon:'ph:mask-happy-duotone',image:'/agent-py/media/generated_images/2026-08-07/a0d729e3db234da0b8ce54c7076e4fed.jpg',imageAlt:'Traditional Zhangzhou glove puppet in ornate costume',level:'国家级',district:'芗城'},
  78. {name:'漳浦剪纸',meta:'国家级 · 漳浦',desc:'剪刻乡土记忆与吉祥纹样',icon:'ph:scissors-duotone',image:'/agent-py/media/generated_images/2026-08-07/236e78587aac4527ae84a006f6397167.jpg',imageAlt:'Traditional red Zhangpu paper cutting artwork with Minnan auspicious motifs',imageClass:'mix-blend-multiply sepia saturate-[8] hue-rotate-[325deg] contrast-125',level:'国家级',district:'漳浦'},
  79. {name:'东山歌册',meta:'省级 · 东山',desc:'方言吟唱里的海岛生活',icon:'ph:music-notes-duotone',image:'/agent-py/media/generated_images/2026-08-06/49d50567367248718d0d833c46ada65c.jpg',imageAlt:'Dongshan folk song book performance',level:'省级',district:'东山'},
  80. {name:'南靖土楼营造技艺',meta:'市级 · 南靖',desc:'夯土筑圆楼,聚族而居',icon:'ph:building-duotone',image:'/agent-py/media/generated_images/2026-08-06/2a2356e6bdb74d3abff8576c1339926f.jpg',imageAlt:'Nanjing Tulou traditional construction craft',level:'市级',district:'南靖'}
  81. ],
  82. inheritorList:[
  83. {name:'陈黎晖',meta:'布袋木偶戏 · 芗城',desc:'四十载掌上演绎漳州故事',icon:'ph:user-focus-duotone',image:'/agent-py/media/generated_images/2026-08-06/69916b535e7d4045993ee45b945a67d2.jpg',imageAlt:'Glove puppetry inheritor Chen Lihui',level:'国家级',district:'芗城'},
  84. {name:'林桃',meta:'剪纸 · 漳浦',desc:'以剪代笔,留住花鸟人情',icon:'ph:user-focus-duotone',image:'/agent-py/media/generated_images/2026-08-06/ca5ca067074747e8b76d98546b37ea6d.jpg',imageAlt:'Paper cutting inheritor Lin Tao',level:'省级',district:'漳浦'},
  85. {name:'沈水仙',meta:'歌册 · 东山',desc:'乡音传唱海岛古韵',icon:'ph:user-focus-duotone',image:'/agent-py/media/generated_images/2026-08-06/33251f5102fe4de18a2cc548b85035fc.jpg',imageAlt:'Folk song inheritor Shen Shuixian',level:'市级',district:'东山'},
  86. {name:'简天佑',meta:'竹编 · 平和',desc:'一篾一挑编出山野风物',icon:'ph:user-focus-duotone',image:'/agent-py/media/generated_images/2026-08-06/6f7e281e05064529899f0cd60dc9dbf4.jpg',imageAlt:'Bamboo weaving inheritor Jian Tianyou',level:'县级',district:'平和'}
  87. ],
  88. unitList:[
  89. {name:'漳州市木偶剧团',meta:'国家级保护单位 · 芗城',desc:'布袋木偶戏系统保护与展演',icon:'ph:building-columns-duotone',image:'/agent-py/media/generated_images/2026-08-06/40f6b69d9e9a4bf7be8bb81fffa1cb7b.jpg',imageAlt:'Zhangzhou Puppet Troupe heritage protection unit',level:'国家级',district:'芗城'},
  90. {name:'南靖县文化馆',meta:'市级保护单位 · 南靖',desc:'土楼民俗资料整理与活化',icon:'ph:bank-duotone',image:'/agent-py/media/generated_images/2026-08-06/42d41037be194bdca22ced6a181d08c7.jpg',imageAlt:'Nanjing County Cultural Center',level:'市级',district:'南靖'},
  91. {name:'东山县文化馆',meta:'省级保护单位 · 东山',desc:'海洋民俗与歌册传承基地',icon:'ph:lighthouse-duotone',image:'/agent-py/media/generated_images/2026-08-06/636da2f41d614f8797833a11f2967743.jpg',imageAlt:'Dongshan County Cultural Center',level:'省级',district:'东山'},
  92. {name:'诏安县美术馆',meta:'县级保护单位 · 诏安',desc:'书画艺术与民间美术守护',icon:'ph:frame-corners-duotone',image:'/agent-py/media/generated_images/2026-08-06/50b938f366134e749616ad065f1b4b32.jpg',imageAlt:'Zhaoan County Art Museum',level:'县级',district:'诏安'}
  93. ],
  94. centerList:[
  95. {name:'芗城木偶传习所',meta:'芗城 · 预约开放',desc:'木偶操演、唱腔与道具体验',icon:'ph:storefront-duotone',image:'/agent-py/media/generated_images/2026-08-06/4f7a53eab8c8493ab98704d4d2d452fd.jpg',imageAlt:'Xiangcheng puppetry learning center',level:'国家级',district:'芗城'},
  96. {name:'南靖土楼营造传习中心',meta:'南靖 · 周二至周日',desc:'夯筑工具与传统工序展示',icon:'ph:house-line-duotone',image:'/agent-py/media/generated_images/2026-08-06/5b8c846df27049b1ba38df648280df8d.jpg',imageAlt:'Nanjing Tulou construction learning center',level:'市级',district:'南靖'},
  97. {name:'云霄竹塔传习所',meta:'云霄 · 公益课堂',desc:'竹艺制作与节庆文化传习',icon:'ph:plant-duotone',image:'/agent-py/media/generated_images/2026-08-06/dd3693b6cae1420999e57a56aa10e735.jpg',imageAlt:'Yunxiao bamboo craft learning center',level:'区级',district:'云霄'},
  98. {name:'诏安木版年画传习中心',meta:'诏安 · 可现场体验',desc:'刻版、拓印与年俗课堂',icon:'ph:paint-brush-broad-duotone',image:'/agent-py/media/generated_images/2026-08-06/9b460a47a8f34e1dafbf29ecd5260a68.jpg',imageAlt:'Zhaoan woodblock print learning center',level:'县级',district:'诏安'}
  99. ]
  100. };
  101. let selectedCategory='';
  102. let selectedLevels=[];
  103. let selectedDistrict='全部';
  104. const tag=(text,active,fn)=>`<button class="px-3 py-1.5 rounded-full border ${active?'bg-[#a83f2d] border-[#a83f2d] text-white':'bg-white border-[#e6d4bd] text-[#806d5c]'}" onclick="${fn}">${text}</button>`;
  105. function renderTags(){document.getElementById('categoryTags').innerHTML=categories.map(x=>tag(x,selectedCategory===x,`selectCategory('${x}')`)).join('')}
  106. function renderFilterTags(){
  107. document.getElementById('levelTags').innerHTML=levels.map(x=>tag(x,x==='全部'?selectedLevels.length===0:selectedLevels.includes(x),`toggleLevel('${x}')`)).join('');
  108. document.getElementById('districtTags').innerHTML=districts.map(x=>tag(x,selectedDistrict===x,`selectDistrict('${x}')`)).join('');
  109. }
  110. function selectCategory(x){selectedCategory=selectedCategory===x?'':x;renderTags();render()}
  111. function toggleLevel(x){if(x==='全部'){selectedLevels=[]}else{selectedLevels=selectedLevels.includes(x)?selectedLevels.filter(v=>v!==x):[...selectedLevels,x]}renderFilterTags();render()}
  112. function selectDistrict(x){selectedDistrict=x;renderFilterTags();render()}
  113. function card(item){return `<button class="flex-none w-[210px] overflow-hidden rounded-xl border border-[#e4cfad] bg-[#fffaf1] text-left shadow-sm" onclick="showToast('已选择:${item.name}')"><div class="h-24 bg-gradient-to-br from-[#8f3427] to-[#c58a42] relative overflow-hidden flex items-center justify-center text-[#ffe5ae]"><iconify-icon icon="${item.icon}" width="38" class="absolute"></iconify-icon><img src="${item.image}" alt="${item.imageAlt}" loading="lazy" class="relative z-10 block h-full w-full rounded-t-xl object-cover ${item.imageClass||''}" onerror="this.onerror=null;this.remove()"><div class="pointer-events-none absolute inset-2 z-20 rounded-lg border border-white/25"></div></div><div class="p-3"><h3 class="truncate text-[13px] font-bold text-[#753024]">${item.name}</h3><p class="mt-1 truncate text-[10px] text-[#b0793c]">${item.meta}</p><p class="mt-2 h-8 text-[11px] leading-4 text-[#806d5c]">${item.desc}</p><span class="mt-2 inline-flex items-center gap-1 text-[10px] text-[#a83f2d]">查看详情<iconify-icon icon="ph:arrow-right"></iconify-icon></span></div></button>`}
  114. function render(){
  115. const query=document.getElementById('searchInput').value.trim().toLowerCase();
  116. let count=0;
  117. Object.entries(content).forEach(([id,items])=>{const filtered=items.filter(item=>(!query||`${item.name}${item.meta}${item.desc}`.toLowerCase().includes(query))&&(!selectedLevels.length||selectedLevels.includes(item.level))&&(selectedDistrict==='全部'||item.district===selectedDistrict));count+=filtered.length;document.getElementById(id).innerHTML=filtered.map(card).join('')});
  118. document.getElementById('heritageSections').classList.toggle('hidden',count===0);
  119. document.getElementById('emptyState').classList.toggle('hidden',count!==0);
  120. const active=[selectedCategory,...selectedLevels,selectedDistrict==='全部'?'':selectedDistrict].filter(Boolean);
  121. document.getElementById('filterSummary').textContent=active.length?`已筛选:${active.join('、')} · 共 ${count} 条内容`:`当前展示全部非遗内容 · 共 ${count} 条`;
  122. }
  123. 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'),1600)}
  124. function resetFilters(){selectedCategory='';selectedLevels=[];selectedDistrict='全部';document.getElementById('searchInput').value='';renderTags();renderFilterTags();render()}
  125. function toggleModal(){document.getElementById('searchInput').focus()}
  126. renderTags();
  127. renderFilterTags();
  128. render();
  129. </script>
  130. </body></html>