| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!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>
- :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]">
- <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-transparent px-3 py-3 transition hover:border-[#d3ae65] hover: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-[#d3ae65] px-3 py-3 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"></div>
- </section>
- <section class="mt-5 grid grid-cols-12 gap-4">
- <article class="col-span-12 border border-[#8b493b] bg-[#351817]/85 p-5 shadow-[inset_0_0_28px_rgba(194,77,54,.14)]"><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></div><div class="mt-4 grid grid-cols-4 gap-3 text-xs"><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="专题展示"><iconify-icon class="text-[#e0b86d]" icon="solar:monitor-play-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">专题展示</b><span class="mt-1 block leading-5 text-[#b99380]">保护区主题图文与影像</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="品牌活动"><iconify-icon class="text-[#e0b86d]" icon="solar:star-rainbow-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">品牌活动</b><span class="mt-1 block leading-5 text-[#b99380]">节庆活动与文化品牌</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="闽南文化交流"><iconify-icon class="text-[#e0b86d]" icon="solar:users-group-rounded-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">闽南文化交流</b><span class="mt-1 block leading-5 text-[#b99380]">区域交流与共享传播</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="宣传报道"><iconify-icon class="text-[#e0b86d]" icon="solar:document-text-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">宣传报道</b><span class="mt-1 block leading-5 text-[#b99380]">新闻资讯与保护动态</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="宣传物料"><iconify-icon class="text-[#e0b86d]" icon="solar:archive-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">宣传物料</b><span class="mt-1 block leading-5 text-[#b99380]">海报、手册与数字素材</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="视觉形象"><iconify-icon class="text-[#e0b86d]" icon="solar:palette-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">视觉形象</b><span class="mt-1 block leading-5 text-[#b99380]">保护区统一视觉识别</span></button><button class="border border-[#8d5542] bg-[#45211d] px-3 py-4 text-left transition hover:border-[#e0b86d] hover:bg-[#5a2a22]" data-topic="保护区标识牌"><iconify-icon class="text-[#e0b86d]" icon="solar:signpost-2-linear" width="22"></iconify-icon><b class="mt-2 block text-[#f3dca1]">保护区标识牌</b><span class="mt-1 block leading-5 text-[#b99380]">点位导视与文化说明</span></button></div><p class="mt-3 hidden border-l-2 border-[#d0734e] bg-[#4a211d] px-3 py-2 text-xs text-[#f0d7a2]" id="topic-result" role="status"></p></article>
- <article class="col-span-12 border border-[#7f4034] bg-[#351817]/80 p-4 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></div><div class="mt-3 space-y-2 text-xs"><div class="border-l-2 border-[#86a565] bg-[#2b1514]/65 pl-3 py-2"><b class="text-[#f3dca1]">生态修复</b><p class="mt-1 leading-5 text-[#b99380]">推进重点村落水系与古树群落修复,完善生态监测。</p></div><div class="border-l-2 border-[#d9b257] bg-[#2b1514]/65 pl-3 py-2"><b class="text-[#f3dca1]">生活环境优化</b><p class="mt-1 leading-5 text-[#b99380]">持续改善传统村落公共空间与游览环境,提升居民体验。</p></div><div class="border-l-2 border-[#d66b4d] bg-[#2b1514]/65 pl-3 py-2"><b class="text-[#f3dca1]">设施更新</b><p class="mt-1 leading-5 text-[#b99380]">补充文化展示、导览与无障碍服务设施。</p></div></div></article>
- </section>
- <section class="mt-4 grid grid-cols-12 gap-4">
- <article class="col-span-9 border border-[#7f4034] bg-[#351817]/80 p-4 shadow-[inset_0_0_18px_rgba(194,77,54,.1)]"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><h2 class="text-lg font-bold text-[#f5df9e]">志愿者组织</h2></div><p class="mt-4 text-xs leading-5 text-[#b99380]">汇聚文化讲解、环境维护与活动协助力量。</p><div class="mt-3 flex items-end gap-2"><strong class="text-3xl text-[#e0b967]">128</strong><span class="pb-1 text-xs text-[#c8a289]">名活跃志愿者</span></div><button class="mt-3 w-full border border-[#8d5542] bg-[#45211d] px-3 py-2 text-xs text-[#f3dca1] transition hover:border-[#e0b86d]" id="volunteer-button">查看组织信息</button><p class="mt-2 hidden text-xs text-[#f0d7a2]" id="volunteer-result" role="status"></p></article>
- <article class="col-span-3 border border-[#7f4034] bg-[#351817]/75 p-4 shadow-[inset_0_0_18px_rgba(194,77,54,.08)]"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><div><h2 class="mt-1 text-lg font-bold text-[#f5df9e]">公众留言反馈</h2></div><span class="grid h-9 w-9 place-items-center rounded-sm border border-[#af7445] bg-[#5d3028] text-[#f1cf85]"><iconify-icon icon="solar:chat-round-dots-linear" width="21"></iconify-icon></span></div><div class="mt-3 grid grid-cols-1 gap-3 text-xs"><div class="border-l-2 border-[#d66b4d] bg-[#2b1514]/65 pl-3 py-2"><div class="flex justify-between"><b>古城骑楼修缮进度咨询</b><span class="text-[#e6a276]">已处理</span></div><p class="mt-1 leading-5 text-[#b99380]">已更新第三季度外立面修缮节点与街巷通行提示。</p></div><div class="border-l-2 border-[#d9b257] bg-[#2b1514]/65 pl-3 py-2"><div class="flex justify-between"><b>希望增加闽南语童谣素材</b><span class="text-[#e0b967]">已采纳</span></div><p class="mt-1 leading-5 text-[#b99380]">童谣有声专辑已纳入本月科普内容更新计划。</p></div></div><p class="mt-3 hidden border-l-2 border-[#d0734e] bg-[#4a211d] px-3 py-2 text-xs text-[#f0d7a2]" id="feedback-result" role="status"></p></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 15:13:05</span></footer>
- </div>
- </main>
- <script>
- document.querySelectorAll('[data-topic]').forEach(item=>item.addEventListener('click',()=>{const result=document.getElementById('topic-result');result.textContent='已打开「'+item.dataset.topic+'」分类入口,可继续浏览相关传播内容。';result.classList.remove('hidden');}));
- const volunteerButton=document.getElementById('volunteer-button');
- if(volunteerButton) volunteerButton.addEventListener('click',()=>{const result=document.getElementById('volunteer-result');result.textContent='志愿者报名与组织服务入口已准备就绪。';result.classList.remove('hidden');});
- 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>
|