@@ -0,0 +1,775 @@
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 长文本收纳组件 · 4 类演示< / title >
< script src = "https://cdn.tailwindcss.com" > < / script >
< style >
body { background : #E5EFE9 ; font-family : - apple-system , BlinkMacSystemFont , 'PingFang SC' , sans-serif ; padding : 24 px 16 px ; }
@ keyframes fade-in-up { from { opacity : 0 ; transform : translateY ( 12 px ) ; } to { opacity : 1 ; transform : translateY ( 0 ) ; } }
. animate-fade-in-up { animation : fade-in-up 0.4 s ease both ; }
/* ── page slide ── */
. c0-screen { position : relative ; overflow : hidden ; }
. c0-page { position : absolute ; top : 0 ; left : 0 ; width : 100 % ; transition : transform 0.32 s cubic-bezier ( 0.4 , 0 , 0.2 , 1 ) ; }
. c0-page . p1 { transform : translateX ( 0 ) ; }
. c0-page . p2 { transform : translateX ( 100 % ) ; }
. c0-page . p1 . out { transform : translateX ( -100 % ) ; }
. c0-page . p2 . in { transform : translateX ( 0 ) ; }
/* ── p1 summary card ── */
. p1-card { background : #fff ; border-radius : 24 px ; border : 1 px solid rgba ( 0 , 0 , 0 , 0.06 ) ; overflow : hidden ; cursor : pointer ; transition : transform 0.15 s ; -webkit- tap-highlight-color : transparent ; }
. p1-card : active { transform : scale ( 0.98 ) ; }
/* ── p2 wrap ── */
. p2-wrap { background : #fff ; border-radius : 24 px ; border : 1 px solid rgba ( 0 , 0 , 0 , 0.06 ) ; overflow : hidden ; }
. p2-header { display : flex ; align-items : center ; gap : 10 px ; padding : 14 px 16 px 12 px ; border-bottom : 0.5 px solid rgba ( 0 , 0 , 0 , 0.06 ) ; }
. back-btn { width : 28 px ; height : 28 px ; border-radius : 50 % ; background : #f2f2f2 ; display : flex ; align-items : center ; justify-content : center ; cursor : pointer ; font-size : 18 px ; line-height : 1 ; color : #555 ; transition : background 0.15 s ; flex-shrink : 0 ; -webkit- tap-highlight-color : transparent ; }
. back-btn : active { background : #ddd ; }
/* ── rich body ── */
. rich-body { padding : 18 px 18 px 4 px ; }
. rich-body p { font-size : 13 px ; color : #475569 ; line-height : 1.85 ; font-weight : 500 ; margin-bottom : 14 px ; }
. rich-body strong { color : #065f46 ; background : #ecfdf5 ; padding : 1 px 5 px ; border-radius : 4 px ; font-weight : 800 ; }
. rich-body h5 { font-size : 13 px ; font-weight : 800 ; color : #1e293b ; margin : 18 px 0 8 px ; }
. rich-img { width : 100 % ; border-radius : 14 px ; object-fit : cover ; margin : 4 px 0 16 px ; display : block ; height : 160 px ; }
. tip-block { background : #f0fdf4 ; border-radius : 12 px ; border-left : 3 px solid #34d399 ; padding : 10 px 14 px ; margin : 4 px 0 16 px ; font-size : 12 px ; color : #065f46 ; font-weight : 700 ; line-height : 1.7 ; }
. tip-block . warn { background : #fffbeb ; border-left-color : #fbbf24 ; color : #92400e ; }
/* ── 双栏对照卡（上下湖对比专用）── */
. vs-wrap { display : flex ; gap : 8 px ; margin : 6 px 0 16 px ; }
. vs-col { flex : 1 ; background : #f8fafc ; border : 1 px solid #e8edf2 ; border-radius : 12 px ; padding : 11 px 12 px ; }
. vs-col . vs-head { display : flex ; align-items : center ; gap : 5 px ; font-size : 12 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 8 px ; padding-bottom : 7 px ; border-bottom : 1 px dashed #d8e0e8 ; }
. vs-col . vs-dot { width : 7 px ; height : 7 px ; border-radius : 50 % ; flex-shrink : 0 ; }
. vs-col . vs-row { font-size : 11 px ; font-weight : 600 ; color : #64748b ; line-height : 1.5 ; margin-bottom : 5 px ; }
. vs-col . vs-row : last-child { margin-bottom : 0 ; }
. vs-col . vs-row b { color : #334155 ; font-weight : 800 ; }
. vs-col . vs-boat { font-size : 13 px ; font-weight : 900 ; margin-bottom : 7 px ; }
/* ── action zone shell ── */
. action-zone { border-top : 0.5 px solid rgba ( 0 , 0 , 0 , 0.06 ) ; margin-top : 4 px ; }
. action-zone-label { font-size : 10 px ; font-weight : 800 ; color : #94a3b8 ; letter-spacing : 0.6 px ; text-transform : uppercase ; padding : 12 px 18 px 8 px ; }
. action-zone-bottom { height : 20 px ; }
/* ── C1 景点详情 mini ── */
. c1-mini { margin : 0 16 px ; background : #fff ; border-radius : 24 px ; overflow : hidden ; box-shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.04 ) ; border : 1 px solid #f1f5f9 ; cursor : pointer ; -webkit- tap-highlight-color : transparent ; transition : transform 0.15 s ; }
. c1-mini : active { transform : scale ( 0.98 ) ; }
. c1-mini . c1-tag { display : inline-flex ; align-items : center ; gap : 4 px ; background : rgba ( 255 , 255 , 255 , 0.9 ) ; color : #059669 ; font-size : 10 px ; font-weight : 900 ; padding : 4 px 10 px ; border-radius : 8 px ; box-shadow : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.08 ) ; margin : 14 px 0 0 14 px ; width : fit-content ; }
. c1-mini . c1-body { padding : 10 px 20 px 16 px ; }
. c1-mini . c1-title { font-size : 19 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 10 px ; letter-spacing : -0.3 px ; }
. c1-mini . c1-desc { background : linear-gradient ( to right , #ecfdf5 , rgba ( 240 , 253 , 250 , 0.5 ) ) ; border-radius : 12 px ; padding : 10 px 12 px ; margin-bottom : 12 px ; border : 1 px solid rgba ( 167 , 243 , 208 , 0.5 ) ; display : flex ; align-items : flex-start ; gap : 8 px ; }
. c1-mini . c1-desc p { font-size : 12 px ; font-weight : 700 ; color : #065f46 ; line-height : 1.55 ; margin : 0 ; }
. c1-mini . c1-btn { width : 100 % ; background : #0f172a ; color : #fff ; border : none ; border-radius : 14 px ; padding : 12 px ; font-size : 13 px ; font-weight : 900 ; display : flex ; align-items : center ; justify-content : center ; gap : 6 px ; cursor : pointer ; -webkit- tap-highlight-color : transparent ; transition : transform 0.15 s ; }
. c1-mini . c1-btn : active { transform : scale ( 0.97 ) ; }
/* ── C8 地图点位 mini ── */
. c8-mini { margin : 0 16 px ; border-radius : 16 px ; overflow : hidden ; border : 0.5 px solid rgba ( 0 , 0 , 0 , 0.07 ) ; }
. c8-mini . c8-img-wrap { position : relative ; }
. c8-mini . c8-img { width : 100 % ; height : 160 px ; object-fit : cover ; display : block ; }
. c8-mini . c8-dest-tag { position : absolute ; bottom : 10 px ; left : 10 px ; background : rgba ( 0 , 0 , 0 , 0.4 ) ; border-radius : 10 px ; padding : 4 px 10 px 4 px 8 px ; display : flex ; align-items : center ; gap : 5 px ; font-size : 11 px ; font-weight : 900 ; color : #fff ; }
. c8-mini . c8-bar { background : #fff ; padding : 12 px 14 px ; display : flex ; align-items : center ; gap : 10 px ; }
. c8-mini . c8-info { flex : 1 ; min-width : 0 ; }
. c8-mini . c8-name { font-size : 15 px ; font-weight : 900 ; color : #1e293b ; }
. c8-mini . c8-dist { font-size : 11 px ; color : #94a3b8 ; font-weight : 700 ; margin-top : 2 px ; }
. c8-mini . c8-btn { background : #0f172a ; color : #fff ; border : none ; border-radius : 14 px ; padding : 10 px 20 px ; font-size : 13 px ; font-weight : 900 ; display : flex ; align-items : center ; gap : 6 px ; cursor : pointer ; flex-shrink : 0 ; -webkit- tap-highlight-color : transparent ; transition : transform 0.15 s ; }
. c8-mini . c8-btn : active { transform : scale ( 0.96 ) ; }
/* ── C9 商品卡轮播 ── */
. c9-scroll { display : flex ; gap : 10 px ; overflow-x : auto ; padding : 0 16 px ; -webkit- overflow-scrolling : touch ; scroll-snap-type : x mandatory ; }
. c9-scroll :: -webkit-scrollbar { display : none ; }
. c9-card { background : #fff ; border-radius : 20 px ; border : 1 px solid #f1f5f9 ; overflow : hidden ; flex-shrink : 0 ; width : 220 px ; scroll-snap-align : start ; box-shadow : 0 2 px 12 px rgba ( 0 , 0 , 0 , 0.04 ) ; }
. c9-card . c9-thumb { width : 100 % ; height : 110 px ; object-fit : cover ; display : block ; }
. c9-card . c9-body { padding : 10 px 12 px 12 px ; }
. c9-card . c9-name { font-size : 13 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 6 px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. c9-card . c9-price-row { display : flex ; align-items : baseline ; gap : 4 px ; margin-bottom : 8 px ; }
. c9-card . c9-price { font-size : 20 px ; font-weight : 900 ; color : #f43f5e ; letter-spacing : -0.5 px ; }
. c9-card . c9-currency { font-size : 12 px ; font-weight : 900 ; color : #f43f5e ; }
. c9-card . c9-original { font-size : 11 px ; font-weight : 700 ; color : #cbd5e1 ; text-decoration : line-through ; }
. c9-card . c9-btn { width : 100 % ; background : #fbbf24 ; color : #451a03 ; border : none ; border-radius : 12 px ; padding : 8 px ; font-size : 12 px ; font-weight : 900 ; cursor : pointer ; -webkit- tap-highlight-color : transparent ; transition : transform 0.15 s ; }
. c9-card . c9-btn : active { transform : scale ( 0.97 ) ; }
. c9-card . c9-sale-tag { display : inline-block ; background : #fef2f2 ; color : #f43f5e ; font-size : 9 px ; font-weight : 900 ; padding : 2 px 6 px ; border-radius : 6 px ; margin-bottom : 4 px ; }
/* ── AIGC 合影 mini ── */
. aigc-mini { margin : 0 16 px ; border-radius : 16 px ; overflow : hidden ; border : 0.5 px solid rgba ( 0 , 0 , 0 , 0.07 ) ; background : #fff ; }
. aigc-mini . aigc-img-wrap { position : relative ; }
. aigc-mini . aigc-img { width : 100 % ; height : 160 px ; object-fit : cover ; display : block ; }
. aigc-mini . aigc-badge { position : absolute ; top : 10 px ; left : 10 px ; background : linear-gradient ( 135 deg , #8b5cf6 , #6366f1 ) ; border-radius : 10 px ; padding : 4 px 10 px 4 px 8 px ; display : flex ; align-items : center ; gap : 5 px ; font-size : 10 px ; font-weight : 900 ; color : #fff ; box-shadow : 0 2 px 8 px rgba ( 99 , 102 , 241 , 0.4 ) ; }
. aigc-mini . aigc-body { padding : 12 px 14 px 14 px ; }
. aigc-mini . aigc-name { font-size : 15 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 5 px ; }
. aigc-mini . aigc-desc { font-size : 11.5 px ; font-weight : 700 ; color : #64748b ; line-height : 1.6 ; margin-bottom : 12 px ; }
. aigc-mini . aigc-btn { width : 100 % ; background : linear-gradient ( 135 deg , #8b5cf6 , #6366f1 ) ; color : #fff ; border : none ; border-radius : 14 px ; padding : 11 px ; font-size : 13 px ; font-weight : 900 ; display : flex ; align-items : center ; justify-content : center ; gap : 6 px ; cursor : pointer ; -webkit- tap-highlight-color : transparent ; transition : transform 0.15 s ; }
. aigc-mini . aigc-btn : active { transform : scale ( 0.97 ) ; }
/* ── C4 路线步骤 mini ── */
. c4-mini { margin : 0 16 px ; background : #fff ; border-radius : 16 px ; border : 0.5 px solid rgba ( 0 , 0 , 0 , 0.07 ) ; padding : 14 px 16 px ; }
. c4-mini . c4-head { display : flex ; align-items : center ; gap : 6 px ; font-size : 13 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 12 px ; }
. c4-step { display : flex ; gap : 10 px ; margin-bottom : 10 px ; }
. c4-step : last-child { margin-bottom : 0 ; }
. c4-step . c4-dot { width : 18 px ; height : 18 px ; border-radius : 50 % ; background : #8b5cf6 ; color : #fff ; font-size : 10 px ; font-weight : 900 ; display : flex ; align-items : center ; justify-content : center ; flex-shrink : 0 ; }
. c4-step . c4-line { flex : 1 ; }
. c4-step . c4-act { font-size : 12 px ; font-weight : 800 ; color : #334155 ; line-height : 1.5 ; }
. c4-step . c4-meta { font-size : 10.5 px ; color : #94a3b8 ; font-weight : 700 ; margin-top : 1 px ; }
/* ── C5 设施位置 mini ── */
. c5-mini { margin : 10 px 16 px 0 ; background : #fff ; border-radius : 16 px ; border : 0.5 px solid rgba ( 0 , 0 , 0 , 0.07 ) ; padding : 12 px 16 px ; }
. c5-mini . c5-head { display : flex ; align-items : center ; gap : 6 px ; font-size : 12 px ; font-weight : 900 ; color : #1e293b ; margin-bottom : 8 px ; }
. c5-row { display : flex ; align-items : center ; gap : 8 px ; padding : 5 px 0 ; font-size : 11.5 px ; font-weight : 700 ; color : #475569 ; }
. c5-row . c5-ic { width : 16 px ; text-align : center ; }
/* ── C12 FAQ mini ── */
. c12-mini { margin : 10 px 16 px 0 ; }
. c12-chip { display : inline-flex ; align-items : center ; gap : 5 px ; background : #fff ; border : 1 px solid #e2e8f0 ; border-radius : 20 px ; padding : 8 px 13 px ; font-size : 11.5 px ; font-weight : 800 ; color : #475569 ; margin : 0 6 px 8 px 0 ; cursor : pointer ; -webkit- tap-highlight-color : transparent ; transition : all 0.15 s ; }
. c12-chip : active { transform : scale ( 0.96 ) ; background : #f1f5f9 ; }
. c12-chip svg { color : #10b981 ; }
/* lightbox */
. lightbox { position : fixed ; inset : 0 ; z-index : 999 ; background : rgba ( 0 , 0 , 0 , 0.92 ) ; display : flex ; align-items : center ; justify-content : center ; opacity : 0 ; pointer-events : none ; transition : opacity 0.25 s ease ; }
. lightbox . open { opacity : 1 ; pointer-events : all ; }
. lightbox img { max-width : 100 % ; max-height : 100 % ; border-radius : 4 px ; transform : scale ( 0.94 ) ; transition : transform 0.28 s cubic-bezier ( 0.4 , 0 , 0.2 , 1 ) ; }
. lightbox . open img { transform : scale ( 1 ) ; }
. lb-close { position : absolute ; top : 20 px ; right : 20 px ; width : 34 px ; height : 34 px ; border-radius : 50 % ; background : rgba ( 255 , 255 , 255 , 0.15 ) ; display : flex ; align-items : center ; justify-content : center ; cursor : pointer ; }
/* 跳转链路浮层 */
. flow-toast { position : fixed ; left : 50 % ; bottom : 32 px ; transform : translateX ( -50 % ) translateY ( 20 px ) ; background : #0f172a ; color : #fff ; font-size : 12 px ; font-weight : 700 ; padding : 11 px 18 px ; border-radius : 14 px ; box-shadow : 0 8 px 30 px rgba ( 0 , 0 , 0 , 0.25 ) ; opacity : 0 ; pointer-events : none ; transition : all 0.3 s cubic-bezier ( 0.4 , 0 , 0.2 , 1 ) ; max-width : 340 px ; line-height : 1.6 ; z-index : 888 ; }
. flow-toast . show { opacity : 1 ; transform : translateX ( -50 % ) translateY ( 0 ) ; }
. flow-toast . ft-label { color : #fbbf24 ; font-weight : 900 ; margin-right : 4 px ; }
< / style >
< / head >
< body >
< div class = "max-w-[390px] mx-auto" >
<!-- ════ 标题区 ════ -->
< div class = "flex flex-col items-start gap-3 w-full mb-6 animate-fade-in-up" >
< div class = "flex items-center gap-2 px-1" >
< div class = "w-8 h-8 rounded-full border-[1.5px] border-emerald-100 shadow-sm overflow-hidden shrink-0 bg-emerald-50 flex items-center justify-center text-[15px]" > 🐯< / div >
< span class = "text-[12px] font-black text-slate-800" > 小七 · 荔波小七孔 AI 伴游< / span >
< / div >
< div class = "ml-1" >
< span class = "bg-slate-900 text-white text-[9px] font-black px-2 py-1 rounded-md tracking-widest uppercase mr-2" > 演示< / span >
< span class = "text-[12px] font-black text-slate-800" > 长文本收纳组件 · 4 类< / span >
< / div >
< p class = "ml-1 text-[11px] font-bold text-slate-400 leading-relaxed" >
点击卡片 = 折叠态展开为完整内容。< br >
展开后下半部分是「行动条」，挂载真实可点击的组件。
< / p >
< / div >
<!-- ════ 屏幕 ════ -->
< div class = "c0-screen w-full animate-fade-in-up" id = "screen" >
<!-- ─── p1 折叠态卡片列表 ─── -->
< div class = "c0-page p1 w-full" id = "p1" >
<!-- 攻略型 -->
< div class = "p1-card mb-3" onclick = "goDetail('guide')" >
< div class = "p-5" >
< div class = "flex items-center gap-2 mb-2" >
< span class = "text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100" > 漂流攻略< / span >
< span class = "text-[9px] font-bold text-slate-300" > 长文本-攻略组件< / span >
< / div >
< h4 class = "text-[14px] font-black text-slate-800 mb-1.5" > 下水之前，先听小七唠两句< / h4 >
< p class = "text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id = "sum-guide" > < / p >
< / div >
< div class = "px-5 pb-4 flex items-center justify-between" >
< span class = "text-[11px] text-slate-300 font-bold" > 点击查看完整攻略< / span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M5 3l4 4-4 4" stroke = "#cbd5e1" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / div >
< / div >
<!-- 景点型 -->
< div class = "p1-card mb-3" onclick = "goDetail('poi')" >
< div class = "p-5" >
< div class = "flex items-center gap-2 mb-2" >
< span class = "text-[10px] font-black text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100" > 景点故事< / span >
< span class = "text-[9px] font-bold text-slate-300" > 长文本-景点组件< / span >
< / div >
< h4 class = "text-[14px] font-black text-slate-800 mb-1.5" > 小七孔古桥 · 走了三百年的石拱< / h4 >
< p class = "text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id = "sum-poi" > < / p >
< / div >
< div class = "px-5 pb-4 flex items-center justify-between" >
< span class = "text-[11px] text-slate-300 font-bold" > 点击查看完整介绍< / span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M5 3l4 4-4 4" stroke = "#cbd5e1" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / div >
< / div >
<!-- 路线型 -->
< div class = "p1-card mb-3" onclick = "goDetail('nav')" >
< div class = "p-5" >
< div class = "flex items-center gap-2 mb-2" >
< span class = "text-[10px] font-black text-violet-600 bg-violet-50 px-2 py-0.5 rounded-full border border-violet-100" > 路线指引< / span >
< span class = "text-[9px] font-bold text-slate-300" > 长文本-路线组件< / span >
< / div >
< h4 class = "text-[14px] font-black text-slate-800 mb-1.5" > 漂完卧龙潭，顺道去鸳鸯湖< / h4 >
< p class = "text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id = "sum-nav" > < / p >
< / div >
< div class = "px-5 pb-4 flex items-center justify-between" >
< span class = "text-[11px] text-slate-300 font-bold" > 点击查看完整路线< / span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M5 3l4 4-4 4" stroke = "#cbd5e1" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / div >
< / div >
<!-- 拍照型 -->
< div class = "p1-card mb-3" onclick = "goDetail('photo')" >
< div class = "p-5" >
< div class = "flex items-center gap-2 mb-2" >
< span class = "text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100" > 拍照攻略< / span >
< span class = "text-[9px] font-bold text-slate-300" > 长文本-拍照组件< / span >
< / div >
< h4 class = "text-[14px] font-black text-slate-800 mb-1.5" > 鸳鸯湖玻璃船，这样拍才不亏< / h4 >
< p class = "text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id = "sum-photo" > < / p >
< / div >
< div class = "px-5 pb-4 flex items-center justify-between" >
< span class = "text-[11px] text-slate-300 font-bold" > 点击查看完整攻略< / span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M5 3l4 4-4 4" stroke = "#cbd5e1" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / div >
< / div >
<!-- 攻略型·发散模式 -->
< div class = "p1-card" onclick = "goDetail('overview')" >
< div class = "p-5" >
< div class = "flex items-center gap-2 mb-2" >
< span class = "text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100" > 初游攻略< / span >
< span class = "text-[9px] font-bold text-slate-300" > 长文本-攻略组件 · 发散模式< / span >
< / div >
< h4 class = "text-[14px] font-black text-slate-800 mb-1.5" > 第一次来小七孔，这篇先看< / h4 >
< p class = "text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id = "sum-overview" > < / p >
< / div >
< div class = "px-5 pb-4 flex items-center justify-between" >
< span class = "text-[11px] text-slate-300 font-bold" > 点击查看完整攻略< / span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M5 3l4 4-4 4" stroke = "#cbd5e1" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
< / div >
< / div >
< / div >
<!-- ─── p2 展开态 ─── -->
< div class = "c0-page p2 w-full" id = "p2" >
< div class = "p2-wrap" >
< div class = "p2-header" >
< div class = "back-btn" onclick = "goBack()" > ‹ < / div >
< span class = "text-[14px] font-black text-slate-800" id = "p2-title" > < / span >
< span class = "text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border" id = "p2-badge" > < / span >
< / div >
< div class = "rich-body" id = "rich-body" > < / div >
< div class = "action-zone" id = "action-zone" > < / div >
< / div >
< / div >
< / div >
< / div >
<!-- lightbox -->
< div class = "lightbox" id = "lightbox" onclick = "closeLB()" >
< div class = "lb-close" onclick = "closeLB()" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "white" stroke-width = "2.5" stroke-linecap = "round" stroke-linejoin = "round" > < line x1 = "18" y1 = "6" x2 = "6" y2 = "18" / > < line x1 = "6" y1 = "6" x2 = "18" y2 = "18" / > < / svg >
< / div >
< img id = "lb-img" src = "" alt = "大图" onclick = "event.stopPropagation()" >
< / div >
<!-- 跳转链路提示 -->
< div class = "flow-toast" id = "flowToast" > < / div >
< script >
/* ════════════════════════════════
ACTION ZONE BUILDERS
════════════════════════════════ */
/* 景点详情组件 */
function buildC1 ( poi ) {
return `
<div class="action-zone-label">查看景点详情</div>
<div class="c1-mini" onclick="flow('景点详情组件','跳转 H5 景点详情页 ${ poi . url } ')">
<div class="c1-tag">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
${ poi . tag }
</div>
<div class="c1-body">
<div class="c1-title"> ${ poi . name } </div>
<div class="c1-desc"><p> ${ poi . desc } </p></div>
<button class="c1-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
带我去
</button>
</div>
</div>
` ;
}
/* 地图点位组件 */
function buildC8 ( dest ) {
return `
<div class="action-zone-label">带我去这里</div>
<div class="c8-mini">
<div class="c8-img-wrap">
<img class="c8-img" src=" ${ dest . img } " alt=" ${ dest . name } ">
<div class="c8-dest-tag">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
目的地
</div>
</div>
<div class="c8-bar">
<div class="c8-info">
<div class="c8-name">前往 ${ dest . name } </div>
<div class="c8-dist"> ${ dest . dist } </div>
</div>
<button class="c8-btn" onclick="flow('地图点位组件','调起地图 App 导航 · ${ dest . coord } ')">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
导航
</button>
</div>
</div>
` ;
}
/* 商品组件 */
function buildC9 ( products ) {
const cards = products . map ( p => `
<div class="c9-card">
<img class="c9-thumb" src=" ${ p . img } " alt=" ${ p . name } ">
<div class="c9-body">
${ p . saleTag ? ` <div class="c9-sale-tag"> ${ p . saleTag } </div> ` : '' }
<div class="c9-name"> ${ p . name } </div>
<div class="c9-price-row">
<span class="c9-currency">¥</span>
<span class="c9-price"> ${ p . price } </span>
${ p . original ? ` <span class="c9-original">¥ ${ p . original } </span> ` : '' }
</div>
<button class="c9-btn" onclick="flow('商品组件','跳转商品详情页 · 下单 ${ p . name } ')">立即购买</button>
</div>
</div>
` ) . join ( '' ) ;
return ` <div class="action-zone-label">相关票务</div><div class="c9-scroll"> ${ cards } </div> ` ;
}
/* 路线组件 */
function buildC4 ( route ) {
const steps = route . steps . map ( ( s , i ) => `
<div class="c4-step">
<div class="c4-dot"> ${ i + 1 } </div>
<div class="c4-line">
<div class="c4-act"> ${ s . act } </div>
<div class="c4-meta"> ${ s . meta } </div>
</div>
</div>
` ) . join ( '' ) ;
return `
<div class="action-zone-label">完整路线</div>
<div class="c4-mini">
<div class="c4-head">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
${ route . title }
</div>
${ steps }
</div>
` ;
}
/* 设施位置组件 */
function buildC5 ( facility ) {
const rows = facility . items . map ( f => `
<div class="c5-row"><span class="c5-ic"> ${ f . ic } </span><span> ${ f . txt } </span></div>
` ) . join ( '' ) ;
return `
<div class="c5-mini">
<div class="c5-head">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
沿途设施
</div>
${ rows }
</div>
` ;
}
/* FAQ组件 */
function buildC12 ( faq ) {
const chips = faq . map ( q => `
<div class="c12-chip" onclick="flow('FAQ组件','把追问发回 AI 伴游区 · 「 ${ q } 」')">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
${ q }
</div>
` ) . join ( '' ) ;
return ` <div class="action-zone-label">继续追问</div><div class="c12-mini"> ${ chips } </div> ` ;
}
/* AIGC 合影组件 */
function buildAIGC ( a ) {
return `
<div class="action-zone-label">AIGC 合影</div>
<div class="aigc-mini">
<div class="aigc-img-wrap">
<img class="aigc-img" src=" ${ a . img } " alt=" ${ a . name } ">
<div class="aigc-badge">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>
AI 生成
</div>
</div>
<div class="aigc-body">
<div class="aigc-name"> ${ a . name } </div>
<div class="aigc-desc"> ${ a . desc } </div>
<button class="aigc-btn" onclick="flow('AIGC 合影','跳转 AIGC 合影功能页 · 生成专属合影')">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
生成我的合影
</button>
</div>
</div>
` ;
}
/* ════════════════════════════════
CONTENT DATA — 4 类组件演示数据
════════════════════════════════ */
const contents = {
/* ── 攻略型 · 卧龙潭漂流 ── */
guide : {
title : '下水之前，先听小七唠两句' ,
badge : '漂流攻略' ,
badgeColor : 'text-amber-600 bg-amber-50 border-amber-100' ,
/* content_summary = guide_conclusion 前 30 字 */
summary : '卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…' ,
body : `
<p>卧龙潭的水，是那种一眼就让人想跳进去的绿。<strong>皮筏艇漂流</strong>全程约两公里，三段激流接连而下，水花会结结实实拍在脸上——这趟值得冲，但晕水的朋友得先掂量掂量。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%E6%BC%82%E6%B5%81%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="卧龙潭漂流">
<h5>下水前，这几样别落下</h5>
<div class="tip-block">
① 换洗衣服塞进防水袋，手机一定要封好<br>
② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br>
③ 贵重东西先存好寄存柜，别揣身上
</div>
<p>小七的私心建议：挑 <strong>上午九点到十一点</strong> 这一场。水量足、太阳还没毒,漂下来浑身舒坦,不会被晒得发昏。</p>
<h5>这些坑，提前绕开</h5>
<div class="tip-block warn">
雨后水量猛涨可能临时停漂,出发前先问一句开放状态;现场拖鞋不补租,光脚更危险。
</div>
` ,
products : [
{ name : '卧龙潭皮筏艇漂流' , img : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%E6%BC%82%E6%B5%81%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' , price : '50' , original : null , saleTag : null } ,
{ name : '鸳鸯湖玻璃船' , img : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' , price : '50' , original : null , saleTag : '漂完顺路' }
] ,
faq : [ '几岁的孩子能玩' , '会不会全身湿透' , '漂完去哪儿歇脚' ]
} ,
/* ── 攻略型·发散模式 · 第一次来小七孔 ── */
overview : {
title : '第一次来小七孔，照着这条线走就对了' ,
badge : '初游攻略' ,
badgeColor : 'text-amber-600 bg-amber-50 border-amber-100' ,
/* content_summary = guide_conclusion 前 30 字 */
summary : '第一次来，别犹豫，直接锁死「东门进、西门出」这条线…' ,
body : `
<p>第一次来小七孔，别犹豫，直接锁死 <strong>东门进、西门出</strong> 这条线。</p>
<p>这是景区最完整的打法——全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%85%A8%E6%99%AF%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔全景">
<h5>这几个地方不能错过</h5>
<p>这条线上景点很密，但下面这几个是真正的"灵魂"，到了千万别急着赶路。</p>
<p><strong>① 小七孔古桥</strong> 这是整个景区名字的由来，也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上，七孔拱桥倒映在碧绿的水里，怎么拍都像画。记得低头看看桥下的水——平时碧蓝翠绿，汛期还能看到"半河清水半河浊水"的奇观。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23888780%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235f5e5a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%8F%A4%E6%A1%A5%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔古桥">
<p><strong>② 68 级跌水瀑布 & 拉雅瀑布</strong> ， ，
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E68%E7%BA%A7%E8%B7%8C%E6%B0%B4%E7%80%91%E5%B8%83%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="68级跌水瀑布">
<p><strong>③ 水上森林</strong> 这一段特别有意思——路是修在水里的，树也是长在水里的。你可以踩着石墩在水面上走，脚边是清凉的溪水流过，两旁是茂密的喀斯特森林，像一脚闯进了绿野仙踪的世界。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23639922%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233b6d11%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E6%B0%B4%E4%B8%8A%E6%A3%AE%E6%9E%97%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="水上森林">
<p><strong>④ 鸳鸯湖</strong> 这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道，一定要去划船（推荐透明船），钻进那些只有船能过的狭窄水道，阳光透过树叶洒在水面上，光影美得不真实。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="鸳鸯湖">
<p><strong>⑤ 卧龙潭</strong> 路线的终点，也是颜值天花板。潭水蓝得像一块巨大的蓝宝石，平静得没有一丝波纹。如果时间赶得上，一定要体验这里的漂流——从高处滑下、穿过树林，刺激又凉快，是整趟行程的高潮。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="卧龙潭">
<h5>一天大概这样分</h5>
<div class="tip-block">
上午（约 3 小时）：东门进，先走古桥、看跌水与拉雅瀑布<br>
中午（约 1 小时）：在驿站歇脚吃饭，避开正午晒<br>
下午（约 3 小时）：水上森林、鸳鸯湖划船、卧龙潭收尾<br>
机动（约 1 小时）：留点空给拍照、发呆、临时想多待的地方<br>
全程顺水而下约一天，体力一般也扛得住
</div>
<h5>只有半天怎么办</h5>
<div class="tip-block">
时间紧就走精华：古桥 + 水上森林 + 卧龙潭，约 3-4 小时<br>
舍掉的部分别可惜，留个念想，下次再来
</div>
<h5>小七的话</h5>
<p>第一次来，不用追着打卡。挑两三个最想看的地方多待一会儿，比每个点都匆匆走过要值得多。具体某个点怎么玩，点开对应的攻略，我再细细跟你说。</p>
` ,
spotsRoute : {
title : '必看景点 · 按游玩顺序' ,
stops : [
{ name : '小七孔古桥' , tag : '三百年石桥，景区名字的由来' } ,
{ name : '68 级跌水瀑布 & 拉雅瀑布' , tag : '层层叠叠的水，夏天的天然空调' } ,
{ name : '水上森林' , tag : '踩着石墩在水上走的喀斯特奇景' } ,
{ name : '鸳鸯湖' , tag : '划透明船钻水道，玩水重头戏' } ,
{ name : '卧龙潭' , tag : '蓝宝石般的潭水，可玩漂流收尾' }
]
} ,
combo : { name : '小七孔畅玩套票' , img : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%85%A8%E6%99%AF%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' , price : '130' , original : '175' , desc : '门票 + 观光车 + 2 项体验，第一次来最省心' } ,
faq : [ '一天玩得完吗' , '带老人孩子怎么安排' , '几月来最好看' ]
} ,
/* ── 景点型 · 小七孔古桥 ── */
poi : {
title : '小七孔古桥 · 走了三百年的石拱' ,
badge : '景点故事' ,
badgeColor : 'text-emerald-700 bg-emerald-50 border-emerald-100' ,
/* content_summary = poi_definition 前 30 字 */
summary : '小七孔古桥是一座三百岁的七孔石桥,小七孔的名字就从这儿来…' ,
body : `
<p>小七孔古桥静静卧在响水河上,七个石拱挨着排开,桥身爬满青苔藤蔓。它建于清道光年间,<strong>三百多岁</strong>了——整个景区的名字,就是从这座桥来的。</p>
<img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23888780%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235f5e5a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%8F%A4%E6%A1%A5%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔古桥">
<h5>站在这儿,看什么</h5>
<div class="tip-block">
① 桥拱与水面倒影合成完整的圆,这是古桥最经典的一眼<br>
② 桥身的青苔和藤蔓,是三百年时间慢慢长出来的<br>
③ 桥下水浅处清澈见底,能看见鹅卵石和游鱼
</div>
<p>小七的建议:别急着走过去。先在桥侧站一会儿——古桥不是用来"打卡"的,是用来 <strong>慢慢看</strong> 的。光线斜下来的时候,石桥、绿水、倒影会一起把你框进画里。</p>
<h5>顺带一提</h5>
<div class="tip-block warn">
桥面是三百年的老石头,雨后偏滑,慢点走;别翻护栏到桥下浅滩,既危险也伤桥。
</div>
` ,
poi : {
tag : '核心地标' , name : '小七孔古桥' ,
desc : '清道光年间建的七孔石桥,响水河上的镇景之宝,小七孔之名由此而来,桥畔可观涵碧潭~' ,
url : 'poi_xiaoqikong_bridge.html'
} ,
faq : [ '古桥有什么传说' , '最佳观赏时间' , '旁边还有什么景点' ]
} ,
/* ── 路线型 · 卧龙潭 → 鸳鸯湖 ── */
nav : {
title : '漂完卧龙潭，顺道去鸳鸯湖' ,
badge : '路线指引' ,
badgeColor : 'text-violet-600 bg-violet-50 border-violet-100' ,
/* content_summary = route_summary 前 30 字 */
summary : '卧龙潭到鸳鸯湖,坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…' ,
body : `
<p>漂完卧龙潭,人多半是湿着、累着的——这时候去鸳鸯湖刚刚好。坐观光车顺路不绕,二十分钟左右就到。</p>
<h5>鸳鸯湖分上下湖,先选好玩哪个</h5>
<p style="margin-bottom:8px;">鸳鸯湖不是一个码头,它分成上下两个湖,玩的船不一样,<strong>下车站点也不同</strong>——上车前先选好。</p>
<div class="vs-wrap">
<div class="vs-col">
<div class="vs-head"><span class="vs-dot" style="background:#3b82f6"></span>上湖 · 鸳湖</div>
<div class="vs-boat" style="color:#2563eb">玻璃船 ¥50</div>
<div class="vs-row">透明船底,<b>适合拍照</b></div>
<div class="vs-row">带老人孩子图轻松</div>
<div class="vs-row">在 <b>鸳鸯湖上湖站</b> 下车</div>
</div>
<div class="vs-col">
<div class="vs-head"><span class="vs-dot" style="background:#10b981"></span>下湖 · 鸯湖</div>
<div class="vs-boat" style="color:#059669">铁皮船 ¥30</div>
<div class="vs-row">自己划,1-6 人一船</div>
<div class="vs-row"><b>水上迷宫</b>穿林,更有乐趣</div>
<div class="vs-row">在 <b>鸳鸯湖站</b> 下车,再走 4 分钟</div>
</div>
</div>
<p>时间够的话两个湖都能玩,中间有观光车接驳。</p>
<h5>路上留个心</h5>
<div class="tip-block warn">
① 旺季观光车要排队,上午人最多<br>
② 下湖枯水期水位低,水上迷宫游线可能关闭,购票前先问一句<br>
③ 雨天石板路偏滑,带孩子老人慢一点
</div>
` ,
route : {
title : '卧龙潭 → 鸳鸯湖 · 看准上下湖' ,
steps : [
{ act : '卧龙潭码头 → 卧龙潭站' , meta : '步行约 5 分钟 · 认准观光车乘车点' } ,
{ act : '上车前先认准方向：去上湖 or 下湖' , meta : '两个湖站点不同,排队通道也不同,别走错' } ,
{ act : 'A·去上湖玩玻璃船 → 鸳鸯湖上湖站下车' , meta : '车程约 6 分钟 · 玻璃船 ¥50/人' } ,
{ act : 'B·去下湖玩铁皮船 → 鸳鸯湖站下车' , meta : '车程约 12 分钟 · 下车再步行 4 分钟 · 铁皮船 ¥30/人' }
]
} ,
facility : {
items : [
{ ic : '🚻' , txt : '卧龙潭站 · 洗手间 + 换洗寄存点' } ,
{ ic : '🍦' , txt : '鸳鸯湖上湖 · 美食驿站(文创雪糕)+ 休息亭' } ,
{ ic : '🍜' , txt : '鸳鸯湖站 · 美食驿站 + 充电宝租赁' } ,
{ ic : '🚻' , txt : '下湖卫生间在景点处,上湖卫生间在售票处前 150m' }
]
} ,
faq : [ '上湖下湖哪个好玩' , '玻璃船和铁皮船怎么选' , '两个湖都玩来得及吗' ]
} ,
/* ── 拍照型 · 鸳鸯湖玻璃船 ── */
photo : {
title : '鸳鸯湖玻璃船，这样拍才不亏' ,
badge : '拍照攻略' ,
badgeColor : 'text-blue-600 bg-blue-50 border-blue-100' ,
/* content_summary = photo_conclusion 前 30 字 */
summary : '玻璃船拍照,关键是拍水下那抹通透的绿,顺光时段最出片…' ,
body : `
<p>鸳鸯湖的玻璃船,船底是透明的,水下世界看得清清楚楚。拍照的关键就一句话:<strong>别只顾着拍人,把水下那抹通透的绿一起收进来。</strong></p>
<h5>三个不会错的机位</h5>
<div class="tip-block">
① 蹲低,贴着透明船底拍,水草和光斑会铺满整个画面<br>
② 船头回拍人物,背景是大片湖光,人物站三分之一处<br>
③ 把手伸进光里,拍水面波纹和指尖,是很灵的细节
</div>
<p>时间上,挑 <strong>上午十点到下午两点</strong> 的顺光时段。阳光直直照进水里,那种绿才透得出来——阴天和傍晚,水色会闷,差很多。</p>
<h5>手机党看这里</h5>
<div class="tip-block">
手机开 0.5x 广角,水面和船一起进画;隔着玻璃拍记得擦干净船底;逆光时手动点一下水面降曝光。
</div>
` ,
img : {
thumb : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' ,
full : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%20%C2%B7%20%E5%A4%A7%E5%9B%BE%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' ,
title : '玻璃船底机位' , sub : '蹲低贴船底 · 上午顺光'
} ,
aigc : {
name : '鸳鸯湖玻璃船 AIGC 合影' ,
img : 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E' ,
desc : '上船拍一张,小七帮你一键生成专属合影,不用求人也不用自拍杆'
} ,
faq : [ '几点光线最好' , '船上能站起来拍吗' , '穿什么颜色上镜' ]
}
} ;
/* ════════════════════════════════
RENDER
════════════════════════════════ */
/* 折叠态摘要回填 */
document . getElementById ( 'sum-guide' ) . textContent = contents . guide . summary ;
document . getElementById ( 'sum-poi' ) . textContent = contents . poi . summary ;
document . getElementById ( 'sum-nav' ) . textContent = contents . nav . summary ;
document . getElementById ( 'sum-photo' ) . textContent = contents . photo . summary ;
document . getElementById ( 'sum-overview' ) . textContent = contents . overview . summary ;
/* action_zone 按组件类型拼装 */
function buildActionZone ( d ) {
let html = '' ;
if ( d . spotsRoute ) html += buildSpotsRoute ( d . spotsRoute ) ; // 必看景点·游玩顺序
if ( d . poi ) html += buildC1 ( d . poi ) ; // 景点详情组件
if ( d . route ) html += buildC4 ( d . route ) ; // 路线组件
if ( d . facility ) html += buildC5 ( d . facility ) ; // 设施位置组件
if ( d . img ) html += buildC7 ( d . img ) ; // 图片组件
if ( d . dest ) html += buildC8 ( d . dest ) ; // 地图点位组件
if ( d . products ) html += buildC9 ( d . products ) ; // 商品组件
if ( d . combo ) html += buildCombo ( d . combo ) ; // 套票组件
if ( d . aigc ) html += buildAIGC ( d . aigc ) ; // AIGC 合影
if ( d . faq ) html += buildC12 ( d . faq ) ; // FAQ组件
html += '<div class="action-zone-bottom"></div>' ;
return html ;
}
/* 必看景点 · 按游玩顺序（借鉴路线组件「完整路线」样式） */
function buildSpotsRoute ( sr ) {
const stops = sr . stops . map ( ( s , i ) => {
const arrow = i < sr . stops . length - 1 ? `
<div style="display:flex;justify-content:center;padding:3px 0;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5dcaa5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="6 13 12 19 18 13"/></svg>
</div> ` : '' ;
return `
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f1f8f4;border-radius:14px;border:0.5px solid #d8ebe0;cursor:pointer;" onclick="flow('列表组件','点进「 ${ s . name } 」景点详情')">
<div style="width:22px;height:22px;border-radius:50%;background:#0f6e56;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;"> ${ i + 1 } </div>
<div style="flex:1;min-width:0;">
<div style="font-size:14px;font-weight:900;color:#1e293b;"> ${ s . name } </div>
<div style="font-size:11px;font-weight:700;color:#5f8a76;margin-top:2px;"> ${ s . tag } </div>
</div>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#9fd9bf" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
${ arrow } ` ;
} ) . join ( '' ) ;
return `
<div class="action-zone-label"> ${ sr . title } </div>
<div style="padding:0 16px;"> ${ stops } </div>
` ;
}
/* 套票组件 */
function buildCombo ( c ) {
return `
<div class="action-zone-label">套票推荐</div>
<div style="margin:0 16px;background:#fff;border-radius:18px;border:1px solid #fde68a;overflow:hidden;">
<div style="display:flex;gap:12px;padding:12px;">
<img src=" ${ c . img } " alt=" ${ c . name } " style="width:78px;height:78px;border-radius:12px;object-fit:cover;flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-size:14px;font-weight:900;color:#1e293b;"> ${ c . name } </div>
<div style="font-size:11px;font-weight:700;color:#94a3b8;margin:3px 0 6px;line-height:1.5;"> ${ c . desc } </div>
<div style="display:flex;align-items:baseline;gap:4px;">
<span style="font-size:12px;font-weight:900;color:#f43f5e;">¥</span>
<span style="font-size:22px;font-weight:900;color:#f43f5e;letter-spacing:-0.5px;"> ${ c . price } </span>
${ c . original ? ` <span style="font-size:11px;font-weight:700;color:#cbd5e1;text-decoration:line-through;">¥ ${ c . original } </span> ` : '' }
</div>
</div>
</div>
<button onclick="flow('套票组件','跳转套票详情页 · ${ c . name } ')" style="width:100%;background:#fbbf24;color:#451a03;border:none;padding:11px;font-size:13px;font-weight:900;cursor:pointer;-webkit-tap-highlight-color:transparent;">查看套票详情</button>
</div>
` ;
}
/* 图片组件（拍照型用） */
function buildC7 ( img ) {
const caption = img . title ? `
<div style="position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0));border-radius:0 0 16px 16px;">
<div style="color:#fff;font-size:13px;font-weight:900;margin-bottom:2px;"> ${ img . title } </div>
${ img . sub ? ` <div style="color:rgba(255,255,255,0.75);font-size:11px;font-weight:700;"> ${ img . sub } </div> ` : '' }
</div> ` : '' ;
return `
<div class="action-zone-label">查看机位图</div>
<div style="margin:0 16px;border-radius:16px;overflow:hidden;cursor:pointer;position:relative;" onclick="openLB(' ${ img . full } ')">
<img src=" ${ img . thumb } " alt=" ${ img . title || '大图' } " style="width:100%;height:200px;object-fit:cover;display:block;">
${ caption }
<div style="position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
</div>
</div>
` ;
}
/* ── transitions ── */
const p1 = document . getElementById ( 'p1' ) ;
const p2 = document . getElementById ( 'p2' ) ;
const screen = document . getElementById ( 'screen' ) ;
function syncH ( el ) { screen . style . minHeight = el . scrollHeight + 'px' ; }
function goDetail ( type ) {
const d = contents [ type ] ;
document . getElementById ( 'p2-title' ) . textContent = d . title ;
const badge = document . getElementById ( 'p2-badge' ) ;
badge . textContent = d . badge ;
badge . className = ` text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border ${ d . badgeColor } ` ;
document . getElementById ( 'rich-body' ) . innerHTML = d . body ;
document . getElementById ( 'action-zone' ) . innerHTML = buildActionZone ( d ) ;
p1 . classList . add ( 'out' ) ;
p2 . classList . add ( 'in' ) ;
setTimeout ( ( ) => syncH ( p2 ) , 60 ) ;
flow ( '展开' , '折叠态 → 展开态 · content_summary 换成完整 content_body' ) ;
}
function goBack ( ) {
p1 . classList . remove ( 'out' ) ;
p2 . classList . remove ( 'in' ) ;
setTimeout ( ( ) => syncH ( p1 ) , 60 ) ;
}
/* ── lightbox ── */
function openLB ( src ) {
document . getElementById ( 'lb-img' ) . src = src ;
document . getElementById ( 'lightbox' ) . classList . add ( 'open' ) ;
document . body . style . overflow = 'hidden' ;
flow ( '图片组件' , '点开机位样张大图' ) ;
}
function closeLB ( ) {
document . getElementById ( 'lightbox' ) . classList . remove ( 'open' ) ;
document . body . style . overflow = '' ;
}
/* ── 跳转链路提示 ── */
let flowTimer = null ;
function flow ( label , text ) {
const t = document . getElementById ( 'flowToast' ) ;
t . innerHTML = ` <span class="ft-label"> ${ label } › ${ text } ` ;
t . classList . add ( 'show' ) ;
clearTimeout ( flowTimer ) ;
flowTimer = setTimeout ( ( ) => t . classList . remove ( 'show' ) , 2600 ) ;
}
window . addEventListener ( 'load' , ( ) => syncH ( p1 ) ) ;
< / script >
< / body >
< / html >
