| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <!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]">
- <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-transparent px-3 py-3 transition hover:border-[#d3ae65] hover:text-[#f0d9a0]" href="public-communication.html">公众传播</a><a class="border-b border-[#d3ae65] px-3 py-3 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-3 gap-4"><article class="border border-[#7f4034] bg-[#351817]/80 p-4 shadow-[inset_0_0_22px_rgba(194,77,54,.12)]"><p class="flex items-center gap-2 text-xs text-[#c6a18c]"><iconify-icon class="text-[#e28a60]" icon="solar:database-linear" width="18"></iconify-icon>档案资源总量</p><p class="mt-3 text-3xl font-bold text-[#fae8b1]">324,518<span class="ml-1 text-xs font-normal">条</span></p></article><article class="border border-[#7f4034] bg-[#351817]/80 p-4 shadow-[inset_0_0_22px_rgba(194,77,54,.12)]"><p class="flex items-center gap-2 text-xs text-[#c6a18c]"><iconify-icon class="text-[#e3b85c]" icon="solar:gallery-wide-linear" width="18"></iconify-icon>图文影像资料</p><p class="mt-3 text-3xl font-bold text-[#fae8b1]">218,406<span class="ml-1 text-xs font-normal">份</span></p></article><article class="border border-[#7f4034] bg-[#351817]/80 p-4 shadow-[inset_0_0_22px_rgba(194,77,54,.12)]"><p class="flex items-center gap-2 text-xs text-[#c6a18c]"><iconify-icon class="text-[#df925f]" icon="solar:video-frame-linear" width="18"></iconify-icon>音视频与口述史</p><p class="mt-3 text-3xl font-bold text-[#fae8b1]">72,684<span class="ml-1 text-xs font-normal">段</span></p></article></section>
- <section class="mt-4 grid grid-cols-[280px_minmax(0,1fr)] gap-4"><aside class="border border-[#7f4034] bg-[#351817]/80 p-4"><div class="flex items-center justify-between border-b border-[#7f4034]/70 pb-3"><h2 class="font-bold text-[#f5df9e]">档案分类浏览</h2><iconify-icon class="text-[#df925f]" icon="solar:filter-linear" width="20"></iconify-icon></div><div class="mt-3 space-y-1 text-sm" id="archive-filters"><button class="archive-filter flex w-full items-center gap-3 border-l-2 border-[#d66b4d] bg-[#4a211d] px-3 py-3 text-left text-[#ffe1a0]" data-filter="all"><iconify-icon icon="solar:folder-open-linear" width="19"></iconify-icon><span class="flex-1">全部资源</span><b>324518</b></button><button class="archive-filter flex w-full items-center gap-3 border-l-2 border-transparent px-3 py-3 text-left text-[#d9bda7] transition hover:bg-[#42201c]" data-filter="heritage"><iconify-icon icon="solar:medal-ribbons-star-linear" width="19"></iconify-icon><span class="flex-1">非遗项目档案</span><b>368</b></button><button class="archive-filter flex w-full items-center gap-3 border-l-2 border-transparent px-3 py-3 text-left text-[#d9bda7] transition hover:bg-[#42201c]" data-filter="inheritor"><iconify-icon icon="solar:user-id-linear" width="19"></iconify-icon><span class="flex-1">传承人档案</span><b>286</b></button><button class="archive-filter flex w-full items-center gap-3 border-l-2 border-transparent px-3 py-3 text-left text-[#d9bda7] transition hover:bg-[#42201c]" data-filter="building"><iconify-icon icon="solar:buildings-2-linear" width="19"></iconify-icon><span class="flex-1">文物与传统村落</span><b>1404</b></button><button class="archive-filter flex w-full items-center gap-3 border-l-2 border-transparent px-3 py-3 text-left text-[#d9bda7] transition hover:bg-[#42201c]" data-filter="folk"><iconify-icon icon="solar:microphone-3-linear" width="19"></iconify-icon><span class="flex-1">民俗方言与老字号</span><b>942</b></button></div><div class="mt-5 border-t border-[#7f4034]/70 pt-4"><div class="mt-3 flex flex-wrap gap-2 text-[11px]"></div></div></aside>
- <section class="border border-[#7f4034] bg-[#351817]/80 p-5"><div class="flex items-start justify-between border-b border-[#7f4034]/70 pb-3"><div><h2 class="mt-1 text-xl font-bold text-[#f5df9e]" id="directory-title">重点档案目录</h2></div><div class="flex items-center gap-2 text-xs text-[#d6b49a]"><iconify-icon class="text-[#d9b257]" icon="solar:sort-by-alphabet-linear" width="18"></iconify-icon>按入库时间排序</div></div><div class="mt-4 grid grid-cols-2 gap-3" id="archive-list"><article class="archive-card border-l-2 border-[#d66b4d] bg-[#2b1514]/75 p-4" data-category="heritage"><div class="flex justify-between"><span class="text-xs text-[#e28a60]">非遗项目 · 图文 / 视频</span><span class="text-[10px] text-[#bb8e79]">今日入库</span></div><h3 class="mt-3 font-bold text-[#f3dba1]">水仙花雕刻技艺数字档案</h3><p class="mt-2 text-xs leading-5 text-[#b99380]">工序影像、代表作品与传承口述完整归档,新增高清素材 126 份。</p></article><article class="archive-card border-l-2 border-[#d9b257] bg-[#2b1514]/75 p-4" data-category="inheritor"><div class="flex justify-between"><span class="text-xs text-[#e3bd65]">传承人 · 音视频</span><span class="text-[10px] text-[#bb8e79]">昨日入库</span></div><h3 class="mt-3 font-bold text-[#f3dba1]">歌仔戏陈派唱腔口述史</h3><p class="mt-2 text-xs leading-5 text-[#b99380]">收录代表性传承人访谈、唱段示范与剧目手稿释读资料。</p></article><article class="archive-card border-l-2 border-[#c8724e] bg-[#2b1514]/75 p-4" data-category="building"><div class="flex justify-between"><span class="text-xs text-[#e28a60]">传统村落 · 三维</span><span class="text-[10px] text-[#bb8e79]">08-11</span></div><h3 class="mt-3 font-bold text-[#f3dba1]">南靖土楼群营造档案</h3><p class="mt-2 text-xs leading-5 text-[#b99380]">完成田野测绘、建筑构件编号与重点土楼三维实景建模复核。</p></article><article class="archive-card border-l-2 border-[#b78756] bg-[#2b1514]/75 p-4" data-category="folk"><div class="flex justify-between"><span class="text-xs text-[#e3bd65]">方言民俗 · 音频</span><span class="text-[10px] text-[#bb8e79]">08-10</span></div><h3 class="mt-3 font-bold text-[#f3dba1]">漳州古城老字号记忆</h3><p class="mt-2 text-xs leading-5 text-[#b99380]">以店铺谱系、方言称谓与经营故事串联古城街巷生活记忆。</p></article></div><p class="mt-4 hidden border-l-2 border-[#d0734e] bg-[#4a211d] px-3 py-2 text-xs text-[#f0d7a2]" id="empty-state">该分类暂无近期入库档案。</p></section>
- </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:14</span></footer>
- </div></main>
- <script>
- const filters=document.querySelectorAll('.archive-filter');const cards=document.querySelectorAll('.archive-card');const title=document.getElementById('directory-title');const empty=document.getElementById('empty-state');const titles={all:'重点档案目录',heritage:'非遗项目档案',inheritor:'传承人档案',building:'文物与传统村落档案',folk:'民俗方言与老字号资料'};
- filters.forEach(button=>button.addEventListener('click',()=>{const filter=button.dataset.filter;filters.forEach(item=>item.className='archive-filter flex w-full items-center gap-3 border-l-2 border-transparent px-3 py-3 text-left text-[#d9bda7] transition hover:bg-[#42201c]');button.className='archive-filter flex w-full items-center gap-3 border-l-2 border-[#d66b4d] bg-[#4a211d] px-3 py-3 text-left text-[#ffe1a0]';let count=0;cards.forEach(card=>{const show=filter==='all'||card.dataset.category===filter;card.classList.toggle('hidden',!show);if(show)count++;});title.textContent=titles[filter];empty.classList.toggle('hidden',count!==0);}));
- 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');}updateClock();setInterval(updateClock,60000);
- </script>
- </body></html>
|