minnan-zhangzhou-admin/refer/heritage-experience.html

<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>传承体验｜漳州文化生态保护区数字驾驶舱</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
    @keyframes pulseDot { 0%,100% { transform:scale(1); opacity:.7 } 50% { transform:scale(1.65); opacity:1 } }
    .pulse-dot { animation:pulseDot 1.8s infinite ease-in-out; }
    :root { --gold:#e5bd72; --sand:#f5e5bd; --brick:#b64d3c; }
    body { background:#2d1a1b !important; color:var(--sand); }
    main { background:linear-gradient(135deg,#2d1a1b 0%,#452224 48%,#5a2b27 100%) !important; background-image:radial-gradient(circle at 52% 24%,rgba(190,78,55,.25),transparent 35%),linear-gradient(90deg,rgba(229,189,114,.07) 1px,transparent 1px),linear-gradient(0deg,rgba(229,189,114,.055) 1px,transparent 1px),repeating-linear-gradient(0deg,rgba(255,231,190,.03) 0 1px,transparent 1px 9px) !important; background-size:auto,42px 42px,42px 42px,100% 10px !important; }
    header { background:rgba(48,25,27,.84) !important; border-color:rgba(229,189,114,.7) !important; box-shadow:0 12px 32px rgba(18,8,9,.38),inset 0 -1px rgba(245,213,149,.22),0 0 30px rgba(182,77,60,.12) !important; backdrop-filter:blur(14px); }
    nav a { border-radius:4px; border:1px solid transparent; }
    nav a:hover, nav a.border-\[\#d3ae65\] { background:rgba(182,77,60,.82); border-color:rgba(229,189,114,.9); box-shadow:0 0 16px rgba(182,77,60,.2); }
    article, section.border, aside.border { border-color:rgba(207,139,101,.56) !important; background:rgba(61,33,33,.7) !important; box-shadow:inset 0 0 28px rgba(194,77,54,.13),0 10px 24px rgba(18,8,9,.14),0 0 18px rgba(182,77,60,.06); backdrop-filter:blur(10px); }
    article > div, section > div { border-color:rgba(207,139,101,.4) !important; }
    button { border-color:rgba(207,139,101,.62) !important; }
    button:hover { border-color:var(--gold) !important; box-shadow:0 0 14px rgba(229,189,114,.16); }
  </style>
</head>
<body class="m-0 min-w-[1180px] overflow-x-hidden bg-[#24100f] font-serif text-[#f7edcd] is-mb-ai-setting">
<main class="relative min-h-screen overflow-hidden bg-[#24100f]" style="background-image:radial-gradient(circle at 50% 22%, rgba(137,47,35,.36), transparent 34%), linear-gradient(90deg, rgba(191,143,70,.05) 1px, transparent 1px), linear-gradient(0deg, rgba(191,143,70,.04) 1px, transparent 1px); background-size:auto, 42px 42px, 42px 42px;">
<div class="pointer-events-none absolute inset-0 opacity-20" style="background-image:repeating-linear-gradient(135deg, transparent 0 22px, rgba(207,159,79,.18) 23px 24px, transparent 25px 47px);"></div>
<div class="relative z-10 flex min-h-screen flex-col px-5 pb-4">
<header class="relative -mx-5 flex min-h-[112px] w-[calc(100%+2.5rem)] shrink-0 items-center gap-8 overflow-hidden border-b border-[#c69b51]/70 bg-gradient-to-r from-[#2b1115] via-[#4b1d20] to-[#321317] px-7 py-4 shadow-[0_5px_22px_rgba(18,7,9,.35)] backdrop-blur-sm">
<div class="pointer-events-none absolute inset-x-7 bottom-0 h-px bg-gradient-to-r from-transparent via-[#e0b86d]/80 to-transparent"></div>
<div class="pointer-events-none absolute right-8 top-2 h-16 w-40 opacity-25" style="background-image:radial-gradient(circle, rgba(224,184,109,.55) 1px, transparent 1px); background-size:14px 14px;"></div>
<div class="flex min-w-0 flex-1 items-center gap-5"><div class="min-w-0 order-1"><div class="flex items-center gap-5"><div class="truncate text-[24px] font-bold tracking-[.18em] text-[#ead6a6] [text-shadow:0_0_10px_rgba(225,194,125,.16)]">闽南文化（漳州）生态保护区</div><a aria-label="闽南文化主页" class="hidden" href="home.html"><svg aria-hidden="true" class="h-14 w-16" fill="none" viewbox="0 0 80 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 39C19 36 30 30 40 18C49 29 60 34 72 38" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"></path><path d="M13 42V51M67 40V49M18 37C27 34 35 27 40 20C47 28 54 33 64 37" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path><path d="M7 55C22 45 34 49 46 54C57 59 67 56 73 48C77 43 76 37 71 35C66 33 62 37 63 41C64 44 67 45 69 43" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path><path d="M48 30V45" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"></path><path d="M39 27H44V32H39Z" fill="#9f4026" stroke="#9f4026" stroke-linejoin="round"></path><path d="M19 37V43" stroke="#9f4026" stroke-linecap="round" stroke-width="1.8"></path></svg></a></div><div class="mt-1 text-xs tracking-[.32em] text-[#c9ac76]">数字驾驶舱 · 守护一城古韵</div></div></div>
<nav class="relative z-10 flex shrink-0 items-center justify-end gap-5 text-base text-[#d8c18d]"><a aria-label="首页" class="grid h-9 w-9 place-items-center rounded text-[#f2c66f] transition hover:bg-[#b64d3c]" href="home.html"><svg aria-hidden="true" class="h-7 w-8" fill="none" viewbox="0 0 80 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 39C19 36 30 30 40 18C49 29 60 34 72 38" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"></path><path d="M13 42V51M67 40V49M18 37C27 34 35 27 40 20C47 28 54 33 64 37" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path><path d="M7 55C22 45 34 49 46 54C57 59 67 56 73 48C77 43 76 37 71 35C66 33 62 37 63 41C64 44 67 45 69 43" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path><path d="M48 30V45" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"></path><path d="M39 27H44V32H39Z" fill="#9f4026" stroke="#9f4026" stroke-linejoin="round"></path><path d="M19 37V43" stroke="#9f4026" stroke-linecap="round" stroke-width="1.8"></path></svg></a><a class="border-b border-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="protection-overview.html">保护概况</a><a class="border-b border-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="culture-resources.html">文化资源</a><a class="border-b border-[#d3ae65] px-3 py-3 text-[#f0d9a0]" href="heritage-experience.html">传承体验</a><a class="border-b border-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="culture-tourism.html">文旅融合</a><a class="border-b border-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="public-communication.html">公众传播</a><a class="border-b border-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="digital-archives.html">数字档案</a></nav></header>
<section class="mt-5 flex items-end justify-between">
<div><h1 class="mt-2 text-[30px] font-bold tracking-[.16em] text-[#fff0bd]">传承体验</h1></div>
<div class="flex gap-2 pb-1 text-xs"><button class="view-tab rounded-sm border border-[#d1734e] bg-[#84352d] px-4 py-2 text-[#ffe1a0]" data-view="activity">活动总览</button><button class="view-tab rounded-sm border border-[#79503c] bg-[#351817]/80 px-4 py-2 text-[#d6b49a]" data-view="school">校园传承</button></div>
</section>
<section class="mt-5 grid grid-cols-12 gap-4">
<article class="col-span-4 border border-[#7f4034] bg-[#351817]/80 p-5 shadow-[inset_0_0_22px_rgba(194,77,54,.12)]">
<div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div class=""><h2 class="mt-1 text-xl font-bold text-[#f5df9e]">传承活动</h2></div><span class="grid h-10 w-10 place-items-center rounded-sm border border-[#af7445] bg-[#5d3028] text-[#f1cf85]"><iconify-icon icon="solar:calendar-mark-linear" width="23"></iconify-icon></span></div>
<div class="mt-5 grid grid-cols-3 gap-2"><div class="border-l-2 border-[#d66b4d] bg-[#2b1514]/70 p-3"><p class="text-[11px] text-[#c6a18c]">年度课堂</p><p class="mt-1 text-xl font-bold text-[#fae8b1]">126<span class="ml-1 text-[10px] font-normal">场</span></p></div><div class="border-l-2 border-[#d9b257] bg-[#2b1514]/70 p-3"><p class="text-[11px] text-[#c6a18c]">参与人次</p><p class="mt-1 text-xl font-bold text-[#fae8b1]">2.86<span class="ml-1 text-[10px] font-normal">万</span></p></div><div class="border-l-2 border-[#c8724e] bg-[#2b1514]/70 p-3"><p class="text-[11px] text-[#c6a18c]">活动类型</p><p class="mt-1 text-xl font-bold text-[#fae8b1]">8<span class="ml-1 text-[10px] font-normal">类</span></p></div></div>
<div class="mt-5 border-t border-[#7f4034]/60 pt-4 text-xs text-[#c9a58c]"><div class="flex justify-between"><span>全年传承计划完成度</span><b class="text-[#f0cf80]">82%</b></div><div class="mt-2 h-1.5 overflow-hidden rounded-full bg-[#5b2925]"><div class="h-full w-[82%] rounded-full bg-gradient-to-r from-[#b94d3a] to-[#e1b65b]"></div></div><p class="mt-3 leading-5 text-[#b99380]">涵盖南音、木偶、剪瓷雕、水仙花雕刻、闽南方言、传统礼俗等体验主题。</p></div>
</article>
<article class="col-span-8 border border-[#7f4034] bg-[#351817]/80 p-5 shadow-[inset_0_0_22px_rgba(194,77,54,.12)]">
<div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div><h2 class="mt-1 text-xl font-bold text-[#f5df9e]">近期活动与体验动态</h2></div><span class="flex items-center gap-1 text-xs text-[#e1ad62]"><i class="pulse-dot h-2 w-2 rounded-full bg-[#e4674d]"></i>持续开展</span></div>
<div class="mt-4 grid grid-cols-3 gap-3 text-xs" id="activity-list">
<article class="border border-[#704033] bg-[#2b1514]/80 p-3"><button aria-label="查看南音雅集活动影像" class="group relative block h-20 w-full overflow-hidden border border-[#8b5a3c] bg-[#6d4d2b] text-left" title="查看活动影像" type="button"><img alt="Nanyin ensemble performing in Zhangzhou ancient city" class="h-full w-full object-cover opacity-70 transition duration-300 group-hover:scale-105 group-hover:opacity-90" src="https://modao.cc/agent-py/media/generated_images/2026-08-12/cf0865496cf34ff382bd300742f622ac.jpg"/><span class="absolute inset-0 grid place-items-center bg-[#351817]/0 text-[#fff0bd] opacity-0 transition group-hover:bg-[#351817]/55 group-hover:opacity-100"><iconify-icon icon="solar:eye-linear" width="20"></iconify-icon></span><span class="absolute bottom-1 left-1 rounded bg-[#54351f]/90 px-1.5 py-0.5 text-[9px] text-[#f7dea2]">活动影像</span></button><div class="mt-3 flex items-start justify-between"><span class="rounded bg-[#71362e] px-2 py-1 text-[10px] text-[#f0b28a]">08.16 周日</span><iconify-icon class="text-[#e9b96a]" icon="solar:music-note-2-linear" width="21"></iconify-icon></div><h3 class="mt-3 font-bold text-[#f6dfa8]">南音雅集·听见古城</h3><p class="mt-1 leading-5 text-[#b99380]">漳州古城南音传习所 · 15:00</p><p class="mt-3 border-t border-[#704033] pt-2 text-[#d5a170]">传习师现场讲解曲牌与演奏技法</p></article>
<article class="border border-[#704033] bg-[#2b1514]/80 p-3"><button aria-label="查看剪瓷雕工作坊影像" class="group relative block h-20 w-full overflow-hidden border border-[#8b5a3c] bg-[#65352a] text-left" title="查看活动影像" type="button"><img alt="Traditional ceramic shard carving workshop in Minnan" class="h-full w-full object-cover opacity-70 transition duration-300 group-hover:scale-105 group-hover:opacity-90" src="https://modao.cc/agent-py/media/generated_images/2026-08-12/246e605a50344cacad22c6658c218d26.jpg"/><span class="absolute inset-0 grid place-items-center bg-[#351817]/0 text-[#fff0bd] opacity-0 transition group-hover:bg-[#351817]/55 group-hover:opacity-100"><iconify-icon icon="solar:eye-linear" width="20"></iconify-icon></span><span class="absolute bottom-1 left-1 rounded bg-[#54351f]/90 px-1.5 py-0.5 text-[9px] text-[#f7dea2]">工艺细节</span></button><div class="mt-3 flex items-start justify-between"><span class="rounded bg-[#66502c] px-2 py-1 text-[10px] text-[#f0d37d]">08.19 周三</span><iconify-icon class="text-[#e9b96a]" icon="solar:palette-round-linear" width="21"></iconify-icon></div><h3 class="mt-3 font-bold text-[#f6dfa8]">剪瓷雕纹样工作坊</h3><p class="mt-1 leading-5 text-[#b99380]">龙海月港古厝 · 09:30</p><p class="mt-3 border-t border-[#704033] pt-2 text-[#d5a170]">展示闽南屋脊纹样的拼贴工艺</p></article>
<article class="border border-[#704033] bg-[#2b1514]/80 p-3"><button aria-label="查看布袋木偶亲子体验影像" class="group relative block h-20 w-full overflow-hidden border border-[#8b5a3c] bg-[#71362e] text-left" title="查看活动影像" type="button"><img alt="Children experiencing traditional glove puppet performance" class="h-full w-full object-cover opacity-70 transition duration-300 group-hover:scale-105 group-hover:opacity-90" src="https://modao.cc/agent-py/media/generated_images/2026-08-12/7fe1c1b3039b48ec9f5c1e2062b87c8f.jpg"/><span class="absolute inset-0 grid place-items-center bg-[#351817]/0 text-[#fff0bd] opacity-0 transition group-hover:bg-[#351817]/55 group-hover:opacity-100"><iconify-icon icon="solar:eye-linear" width="20"></iconify-icon></span><span class="absolute bottom-1 left-1 rounded bg-[#54351f]/90 px-1.5 py-0.5 text-[9px] text-[#f7dea2]">体验瞬间</span></button><div class="mt-3 flex items-start justify-between"><span class="rounded bg-[#71362e] px-2 py-1 text-[10px] text-[#f0b28a]">08.23 周日</span><iconify-icon class="text-[#e9b96a]" icon="solar:mask-happy-linear" width="21"></iconify-icon></div><h3 class="mt-3 font-bold text-[#f6dfa8]">布袋木偶亲子体验</h3><p class="mt-1 leading-5 text-[#b99380]">芗城非遗展示馆 · 10:00</p><p class="mt-3 border-t border-[#704033] pt-2 text-[#d5a170]">亲子共赏木偶操演与经典剧目</p></article>
</div>
</article>
</section>
<section class="mt-4 grid grid-cols-12 items-stretch gap-4">
<article class="col-span-4 border border-[#7f4034] bg-[#351817]/80 p-4"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div class="flex items-center gap-2"><iconify-icon class="text-[#df925f]" icon="solar:buildings-3-linear" width="20"></iconify-icon><h2 class="font-bold text-[#f5df9e]">非遗进校园成果</h2></div><span class="text-[10px] text-[#d8b45e]">覆盖 52 所学校</span></div><div class="mt-4 grid grid-cols-2 gap-2 text-xs"><div class="border-l-2 border-[#d66b4d] bg-[#2b1514]/65 p-2.5"><b>校本教材 / 通识读本</b><p class="mt-1 leading-5 text-[#b99380]">编印闽南语童谣、非遗知识读本 24 册</p></div><div class="border-l-2 border-[#d9b257] bg-[#2b1514]/65 p-2.5"><b>课程覆盖</b><p class="mt-1 leading-5 text-[#b99380]">南音、传统工艺等 14 门课程落地</p></div><div class="border-l-2 border-[#c8724e] bg-[#2b1514]/65 p-2.5"><b>联合授课</b><p class="mt-1 leading-5 text-[#b99380]">校内教师与传承人联合授课 86 人</p></div><div class="border-l-2 border-[#b87749] bg-[#2b1514]/65 p-2.5"><b>校园实践</b><p class="mt-1 leading-5 text-[#b99380]">学生社团 32 个，年度展演与创作持续入库</p></div></div></article>
<article class="col-span-4 border border-[#7f4034] bg-[#351817]/80 p-4"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div class="flex items-center gap-2"><iconify-icon class="text-[#df925f]" icon="solar:book-2-linear" width="20"></iconify-icon><h2 class="font-bold text-[#f5df9e]">专业教育</h2></div><span class="text-[10px] text-[#d8b45e]">14 门课程</span></div><div class="mt-4 space-y-3 text-xs"><div class="border-l-2 border-[#d9b257] bg-[#2b1514]/65 p-3"><div class="flex items-center justify-between"><b>非遗课程体系</b><span class="text-[#e6a276]">已落地</span></div><p class="mt-1 leading-5 text-[#b99380]">南音、传统工艺等 14 门课程进入校园课堂，形成由基础认知到实践体验的递进式教学。</p></div><div class="border-l-2 border-[#d66b4d] bg-[#2b1514]/65 p-3"><b>校本教材 / 通识读本</b><p class="mt-1 leading-5 text-[#b99380]">编印闽南语童谣、非遗知识读本 24 册，支持教师备课与学生课后研习。</p></div></div></article>
<article class="col-span-4 border border-[#7f4034] bg-[#351817]/80 p-4"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div class="flex items-center gap-2"><iconify-icon class="text-[#df925f]" icon="solar:users-group-rounded-linear" width="20"></iconify-icon><h2 class="font-bold text-[#f5df9e]">师资队伍</h2></div><span class="text-[10px] text-[#d8b45e]">86 人联合授课</span></div><div class="mt-4 space-y-3 text-xs"><div class="flex items-center gap-3 border-b border-[#6a342d]/60 pb-3"><span class="grid h-9 w-9 place-items-center rounded-full border border-[#b87749] bg-[#65352a] text-[#f2d488]"><iconify-icon icon="solar:user-id-linear" width="19"></iconify-icon></span><div class="flex-1"><b>黄文和</b><p class="mt-1 text-[#b99380]">南音研究与传习指导</p></div><span class="text-[#e6a276]">在线</span></div><div class="flex items-center gap-3 border-b border-[#6a342d]/60 pb-3"><span class="grid h-9 w-9 place-items-center rounded-full border border-[#b87749] bg-[#65352a] text-[#f2d488]"><iconify-icon icon="solar:user-id-linear" width="19"></iconify-icon></span><div class="flex-1"><b>林淑贞</b><p class="mt-1 text-[#b99380]">传统工艺保护咨询</p></div><span class="text-[#d9b257]">本周驻点</span></div><div class="flex items-center justify-between border-t border-[#7f4034]/60 pt-3"><span class="text-[#b99380]">传承人与校内教师协作</span><span class="text-[#f0c979]">86 人</span></div></div></article>
</section>
<section class="mt-4 grid grid-cols-1 gap-4" style="opacity: 1;">
<article class="w-full border border-[#7f4034] bg-[#351817]/80 p-5"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div class="flex items-center gap-2"><iconify-icon class="text-[#df925f]" icon="solar:map-point-wave-linear" width="20"></iconify-icon><h2 class="font-bold text-[#f5df9e]">闽南研学路线</h2></div></div><div class="mt-5 grid grid-cols-3 gap-4 text-xs"><div class="border-t-2 border-[#d66b4d] bg-[#2b1514]/65 p-4"><p class="text-[#e6a276]">路线 01</p><h3 class="mt-2 font-bold text-[#f4dfaa]">古城听南音</h3><p class="mt-2 leading-5 text-[#b99380]">文庙 · 南音阁 · 古城街巷口述史</p></div><div class="border-t-2 border-[#d9b257] bg-[#2b1514]/65 p-4"><p class="text-[#e0b967]">路线 02</p><h3 class="mt-2 font-bold text-[#f4dfaa]">匠心观技艺</h3><p class="mt-2 leading-5 text-[#b99380]">剪瓷雕 · 木偶头雕刻 · 工坊手作</p></div><div class="border-t-2 border-[#c8724e] bg-[#2b1514]/65 p-4"><p class="text-[#e6a276]">路线 03</p><h3 class="mt-2 font-bold text-[#f4dfaa]">土楼话乡音</h3><p class="mt-2 leading-5 text-[#b99380]">南靖土楼 · 方言采录 · 民俗体验</p></div></div></article>
</section>
<footer class="mt-4 flex h-7 shrink-0 items-center justify-between border-t border-[#7f4034]/60 text-[10px] text-[#bb8e79]"><span>漳州市文化和旅游局 · 文化遗产保护中心</span><span>数据来源：市级非遗传习与体验活动数据库 · 实时汇聚</span><span id="clock">2026-08-19 16:01:55</span></footer>
</div>
</main>
<script>
  const tabs=document.querySelectorAll('.view-tab');
  tabs.forEach(tab=>tab.addEventListener('click',()=>{tabs.forEach(item=>item.className='view-tab rounded-sm border border-[#79503c] bg-[#351817]/80 px-4 py-2 text-xs text-[#d6b49a]');tab.className='view-tab rounded-sm border border-[#d1734e] bg-[#84352d] px-4 py-2 text-xs text-[#ffe1a0]';}));
  function updateClock(){const d=new Date();document.getElementById('clock').textContent=d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0')+' '+String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0')+':'+String(d.getSeconds()).padStart(2,'0');}updateClock();setInterval(updateClock,1000);
</script>
</body></html>