feat: 5类样式的演示页面调整
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>长文本收纳组件 · 4 类演示</title>
|
||||
<title>长文本收纳组件 · 5 类演示</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body { background: #E5EFE9; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; padding: 24px 16px; }
|
||||
@@ -115,7 +115,7 @@
|
||||
.c5-mini { margin:10px 16px 0; background:#fff; border-radius:16px; border:0.5px solid rgba(0,0,0,0.07); padding:12px 16px; }
|
||||
.c5-mini .c5-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; color:#1e293b; margin-bottom:8px; }
|
||||
.c5-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:11.5px; font-weight:700; color:#475569; }
|
||||
.c5-row .c5-ic { width:16px; text-align:center; }
|
||||
.c5-row .c5-ic { min-width:32px; text-align:center; color:#8b5cf6; font-size:10px; font-weight:900; }
|
||||
|
||||
/* ── C12 FAQ mini ── */
|
||||
.c12-mini { margin:10px 16px 0; }
|
||||
@@ -147,7 +147,7 @@
|
||||
</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>
|
||||
<span class="text-[12px] font-black text-slate-800">长文本收纳组件 · 5 类</span>
|
||||
</div>
|
||||
<p class="ml-1 text-[11px] font-bold text-slate-400 leading-relaxed">
|
||||
点击卡片 = 折叠态展开为完整内容。<br>
|
||||
@@ -194,14 +194,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 路线型 -->
|
||||
<div class="p1-card mb-3" onclick="goDetail('nav')">
|
||||
<div class="p1-card mb-3" onclick="goDetail('route')">
|
||||
<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>
|
||||
<p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-route"></p>
|
||||
</div>
|
||||
<div class="px-5 pb-4 flex items-center justify-between">
|
||||
<span class="text-[11px] text-slate-300 font-bold">点击查看完整路线</span>
|
||||
@@ -226,14 +226,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 攻略型·发散模式 -->
|
||||
<div class="p1-card" onclick="goDetail('overview')">
|
||||
<div class="p1-card" onclick="goDetail('fullDoc')">
|
||||
<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>
|
||||
<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-fullDoc"></p>
|
||||
</div>
|
||||
<div class="px-5 pb-4 flex items-center justify-between">
|
||||
<span class="text-[11px] text-slate-300 font-bold">点击查看完整攻略</span>
|
||||
@@ -279,7 +279,7 @@
|
||||
function buildC1(poi) {
|
||||
return `
|
||||
<div class="action-zone-label">查看景点详情</div>
|
||||
<div class="c1-mini" onclick="flow('景点详情组件','跳转 H5 景点详情页 ${poi.url}')">
|
||||
<div class="c1-mini" onclick="flow('景点详情组件','查看 ${poi.name} · ${poi.url || poi.name}')">
|
||||
<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}
|
||||
@@ -287,7 +287,7 @@ function buildC1(poi) {
|
||||
<div class="c1-body">
|
||||
<div class="c1-title">${poi.name}</div>
|
||||
<div class="c1-desc"><p>${poi.desc}</p></div>
|
||||
<button class="c1-btn">
|
||||
<button class="c1-btn" onclick="event.stopPropagation();flow('地图导航','调起地图 App 导航 · ${poi.address || poi.name}${poi.coord ? ` · ${poi.coord}` : ''}')">
|
||||
<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>
|
||||
@@ -324,21 +324,24 @@ function buildC8(dest) {
|
||||
|
||||
/* 商品组件 */
|
||||
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>` : ''}
|
||||
const cards = products.map(p => {
|
||||
const target = p.commodityId ? `/pages/goods/index?commodityId=${p.commodityId}` : `下单 ${p.name}`;
|
||||
return `
|
||||
<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('商品组件','跳转商品详情页 · ${target}')">立即购买</button>
|
||||
</div>
|
||||
<button class="c9-btn" onclick="flow('商品组件','跳转商品详情页 · 下单 ${p.name}')">立即购买</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`;
|
||||
}).join('');
|
||||
return `<div class="action-zone-label">相关票务</div><div class="c9-scroll">${cards}</div>`;
|
||||
}
|
||||
|
||||
@@ -368,7 +371,7 @@ function buildC4(route) {
|
||||
/* 设施位置组件 */
|
||||
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>
|
||||
<div class="c5-row"><span class="c5-ic">${f.ic || f.label}</span><span>${f.txt || f.text}</span></div>
|
||||
`).join('');
|
||||
return `
|
||||
<div class="c5-mini">
|
||||
@@ -407,7 +410,7 @@ function buildAIGC(a) {
|
||||
<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 合影功能页 · 生成专属合影')">
|
||||
<button class="aigc-btn" onclick="flow('AIGC 合影','跳转 ${a.url || '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>
|
||||
@@ -417,67 +420,80 @@ function buildAIGC(a) {
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
CONTENT DATA — 4 类组件演示数据
|
||||
CONTENT DATA — 5 类组件演示数据
|
||||
════════════════════════════════ */
|
||||
const IMAGES = {
|
||||
guide: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg',
|
||||
glassBoat: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp12.jpg',
|
||||
poi: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/comp2.png',
|
||||
photo: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg',
|
||||
aigc: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20260526101238_396_809.png',
|
||||
fullDocOverview: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc1.png',
|
||||
fullDocBridge: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc2.png',
|
||||
fullDocWaterfall: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc3.png',
|
||||
fullDocForest: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc4.png',
|
||||
fullDocLake: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc5.png',
|
||||
fullDocWolong: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc6.png',
|
||||
fullDocGoods: 'https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc7.jpg',
|
||||
};
|
||||
|
||||
const contents = {
|
||||
|
||||
/* ── 攻略型 · 卧龙潭漂流 ── */
|
||||
/* ── guide.vue · 卧龙潭漂流 ── */
|
||||
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="卧龙潭漂流">
|
||||
<p>卧龙潭的水，是那种一眼就让人想跳进去的绿。<strong>皮筏艇漂流</strong>全程约两公里，三段激流接连而下，水花会结结实实拍在脸上。这趟值得冲，但晕水的朋友得先掂量掂量。</p>
|
||||
<img class="rich-img" src="${IMAGES.guide}" alt="卧龙潭漂流">
|
||||
<h5>下水前，这几样别落下</h5>
|
||||
<div class="tip-block">
|
||||
① 换洗衣服塞进防水袋，手机一定要封好<br>
|
||||
② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br>
|
||||
③ 贵重东西先存好寄存柜，别揣身上
|
||||
</div>
|
||||
<p>小七的私心建议：挑 <strong>上午九点到十一点</strong> 这一场。水量足、太阳还没毒,漂下来浑身舒坦,不会被晒得发昏。</p>
|
||||
<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:'漂完顺路' }
|
||||
{ name:'卧龙潭皮筏艇漂流', img: IMAGES.guide, price:'50', saleTag:'热门项目', commodityId:'1032119438058270721' },
|
||||
{ name:'鸳鸯湖玻璃船', img: IMAGES.glassBoat, price:'50', saleTag:'漂完顺路', commodityId:'1032121733894451202' }
|
||||
],
|
||||
faq: ['几岁的孩子能玩','会不会全身湿透','漂完去哪儿歇脚']
|
||||
},
|
||||
|
||||
/* ── 攻略型·发散模式 · 第一次来小七孔 ── */
|
||||
overview: {
|
||||
/* ── fullDoc.vue · 第一次来小七孔 ── */
|
||||
fullDoc: {
|
||||
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="小七孔全景">
|
||||
<p>这是景区最完整的打法，全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。</p>
|
||||
<img class="rich-img" src="${IMAGES.fullDocOverview}" alt="小七孔全景">
|
||||
<h5>这几个地方不能错过</h5>
|
||||
<p>这条线上景点很密，但下面这几个是真正的"灵魂"，到了千万别急着赶路。</p>
|
||||
<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>① 小七孔古桥</strong> 这是整个景区名字的由来，也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上，七孔拱桥倒映在碧绿的水里，怎么拍都像画。记得低头看看桥下的水，平时碧蓝翠绿，汛期还能看到“半河清水半河浊水”的奇观。</p>
|
||||
<img class="rich-img" src="${IMAGES.fullDocBridge}" alt="小七孔古桥">
|
||||
|
||||
<p><strong>② 68 级跌水瀑布 & 拉雅瀑布</strong> 过了古桥没多久，你会听到水声越来越大。这一段沿着河谷走，68 级瀑布层层叠叠、一级一级往下淌；拉雅瀑布更直接，几乎是从路边喷涌而出，水雾扑面而来。夏天走这段就像开了天然空调，体感一下凉好几度。</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%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>② 68 级跌水瀑布 & 拉雅瀑布</strong> 过了古桥没多久，你会听到水声越来越大。这一段沿着河谷走，68 级瀑布层层叠叠、一级一级往下淌；拉雅瀑布更直接，几乎是从路边喷涌而出，水雾扑面而来。夏天走这段就像开了天然空调，体感一下凉好几度。</p>
|
||||
<img class="rich-img" src="${IMAGES.fullDocWaterfall}" 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="${IMAGES.fullDocForest}" 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="${IMAGES.fullDocLake}" 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="卧龙潭">
|
||||
<p><strong>⑤ 卧龙潭</strong> 路线的终点，也是颜值天花板。潭水蓝得像一块巨大的蓝宝石，平静得没有一丝波纹。如果时间赶得上，一定要体验这里的漂流，从高处滑下、穿过树林，刺激又凉快，是整趟行程的高潮。</p>
|
||||
<img class="rich-img" src="${IMAGES.fullDocWolong}" alt="卧龙潭">
|
||||
|
||||
<h5>一天大概这样分</h5>
|
||||
<div class="tip-block">
|
||||
@@ -498,132 +514,133 @@ const contents = {
|
||||
spotsRoute: {
|
||||
title: '必看景点 · 按游玩顺序',
|
||||
stops: [
|
||||
{ name:'小七孔古桥', tag:'三百年石桥，景区名字的由来' },
|
||||
{ name:'小七孔古桥', tag:'三百年石桥，景区名字的由来' },
|
||||
{ name:'68 级跌水瀑布 & 拉雅瀑布', tag:'层层叠叠的水，夏天的天然空调' },
|
||||
{ name:'水上森林', tag:'踩着石墩在水上走的喀斯特奇景' },
|
||||
{ name:'鸳鸯湖', tag:'划透明船钻水道，玩水重头戏' },
|
||||
{ name:'卧龙潭', 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 项体验，第一次来最省心' },
|
||||
combo: { name:'小七孔畅玩套票', img: IMAGES.fullDocGoods, price:'170', desc:'门票 + 观光车，第一次来最省心', commodityId:'2061335177990320129' },
|
||||
faq: ['一天玩得完吗','带老人孩子怎么安排','几月来最好看']
|
||||
},
|
||||
|
||||
/* ── 景点型 · 小七孔古桥 ── */
|
||||
/* ── poi.vue · 小七孔古桥 ── */
|
||||
poi: {
|
||||
title: '小七孔古桥 · 走了三百年的石拱',
|
||||
badge: '景点故事',
|
||||
badgeColor: 'text-emerald-700 bg-emerald-50 border-emerald-100',
|
||||
/* content_summary = poi_definition 前 30 字 */
|
||||
summary: '小七孔古桥是一座三百岁的七孔石桥,小七孔的名字就从这儿来…',
|
||||
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>
|
||||
<p>小七孔古桥静静卧在响水河上，七个石拱挨着排开，桥身爬满青苔藤蔓。它建于清道光年间，<strong>三百多岁</strong>了。整个景区的名字，就是从这座桥来的。</p>
|
||||
<img class="rich-img" src="${IMAGES.poi}" alt="小七孔古桥">
|
||||
<h5>站在这儿，看什么</h5>
|
||||
<div class="tip-block">
|
||||
① 桥拱与水面倒影合成完整的圆,这是古桥最经典的一眼<br>
|
||||
② 桥身的青苔和藤蔓,是三百年时间慢慢长出来的<br>
|
||||
③ 桥下水浅处清澈见底,能看见鹅卵石和游鱼
|
||||
① 桥拱与水面倒影合成完整的圆，这是古桥最经典的一眼<br>
|
||||
② 桥身的青苔和藤蔓，是三百年时间慢慢长出来的<br>
|
||||
③ 桥下水浅处清澈见底，能看见鹅卵石和游鱼
|
||||
</div>
|
||||
<p>小七的建议:别急着走过去。先在桥侧站一会儿——古桥不是用来"打卡"的,是用来 <strong>慢慢看</strong> 的。光线斜下来的时候,石桥、绿水、倒影会一起把你框进画里。</p>
|
||||
<p>小七的建议：别急着走过去。先在桥侧站一会儿，古桥不是用来打卡的，是用来 <strong>慢慢看</strong> 的。光线斜下来的时候，石桥、绿水、倒影会一起把你框进画里。</p>
|
||||
<h5>顺带一提</h5>
|
||||
<div class="tip-block warn">
|
||||
桥面是三百年的老石头,雨后偏滑,慢点走;别翻护栏到桥下浅滩,既危险也伤桥。
|
||||
桥面是三百年的老石头，雨后偏滑，慢点走；别翻护栏到桥下浅滩，既危险也伤桥。
|
||||
</div>
|
||||
`,
|
||||
poi: {
|
||||
tag:'核心地标', name:'小七孔古桥',
|
||||
desc:'清道光年间建的七孔石桥,响水河上的镇景之宝,小七孔之名由此而来,桥畔可观涵碧潭~',
|
||||
url:'poi_xiaoqikong_bridge.html'
|
||||
tag:'核心地标',
|
||||
name:'小七孔古桥',
|
||||
desc:'清道光年间建的七孔石桥，响水河上的镇景之宝，小七孔之名由此而来，桥畔可观涵碧潭。',
|
||||
address:'小七孔古桥',
|
||||
coord:'25.248714,107.745735'
|
||||
},
|
||||
faq: ['古桥有什么传说','最佳观赏时间','旁边还有什么景点']
|
||||
},
|
||||
|
||||
/* ── 路线型 · 卧龙潭 → 鸳鸯湖 ── */
|
||||
nav: {
|
||||
/* ── route.vue · 卧龙潭 → 鸳鸯湖 ── */
|
||||
route: {
|
||||
title: '漂完卧龙潭，顺道去鸳鸯湖',
|
||||
badge: '路线指引',
|
||||
badgeColor: 'text-violet-600 bg-violet-50 border-violet-100',
|
||||
/* content_summary = route_summary 前 30 字 */
|
||||
summary: '卧龙潭到鸳鸯湖,坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…',
|
||||
summary: '卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…',
|
||||
body: `
|
||||
<p>漂完卧龙潭,人多半是湿着、累着的——这时候去鸳鸯湖刚刚好。坐观光车顺路不绕,二十分钟左右就到。</p>
|
||||
<h5>鸳鸯湖分上下湖,先选好玩哪个</h5>
|
||||
<p style="margin-bottom:8px;">鸳鸯湖不是一个码头,它分成上下两个湖,玩的船不一样,<strong>下车站点也不同</strong>——上车前先选好。</p>
|
||||
<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">透明船底，<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 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>
|
||||
<p>时间够的话两个湖都能玩，中间有观光车接驳。</p>
|
||||
<h5>路上留个心</h5>
|
||||
<div class="tip-block warn">
|
||||
① 旺季观光车要排队,上午人最多<br>
|
||||
② 下湖枯水期水位低,水上迷宫游线可能关闭,购票前先问一句<br>
|
||||
③ 雨天石板路偏滑,带孩子老人慢一点
|
||||
① 旺季观光车要排队，上午人最多<br>
|
||||
② 下湖枯水期水位低，水上迷宫游线可能关闭，购票前先问一句<br>
|
||||
③ 雨天石板路偏滑，带孩子老人慢一点
|
||||
</div>
|
||||
`,
|
||||
route: {
|
||||
title: '卧龙潭 → 鸳鸯湖 · 看准上下湖',
|
||||
steps: [
|
||||
{ act:'卧龙潭码头 → 卧龙潭站', meta:'步行约 5 分钟 · 认准观光车乘车点' },
|
||||
{ act:'上车前先认准方向：去上湖 or 下湖', meta:'两个湖站点不同,排队通道也不同,别走错' },
|
||||
{ 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' }
|
||||
{ label:'换洗', text:'卧龙潭站 · 洗手间 + 换洗寄存点' },
|
||||
{ label:'休息', text:'鸳鸯湖上湖 · 美食驿站 + 休息亭' },
|
||||
{ label:'补给', text:'鸳鸯湖站 · 美食驿站 + 充电宝租赁' },
|
||||
{ label:'卫生间', text:'下湖卫生间在景点处，上湖卫生间在售票处前 150m' }
|
||||
]
|
||||
},
|
||||
faq: ['上湖下湖哪个好玩','玻璃船和铁皮船怎么选','两个湖都玩来得及吗']
|
||||
},
|
||||
|
||||
/* ── 拍照型 · 鸳鸯湖玻璃船 ── */
|
||||
/* ── photo.vue · 鸳鸯湖玻璃船 ── */
|
||||
photo: {
|
||||
title: '鸳鸯湖玻璃船，这样拍才不亏',
|
||||
badge: '拍照攻略',
|
||||
badgeColor: 'text-blue-600 bg-blue-50 border-blue-100',
|
||||
/* content_summary = photo_conclusion 前 30 字 */
|
||||
summary: '玻璃船拍照,关键是拍水下那抹通透的绿,顺光时段最出片…',
|
||||
summary: '玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…',
|
||||
body: `
|
||||
<p>鸳鸯湖的玻璃船,船底是透明的,水下世界看得清清楚楚。拍照的关键就一句话:<strong>别只顾着拍人,把水下那抹通透的绿一起收进来。</strong></p>
|
||||
<p>鸳鸯湖的玻璃船，船底是透明的，水下世界看得清清楚楚。拍照的关键就一句话：<strong>别只顾着拍人，把水下那抹通透的绿一起收进来。</strong></p>
|
||||
<h5>三个不会错的机位</h5>
|
||||
<div class="tip-block">
|
||||
① 蹲低,贴着透明船底拍,水草和光斑会铺满整个画面<br>
|
||||
② 船头回拍人物,背景是大片湖光,人物站三分之一处<br>
|
||||
③ 把手伸进光里,拍水面波纹和指尖,是很灵的细节
|
||||
① 蹲低，贴着透明船底拍，水草和光斑会铺满整个画面<br>
|
||||
② 船头回拍人物，背景是大片湖光，人物站三分之一处<br>
|
||||
③ 把手伸进光里，拍水面波纹和指尖，是很灵的细节
|
||||
</div>
|
||||
<p>时间上,挑 <strong>上午十点到下午两点</strong> 的顺光时段。阳光直直照进水里,那种绿才透得出来——阴天和傍晚,水色会闷,差很多。</p>
|
||||
<p>时间上，挑 <strong>上午十点到下午两点</strong> 的顺光时段。阳光直直照进水里，那种绿才透得出来，阴天和傍晚，水色会闷，差很多。</p>
|
||||
<h5>手机党看这里</h5>
|
||||
<div class="tip-block">
|
||||
手机开 0.5x 广角,水面和船一起进画;隔着玻璃拍记得擦干净船底;逆光时手动点一下水面降曝光。
|
||||
手机开 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:'蹲低贴船底 · 上午顺光'
|
||||
thumb: IMAGES.photo,
|
||||
full: IMAGES.photo,
|
||||
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:'上船拍一张,小七帮你一键生成专属合影,不用求人也不用自拍杆'
|
||||
img: IMAGES.aigc,
|
||||
desc:'上船拍一张，小七帮你一键生成专属合影，不用求人也不用自拍杆。',
|
||||
url:'https://onefeel.brother7.cn/aigc/#/home'
|
||||
},
|
||||
faq: ['几点光线最好','船上能站起来拍吗','穿什么颜色上镜']
|
||||
}
|
||||
@@ -635,9 +652,9 @@ const contents = {
|
||||
/* 折叠态摘要回填 */
|
||||
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-route').textContent = contents.route.summary;
|
||||
document.getElementById('sum-photo').textContent = contents.photo.summary;
|
||||
document.getElementById('sum-overview').textContent = contents.overview.summary;
|
||||
document.getElementById('sum-fullDoc').textContent = contents.fullDoc.summary;
|
||||
|
||||
/* action_zone 按组件类型拼装 */
|
||||
function buildActionZone(d) {
|
||||
@@ -682,6 +699,7 @@ function buildSpotsRoute(sr) {
|
||||
|
||||
/* 套票组件 */
|
||||
function buildCombo(c) {
|
||||
const target = c.commodityId ? `/pages/goods/index?commodityId=${c.commodityId}` : c.name;
|
||||
return `
|
||||
<div class="action-zone-label">套票推荐</div>
|
||||
<div style="margin:0 16px;background:#fff;border-radius:18px;border:1px solid #fde68a;overflow:hidden;">
|
||||
@@ -697,7 +715,7 @@ function buildCombo(c) {
|
||||
</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>
|
||||
<button onclick="flow('套票组件','跳转套票详情页 · ${target}')" 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>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user