hulai-website/pages/guide-custom.vue
Mimingguang ee078b61bc feat: 后台管理系统完整重构 + 前后台数据联通
- 后台全面引入 Naive UI 组件库,统一 UI 规范
- 前台 usePublicApi 切换到 API 调用(GET /api/content/[key])
- 前后台数据源统一(site_content 表)
- 产品线统一管理(tour/camp/course 三套编辑器)
- 产品数据归一化(itinerary/faq/pricing 格式统一)
- 表单提交 API 改写入 submissions 表
- 新增 submissions 标记已读 API
- site-content PUT 支持 upsert
- 修复前台 bug(stories 路由冲突、占位符警告、selector breadcrumb)
- 消除 PageHero 类型警告(useSEO reactive 修复)
- 25 个前台页面全部 HTTP 200,展示效果不变

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 17:48:02 +08:00

260 行
8.9 KiB
Vue

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<template>
<div class="page-guide-custom">
<LayoutPageHero
title="呼伦贝尔定制游怎么选"
subtitle="定制游 vs 跟团游 vs 自由行,一篇讲透"
:breadcrumbs="[{ text: '出行指南', to: '/guides' }, { text: '定制游怎么选' }]"
background-image="/images/seasons/summer-river.jpg"
/>
<section class="page-tldr" aria-label="定制游摘要">
<div class="container">
<div class="page-tldr-inner">
<p>呼伦贝尔定制游是一家一单一车的私家出行方式区别于传统跟团游的拼团大巴和走马观花本文解释定制游的优势适合人群价格构成帮你判断是否适合选择定制游</p>
</div>
</div>
</section>
<article class="section">
<div class="container article-body">
<h2>什么是定制游</h2>
<p>定制游的核心是一家一单一车你的家庭独享一辆车和一位领队行程根据你的需求量身安排不与陌生人拼团出发时间游玩节奏停留时长都可以灵活调整孩子累了可以多休息遇到好风景可以多停一会儿</p>
<p>这不是高价版的跟团游而是完全不同的旅行方式</p>
<h2>定制游 vs 跟团游 vs 自由行</h2>
<div class="compare-table-wrap">
<table class="compare-table">
<thead>
<tr>
<th></th>
<th>定制游</th>
<th>跟团游</th>
<th>自由行</th>
</tr>
</thead>
<tbody>
<tr>
<td class="row-label">用车</td>
<td class="highlight">一家一车专属司机</td>
<td>拼团大巴30-50</td>
<td>自驾或包车</td>
</tr>
<tr>
<td class="row-label">行程</td>
<td class="highlight">按家庭需求定制</td>
<td>固定路线统一安排</td>
<td>完全自己规划</td>
</tr>
<tr>
<td class="row-label">节奏</td>
<td class="highlight">随走随停灵活调整</td>
<td>按时间表走赶景点</td>
<td>自由但费心</td>
</tr>
<tr>
<td class="row-label">领队</td>
<td class="highlight">专属领队全程陪同</td>
<td>导游带大团</td>
<td></td>
</tr>
<tr>
<td class="row-label">购物</td>
<td class="highlight">全程零购物</td>
<td>可能有购物店</td>
<td></td>
</tr>
<tr>
<td class="row-label">适合</td>
<td class="highlight">亲子家庭品质出行</td>
<td>预算有限不想操心</td>
<td>经验丰富的老手</td>
</tr>
</tbody>
</table>
</div>
<h2>为什么亲子家庭更适合定制游</h2>
<p>带孩子旅行和大人出行完全不同孩子需要按自己的节奏来可能早上起不来可能中午要午睡可能在某个地方玩嗨了不想走跟团游的固定时间表很难适配孩子的节奏自由行又需要父母花大量精力规划路线</p>
<p>定制游解决的正是这个问题专业的定制师提前根据孩子年龄安排行程节奏专属领队全程照顾家长只需要带着孩子享受旅行</p>
<h2>定制游的价格构成</h2>
<p>定制游的价格包含车辆住宿领队服务活动体验和保险正餐自理看起来比跟团游贵但每一分钱都花在了体验上</p>
<ul>
<li>没有购物店不会被拉去消费</li>
<li>没有隐形消费费用明细清晰透明</li>
<li>没有赶场式行程每个地方都停够看够</li>
<li>所有资源专属调配你的领队只服务你一家</li>
</ul>
<p>以呼籁旅行为例5天4晚行程舒适套餐2580元/人起高档套餐3380元/人起价格随出行日期浮动定金500元/出发前7天可无条件退改</p>
<h2>怎么判断自己适不适合定制游</h2>
<p>如果你符合以下任一条件定制游大概率是更好的选择</p>
<ul>
<li>带3-12岁孩子出行需要灵活节奏</li>
<li>三代同行需要照顾老人和孩子</li>
<li>对住宿品质有要求不想住快捷酒店</li>
<li>不想和陌生人拼团注重私密性</li>
<li>第一次去呼伦贝尔不了解路线</li>
<li>想深度体验而不是走马观花</li>
</ul>
<h2>呼籁旅行的定制游有什么不同</h2>
<p>呼籁旅行深耕呼伦贝尔11年是本地自营的亲子游品牌不是中间商转手我们有自己的车队自己的营地自己的旅拍团队从产品设计到服务交付全链路自己把控</p>
<p>目前提供额吉的故乡V9系列共6个版本5天4晚至7天6晚每个版本都是针对不同家庭需求专门设计的不是简单增减天数每个家庭配备5人服务团队定制师+房务管家+车务管家+客服管家+领队</p>
<div class="article-cta">
<h3>想了解具体行程</h3>
<div class="cta-links">
<NuxtLink to="/products" class="cta-btn cta-btn--primary">查看6个版本行程</NuxtLink>
<NuxtLink to="/selector" class="cta-btn cta-btn--outline">1分钟匹配最适合的版本</NuxtLink>
<NuxtLink to="/contact" class="cta-btn cta-btn--outline">联系定制师免费咨询</NuxtLink>
</div>
</div>
</div>
</article>
</div>
</template>
<script setup>
import { useBreadcrumbSchema, useFAQPageSchema } from '~/composables/useJsonLd'
useHead({
title: '呼伦贝尔定制游怎么选 - 定制游vs跟团游vs自由行 - 呼籁旅行',
meta: [
{ name: 'description', content: '呼伦贝尔定制游是一家一单一车的私家出行方式。本文对比定制游、跟团游、自由行的区别,解释定制游的价格构成和适合人群,帮你判断是否适合选择呼伦贝尔定制游。' },
{ name: 'keywords', content: '呼伦贝尔定制游,定制游和跟团游的区别,呼伦贝尔旅游怎么选,呼伦贝尔一家一车,呼伦贝尔私家团,呼伦贝尔亲子游' },
],
})
useBreadcrumbSchema([
{ text: '首页', to: '/' },
{ text: '出行指南', to: '/guides' },
{ text: '定制游怎么选' },
])
</script>
<style lang="less" scoped>
.article-body {
max-width: 760px;
margin: 0 auto;
padding-bottom: @space-2xl;
h2 {
font-size: @font-size-xl;
font-weight: @font-weight-bold;
color: @color-text-primary;
margin: @space-2xl 0 @space-md;
&:first-child {
margin-top: 0;
}
}
p {
font-size: @font-size-base;
color: @color-text-secondary;
line-height: @line-height-loose;
margin-bottom: @space-md;
}
ul {
padding-left: @space-lg;
margin-bottom: @space-md;
li {
font-size: @font-size-base;
color: @color-text-secondary;
line-height: @line-height-loose;
margin-bottom: @space-xs;
}
}
}
.compare-table-wrap {
overflow-x: auto;
margin: @space-lg 0 @space-xl;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: @font-size-sm;
th, td {
padding: @space-sm @space-md;
text-align: left;
border-bottom: 1px solid @color-border;
}
th {
background: @color-bg-gray;
font-weight: @font-weight-bold;
color: @color-text-primary;
&:nth-child(2) {
color: @color-primary;
}
}
.row-label {
font-weight: @font-weight-medium;
color: @color-text-primary;
white-space: nowrap;
}
.highlight {
color: @color-primary;
font-weight: @font-weight-medium;
}
td {
color: @color-text-secondary;
}
}
.article-cta {
margin-top: @space-2xl;
padding: @space-xl;
background: @color-primary-bg;
border-radius: @border-radius-lg;
text-align: center;
h3 {
font-size: @font-size-lg;
color: @color-text-primary;
margin-bottom: @space-lg;
}
}
.cta-links {
display: flex;
gap: @space-md;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn {
display: inline-block;
padding: @space-sm @space-lg;
border-radius: @border-radius-md;
text-decoration: none;
font-size: @font-size-sm;
font-weight: @font-weight-medium;
transition: all @transition-fast;
&--primary {
background: @color-primary;
color: #fff;
&:hover { background: @color-primary-light; }
}
&--outline {
background: @color-bg-white;
color: @color-primary;
border: 1px solid @color-primary;
&:hover { background: @color-primary; color: #fff; }
}
}
</style>