heritage-projects.html 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html class="scroll-smooth" 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>body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; } .brush { font-family: "STKaiti", "KaiTi", serif; font-weight: 700; }</style>
  9. </head>
  10. <body class="m-0 min-w-[1180px] overflow-x-hidden bg-[#fbf8f1] text-[#49352b]">
  11. <header class="w-full">
  12. <div class="h-[94px] border-b border-[#eadfd1] bg-[radial-gradient(circle_at_96%_38%,#f4e9d9_0,transparent_16%),linear-gradient(90deg,#fffdf9,#f9f1e6)]"><div class="mx-auto flex h-full w-[1200px] items-center justify-between gap-8">
  13. <a aria-label="漳州闽南文化生态保护区首页" class="flex shrink-0 items-center gap-4 whitespace-nowrap" href="home.html"><div class="flex h-[68px] w-[122px] shrink-0 items-center justify-center" role="img"><img alt="Official Minnan culture logo" class="h-full w-full object-contain mix-blend-multiply" onerror="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')" referrerpolicy="no-referrer" src="https://wlt.fujian.gov.cn/wldt/btdt/202512/W020251204462589781979.png"/><span class="hidden text-center text-[10px] leading-4 text-[#8c1109]">标识暂不可用</span></div><!-- 官方来源:https://wlt.fujian.gov.cn/wldt/btdt/202512/t20251204_7042378.htm --><div class="shrink-0 whitespace-nowrap"><div class="brush whitespace-nowrap text-[27px] font-bold tracking-[0.08em] text-[#8c1109]">闽南文化生态保护区(漳州市)</div><div class="mt-0.5 whitespace-nowrap text-[8px] tracking-[0.075em] text-[#a17662]">ZHANGZHOU MINNAN CULTURE ECOLOGICAL PROTECTED AREA</div></div></a>
  14. <nav class="flex h-full shrink-0 flex-nowrap items-end gap-1 whitespace-nowrap pb-5 text-sm font-medium text-[#332d28]"><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="home.html">首页</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="protected-area-overview.html">保护区概况</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="culture-news.html">文化资讯</a><a aria-current="page" class="shrink-0 rounded-t-sm bg-[#a30805] px-4 py-2.5 text-white" href="heritage.html">保护传承</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="cultural-exchange.html">文化交流</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="cultural-tourism.html">文旅融合</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="policy.html">政策法规</a></nav>
  15. </div></div>
  16. </header>
  17. <main>
  18. <section class="relative overflow-hidden border-b border-[#d7a371] bg-[#6b2116] py-10"><img alt="Minnan heritage performance and traditional architecture" aria-hidden="true" class="absolute inset-0 h-full w-full object-cover opacity-55" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/54fdeb1d62784a0e8c34de2f089a3b94.jpg"/><div aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(90deg,rgba(73,16,12,.94),rgba(115,37,20,.78)_49%,rgba(178,104,49,.5))]"></div><div aria-hidden="true" class="absolute -right-10 -top-14 text-[220px] leading-none text-[#f3c176]/20">云</div><div aria-hidden="true" class="absolute left-[58%] top-0 h-full w-px bg-[#f3d29b]/25"></div><div class="relative mx-auto w-[1200px]"><div class="mt-7 flex items-end justify-between"><div><h1 class="brush text-[39px] font-bold tracking-[.16em] text-white">非遗项目</h1><p class="mt-3 text-sm tracking-[.05em] text-[#f9e6cf]">按门类、级别、批次与区县查阅漳州闽南文化生态保护区项目档案</p><a class="mt-5 inline-flex items-center gap-2 border border-[#f3ce97] bg-[#9d160c] px-4 py-2 text-sm font-medium text-white shadow-[0_2px_5px_rgba(46,10,6,.3)] transition hover:bg-[#bd2b17] hover:text-[#fff4de]" href="heritage.html"><iconify-icon class="text-lg" icon="solar:arrow-left-linear"></iconify-icon>返回保护传承</a></div><div class="grid grid-cols-4 gap-3"><div class="border-l border-[#f2c992]/65 pl-4" style="padding: 0px 0px 0px 20px;"><p class="text-xs text-[#f6d9b4]">国家级</p><p class="mt-1 text-3xl font-bold text-[#fff1d4]" id="national-count">2<span class="ml-1 text-sm font-normal">项</span></p></div><div class="border-l border-[#f2c992]/65 pl-4" style="padding: 0px 0px 0px 20px;"><p class="text-xs text-[#f6d9b4]">省级</p><p class="mt-1 text-3xl font-bold text-[#fff1d4]" id="provincial-count">2<span class="ml-1 text-sm font-normal">项</span></p></div><div class="border-l border-[#f2c992]/65 pl-4" style="padding: 0px 0px 0px 20px;"><p class="text-xs text-[#f6d9b4]" style="opacity: 1;">市级</p><p class="mt-1 text-3xl font-bold text-[#fff1d4]" id="municipal-count">3<span class="ml-1 text-sm font-normal">项</span></p></div></div></div></div></section>
  19. <section class="py-8"><div class="mx-auto w-[1200px]">
  20. <div class="overflow-hidden rounded-lg border-2 border-[#d8ad83] bg-[#fffdf8] shadow-[0_3px_11px_rgba(108,55,30,.09)]"><div class="flex items-center justify-between border-b border-[#ead8c4] bg-[#fdf5e9] px-6 py-4"><div class="flex items-center gap-3"><span class="flex h-9 w-9 items-center justify-center rounded-full border border-[#c9784d] bg-white text-xl text-[#a30b06]"><iconify-icon icon="solar:tuning-2-linear"></iconify-icon></span><h2 class="brush text-2xl tracking-[.13em] text-[#891b12]">筛选</h2></div><button class="text-xs text-[#9b3b20] transition hover:text-[#780d08]" id="reset-filter" type="button"><iconify-icon class="mr-1 align-middle text-base" icon="solar:restart-linear"></iconify-icon>重置条件</button></div>
  21. <div class="space-y-4 p-6 text-sm"><div class="flex"><span class="w-20 shrink-0 pt-2 font-bold text-[#7d3826]">十大门类</span><div class="flex flex-wrap gap-2" data-filter-group="category"><button class="filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white" data-value="全部" type="button">全部</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="民间文学" type="button">民间文学</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统音乐" type="button">传统音乐</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统舞蹈" type="button">传统舞蹈</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统戏剧" type="button">传统戏剧</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="曲艺" type="button">曲艺</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统体育、游艺与杂技" type="button">传统体育、游艺与杂技</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统美术" type="button">传统美术</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统技艺" type="button">传统技艺</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="传统医药" type="button">传统医药</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="民俗" type="button">民俗</button></div></div>
  22. <div class="flex border-t border-dashed border-[#ecd9c4] pt-4"><span class="w-20 shrink-0 pt-2 font-bold text-[#7d3826]">项目级别</span><div class="flex flex-wrap gap-2" data-filter-group="level"><button class="filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white" data-value="全部" type="button">全部</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="国家级" type="button">国家级</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="省级" type="button">省级</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="市级" type="button">市级</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="县级" type="button">县级</button></div></div>
  23. <div class="flex border-t border-dashed border-[#ecd9c4] pt-4"><span class="w-20 shrink-0 pt-2 font-bold text-[#7d3826]">公布批次</span><div class="flex flex-wrap gap-2" data-filter-group="batch"><button class="filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white" data-value="全部" type="button">全部</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第一批" type="button">第一批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第二批" type="button">第二批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第三批" type="button">第三批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第四批" type="button">第四批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第五批" type="button">第五批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第六批" type="button">第六批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第七批" type="button">第七批</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="第八批" type="button">第八批</button></div></div>
  24. <div class="flex border-t border-dashed border-[#ecd9c4] pt-4"><span class="w-20 shrink-0 pt-2 font-bold text-[#7d3826]">所在区县</span><div class="flex flex-wrap gap-2" data-filter-group="district"><button class="filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white" data-value="全部" type="button">全部</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="芗城区" type="button">芗城区</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="龙文区" type="button">龙文区</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="龙海区" type="button">龙海区</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="长泰区" type="button">长泰区</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="漳浦县" type="button">漳浦县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="云霄县" type="button">云霄县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="诏安县" type="button">诏安县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="东山县" type="button">东山县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="南靖县" type="button">南靖县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="平和县" type="button">平和县</button><button class="filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]" data-value="华安县" type="button">华安县</button></div></div></div>
  25. </div>
  26. <div class="mt-8 flex items-end justify-between border-b-2 border-[#a30b06] pb-3" id="project-list"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-full border border-[#c9784d] bg-[#fff8ec] text-[22px] text-[#a30b06]"><iconify-icon icon="solar:book-bookmark-linear"></iconify-icon></span><h2 class="brush text-[27px] tracking-[.13em] text-[#81170f]">项目名录</h2></div><p class="text-xs text-[#977b6a]">点击项目卡片查看详细档案</p></div>
  27. <div class="mt-5 grid grid-cols-2 gap-5" id="project-grid">
  28. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第一批" data-category="传统音乐" data-district="芗城区" data-level="国家级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#7d2117,#d38b4c)]"><img alt="Nanyin traditional music instruments" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/f01d981ae91d44c0837e058c87e738d0.jpg"/><div class="absolute inset-0 flex items-center justify-center bg-[#6d2015]/20"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:music-note-3-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统音乐</span><span class="text-xs text-[#a77861]">国家级 · 第一批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">南音</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">曲调古朴典雅,以洞箫、琵琶、三弦等乐器共同演绎。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>芗城区</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  29. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第二批" data-category="传统戏剧" data-district="龙海区" data-level="国家级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#631b25,#b44d35)]"><img alt="Xiang opera stage performance" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/90e5542b314246418886f74700cc277e.jpg"/><div class="absolute inset-0 flex items-center justify-center bg-[#571522]/20"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:mask-happly-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统戏剧</span><span class="text-xs text-[#a77861]">国家级 · 第二批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">芗剧</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">植根闽南民间沃土,唱腔清丽、表演生活气息浓厚。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>龙海区</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  30. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第三批" data-category="传统技艺" data-district="漳浦县" data-level="省级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#27656a,#d76e38)]"><img alt="Zhangpu ceramic shard carving roof ornament" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/0a0c565de1814edcb40a25b06134a7e9.jpg"/><div class="absolute inset-0 flex items-center justify-center bg-[#8b4425]/20"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:palette-round-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统技艺</span><span class="text-xs text-[#a77861]">省级 · 第三批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">漳浦剪瓷雕</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">以彩瓷片拼贴雕塑,常见于闽南古厝屋脊与祠庙装饰。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>漳浦县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  31. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第四批" data-category="民俗" data-district="云霄县" data-level="省级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#913528,#e0a13b)]"><img alt="Yunxiao lantern riddle festival lanterns" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/852022b087b242e797feed6714a6d32d.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:lamp-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">民俗</span><span class="text-xs text-[#a77861]">省级 · 第四批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">云霄枋山灯谜</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">融知识、趣味与地方民俗于一体的节庆文化活动。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>云霄县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  32. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第五批" data-category="传统美术" data-district="华安县" data-level="市级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#2d7669,#b2bd7b)]"><img alt="Huaan jade carving craftwork" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/fc5937482d22439cbe5029532bb2bdda.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:gem-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统美术</span><span class="text-xs text-[#a77861]">市级 · 第五批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">华安玉雕</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">依石取势、因材施艺,体现地方玉石工艺的审美传承。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>华安县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  33. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第三批" data-category="传统舞蹈" data-district="南靖县" data-level="县级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#a23520,#e29b43)]"><img alt="Nanjing spring welcome folk dance" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/fd22fc4d26804109ad34b9375953b9eb.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:confetti-minimalistic-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统舞蹈</span><span class="text-xs text-[#a77861]">县级 · 第三批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">南靖塔下迎春舞</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">以祈福迎春为主题,展现山区村落的民间礼俗与活力。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>南靖县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  34. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第六批" data-category="民间文学" data-district="龙文区" data-level="市级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#315e70,#9bbdc1)]"><img alt="Longjiang river folk legend storybook" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/2962c0f76a254463bea367d49d900c5f.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:book-2-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">民间文学</span><span class="text-xs text-[#a77861]">市级 · 第六批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">龙江传说</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">流传于龙江两岸的乡土故事,承载着水乡聚落的历史记忆。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>龙文区</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  35. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第七批" data-category="曲艺" data-district="长泰区" data-level="市级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#7d2430,#dd8a45)]"><img alt="Changtai Jinge folk singing performance" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/5168c8efe9a94f60bcd3054bc5cea03b.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:microphone-3-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">曲艺</span><span class="text-xs text-[#a77861]">市级 · 第七批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">长泰锦歌</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">以闽南方言演唱的说唱艺术,唱词生动、节奏明快。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>长泰区</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  36. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第八批" data-category="传统体育、游艺与杂技" data-district="诏安县" data-level="县级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#703022,#c47a3e)]"><img alt="Zhaoan traditional martial arts practice" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/f66a9874422249229de6956f2200c37e.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:meditation-round-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统体育、游艺与杂技</span><span class="text-xs text-[#a77861]">县级 · 第八批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">诏安武术</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">以强身健体和邻里传习为特色的传统武术活动。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>诏安县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  37. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第六批" data-category="传统医药" data-district="东山县" data-level="县级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#3b7354,#9eae68)]"><img alt="Dongshan coastal herbal medicine plants" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/4dd8a738a8924a90997b7d5de8978daf.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:leaf-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">传统医药</span><span class="text-xs text-[#a77861]">县级 · 第六批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">东山青草药</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">结合海岛草本资源形成的民间用药知识与调养方法。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>东山县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  38. <article class="project-card cursor-pointer border border-[#dfb489] bg-[#fffdf9] p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#b24222] hover:shadow-md" data-batch="第七批" data-category="民俗" data-district="平和县" data-level="县级"><div class="flex gap-4"><div class="relative h-28 w-36 shrink-0 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#7b722d,#d3b347)]"><img alt="Pinghe pomelo blossom festival" class="h-full w-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/115e035f91fe420da8fa76ea9004b493.jpg"/><div class="absolute inset-0 flex items-center justify-center"><iconify-icon class="text-4xl text-[#fff0cd]" icon="solar:flower-linear"></iconify-icon></div></div><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="border border-[#d8a675] bg-[#fff3df] px-2 py-1 text-xs text-[#9b331d]">民俗</span><span class="text-xs text-[#a77861]">县级 · 第七批</span></div><h3 class="brush mt-3 text-[25px] font-bold tracking-[.12em] text-[#8e1c12]">平和柚花会</h3><p class="mt-1 text-sm leading-6 text-[#715d52]">围绕花期农事展开的乡村礼俗,寄寓丰收与和美愿景。</p></div></div><div class="mt-4 flex items-center justify-between border-t border-[#efdfce] pt-3 text-xs text-[#886657]"><span><iconify-icon class="mr-1 align-middle text-base" icon="solar:map-point-linear"></iconify-icon>平和县</span><span class="text-[#a30b06]">查看档案 <iconify-icon class="align-middle" icon="solar:alt-arrow-right-linear"></iconify-icon></span></div></article>
  39. </div>
  40. <div class="mt-5 hidden border-2 border-dashed border-[#dec3a5] bg-[#fffaf2] py-12 text-center" id="empty-state"><iconify-icon class="text-4xl text-[#c78e68]" icon="solar:document-add-linear"></iconify-icon><p class="mt-3 text-sm text-[#896758]">暂未找到符合条件的项目,请调整筛选条件后再试。</p></div>
  41. </div></section>
  42. </main>
  43. <footer class="relative overflow-hidden border-t-4 border-[#d99a4b] bg-[#8f0805] text-white"><div aria-hidden="true" class="absolute -right-9 -top-10 text-[220px] leading-none text-[#d46532]/25">云</div><div class="relative mx-auto flex min-h-[160px] w-[1200px] items-center justify-between py-7"><div class="flex items-center gap-4"><div class="flex h-16 w-16 items-center justify-center rounded-full border-2 border-[#f5d276] bg-[#a6180d]"><iconify-icon class="text-4xl text-[#f5d276]" icon="solar:palace-linear"></iconify-icon></div><div><div class="brush text-xl tracking-wider">闽南文化生态保护区(漳州市)</div><p class="mt-2 text-xs text-[#f9ddd0]">非遗项目查询 · 原型展示</p></div></div><div class="border-l border-white/25 pl-8 text-xs leading-6 text-[#f9ddd0]"><p>主办单位:漳州市文化和旅游局(漳州市文物局)</p><p>承办单位:漳州闽南文化生态保护区管理中心</p><p>联系电话:0596-2023456</p></div></div></footer>
  44. <div aria-hidden="true" aria-labelledby="detail-title" aria-modal="true" class="fixed inset-0 z-50 hidden items-center justify-center bg-[#35130d]/60 p-6" id="detail-modal" role="dialog"><div class="max-h-full w-full max-w-[760px] overflow-y-auto border-2 border-[#c98554] bg-[linear-gradient(120deg,#fffdf8,#f8ead6)] p-7 shadow-[0_22px_60px_rgba(52,18,9,.35)] [scrollbar-width:none] [&amp;::-webkit-scrollbar]:hidden"><div class="flex items-start justify-between"><div><p class="text-xs tracking-[.18em] text-[#b06035]">PROJECT ARCHIVE</p><h2 class="brush mt-2 text-[29px] tracking-[.14em] text-[#8a1d12]" id="detail-title">南音</h2></div><button aria-label="关闭项目详情" class="flex h-8 w-8 items-center justify-center border border-[#d8a675] text-[#9c381e] hover:bg-[#a30b06] hover:text-white" id="close-detail" type="button"><iconify-icon icon="solar:close-circle-linear"></iconify-icon></button></div><div class="mt-5 grid grid-cols-4 border-y border-[#e6cdb0] py-4 text-sm"><div><p class="text-xs text-[#9b7867]">项目门类</p><p class="mt-1 font-bold text-[#7f2619]" id="detail-category"></p></div><div><p class="text-xs text-[#9b7867]">项目级别</p><p class="mt-1 font-bold text-[#7f2619]" id="detail-level"></p></div><div><p class="text-xs text-[#9b7867]">公布批次</p><p class="mt-1 font-bold text-[#7f2619]" id="detail-batch"></p></div><div><p class="text-xs text-[#9b7867]">所在地</p><p class="mt-1 font-bold text-[#7f2619]" id="detail-district"></p></div></div><figure class="relative mt-5 h-52 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#7d2117,#d38b4c)]"><img alt="Nanyin traditional music instruments" class="h-full w-full object-cover opacity-75" id="detail-image" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/4a3f4a5784c240dfb4ce447fc3127ac9.jpg"/><div class="absolute inset-0 flex items-center justify-center bg-[#6d2015]/20"><iconify-icon class="text-5xl text-[#fff0cd]" icon="solar:gallery-wide-linear" id="detail-image-icon"></iconify-icon></div><figcaption class="absolute bottom-0 left-0 bg-[#571c12]/80 px-3 py-2 text-xs tracking-[.12em] text-[#fff3df]">项目影像展示</figcaption></figure><p class="mt-5 max-w-[900px] text-sm leading-7 text-[#6d5448]" id="detail-description"></p><section class="mt-6 border-t border-[#e6cdb0] pt-5"><div class="flex items-center gap-2"><span class="h-5 w-1 bg-[#a30b06]"></span><h3 class="brush text-xl tracking-[.12em] text-[#8a1d12]">传承人</h3></div><div class="mt-3 flex items-center gap-3 border border-[#d8a675] bg-[#fffaf2] p-3"><span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#c98554] bg-[#f7e4c8] text-[#9b331d]"><iconify-icon class="text-xl" icon="solar:user-rounded-linear"></iconify-icon></span><div><p class="text-sm font-bold text-[#7f2619]" id="inheritor-name">项目传承人档案</p><p class="mt-1 text-xs leading-5 text-[#9b7867]" id="inheritor-detail">原型信息:由属地保护单位持续开展传习、记录与展示。</p></div></div></section><div class="mt-6 border-t border-[#e6cdb0] pt-5"><div class="flex items-center gap-2"><span class="h-5 w-1 bg-[#a30b06]"></span><h3 class="brush text-xl tracking-[.12em] text-[#8a1d12]">相册</h3><span class="text-xs text-[#aa8069]">项目现场与传习记录</span></div><div class="mt-3 grid grid-cols-3 gap-3"><button aria-label="查看项目主影像" class="group relative h-24 overflow-hidden border border-[#d8a675] bg-[#7d2117] text-left" data-gallery-item="0" type="button"><img alt="Project main archive image" class="h-full w-full object-cover opacity-70 transition group-hover:scale-105" id="gallery-image-main" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/4a3f4a5784c240dfb4ce447fc3127ac9.jpg"/><span class="absolute inset-0 flex items-center justify-center bg-[#571c12]/20"><iconify-icon class="text-2xl text-[#fff3df]" icon="solar:gallery-wide-linear"></iconify-icon></span></button><button aria-label="查看活动记录占位" class="relative h-24 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#f2d7b2,#c67b47)] text-[#8a1d12]" data-gallery-item="1" type="button"><span class="absolute inset-0 flex items-center justify-center opacity-30"><iconify-icon class="text-6xl" icon="solar:camera-linear"></iconify-icon></span><span class="absolute bottom-2 left-2 bg-[#fff7e9]/90 px-2 py-1 text-xs">活动记录</span></button><button aria-label="查看技艺细节占位" class="relative h-24 overflow-hidden border border-[#d8a675] bg-[linear-gradient(135deg,#a33a20,#e7b66f)] text-[#fff7e9]" data-gallery-item="2" type="button"><span class="absolute inset-0 flex items-center justify-center opacity-35"><iconify-icon class="text-6xl" icon="solar:pallete-2-linear"></iconify-icon></span><span class="absolute bottom-2 left-2 bg-[#571c12]/80 px-2 py-1 text-xs">技艺细节</span></button></div><p class="mt-2 text-xs text-[#9b7867]" id="gallery-caption">点击缩略图查看项目影像。</p></div><div class="mt-6 grid grid-cols-2 gap-5 border-t border-[#e6cdb0] pt-5"><section><div class="flex items-center gap-2"><span class="h-5 w-1 bg-[#a30b06]"></span><h3 class="brush text-xl tracking-[.12em] text-[#8a1d12]">视频/音频</h3></div><button aria-label="播放项目音视频介绍" class="mt-3 flex w-full items-center gap-3 border border-[#d8a675] bg-[#fffaf2] p-3 text-left hover:border-[#a30b06]" id="media-play" type="button"><span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#a30b06] text-white"><iconify-icon class="text-xl" icon="solar:play-circle-linear"></iconify-icon></span><span><span class="block text-sm font-bold text-[#7f2619]">项目音视频导览</span><span class="mt-1 block text-xs text-[#9b7867]" id="media-status">点击播放原型片段</span></span></button></section></div></div></div>
  45. <script>
  46. const selections = { category: '全部', level: '全部', batch: '全部', district: '全部' };
  47. const chips = document.querySelectorAll('.filter-chip');
  48. const cards = document.querySelectorAll('.project-card');
  49. const levelCounts = { '国家级': document.getElementById('national-count'), '省级': document.getElementById('provincial-count'), '市级': document.getElementById('municipal-count'), '县级': document.getElementById('county-count') };
  50. const emptyState = document.getElementById('empty-state');
  51. const detailModal = document.getElementById('detail-modal');
  52. function closeDetail() { detailModal.classList.add('hidden'); detailModal.classList.remove('flex'); detailModal.setAttribute('aria-hidden', 'true'); }
  53. function applyFilters() { let visible = 0; const totals = { '国家级': 0, '省级': 0, '市级': 0, '县级': 0 }; cards.forEach(function (card) { const matches = Object.keys(selections).every(function (key) { return selections[key] === '全部' || card.dataset[key] === selections[key]; }); card.classList.toggle('hidden', !matches); if (matches) { visible += 1; totals[card.dataset.level] += 1; } }); Object.keys(levelCounts).forEach(function (level) { levelCounts[level].innerHTML = totals[level] + '<span class="ml-1 text-sm font-normal">项</span>'; }); emptyState.classList.toggle('hidden', visible !== 0); closeDetail(); }
  54. chips.forEach(function (chip) { chip.addEventListener('click', function () { const group = chip.parentElement.dataset.filterGroup; selections[group] = chip.dataset.value; chip.parentElement.querySelectorAll('.filter-chip').forEach(function (item) { item.className = 'filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]'; }); chip.className = 'filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white'; applyFilters(); }); });
  55. document.getElementById('reset-filter').addEventListener('click', function () { Object.keys(selections).forEach(function (key) { selections[key] = '全部'; }); document.querySelectorAll('[data-filter-group]').forEach(function (group) { group.querySelectorAll('.filter-chip').forEach(function (chip, index) { chip.className = index === 0 ? 'filter-chip active border border-[#a30b06] bg-[#a30b06] px-3 py-1.5 text-xs text-white' : 'filter-chip border border-[#e5c9aa] bg-[#fffaf2] px-3 py-1.5 text-xs hover:border-[#b9532d]'; }); }); applyFilters(); });
  56. cards.forEach(function (card) { card.addEventListener('click', function () { const thumbnail = card.querySelector('img'); document.getElementById('detail-title').textContent = card.querySelector('h3').textContent; document.getElementById('detail-category').textContent = card.dataset.category; document.getElementById('detail-level').textContent = card.dataset.level; document.getElementById('detail-batch').textContent = card.dataset.batch; document.getElementById('detail-district').textContent = card.dataset.district; document.getElementById('detail-image').src = thumbnail.src; document.getElementById('detail-image').alt = thumbnail.alt; document.getElementById('detail-image-icon').setAttribute('icon', card.querySelector('iconify-icon').getAttribute('icon')); document.getElementById('detail-description').textContent = card.querySelector('p').textContent + ' 本项目档案为页面原型展示,已建立分类、级别、批次与区县等基础检索维度。'; detailModal.classList.remove('hidden'); detailModal.classList.add('flex'); detailModal.setAttribute('aria-hidden', 'false'); document.getElementById('close-detail').focus(); }); });
  57. document.querySelectorAll('[data-gallery-item]').forEach(function (item) { item.addEventListener('click', function () { const captions = ['项目主影像展示', '活动记录为原型视觉占位', '技艺细节为原型视觉占位']; document.getElementById('gallery-caption').textContent = captions[item.dataset.galleryItem]; }); });
  58. document.getElementById('media-play').addEventListener('click', function () { const status = document.getElementById('media-status'); const isPlaying = status.textContent === '原型片段播放中'; status.textContent = isPlaying ? '点击播放原型片段' : '原型片段播放中'; this.querySelector('iconify-icon').setAttribute('icon', isPlaying ? 'solar:play-circle-linear' : 'solar:pause-circle-linear'); });
  59. document.getElementById('close-detail').addEventListener('click', closeDetail);
  60. detailModal.addEventListener('click', function (event) { if (event.target === detailModal) { closeDetail(); } });
  61. document.addEventListener('keydown', function (event) { if (event.key === 'Escape') { closeDetail(); } });
  62. </script>
  63. </body></html>