| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <!DOCTYPE html>
- <html class="" 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>
- * { -webkit-tap-highlight-color: transparent; }
- body { margin: 0; background: #e9e4da; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
- .scrollbar-hide::-webkit-scrollbar { display: none; }
- .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
- .paper-pattern {
- background-color: #f9f3e7;
- background-image: radial-gradient(circle at 14% 8%, rgba(166,53,35,.055) 0 1px, transparent 1px), radial-gradient(circle at 76% 24%, rgba(181,137,52,.05) 0 1px, transparent 1px), linear-gradient(135deg, transparent 0 48%, rgba(166,53,35,.025) 49% 50%, transparent 51% 100%);
- background-size: 18px 18px, 24px 24px, 44px 44px;
- }
- .ornament { background-image: linear-gradient(90deg, transparent, rgba(183,137,43,.55), transparent); }
- .slide { transition: opacity .45s ease, transform .45s ease; }
- .slide-hidden { opacity: 0; transform: scale(1.025); pointer-events: none; }
- .slide-show { opacity: 1; transform: scale(1); pointer-events: auto; }
- </style>
- </head>
- <body class="min-h-screen flex items-center justify-center p-3 sm:p-8" style="opacity: 1;">
- <main class="w-[375px] h-[812px] overflow-hidden bg-[#f9f3e7] flex flex-col paper-pattern">
- <header class="flex-none px-5 pt-3 pb-2 bg-[#f9f3e7]/95 border-b border-[#eadcc5]">
- <div class="flex items-center justify-between text-xs text-[#716660]">
- <span class="font-semibold">9:41</span>
- <div class="flex items-center gap-1.5"><iconify-icon icon="solar:cellular-linear" width="14"></iconify-icon><iconify-icon icon="solar:wifi-router-linear" width="14"></iconify-icon><iconify-icon icon="solar:battery-charge-linear" width="17"></iconify-icon></div>
- </div>
- <div class="mt-3 flex items-center justify-between">
- <div class="flex items-center gap-2.5">
- <div aria-label="闽南文化标志" class="w-9 h-9 flex items-center justify-center overflow-hidden">
- <svg aria-label="Minnan cultural logo" class="w-[31px] h-[31px]" role="img" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
- <path d="M13 31C28 26 36 16 42 7c5 8 10 13 18 16 8-3 13-8 18-16 6 9 14 19 29 24-12-9-19-18-25-29-6 8-13 13-22 16C51 15 44 10 38 2 32 13 25 22 13 31Z" fill="#f05a25"></path>
- <path d="M7 43c18 8 34-2 46-2 7 0 10 2 7 5-3 3-8 4-8 9 0 5 8 7 16 5 11-3 18-10 31-9-17-8-28 0-40 4-8 3-13 1-13-2 0-4 8-7 8-10 0-6-13-4-23-2-9 2-14 4-17 2Z" fill="#008db8"></path>
- <path d="M57 55c13-3 25-10 42-4-17-3-26 7-40 10-9 2-16 0-17-4 3 1 8 1 15-2Z" fill="#0755aa"></path>
- <text fill="#0b397d" font-family="Arial, sans-serif" font-size="19" font-weight="700" letter-spacing="1" x="10" y="82">MINNAN</text>
- <rect fill="#c8312b" height="17" rx="1" width="14" x="76" y="66"></rect><text fill="white" font-family="serif" font-size="12" font-weight="700" x="78" y="80">闽</text>
- </svg>
- </div>
- <div class="min-w-0"><h1 class="whitespace-nowrap text-[16px] font-bold tracking-[-.02em] text-[#9d3829] leading-tight">闽南文化(漳州)生态保护区</h1><p class="text-[10px] text-[#9f8660] mt-0.5">一城烟火 · 千年传承</p></div>
- </div>
- </div>
- </header>
- <div class="flex-1 min-h-0 overflow-y-auto scrollbar-hide pb-3">
- <section class="px-4 pt-4">
- <div class="relative h-[178px] overflow-hidden rounded-2xl border border-[#d1aa58] bg-[#7a2f27] shadow-[0_8px_18px_rgba(113,52,36,.18)]" id="carousel" ontouchend="touchEnd(event)" ontouchstart="touchStart(event)">
- <article class="slide absolute inset-0 slide-hidden" data-slide="0" onclick="showToast('已进入:古城慢游专题')">
- <img alt="Sunset view of Zhangzhou ancient city with traditional Minnan red brick houses" class="w-full h-full object-cover opacity-75" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/8b37d6e9e1d74b9fb48c953f0e199c71.jpg"/>
- <div class="absolute inset-0 bg-gradient-to-t from-[#52241e] via-[#52241e]/25 to-transparent"></div>
- <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">古城实景</div>
- <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">Z H A N G Z H O U</p><h2 class="mt-1 text-xl font-bold">红砖古厝里的夏日烟火</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">在千年古城,遇见闽南生活美学</p></div>
- </article>
- <article class="slide absolute inset-0 slide-show" data-slide="1" onclick="showToast('已进入:布袋木偶非遗专题')">
- <img alt="Traditional Chinese glove puppet performance on a brightly lit stage" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/e6fa0fac0a834dcc9389dccae0c8308d.jpg"/>
- <div class="absolute inset-0 bg-gradient-to-t from-[#55231f] via-[#55231f]/25 to-transparent"></div>
- <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">国家级非遗</div>
- <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">LIVING HERITAGE</p><h2 class="mt-1 text-xl font-bold">掌中乾坤 · 布袋木偶戏</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">一方戏台,演尽闽南百年故事</p></div>
- </article>
- <article class="slide absolute inset-0 slide-hidden" data-slide="2" onclick="showToast('已进入:非遗市集专题')">
- <img alt="Festive Minnan intangible heritage market with red lanterns and craft stalls" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/e00e4cebe5254522aeb935928765429f.jpg"/>
- <div class="absolute inset-0 bg-gradient-to-t from-[#55231f] via-[#55231f]/25 to-transparent"></div>
- <div class="absolute top-3 right-3 rounded-full bg-[#f6e2aa]/90 px-2 py-1 text-[10px] font-semibold text-[#873325]">本周推荐</div>
- <div class="absolute inset-x-4 bottom-4 text-white"><p class="text-[11px] tracking-[.18em] text-[#f6d98c]">CULTURAL MARKET</p><h2 class="mt-1 text-xl font-bold">一场热闹的非遗市集</h2><p class="mt-1 text-[11px] text-[#f7e9d2]">手作、食味与匠心,在此相逢</p></div>
- </article>
- <button aria-label="上一张" class="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/20 text-white flex items-center justify-center" onclick="prevSlide(event)"><iconify-icon icon="solar:alt-arrow-left-linear" width="16"></iconify-icon></button>
- <button aria-label="下一张" class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/20 text-white flex items-center justify-center" onclick="nextSlide(event)"><iconify-icon icon="solar:alt-arrow-right-linear" width="16"></iconify-icon></button>
- <div class="absolute bottom-3 right-4 flex gap-1.5" id="dots"><span class="w-1.5 h-1.5 rounded-full bg-white/65"></span><span class="w-4 h-1.5 rounded-full bg-[#f8dc99]"></span><span class="w-1.5 h-1.5 rounded-full bg-white/65"></span></div>
- </div>
- </section>
- <section class="mx-4 mt-4 rounded-2xl bg-white/85 border border-[#eadcc5] px-2 py-3 shadow-sm">
- <div class="grid grid-cols-4 gap-x-1 gap-y-3 px-1">
- <a class="flex w-full flex-col items-center gap-1.5" href="heritage.html"><span class="w-11 h-11 rounded-2xl bg-[#f9e7df] text-[#a83f2d] flex items-center justify-center border border-[#edcabd]"><iconify-icon icon="ph:mask-happy-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">非遗项目</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="heritage.html"><span class="w-11 h-11 rounded-2xl bg-[#fff1d8] text-[#a87a27] flex items-center justify-center border border-[#ead4a3]"><iconify-icon icon="ph:person-simple-tai-chi-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">非遗传承人</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="protected-areas.html"><span class="w-11 h-11 rounded-2xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:shield-check-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">重点区域</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="cultural-relics.html"><span class="w-11 h-11 rounded-2xl bg-[#f9e8e1] text-[#a83f2d] flex items-center justify-center border border-[#ead0c8]"><iconify-icon icon="ph:building-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">文物古迹</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="travel.html"><span class="w-11 h-11 rounded-2xl bg-[#edf2e8] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:map-pin-area-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">文化地图</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="heritage-experience.html"><span class="w-11 h-11 rounded-2xl bg-[#fff1d8] text-[#a87a27] flex items-center justify-center border border-[#ead4a3]"><iconify-icon icon="ph:hand-heart-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">传承体验</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="theory-research.html"><span class="w-11 h-11 rounded-2xl bg-[#f2ebe3] text-[#8b4935] flex items-center justify-center border border-[#dfcbb8]"><iconify-icon icon="ph:books-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">理论研究</span></a>
- <a class="flex w-full flex-col items-center gap-1.5" href="cultural-achievements.html"><span class="w-11 h-11 rounded-2xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center border border-[#cbdcc8]"><iconify-icon icon="ph:trophy-duotone" width="23"></iconify-icon></span><span class="text-[10px] font-medium text-[#4d4540]">特色成果</span></a>
- </div>
- </section>
- <section class="mt-5">
- </section>
- <section class="mt-5">
- <div class="px-4 flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#b48732]"></span><h2 class="text-[16px] font-bold text-[#983726]">精选推荐</h2></div></div><button class="text-[11px] text-[#a83f2d] flex items-center" onclick="showToast('更多精选内容正在加载')">更多<iconify-icon icon="solar:alt-arrow-right-linear" width="13"></iconify-icon></button></div>
- <div class="mt-3 pl-4 flex gap-3 overflow-x-auto scrollbar-hide pr-4">
- <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#762d25] cursor-pointer" onclick="showToast('进入木偶戏沉浸体验详情')"><img alt="Close-up of colorful traditional Minnan glove puppets" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/57cb448b9cad417eaff26bd1ea34fc10.jpg"/><span class="absolute left-2 top-2 rounded-md bg-[#9f3728]/85 px-1.5 py-0.5 text-[9px] text-white">非遗体验</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">木偶戏沉浸体验</h3><p class="mt-1 text-[9px] text-[#8c7e74]">古城剧场 · 90分钟</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'木偶戏沉浸体验')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('木偶戏沉浸体验')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至古城剧场')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
- <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#5b756a] cursor-pointer" onclick="showToast('进入云洞岩打卡点详情')"><img alt="Scenic mountain trail and ancient carved rocks at Yundongyan Zhangzhou" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/user_assets/2026-08-20/4c62b95d09954e9dbfb8eefffa11317c.png"/><span class="absolute left-2 top-2 rounded-md bg-[#59755d]/90 px-1.5 py-0.5 text-[9px] text-white">打卡点</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">云洞岩摩崖石刻</h3><p class="mt-1 text-[9px] text-[#8c7e74]">龙文区 · 山野清凉</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'云洞岩摩崖石刻')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('云洞岩摩崖石刻')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至云洞岩')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
- <article class="shrink-0 w-[160px] overflow-hidden rounded-2xl bg-white border border-[#eadcc5] shadow-sm"><div class="h-[100px] relative bg-[#a96638] cursor-pointer" onclick="showToast('进入土楼研学详情')"><img alt="Children learning in front of a round Fujian tulou building" class="w-full h-full object-cover opacity-70" src="https://modao.cc/agent-py/media/generated_images/2026-08-06/c442391b73bf46f99a6d09d414c04306.jpg"/><span class="absolute left-2 top-2 rounded-md bg-[#a76737]/90 px-1.5 py-0.5 text-[9px] text-white">亲子研学</span></div><div class="p-2.5"><h3 class="text-[12px] font-bold text-[#51433e]">土楼营造技艺研学</h3><p class="mt-1 text-[9px] text-[#8c7e74]">南靖县 · 周末成团</p><div class="mt-2 flex justify-between"><button class="text-[#b48732]" onclick="toggleSave(this,'土楼营造技艺研学')"><iconify-icon icon="solar:bookmark-linear" width="17"></iconify-icon></button><button class="text-[#a83f2d]" onclick="shareItem('土楼营造技艺研学')"><iconify-icon icon="solar:share-linear" width="17"></iconify-icon></button><button class="text-[#59755d]" onclick="showToast('导航已为您规划至南靖土楼')"><iconify-icon icon="solar:map-point-linear" width="17"></iconify-icon></button></div></div></article>
- </div>
- </section>
- <section class="mt-5 px-4">
- <div class="flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#a83f2d]"></span><h2 class="text-[16px] font-bold text-[#983726]">最新资讯</h2></div></div><button class="text-[11px] text-[#a83f2d]" onclick="showToast('已切换到资讯列表')">查看全部</button></div>
- <div class="mt-3 overflow-hidden rounded-2xl border border-[#eadcc5] bg-white/90 divide-y divide-[#f0e6d5]">
- <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:非遗线下展演通知')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#f9e5df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:theater-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">漳州古城周末非遗展演安排公布</b><small class="mt-1 block text-[9px] text-[#9a8c82]">精彩戏曲、南音与传统技艺轮番上演</small></span><time class="text-[9px] text-[#a99686]">今天</time></button>
- <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:文旅惠民活动公告')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#fff0d8] text-[#a87a27] flex items-center justify-center"><iconify-icon icon="ph:ticket-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">暑期文旅惠民消费券即将发放</b><small class="mt-1 block text-[9px] text-[#9a8c82]">覆盖景区、文创、研学等多个场景</small></span><time class="text-[9px] text-[#a99686]">08-05</time></button>
- <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:传统民俗节庆预告')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center"><iconify-icon icon="ph:calendar-heart-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">中秋博饼民俗活动报名通道开启</b><small class="mt-1 block text-[9px] text-[#9a8c82]">感受闽南传统团圆仪式与欢乐</small></span><time class="text-[9px] text-[#a99686]">08-03</time></button>
- <button class="w-full px-3 py-3 text-left flex gap-2.5" onclick="showToast('阅读:闽南文化政策解读')"><span class="mt-0.5 w-7 h-7 flex-none rounded-lg bg-[#f2ebe3] text-[#78675a] flex items-center justify-center"><iconify-icon icon="ph:scroll-duotone" width="15"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">闽南文化生态保护区建设政策解读</b><small class="mt-1 block text-[9px] text-[#9a8c82]">守护文化根脉,激活传承新活力</small></span><time class="text-[9px] text-[#a99686]">08-01</time></button>
- </div>
- </section>
- <section class="mt-5 px-4">
- <div class="flex items-end justify-between"><div><div class="flex items-center gap-2"><span class="w-1 h-5 rounded-full bg-[#b48732]"></span><h2 class="text-[16px] font-bold text-[#983726]">志愿者组织</h2></div></div><button class="text-[11px] text-[#a83f2d]" onclick="showToast('更多志愿组织正在招募')">查看全部</button></div>
- <div class="mt-3 space-y-2.5">
- <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:古城文化讲解志愿队招募详情')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#f9e5df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:megaphone-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">古城文化讲解志愿队</b></span><span class="rounded-md bg-[#e8f0e7] px-1.5 py-1 text-[9px] text-[#5f795d]">招募中</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">每周末 · 漳州古城</span><span class="text-[#a83f2d]">查看详情 ›</span></span></button>
- <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:非遗传承助力团参与入口')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#fff0d8] text-[#a87a27] flex items-center justify-center"><iconify-icon icon="ph:hand-heart-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">非遗传承助力团</b></span><span class="rounded-md bg-[#fff0d8] px-1.5 py-1 text-[9px] text-[#a87a27]">长期开放</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">灵活参与 · 线上报名</span><span class="text-[#a83f2d]">立即参与 ›</span></span></button>
- <button class="w-full rounded-2xl border border-[#eadcc5] bg-white/90 p-3 text-left shadow-sm" onclick="showToast('已打开:乡村文化记录计划报名入口')"><span class="flex items-center gap-2.5"><span class="w-9 h-9 flex-none rounded-xl bg-[#e8f0e7] text-[#5f795d] flex items-center justify-center"><iconify-icon icon="ph:camera-duotone" width="19"></iconify-icon></span><span class="min-w-0 flex-1"><b class="block text-[12px] text-[#51433e] truncate">乡村文化记录计划</b></span><span class="rounded-md bg-[#f2ebe3] px-1.5 py-1 text-[9px] text-[#78675a]">即将开始</span></span><span class="mt-2 flex items-center justify-between pl-[46px] text-[9px] text-[#a99686]"><span class="">每月主题 · 南靖县</span><span class="text-[#a83f2d]">预约报名 ›</span></span></button>
- </div>
- </section>
- </div>
- <nav class="flex-none bg-[#fffaf1] border-t border-[#e9dbc5] px-3 pt-2 pb-3">
- <div class="flex justify-between">
- <button class="nav-item text-[#a83f2d] flex flex-col items-center gap-0.5 w-12" onclick="setNav(this,'首页')"><iconify-icon icon="ph:house-fill" width="21"></iconify-icon><span class="text-[10px] font-semibold">首页</span></button>
- <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="heritage.html"><iconify-icon icon="ph:hand-heart-duotone" width="21"></iconify-icon><span class="text-[10px]">传承</span></a>
- <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="explore.html"><iconify-icon icon="ph:compass-duotone" width="21"></iconify-icon><span class="text-[10px]">资讯</span></a>
- <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="travel.html"><iconify-icon icon="ph:map-trifold-duotone" width="21"></iconify-icon><span class="text-[10px]">文旅</span></a>
- <a class="nav-item text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="profile.html"><iconify-icon icon="ph:user-circle-duotone" width="21"></iconify-icon><span class="text-[10px]">我的</span></a>
- </div>
- </nav>
- </main>
- <div class="fixed left-1/2 top-8 -translate-x-1/2 z-50 max-w-[300px] rounded-full bg-[#3f312d]/95 px-4 py-2 text-center text-xs text-white shadow-lg hidden" id="toast">打开元宵花灯会详情,可导航前往</div>
- <script>
- let currentSlide = 0, startX = 0, timer;
- const slides = () => Array.from(document.querySelectorAll('[data-slide]'));
- function renderSlide(index) {
- const all = slides(); currentSlide = (index + all.length) % all.length;
- all.forEach((slide, i) => { slide.classList.toggle('slide-show', i === currentSlide); slide.classList.toggle('slide-hidden', i !== currentSlide); });
- document.querySelectorAll('#dots span').forEach((dot, i) => { dot.className = i === currentSlide ? 'w-4 h-1.5 rounded-full bg-[#f8dc99]' : 'w-1.5 h-1.5 rounded-full bg-white/65'; });
- }
- function nextSlide(e) { if (e) e.stopPropagation(); renderSlide(currentSlide + 1); resetTimer(); }
- function prevSlide(e) { if (e) e.stopPropagation(); renderSlide(currentSlide - 1); resetTimer(); }
- function resetTimer() { clearInterval(timer); timer = setInterval(() => renderSlide(currentSlide + 1), 4200); }
- function touchStart(e) { startX = e.changedTouches[0].clientX; }
- function touchEnd(e) { const delta = e.changedTouches[0].clientX - startX; if (Math.abs(delta) > 35) delta > 0 ? prevSlide() : nextSlide(); }
- function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('hidden'); clearTimeout(window.toastTimer); window.toastTimer = setTimeout(() => toast.classList.add('hidden'), 1900); }
- function toggleSave(button, title) { const icon = button.querySelector('iconify-icon'); const saved = icon.getAttribute('icon').includes('bold'); icon.setAttribute('icon', saved ? 'solar:bookmark-linear' : 'solar:bookmark-bold'); showToast(saved ? '已取消收藏:' + title : '已收藏:' + title); }
- function shareItem(title) { showToast('已生成“' + title + '”分享卡片'); }
- function setNav(button, name) { document.querySelectorAll('.nav-item').forEach(item => { item.classList.remove('text-[#a83f2d]'); item.classList.add('text-[#a79d93]'); const icon = item.querySelector('iconify-icon'); icon.setAttribute('icon', icon.getAttribute('icon').replace('-fill','-duotone')); }); button.classList.remove('text-[#a79d93]'); button.classList.add('text-[#a83f2d]'); if (name === '首页') button.querySelector('iconify-icon').setAttribute('icon','ph:house-fill'); showToast('已切换至' + name + '模块'); }
- resetTimer();
- </script>
- </body></html>
|