home.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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>
  9. body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
  10. .brush {
  11. font-family: "STKaiti", "KaiTi", serif;
  12. font-weight: 700;
  13. }
  14. </style>
  15. <style class="huiyi-global">
  16. .huiyi-dialog-parent-no-scroll{
  17. overflow: hidden !important;
  18. }
  19. </style>
  20. </head>
  21. <body ai-translate-id="dkmejdpchbkcihdlengmhifgnigdjmba" ai-translate-oem="lenovo" ai-translate-version="3.0.3" class="m-0 min-w-[1180px] overflow-x-hidden bg-[#fbf8f1] text-[#49352b] is-mb-ai-setting">
  22. <header class="w-full">
  23. <div class="h-[94px] border-b border-[#eadfd1] bg-[radial-gradient(circle_at_96%_38%,#f4e9d9_0,transparent_16%),linear-gradient(90deg,#fffdf9,#f9f1e6)]">
  24. <div class="mx-auto flex h-full w-[1200px] items-center justify-between gap-8">
  25. <a aria-label="漳州闽南文化生态保护区首页" class="flex shrink-0 items-center gap-4 whitespace-nowrap" href="home.html">
  26. <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 -->
  27. <div class="shrink-0 whitespace-nowrap">
  28. <div class="brush whitespace-nowrap text-[27px] font-bold tracking-[0.08em] text-[#8c1109]">闽南文化(漳州)生态保护区</div>
  29. <div class="mt-0.5 whitespace-nowrap text-[8px] tracking-[0.075em] text-[#a17662]">ZHANGZHOU MINNAN CULTURE ECOLOGICAL PROTECTED AREA</div>
  30. </div>
  31. </a>
  32. <nav class="flex h-full shrink-0 flex-nowrap items-end gap-1 whitespace-nowrap pb-5 text-sm font-medium text-[#332d28]">
  33. <a class="shrink-0 rounded-t-sm bg-[#a30805] px-4 py-2.5 text-white" href="home.html">首页</a>
  34. <a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="protected-area-overview.html">保护区概况</a>
  35. <a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="culture-news.html">文化资讯</a>
  36. <a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="heritage.html">保护传承</a>
  37. <a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="cultural-exchange.html">文化交流</a>
  38. <a class="shrink-0 px-4 py-2.5 text-[#a30805] transition hover:text-[#7f0603]" href="cultural-tourism.html">文旅融合</a>
  39. <a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" href="policy.html">政策法规</a>
  40. </nav>
  41. </div>
  42. </div>
  43. </header>
  44. <main>
  45. <section class="relative h-[560px] overflow-hidden bg-cover bg-center bg-[radial-gradient(circle_at_76%_40%,#dcb384_0,transparent_25%),linear-gradient(120deg,#f5dfbd,#d28b5b_52%,#7b2615)]" id="about" style='background-image: url("https://modao.cc/agent-py/media/user_assets/2026-08-13/ef45b35837d4436691c34400f8a531a1.png");'>
  46. <div class="absolute inset-0 bg-gradient-to-r from-[#fff4df]/80 via-[#fff4df]/45 to-[#5e1d0d]/15"></div>
  47. <div class="relative mx-auto w-[1200px] pt-12 pl-2">
  48. <p class="brush whitespace-nowrap text-[58px] leading-none tracking-[0.03em] text-[#71180d]">乐享非遗 开漳大吉</p>
  49. <p class="mt-2.5 w-[555px] text-[15px] font-medium leading-7 text-[#4a3429]">漳州闽南文化生态保护区以闽南文化为根脉<br/>保护传承、活化利用、创新发展,留住乡愁记忆,赓续文化基因。</p>
  50. <div class="mt-5 flex gap-5">
  51. <a class="flex items-center gap-5 rounded-md bg-[#a70b06] px-7 py-3.5 text-sm font-medium text-white shadow-[0_4px_12px_rgba(102,20,7,.25)] transition hover:bg-[#850704]" href="#heritage">走进保护区 <iconify-icon class="text-lg" icon="solar:arrow-right-linear"></iconify-icon></a>
  52. <a class="flex items-center gap-4 rounded-md border-2 border-[#a23c2b] bg-[#fff9ed]/65 px-7 py-[11px] text-sm font-medium text-[#8e2115] shadow-sm transition hover:bg-white" href="protected-area-overview.html">查看文化地图 <iconify-icon class="text-lg" icon="solar:map-point-linear"></iconify-icon></a>
  53. </div>
  54. </div>
  55. <div class="absolute inset-x-0 bottom-5 mx-auto w-[1140px] overflow-hidden rounded-[18px] border border-[#f8e7c9]/85 bg-[#fff8e9]/58 px-4 pt-4 pb-5 shadow-[0_14px_30px_rgba(71,26,13,.27)] backdrop-blur-[2px]">
  56. <div class="absolute inset-0 bg-[radial-gradient(circle_at_14%_25%,rgba(255,240,195,.82)_0,transparent_20%),radial-gradient(circle_at_88%_35%,rgba(136,35,18,.44)_0,transparent_25%),repeating-linear-gradient(90deg,rgba(129,39,21,.18)_0,rgba(129,39,21,.18)_2px,transparent_2px,transparent_32px),repeating-linear-gradient(0deg,rgba(129,39,21,.12)_0,rgba(129,39,21,.12)_2px,transparent_2px,transparent_16px)]"></div>
  57. <div aria-hidden="true" class="absolute -bottom-5 right-8 flex items-end gap-1.5 text-[#74190e]/30"><iconify-icon class="text-[92px]" icon="solar:palace-linear"></iconify-icon><iconify-icon class="text-[72px]" icon="solar:home-2-linear"></iconify-icon><iconify-icon class="text-[105px]" icon="solar:palace-linear"></iconify-icon><iconify-icon class="text-[64px]" icon="solar:home-2-linear"></iconify-icon></div>
  58. <div class="relative flex items-center justify-between">
  59. <button aria-label="上一张文化主题" class="flex h-9 w-9 items-center justify-center rounded-full border border-white/80 bg-[#9e1a0d]/90 text-white shadow-md transition hover:bg-[#ba2616]" id="prev-slide"><iconify-icon icon="solar:alt-arrow-left-linear"></iconify-icon></button>
  60. <div class="flex w-[970px] gap-3 overflow-hidden rounded-md bg-[#fff9ee]/36 p-1" id="carousel">
  61. <article aria-current="true" class="w-[180px] flex-none rounded-[3px] border-[3px] border-[#b11d12] bg-[#fffaf2] p-1 shadow-[0_3px_10px_rgba(30,15,10,.45)]">
  62. <div class="relative h-[72px] overflow-hidden bg-[#874120]"><img alt="Warm Zhangzhou ancient street with red brick houses, swallowtail roofs, painted eaves and red lanterns" class="h-full w-full object-cover" fetchpriority="high" src="https://modao.cc/agent-py/media/user_assets/2026-08-19/47de11ea3a714af0927ab9f5c589ce1a.png"/></div>
  63. <p class="py-1 text-center text-xs font-bold text-[#9f1d12]">漳州古城</p>
  64. </article>
  65. <article class="w-[180px] flex-none rounded-[3px] border-[3px] border-white bg-[#fffaf2] p-1 shadow-[0_3px_10px_rgba(30,15,10,.45)]">
  66. <div class="relative h-[72px] overflow-hidden bg-[#4b251b]"><img alt="Nanyin traditional music performance" class="h-full w-full object-cover" src="https://modao.cc/agent-py/media/user_assets/2026-08-19/30d073d835f74532b2f3b36e43e5fd2b.png"/></div>
  67. <p class="py-1 text-center text-xs font-bold text-[#7d2619]">南音雅韵</p>
  68. </article>
  69. <article class="w-[180px] flex-none rounded-[3px] border-[3px] border-white bg-[#fffaf2] p-1 shadow-[0_3px_10px_rgba(30,15,10,.45)]">
  70. <div class="relative h-[72px] overflow-hidden bg-[#504c38]"><img alt="Glove puppet theatre figures" class="h-full w-full object-cover" src="https://modao.cc/agent-py/media/user_assets/2026-08-19/cd892a79401e44b2adc85f9c484f3eae.png"/></div>
  71. <p class="py-1 text-center text-xs font-bold text-[#7d2619]">布袋木偶戏</p>
  72. </article>
  73. <article class="w-[180px] flex-none rounded-[3px] border-[3px] border-white bg-[#fffaf2] p-1 shadow-[0_3px_10px_rgba(30,15,10,.45)]">
  74. <div class="relative h-[72px] overflow-hidden bg-[#7c5941]"><img alt="Fujian tulou round houses" class="h-full w-full object-cover" src="https://modao.cc/agent-py/media/user_assets/2026-08-19/8bd1638cbec347a39b6b26a84dbbc509.png"/></div>
  75. <p class="py-1 text-center text-xs font-bold text-[#7d2619]">漳州土楼</p>
  76. </article>
  77. <article class="w-[180px] flex-none rounded-[3px] border-[3px] border-white bg-[#fffaf2] p-1 shadow-[0_3px_10px_rgba(30,15,10,.45)]">
  78. <div class="relative h-[72px] overflow-hidden bg-[#9d3422]"><img alt="Woodblock New Year paintings" class="h-full w-full object-cover" src="https://modao.cc/agent-py/media/user_assets/2026-08-19/262d7c255ee844b796dd5478ea104e84.png"/></div>
  79. <p class="py-1 text-center text-xs font-bold text-[#7d2619]">木版年画</p>
  80. </article>
  81. </div>
  82. <button aria-label="下一张文化主题" class="flex h-9 w-9 items-center justify-center rounded-full border border-white/80 bg-[#9e1a0d]/90 text-white shadow-md transition hover:bg-[#ba2616]" id="next-slide"><iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon></button>
  83. </div>
  84. </div>
  85. <div class="absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2"><span class="h-2.5 w-2.5 rounded-full border border-white/70 bg-[#a30a05]"></span><span class="h-2.5 w-2.5 rounded-full bg-white/75"></span><span class="h-2.5 w-2.5 rounded-full bg-white/75"></span></div>
  86. </section>
  87. <section class="border-y border-[#eee3d4] bg-[linear-gradient(135deg,#fffdf9,#f8f0e4)] py-6" id="heritage">
  88. <div class="mx-auto w-[1200px]">
  89. <h2 class="brush flex items-center justify-center gap-5 text-[25px] font-bold tracking-[0.18em] text-[#81170f]"><span class="h-px w-20 bg-[#d8b488]"></span>文化资源·数据总览<span class="h-px w-20 bg-[#d8b488]"></span></h2>
  90. <div class="mt-5 grid grid-cols-5 gap-4 rounded-lg border border-[#ead6ba] bg-[#f7ead8]/60 p-3 shadow-[0_1px_0_#fffaf1_inset]">
  91. <article class="relative h-[164px] overflow-hidden rounded-md border border-[#d9a971] bg-[#fffaf1] p-5 shadow-[0_0_0_3px_#f5e7d1_inset]">
  92. <div class="text-[17px] font-bold leading-6 text-[#5f3425]">非遗代表性项目</div><div class="mt-2 text-[36px] font-medium leading-none text-[#980c08]">236<span class="ml-1 text-sm text-[#6b4535]">项</span></div>
  93. <div class="absolute inset-x-4 bottom-4 grid grid-cols-3 border-t border-[#dfc39f] bg-[#f2e2ca] py-1 text-center text-[10px]"><span>国家级<br/><b class="text-[#98120b]">18</b> 项</span><span>省级<br/><b class="text-[#98120b]">62</b> 项</span><span>市级<br/><b class="text-[#98120b]">156</b> 项</span></div>
  94. </article>
  95. <article class="relative h-[164px] overflow-hidden rounded-md border border-[#d9a971] bg-[#fffaf1] p-5 shadow-[0_0_0_3px_#f5e7d1_inset]">
  96. <div class="text-[17px] font-bold leading-6 text-[#5f3425]">非遗代表性传承人</div><div class="mt-2 text-[36px] font-medium leading-none text-[#980c08]">328<span class="ml-1 text-sm text-[#6b4535]">人</span></div>
  97. <div class="absolute inset-x-4 bottom-4 grid grid-cols-3 border-t border-[#dfc39f] bg-[#f2e2ca] py-1 text-center text-[10px] text-[#6b4535]"><span>国家级<br/><b class="text-[#98120b]">8</b> 人</span><span>省级<br/><b class="text-[#98120b]">20</b> 人</span><span>市级<br/><b class="text-[#98120b]">300</b> 人</span></div>
  98. </article>
  99. <article class="relative h-[164px] overflow-hidden rounded-md border border-[#d9a971] bg-[#fffaf1] p-5 shadow-[0_0_0_3px_#f5e7d1_inset]">
  100. <div class="text-[17px] font-bold leading-6 text-[#5f3425]">不可移动文物</div><div class="mt-4 text-[36px] font-medium leading-none text-[#980c08]">421<span class="ml-1 text-sm text-[#6b4535]">处</span></div>
  101. </article>
  102. <article class="relative h-[164px] overflow-hidden rounded-md border border-[#d9a971] bg-[#fffaf1] p-5 shadow-[0_0_0_3px_#f5e7d1_inset]">
  103. <div class="text-[17px] font-bold leading-6 text-[#5f3425]">传承所</div><div class="mt-4 text-[36px] font-medium leading-none text-[#980c08]">87<span class="ml-1 text-sm text-[#6b4535]">个</span></div>
  104. </article>
  105. <article class="relative h-[164px] overflow-hidden rounded-md border border-[#d9a971] bg-[#fffaf1] p-5 shadow-[0_0_0_3px_#f5e7d1_inset]">
  106. <div class="text-[17px] font-bold leading-6 text-[#5f3425]">重点保护区域</div><div class="mt-4 text-[36px] font-medium leading-none text-[#980c08]">29<span class="ml-1 text-sm text-[#6b4535]">处</span></div>
  107. </article>
  108. </div>
  109. <p class="mt-2 text-center text-[11px] text-[#8d847d]"><iconify-icon class="align-middle" icon="solar:clock-circle-linear"></iconify-icon>  数据统计截止:2025年5月23日</p>
  110. </div>
  111. </section>
  112. <section class="bg-[linear-gradient(180deg,#fffaf2,#f9f0e4)] py-5" id="feature">
  113. <div class="mx-auto w-[1200px]">
  114. <h2 class="brush flex items-center justify-center gap-5 text-[25px] font-bold tracking-[0.18em] text-[#81170f]"><span class="h-px w-20 bg-[#d8b488]"></span>重点专题·精彩呈现<span class="h-px w-20 bg-[#d8b488]"></span></h2>
  115. <div class="mt-4 grid grid-cols-4 gap-5">
  116. <article class="overflow-hidden rounded border border-[#e8d6bd] bg-[#fffdf9] p-1.5 shadow-sm"><div class="relative h-[132px] overflow-hidden bg-[#5e2e1a]"><img alt="Nanyin heritage performance" class="h-full w-full object-cover opacity-45" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/9a7d24c35be442fa8b8395c8e93302e0.png"/></div><div class="p-2.5"><h3 class="text-lg font-bold text-[#9d1309]">非遗代表性项目展示</h3><p class="mt-1 h-10 text-xs leading-5 text-[#725d50]">南音、布袋木偶戏、木版年画等非遗瑰宝,匠心传承。</p><a class="mt-2 inline-flex items-center gap-2 rounded bg-[#a30b06] px-3 py-1.5 text-xs text-white" href="#heritage">查看更多 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></div></article>
  117. <article class="overflow-hidden rounded border border-[#e8d6bd] bg-[#fffdf9] p-1.5 shadow-sm"><div class="relative h-[132px] overflow-hidden bg-[#242a2b]"><img alt="Digital culture exhibition hall" class="h-full w-full object-cover opacity-35" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/2383568ef60b452ba4468a4e3e07d588.png"/></div><div class="p-2.5"><h3 class="text-lg font-bold text-[#9d1309]">非遗代表性传承人风采</h3><p class="mt-1 h-10 text-xs leading-5 text-[#725d50]">展现非遗代表性传承人的匠人风貌,记录技艺坚守与文化薪传。</p><a class="mt-2 inline-flex items-center gap-2 rounded bg-[#a30b06] px-3 py-1.5 text-xs text-white" href="#feature">查看更多 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></div></article><article class="overflow-hidden rounded border border-[#e8d6bd] bg-[#fffdf9] p-1.5 shadow-sm" style="opacity: 1;"><div class="relative h-[132px] overflow-hidden bg-[#7c5941]"><img alt="Fujian tulou round houses" class="h-full w-full object-cover opacity-45" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/75337f6933384318b69ca427586120d9.png"/></div><div class="p-2.5"><h3 class="text-lg font-bold text-[#9d1309]">文物保护与活化利用</h3><p class="mt-1 h-10 text-xs leading-5 text-[#725d50]">古厝古建、庙宇祠堂、古街古道,文物保护焕新生。</p><a class="mt-2 inline-flex items-center gap-2 rounded bg-[#a30b06] px-3 py-1.5 text-xs text-white" href="#heritage">查看更多 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></div></article>
  118. <article class="overflow-hidden rounded border border-[#e8d6bd] bg-[#fffdf9] p-1.5 shadow-sm"><div class="relative h-[132px] overflow-hidden bg-[#874323]"><img alt="Cultural tourism festival parade" class="h-full w-full object-cover opacity-45" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/b5370ed6815d4631a54816d066dccb54.png"/></div><div class="p-2.5"><h3 class="text-lg font-bold text-[#9d1309]">文旅融合推荐</h3><p class="mt-1 h-10 text-xs leading-5 text-[#725d50]">文化旅游线路、节庆活动推荐,开启闽南文化之旅。</p><a class="mt-2 inline-flex items-center gap-2 rounded bg-[#a30b06] px-3 py-1.5 text-xs text-white" href="#feature">查看更多 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></div></article>
  119. </div>
  120. </div>
  121. </section>
  122. <section class="bg-[#fffdf9] py-5" id="news">
  123. <div class="mx-auto w-[1200px]">
  124. <h2 class="brush flex items-center justify-center gap-5 text-[25px] font-bold tracking-[0.18em] text-[#81170f]"><span class="h-px w-20 bg-[#d8b488]"></span>资讯动态·权威发布<span class="h-px w-20 bg-[#d8b488]"></span></h2>
  125. <div class="mt-4 grid grid-cols-[1fr_1fr_1fr_200px] gap-4">
  126. <article class="rounded border border-[#eadfd2] bg-white p-4 shadow-sm"><div class="flex items-center justify-between border-b border-[#d9a59d] pb-2"><h3 class="font-bold text-[#a11309]">政务要闻</h3><a class="text-[10px] text-[#87766b]" href="#">更多 &gt;</a></div><ul class="mt-2 space-y-2.5 text-[11px] text-[#64564e]"><li class="flex justify-between"><a href="#">漳州闽南文化生态保护区建设工作推进会召开</a><span>05-22</span></li><li class="flex justify-between"><a href="#">我市非遗保护工作再获表彰</a><span>05-20</span></li><li class="flex justify-between"><a href="#">漳州古城保护修缮项目正式启动</a><span>05-19</span></li><li class="flex justify-between"><a href="#">闽南文化遗产系列活动走进漳州高校</a><span>05-18</span></li><li class="flex justify-between"><a href="#">漳州泉州遗址展示展览交流会召开</a><span>05-17</span></li><li class="flex justify-between"><a href="#">市领导调研非遗传承与保护工作</a><span>05-16</span></li></ul></article>
  127. <article class="rounded border border-[#eadfd2] bg-white p-4 shadow-sm"><div class="flex items-center justify-between border-b border-[#d9a59d] pb-2"><h3 class="font-bold text-[#a11309]">通知公告</h3><a class="text-[10px] text-[#87766b]" href="#">更多 &gt;</a></div><ul class="mt-2 space-y-2.5 text-[11px] text-[#64564e]"><li class="flex justify-between"><a href="#">关于开展闽南文化生态保护区项目申报的通知</a><span>05-21</span></li><li class="flex justify-between"><a href="#">漳州闽南文化生态保护区评估人选公示</a><span>05-20</span></li><li class="flex justify-between"><a href="#">国家级名录文物保护单位安全检查通告</a><span>05-19</span></li><li class="flex justify-between"><a href="#">关于征集闽南文化影像资料的公告</a><span>05-18</span></li><li class="flex justify-between"><a href="#">漳州自遗址保护处理情况公示</a><span>05-17</span></li><li class="flex justify-between"><a href="#">保护区建设资金使用情况公开</a><span>05-16</span></li></ul></article>
  128. <article class="rounded border border-[#eadfd2] bg-white p-4 shadow-sm"><div class="flex items-center justify-between border-b border-[#d9a59d] pb-2"><h3 class="font-bold text-[#a11309]">文化资讯</h3><a class="text-[10px] text-[#87766b] transition hover:text-[#a11309]" href="culture-news.html">更多 &gt;</a></div><ul class="mt-2 space-y-1.5"><li><a class="group block rounded border border-transparent px-2 py-1.5 transition hover:border-[#e4c4a1] hover:bg-[#fff7eb]" href="culture-news.html"><div class="flex items-center justify-between gap-2"><span class="rounded bg-[#f9e7d0] px-1.5 py-0.5 text-[9px] font-bold text-[#a11309]">专题</span><time class="text-[10px] text-[#9a887d]">示例日期 06-18</time></div><h4 class="mt-1 text-[11px] font-bold text-[#65483b] transition group-hover:text-[#a11309]">古厝守护:传统营造技艺的社区传承</h4><p class="mt-0.5 text-[10px] leading-4 text-[#8b786d]">以修缮故事为线索,呈现传统工艺与当代保护理念的相互呼应。</p></a></li><li><a class="group block rounded border border-transparent px-2 py-1.5 transition hover:border-[#e4c4a1] hover:bg-[#fff7eb]" href="culture-news.html"><div class="flex items-center justify-between gap-2"><span class="rounded bg-[#f9e7d0] px-1.5 py-0.5 text-[9px] font-bold text-[#a11309]">非遗</span><time class="text-[10px] text-[#9a887d]">示例日期 06-12</time></div><h4 class="mt-1 text-[11px] font-bold text-[#65483b] transition group-hover:text-[#a11309]">南音新声:一场面向青少年的体验课</h4><p class="mt-0.5 text-[10px] leading-4 text-[#8b786d]">从曲牌赏析到乐器体验,感受千年雅乐的活态传承。</p></a></li><li><a class="group block rounded border border-transparent px-2 py-1.5 transition hover:border-[#e4c4a1] hover:bg-[#fff7eb]" href="culture-news.html"><div class="flex items-center justify-between gap-2"><span class="rounded bg-[#f9e7d0] px-1.5 py-0.5 text-[9px] font-bold text-[#a11309]">数字保护</span><time class="text-[10px] text-[#9a887d]">示例日期 06-06</time></div><h4 class="mt-1 text-[11px] font-bold text-[#65483b] transition group-hover:text-[#a11309]">方言记忆采集:让乡音留在数字档案中</h4><p class="mt-0.5 text-[10px] leading-4 text-[#8b786d]">记录日常口述与地方词汇,为闽南文化资料库补充鲜活声音。</p></a></li><li><a class="group block rounded border border-transparent px-2 py-1.5 transition hover:border-[#e4c4a1] hover:bg-[#fff7eb]" href="culture-news.html"><div class="flex items-center justify-between gap-2"><span class="rounded bg-[#f9e7d0] px-1.5 py-0.5 text-[9px] font-bold text-[#a11309]">民俗</span><time class="text-[10px] text-[#9a887d]">示例日期 05-30</time></div><h4 class="mt-1 text-[11px] font-bold text-[#65483b] transition group-hover:text-[#a11309]">节俗里的家风:闽南传统礼俗微展</h4><p class="mt-0.5 text-[10px] leading-4 text-[#8b786d]">通过器物、图文与口述片段,认识民俗背后的生活智慧。</p></a></li></ul></article>
  129. <aside class="rounded border border-[#dcb889] bg-[#fffaf1] p-3 shadow-sm" id="activities"><div class="flex items-center justify-between border-b border-[#d9a59d] pb-2"><h3 class="font-bold text-[#614435]">近期活动预告</h3><a class="text-[10px] text-[#87766b]" href="#">更多 &gt;</a></div><div class="mt-2 space-y-3"><div class="flex gap-2"><div class="flex h-11 w-10 flex-col items-center justify-center rounded bg-[#a5160a] text-white"><b class="text-lg leading-4">25</b><span class="text-[9px]">05月</span></div><p class="text-[11px] leading-4"><b>南音雅集展演活动</b><br/><span class="text-[#88776c]">时间:05.25 14:30<br/>地点:漳州古城南门广场</span></p></div><div class="flex gap-2"><div class="flex h-11 w-10 flex-col items-center justify-center rounded bg-[#a5160a] text-white"><b class="text-lg leading-4">31</b><span class="text-[9px]">05月</span></div><p class="text-[11px] leading-4"><b>闽南古厝开放日</b><br/><span class="text-[#88776c]">时间:05.31 09:00<br/>地点:漳州市金峰文古厝</span></p></div><div class="flex gap-2"><div class="flex h-11 w-10 flex-col items-center justify-center rounded bg-[#a5160a] text-white"><b class="text-lg leading-4">08</b><span class="text-[9px]">06月</span></div><p class="text-[11px] leading-4"><b>非遗购物节</b><br/><span class="text-[#88776c]">时间:06.08 10:00<br/>地点:漳州文庙广场</span></p></div></div></aside>
  130. </div>
  131. </div>
  132. </section>
  133. <section class="border-t border-[#eadfce] bg-[#fffaf2] py-4" id="links">
  134. <div class="mx-auto w-[1200px]"><h2 class="brush mb-3 flex items-center justify-center gap-5 text-[23px] font-bold tracking-[0.18em] text-[#81170f]"><span class="h-px w-20 bg-[#d8b488]"></span>相关链接<span class="h-px w-20 bg-[#d8b488]"></span></h2><div class="flex items-stretch gap-3"><a class="flex h-[54px] shrink-0 items-center gap-3 whitespace-nowrap border-2 border-[#f05252] bg-[linear-gradient(135deg,#ffffff,#dce7ee)] px-3 text-sm font-bold text-[#111111]" href="#"><span class="shrink-0 rounded-full bg-[#d21b12] p-1 text-white"><iconify-icon icon="solar:shield-check-linear"></iconify-icon></span><span class="whitespace-nowrap">中华人民共和国文化和旅游部</span></a><a class="flex h-[54px] shrink-0 items-center gap-3 whitespace-nowrap bg-[linear-gradient(135deg,#ffffff,#dce7ee)] px-3 text-sm font-bold text-[#111111]" href="#"><iconify-icon class="shrink-0 text-2xl text-[#d21b12]" icon="solar:buildings-3-linear"></iconify-icon><span class="whitespace-nowrap">福建省文化和旅游厅</span></a><a class="flex h-[54px] shrink-0 items-center gap-3 whitespace-nowrap bg-[linear-gradient(135deg,#ffffff,#dce7ee)] px-3 text-sm font-bold text-[#111111]" href="#"><iconify-icon class="shrink-0 text-2xl text-[#d21b12]" icon="solar:buildings-2-linear"></iconify-icon><span class="whitespace-nowrap">漳州市人民政府</span></a><a class="flex h-[54px] shrink-0 items-center gap-3 whitespace-nowrap bg-[linear-gradient(135deg,#ffffff,#dce7ee)] px-3 text-sm font-bold text-[#111111]" href="#"><iconify-icon class="shrink-0 text-2xl text-[#d21b12]" icon="solar:medal-ribbons-star-linear"></iconify-icon><span class="whitespace-nowrap">中国非物质文化遗产网</span></a><a class="flex h-[54px] shrink-0 items-center gap-3 whitespace-nowrap bg-[linear-gradient(135deg,#ffffff,#dce7ee)] px-3 text-sm font-bold text-[#111111]" href="#"><iconify-icon class="shrink-0 text-2xl text-[#d21b12]" icon="solar:gallery-wide-linear"></iconify-icon><span class="whitespace-nowrap">福建非遗数字博物馆</span></a></div></div>
  135. </section>
  136. </main>
  137. <footer class="relative overflow-hidden bg-[#8f0805] text-white">
  138. <div class="absolute -bottom-20 left-5 h-52 w-52 rounded-full border-[22px] border-[#c55b2d]/45"></div>
  139. <div class="relative mx-auto flex min-h-[170px] w-[1200px] items-center justify-between py-5">
  140. <div class="flex items-center gap-4"><div><div class="brush text-xl font-bold tracking-wider">漳州闽南文化生态保护区</div><div class="mt-1 text-[9px] tracking-wider text-[#f2c995]">ZHANGZHOU MINNAN CULTURE<br/>ECOLOGICAL PROTECTED AREA</div><div class="mt-2 flex gap-3"><div class="h-12 w-12 bg-white p-1"><div class="h-full w-full bg-[repeating-linear-gradient(45deg,#333_0,#333_2px,#fff_2px,#fff_4px)]"></div></div><div class="h-12 w-12 bg-white p-1"><div class="h-full w-full bg-[repeating-linear-gradient(-45deg,#333_0,#333_2px,#fff_2px,#fff_4px)]"></div></div></div></div></div>
  141. <div class="border-l border-white/25 pl-8 text-xs leading-6 text-[#f9ddd0]"><p>主办单位:漳州市文化和旅游局(漳州市文物局)</p><p>承办单位:漳州闽南文化生态保护区管理中心</p><p>联系电话:0596-2023456</p><p>联系地址:福建省漳州市芗城区胜利西路118号</p><p>网站标识码:3506000032 闽ICP备05012345号-1</p></div>
  142. <div class="text-right text-xs leading-7 text-[#f9ddd0]"><p><a href="#">网站声明</a>  |  <a href="#">联系我们</a>  |  <a href="#">诚聘英才</a></p><p><a href="#">网站使用帮助</a>  |  <a href="#">意见建议</a></p><div class="mt-2 flex justify-end gap-3"><span class="border border-white/50 px-3 py-1 text-sm">政务网站<br/>找错</span><span class="border border-[#f5d276] px-3 py-2 text-[#f5d276]">闽</span></div></div>
  143. </div>
  144. </footer>
  145. <script>
  146. const carousel = document.getElementById('carousel');
  147. document.getElementById('prev-slide').addEventListener('click', () => carousel.scrollBy({ left: -195, behavior: 'smooth' }));
  148. document.getElementById('next-slide').addEventListener('click', () => carousel.scrollBy({ left: 195, behavior: 'smooth' }));
  149. const heroSection = document.getElementById('about');
  150. const heroImageUpload = document.getElementById('hero-image-upload');
  151. let heroImageUrl = '';
  152. heroImageUpload.addEventListener('change', (event) => {
  153. const [file] = event.target.files;
  154. if (!file) return;
  155. if (heroImageUrl) URL.revokeObjectURL(heroImageUrl);
  156. heroImageUrl = URL.createObjectURL(file);
  157. heroSection.style.backgroundImage = `url("${heroImageUrl}")`;
  158. });
  159. </script>
  160. <script id="removeChildPatch" src="chrome-extension://dkmejdpchbkcihdlengmhifgnigdjmba/removeChildPatch.js"></script><div class="ai-translate-widget" id="ai-translate-content-root"></div></body></html>