Startseite Erkunden Hilfe
Anmelden
imengyu
/
minnan-zhangzhou-website
Beobachten 1
Favorit hinzufügen 0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Branch: master
Branches Tags
minnan-zhang...
/
refer
/
culture-news.html

culture-news.html 15 KB
Permalink Verlauf Originalformat

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 
  1. <!DOCTYPE html>
    2. 

  2. 

  3. <html class="scroll-smooth" lang="zh-CN"><head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    6. 

  6. <title>文化资讯｜漳州闽南文化生态保护区</title>
    7. 

  7. <script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
    8. 

  8. <script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
    9. 

  9. <style>
    10. 

  10.   body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
    11. 

  11.   .brush { font-family: "STKaiti", "KaiTi", serif; font-weight: 700; }
    12. 

  12. </style>
    13. 

  13. </head>
    14. 

  14. <body class="m-0 min-w-[1180px] overflow-x-hidden bg-[#fbf8f1] text-[#49352b] is-mb-ai-setting">
    15. 

  15. <header class="w-full">
    16. 

  16. <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"><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><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 aria-current="page" class="shrink-0 rounded-t-sm bg-[#a30805] px-4 py-2.5 text-white" href="culture-news.html">文化资讯</a><a class="shrink-0 px-4 py-2.5 transition hover:text-[#a30805]" 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></div></div>
    17. 

  17. </header>
    18. 

  18. <main>
    19. 

  19. <section class="relative isolate h-[330px] overflow-hidden border-b border-[#cf9e71] bg-[#7b2116] py-10"><img alt="Minnan cultural heritage performance background" class="absolute inset-0 h-full w-full object-cover opacity-65 saturate-[.82]" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/6a308507343b4c52b8683a73e598cea3.png"/><div class="relative mx-auto flex h-full w-[1200px] items-center"><div class="ml-3 mt-4 flex items-end justify-between"><div class="border-l-4 border-[#f4d28b] pl-5"><h1 class="brush text-[42px] tracking-[0.16em] text-[#fff9e9] drop-shadow-[0_2px_2px_rgba(0,0,0,.55)]">文化资讯</h1><p class="mt-3 text-sm leading-6 text-[#fff2da] drop-shadow-[0_1px_1px_rgba(0,0,0,.45)]">以原型示例呈现保护传承、非遗体验与文化交流的动态内容。</p></div></div></div></section>
    20. 

  20. <section class="py-8"><div class="mx-auto w-[1200px]"><div class="rounded border border-[#ead8c4] bg-[#fffdf9] p-5 shadow-sm"><div class="flex items-center gap-5"><span class="font-bold text-[#81170f]">资讯分类</span><div class="flex flex-wrap gap-3" id="filters"><button class="rounded border border-[#a30b06] bg-[#a30b06] px-5 py-2 text-sm text-white" data-filter="all">全部</button><button class="rounded border border-[#e1c7ae] bg-[#fffaf2] px-5 py-2 text-sm text-[#725b4d] transition hover:border-[#a30b06] hover:text-[#a30b06]" data-filter="专题">专题</button><button class="rounded border border-[#e1c7ae] bg-[#fffaf2] px-5 py-2 text-sm text-[#725b4d] transition hover:border-[#a30b06] hover:text-[#a30b06]" data-filter="非遗">非遗</button><button class="rounded border border-[#e1c7ae] bg-[#fffaf2] px-5 py-2 text-sm text-[#725b4d] transition hover:border-[#a30b06] hover:text-[#a30b06]" data-filter="数字保护">数字保护</button><button class="rounded border border-[#e1c7ae] bg-[#fffaf2] px-5 py-2 text-sm text-[#725b4d] transition hover:border-[#a30b06] hover:text-[#a30b06]" data-filter="民俗">民俗</button></div></div></div>
    21. 

  21. <section aria-label="焦点资讯轮播" class="relative mt-6 h-[330px] overflow-hidden rounded border border-[#9f3521] bg-[#53120b] shadow-lg" id="news-carousel"><img alt="Minnan ancestral hall roof and carved stone details" class="absolute inset-0 h-full w-full object-cover" src="https://modao.cc/agent-py/media/generated_images/2026-08-13/b02d2ebb6adc4c30ab50e81225b69fa9.jpg"/><div class="absolute inset-0 bg-[linear-gradient(90deg,rgba(71,13,8,.93)_0%,rgba(103,24,13,.8)_45%,rgba(73,18,10,.4)_100%)]"></div><div class="absolute inset-0 bg-[radial-gradient(circle_at_86%_18%,rgba(244,205,143,.25),transparent_25%)]"></div><div class="relative flex h-full items-end p-9"><article class="max-w-[680px] text-white" data-slide="0"><span class="inline-flex items-center gap-2 border border-[#f4d19a]/75 bg-[#8c1710]/85 px-3 py-1 text-xs tracking-[0.18em] text-[#ffe5bc]"><iconify-icon icon="solar:stars-minimalistic-linear"></iconify-icon>焦点资讯</span><h2 class="brush mt-5 text-[34px] leading-tight tracking-[0.1em] text-[#fff7e8]">闽南古厝里的营造记忆</h2><p class="mt-4 max-w-[600px] text-sm leading-7 text-[#f7ddc0]">以古厝修缮、砖雕木作和社区守护为线索，走近漳州闽南文化生态保护区的活态传承。</p><button class="mt-6 inline-flex items-center gap-2 border border-[#f5cd91] bg-[#a30b06] px-5 py-2.5 text-sm font-medium text-white transition hover:bg-[#7e0805]">阅读专题 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></button></article><article class="hidden max-w-[680px] text-white" data-slide="1"><span class="inline-flex items-center gap-2 border border-[#f4d19a]/75 bg-[#8c1710]/85 px-3 py-1 text-xs tracking-[0.18em] text-[#ffe5bc]"><iconify-icon icon="solar:music-note-2-linear"></iconify-icon>焦点资讯</span><h2 class="brush mt-5 text-[34px] leading-tight tracking-[0.1em] text-[#fff7e8]">南音雅韵，声声相续</h2><p class="mt-4 max-w-[600px] text-sm leading-7 text-[#f7ddc0]">从曲牌传唱到青年体验，传统音乐在当代生活中延续温润而鲜活的文化回响。</p><button class="mt-6 inline-flex items-center gap-2 border border-[#f5cd91] bg-[#a30b06] px-5 py-2.5 text-sm font-medium text-white transition hover:bg-[#7e0805]">查看活动 <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></button></article><div class="absolute bottom-9 right-9 flex items-center gap-3"><button aria-label="上一条焦点资讯" class="flex h-10 w-10 items-center justify-center border border-white/60 bg-[#4e100b]/55 text-white transition hover:bg-[#a30b06]" id="carousel-prev"><iconify-icon class="text-xl" icon="solar:alt-arrow-left-linear"></iconify-icon></button><div class="flex gap-2" id="carousel-dots"><button aria-label="第 1 条焦点资讯" class="h-2.5 w-7 bg-[#f5ce93] transition" data-slide-to="0"></button><button aria-label="第 2 条焦点资讯" class="h-2.5 w-2.5 rounded-full bg-white/55 transition" data-slide-to="1"></button></div><button aria-label="下一条焦点资讯" class="flex h-10 w-10 items-center justify-center border border-white/60 bg-[#4e100b]/55 text-white transition hover:bg-[#a30b06]" id="carousel-next"><iconify-icon class="text-xl" icon="solar:alt-arrow-right-linear"></iconify-icon></button></div></div></section>
    22. 

  22. <div class="mt-6" id="news-list"><div class="mb-4 flex items-center justify-between border-b-2 border-[#a30b06] pb-3"><h2 class="brush text-2xl tracking-[0.12em] text-[#81170f]">资讯列表</h2><span class="text-xs text-[#977b6a]">以下内容均为原型示例</span></div><div class="space-y-3" id="news-items"><article class="news-item group flex gap-5 rounded border border-[#eadfd2] bg-white p-5 shadow-sm transition hover:border-[#d2a27d]" data-category="专题"><div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded bg-[#a30b06] text-white"><b class="text-xl">06-18</b></div><div class="flex-1"><div class="flex items-center gap-3"><span class="rounded bg-[#f9e7d0] px-2 py-1 text-xs font-bold text-[#a11309]">专题</span></div><h3 class="mt-2 text-lg font-bold text-[#65483b] transition group-hover:text-[#a11309]">古厝守护：传统营造技艺的社区传承</h3><p class="mt-2 text-sm leading-6 text-[#8b786d]">以修缮故事为线索，呈现传统工艺与当代保护理念相互呼应的原型内容。</p></div><iconify-icon class="self-center text-xl text-[#c9a98f]" icon="solar:arrow-right-linear"></iconify-icon></article><article class="news-item group flex gap-5 rounded border border-[#eadfd2] bg-white p-5 shadow-sm transition hover:border-[#d2a27d]" data-category="非遗"><div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded bg-[#a30b06] text-white"><b class="text-xl">06-12</b></div><div class="flex-1"><div class="flex items-center gap-3"><span class="rounded bg-[#f9e7d0] px-2 py-1 text-xs font-bold text-[#a11309]">非遗</span></div><h3 class="mt-2 text-lg font-bold text-[#65483b] transition group-hover:text-[#a11309]">南音新声：一场面向青少年的体验课</h3><p class="mt-2 text-sm leading-6 text-[#8b786d]">从曲牌赏析到乐器体验，感受传统艺术在体验课程中的鲜活表达。</p></div><iconify-icon class="self-center text-xl text-[#c9a98f]" icon="solar:arrow-right-linear"></iconify-icon></article><article class="news-item group flex gap-5 rounded border border-[#eadfd2] bg-white p-5 shadow-sm transition hover:border-[#d2a27d]" data-category="数字保护"><div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded bg-[#a30b06] text-white"><b class="text-xl">06-06</b></div><div class="flex-1"><div class="flex items-center gap-3"><span class="rounded bg-[#f9e7d0] px-2 py-1 text-xs font-bold text-[#a11309]">数字保护</span></div><h3 class="mt-2 text-lg font-bold text-[#65483b] transition group-hover:text-[#a11309]">方言记忆采集：让乡音留在数字档案中</h3><p class="mt-2 text-sm leading-6 text-[#8b786d]">记录日常口述与地方词汇，为文化资料库补充可持续整理的示例素材。</p></div><iconify-icon class="self-center text-xl text-[#c9a98f]" icon="solar:arrow-right-linear"></iconify-icon></article><article class="news-item group flex gap-5 rounded border border-[#eadfd2] bg-white p-5 shadow-sm transition hover:border-[#d2a27d]" data-category="民俗"><div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded bg-[#a30b06] text-white"><b class="text-xl">05-30</b></div><div class="flex-1"><div class="flex items-center gap-3"><span class="rounded bg-[#f9e7d0] px-2 py-1 text-xs font-bold text-[#a11309]">民俗</span></div><h3 class="mt-2 text-lg font-bold text-[#65483b] transition group-hover:text-[#a11309]">节俗里的家风：闽南传统礼俗微展</h3><p class="mt-2 text-sm leading-6 text-[#8b786d]">通过器物、图文与口述片段，认识民俗背后的生活智慧与共同记忆。</p></div><iconify-icon class="self-center text-xl text-[#c9a98f]" icon="solar:arrow-right-linear"></iconify-icon></article></div><div class="mt-6 text-center"><button class="rounded border border-[#cda786] bg-[#fffaf2] px-10 py-3 text-sm font-medium text-[#8d2618] transition hover:bg-[#a30b06] hover:text-white hidden" id="load-more">加载更多示例资讯 <iconify-icon class="ml-1 align-middle" icon="solar:alt-arrow-down-linear"></iconify-icon></button><p class="mt-3 text-xs text-[#9a887d]" id="load-message">已展示全部原型示例资讯</p></div></div></div>
    23. 

  23. </section>
    24. 

  24. </main>
    25. 

  25. <footer class="relative overflow-hidden bg-[#8f0805] text-white"><div class="absolute -bottom-20 left-5 h-52 w-52 rounded-full border-[22px] border-[#c55b2d]/45"></div><div class="relative mx-auto flex min-h-[170px] w-[1200px] items-center justify-between py-5"><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 text-xs text-[#f9ddd0]">文化资讯页面 · 原型展示</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><p>联系地址：福建省漳州市芗城区胜利西路118号</p><p>网站标识码：3506000032　闽ICP备05012345号-1</p></div><div class="text-right text-xs leading-7 text-[#f9ddd0]"><p><a href="#">网站声明</a>　|　<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></div></footer>
    26. 

  26. <script>
    27. 

  27.   const filterButtons = document.querySelectorAll('[data-filter]');
    28. 

  28.   const newsItems = document.querySelectorAll('.news-item');
    29. 

  29.   filterButtons.forEach((button) => {
    30. 

  30.     button.addEventListener('click', () => {
    31. 

  31.       const category = button.dataset.filter;
    32. 

  32.       filterButtons.forEach((item) => item.className = 'rounded border border-[#e1c7ae] bg-[#fffaf2] px-5 py-2 text-sm text-[#725b4d] transition hover:border-[#a30b06] hover:text-[#a30b06]');
    33. 

  33.       button.className = 'rounded border border-[#a30b06] bg-[#a30b06] px-5 py-2 text-sm text-white';
    34. 

  34.       newsItems.forEach((item) => item.classList.toggle('hidden', category !== 'all' && item.dataset.category !== category));
    35. 

  35.     });
    36. 

  36.   });
    37. 

  37.   document.getElementById('load-more').addEventListener('click', (event) => {
    38. 

  38.     event.currentTarget.classList.add('hidden');
    39. 

  39.     document.getElementById('load-message').classList.remove('hidden');
    40. 

  40.   });
    41. 

  41.   const carouselSlides = document.querySelectorAll('[data-slide]');
    42. 

  42.   const carouselDots = document.querySelectorAll('[data-slide-to]');
    43. 

  43.   let activeSlide = 0;
    44. 

  44.   const showSlide = (index) => {
    45. 

  45.     activeSlide = (index + carouselSlides.length) % carouselSlides.length;
    46. 

  46.     carouselSlides.forEach((slide, slideIndex) => slide.classList.toggle('hidden', slideIndex !== activeSlide));
    47. 

  47.     carouselDots.forEach((dot, dotIndex) => {
    48. 

  48.       dot.className = dotIndex === activeSlide ? 'h-2.5 w-7 bg-[#f5ce93] transition' : 'h-2.5 w-2.5 rounded-full bg-white/55 transition';
    49. 

  49.     });
    50. 

  50.   };
    51. 

  51.   document.getElementById('carousel-prev').addEventListener('click', () => showSlide(activeSlide - 1));
    52. 

  52.   document.getElementById('carousel-next').addEventListener('click', () => showSlide(activeSlide + 1));
    53. 

  53.   carouselDots.forEach((dot) => dot.addEventListener('click', () => showSlide(Number(dot.dataset.slideTo))));
    54. 

  54. </script>
    55. 

  55. </body></html>
    56.