minnan-zhangzhou-admin/refer/culture-tourism.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]">
<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-[#d3ae65] px-3 py-3 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="tour-tab rounded-sm border px-4 py-2 text-xs border-[#d1734e] bg-[#84352d] text-[#ffe1a0]" data-target="resources">文旅资源</button><button class="tour-tab rounded-sm border px-4 py-2 text-xs border-[#79503c] bg-[#351817]/80 text-[#d6b49a]" data-target="products">文创产品</button></div>
</section>
<section class="mt-5 grid grid-cols-12 gap-4">
<article class="col-span-12 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]" id="module-title">文旅资源</h2></div></div><div class="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2 text-xs" id="module-cards"><article class="group border border-[#704033] bg-[#2b1514]/80 p-3 transition duration-300 hover:-translate-y-1 hover:border-[#d1734e] hover:bg-[#3a1c18]"><div class="relative aspect-[16/9] scale-x-[0.9] overflow-hidden border border-[#8e4c36] bg-gradient-to-br from-[#7c3f30] via-[#4b211e] to-[#b27546]"><img alt="Minnan cultural tourism route" class="h-full w-full object-cover object-center transition duration-500 group-hover:scale-110 group-hover:brightness-125" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/af55ba39bd8a4cf386bb62f595bc7f95.png"/><div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#24100f] via-[#24100f]/80 to-transparent px-2 pb-2 pt-6"><span class="block text-[10px] tracking-[.12em] text-[#e9b86e]">文旅影像 01</span><span class="mt-1 block text-[10px] text-[#f5df9e] opacity-0 transition duration-300 group-hover:opacity-100">闽南文化主题旅游线路 · 悬停查看</span></div></div><div class="mt-3 flex items-center justify-between"><p class="text-[#d9b257]">01</p><span class="grid h-7 w-7 place-items-center border border-[#af7445] bg-[#5d3028] text-[#f1cf85]"><iconify-icon icon="solar:route-linear" width="16"></iconify-icon></span></div><h3 class="mt-1 font-bold text-[#f6dfa8]">闽南文化主题旅游线路</h3><p class="mt-2 leading-5 text-[#b99380]">古城、土楼与滨海文化串联成线，呈现闽南建筑、音乐与信俗的深层记忆。</p></article><article class="group border border-[#704033] bg-[#2b1514]/80 p-3 transition duration-300 hover:-translate-y-1 hover:border-[#d1734e] hover:bg-[#3a1c18]"><div class="relative aspect-[16/9] scale-x-[0.9] overflow-hidden border border-[#8e4c36] bg-gradient-to-br from-[#7c3f30] via-[#4b211e] to-[#b27546]"><img alt="Intangible heritage district and homestay" class="h-full w-full object-cover object-center transition duration-500 group-hover:scale-110 group-hover:brightness-125" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/fa659eeaa0af4d088502359d37fc49bd.png"/><div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#24100f] via-[#24100f]/80 to-transparent px-2 pb-2 pt-6"><span class="block text-[10px] tracking-[.12em] text-[#e9b86e]">文旅影像 02</span><span class="mt-1 block text-[10px] text-[#f5df9e] opacity-0 transition duration-300 group-hover:opacity-100">非遗景区・街区・民宿 · 悬停查看</span></div></div><div class="mt-3 flex items-center justify-between"><p class="text-[#d9b257]">02</p><span class="grid h-7 w-7 place-items-center border border-[#af7445] bg-[#5d3028] text-[#f1cf85]"><iconify-icon icon="solar:buildings-2-linear" width="16"></iconify-icon></span></div><h3 class="mt-1 font-bold text-[#f6dfa8]">非遗景区・街区・民宿</h3><p class="mt-2 leading-5 text-[#b99380]">以非遗工坊、特色街区与文化民宿承载活态传承，让传统技艺融入旅居日常。</p></article></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 14:43:11</span></footer>
</div>
</main>
<script>
const moduleData={
  resources:{kicker:'CULTURAL RESOURCES',title:'文旅资源',desc:'以主题线路和非遗空间为载体，连接文化保护、在地体验与城市生活。',cards:[['solar:route-linear','闽南文化主题旅游线路','古城、土楼与滨海文化串联成线，呈现闽南建筑、音乐与信俗的深层记忆。','Minnan cultural tourism route'],['solar:buildings-2-linear','非遗景区・街区・民宿','以非遗工坊、特色街区与文化民宿承载活态传承，让传统技艺融入旅居日常。','Intangible heritage district and homestay']]},
  products:{kicker:'CULTURAL PRODUCTS',title:'文创产品',desc:'从传统纹样、工艺与地方物产中提炼设计灵感，让闽南文化可带走、可使用。',cards:[['solar:pen-new-square-linear','八宝印泥礼盒','老字号印泥技艺结合当代礼赠设计，传递一方朱砂匠心。','Babao seal paste craft gift box'],['solar:pallete-2-linear','木版年画拓印套装','精选传统纹样开发拓印、书签与家居摆件，延续新年祝福。','Minnan woodblock print product']]},
  heritage:{kicker:'TIME-HONORED BRANDS',title:'老字号',desc:'以老字号为文化名片，守住工艺与信誉，延续闽南商业文明。',cards:[['solar:shop-2-linear','传统印泥工坊','以古法制印泥和当代展示相结合，记录老字号技艺的传承脉络。','Traditional seal paste workshop'],['solar:buildings-2-linear','古城老铺','依托骑楼街巷与地方风物，展示老字号品牌的故事、工艺与日常。','Time-honored shop in Zhangzhou ancient city']]}
};
const tabs=document.querySelectorAll('.tour-tab');
function renderModule(key){const item=moduleData[key];document.getElementById('module-kicker').textContent=item.kicker;document.getElementById('module-title').textContent=item.title;document.getElementById('module-desc').textContent=item.desc;document.getElementById('module-cards').innerHTML=item.cards.map((card,index)=>'<article class="group border border-[#704033] bg-[#2b1514]/80 p-3 transition duration-300 hover:-translate-y-1 hover:border-[#d1734e] hover:bg-[#3a1c18]"><div class="relative aspect-[16/9] scale-x-[0.9] overflow-hidden border border-[#8e4c36] bg-gradient-to-br from-[#7c3f30] via-[#4b211e] to-[#b27546]"><img class="h-full w-full object-cover object-center transition duration-500 group-hover:scale-110 group-hover:brightness-125" src="/agent-py/static/source/images/placeholder.svg" alt="'+card[3]+'"><div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#24100f] via-[#24100f]/80 to-transparent px-2 pb-2 pt-6"><span class="block text-[10px] tracking-[.12em] text-[#e9b86e]">文旅影像 0'+(index+1)+'</span><span class="mt-1 block text-[10px] text-[#f5df9e] opacity-0 transition duration-300 group-hover:opacity-100">'+card[1]+' · 悬停查看</span></div></div><div class="mt-3 flex items-center justify-between"><p class="text-[#d9b257]">0'+(index+1)+'</p><span class="grid h-7 w-7 place-items-center border border-[#af7445] bg-[#5d3028] text-[#f1cf85]"><iconify-icon icon="'+card[0]+'" width="16"></iconify-icon></span></div><h3 class="mt-1 font-bold text-[#f6dfa8]">'+card[1]+'</h3><p class="mt-2 leading-5 text-[#b99380]">'+card[2]+'</p></article>').join('');tabs.forEach(tab=>{const active=tab.dataset.target===key;tab.className='tour-tab rounded-sm border px-4 py-2 text-xs '+(active?'border-[#d1734e] bg-[#84352d] text-[#ffe1a0]':'border-[#79503c] bg-[#351817]/80 text-[#d6b49a]');});}
tabs.forEach(tab=>tab.addEventListener('click',()=>renderModule(tab.dataset.target)));renderModule('resources');
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>