606 行
16 KiB
Vue
606 行
16 KiB
Vue
<template>
|
||
<div class="page-summer-camp">
|
||
<LayoutPageHero
|
||
:title="seo.h1"
|
||
:subtitle="heroes?.['summer-camp'] || '呼伦贝尔草原亲子游学营·6天5晚·每期7-9组家庭·5-12岁'"
|
||
:breadcrumbs="[{ text: '小蒙马亲子游学营' }]"
|
||
background-image="/images/summer-camp/river-banner.jpg"
|
||
/>
|
||
|
||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||
<section class="page-tldr" aria-label="夏令营摘要">
|
||
<div class="container">
|
||
<div class="page-tldr-inner">
|
||
<p>小蒙马亲子游学营：呼伦贝尔草原亲子游学营2.0，6天5晚，每期7-9组家庭，5-12岁亲子同行。草原音乐会、写生创作、白桦林非遗研学、亲子马术、做列巴、1200米滑草畅玩，双领队+全程摄影师+餐食全含。2025年11期期期满员，2026年开设30期。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心定位 -->
|
||
<section v-if="camp" class="section">
|
||
<div class="container">
|
||
<div class="camp-hero">
|
||
<div class="camp-mascot">
|
||
<img
|
||
:src="images.mascot.xiaomengma"
|
||
alt="小蒙马 - 小蒙马亲子游学营吉祥物，一只可爱的蒙古小马形象"
|
||
width="200"
|
||
height="200"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
<div class="camp-intro">
|
||
<h2 class="camp-slogan">孩子在探索世界，你也在找回自己</h2>
|
||
<p class="camp-positioning">{{ camp.positioning }}</p>
|
||
<div class="camp-meta">
|
||
<span class="camp-meta-item">{{ camp.days }}天{{ camp.nights }}晚</span>
|
||
<span class="camp-meta-item">每期7-9组家庭</span>
|
||
<span class="camp-meta-item">亲子同行</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 实拍照片 + 期数数据 -->
|
||
<section v-if="camp && images" class="section section--warm reveal">
|
||
<div class="container">
|
||
<div class="camp-gallery">
|
||
<div class="camp-photo">
|
||
<img
|
||
:src="images.summerCamp.river"
|
||
alt="小蒙马亲子游学营在莫日格勒河旁举旗合影，背景是蜿蜒的草原河流"
|
||
width="1600"
|
||
height="1067"
|
||
loading="lazy"
|
||
/>
|
||
<span class="camp-photo-tag">莫日格勒河</span>
|
||
</div>
|
||
<div class="camp-photo">
|
||
<img
|
||
:src="images.summerCamp.grassland"
|
||
alt="小蒙马亲子游学营亲子家庭在呼伦贝尔草原上合影，手持小蒙马标志牌"
|
||
width="1600"
|
||
height="1067"
|
||
loading="lazy"
|
||
/>
|
||
<span class="camp-photo-tag">草原合影</span>
|
||
</div>
|
||
<div class="camp-photo">
|
||
<img
|
||
:src="images.summerCamp.birch"
|
||
alt="小蒙马亲子游学营亲子家庭在白桦林合影，家长和孩子们一起开心比耶"
|
||
width="1600"
|
||
height="1067"
|
||
loading="lazy"
|
||
/>
|
||
<span class="camp-photo-tag">白桦林研学</span>
|
||
</div>
|
||
<div class="camp-photo">
|
||
<img
|
||
:src="images.summerCamp.graduation"
|
||
alt="小蒙马亲子游学营结营仪式，家长和孩子们手持结营证书在营地合影"
|
||
width="1600"
|
||
height="1067"
|
||
loading="lazy"
|
||
/>
|
||
<span class="camp-photo-tag">结营仪式</span>
|
||
</div>
|
||
</div>
|
||
<div class="camp-stats">
|
||
<div class="camp-stat-item">
|
||
<span class="camp-stat-value">{{ camp.sessions['2025'] }}</span>
|
||
<span class="camp-stat-label">2025年成功举办期数</span>
|
||
</div>
|
||
<div class="camp-stat-item">
|
||
<span class="camp-stat-value">{{ camp.sessions['2026'] }}</span>
|
||
<span class="camp-stat-label">2026年计划开营期数</span>
|
||
</div>
|
||
<div class="camp-stat-item">
|
||
<span class="camp-stat-value">7-9</span>
|
||
<span class="camp-stat-label">每期家庭数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 中间 CTA：看完照片后的转化入口 -->
|
||
<CommonSectionCTA
|
||
title="想了解营期安排和费用？"
|
||
description="添加微信客服，获取最新营期时间和报名方式"
|
||
:links="[{ to: '/contact', text: '咨询小蒙马亲子游学营' }]"
|
||
/>
|
||
|
||
<!-- 四大原则 -->
|
||
<section v-if="camp" class="section reveal">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="st('summerCamp.principles', '行程设计四大原则')" :subtitle="st('summerCamp.principles', '每一处安排都经过精心考量', 'subtitle')" />
|
||
<div class="principles-grid">
|
||
<div v-for="(p, i) in camp.principles" :key="i" class="principle-card">
|
||
<div class="principle-index">{{ String(i + 1).padStart(2, '0') }}</div>
|
||
<template v-if="p && typeof p === 'object'">
|
||
<h3 class="principle-name">{{ p.title }}</h3>
|
||
<p v-if="p.desc" class="principle-desc">{{ p.desc }}</p>
|
||
</template>
|
||
<h3 v-else class="principle-name">{{ p }}</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 行程概览 -->
|
||
<section v-if="camp" class="section reveal">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="st('summerCamp.itinerary', '6天行程概览')" :subtitle="st('summerCamp.itinerary', '不赶路、不折腾，每一天都有记忆点', 'subtitle')" />
|
||
<div class="itinerary-list">
|
||
<div v-for="(day, i) in camp.itinerary" :key="i" class="itinerary-item">
|
||
<div class="itinerary-day">D{{ day.day || i + 1 }}</div>
|
||
<div class="itinerary-content">
|
||
<p class="itinerary-title">{{ day.title }}</p>
|
||
<p v-if="day.summary" class="itinerary-text">{{ day.summary }}</p>
|
||
<p v-if="day.distance" class="itinerary-distance">{{ day.distance }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心体验 -->
|
||
<section v-if="camp" class="section section--warm reveal">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="st('summerCamp.activities', '行程核心体验')" :subtitle="st('summerCamp.activities', '草原写生·非遗研学·民俗体验，每一天都有收获', 'subtitle')" />
|
||
<div class="activities-grid">
|
||
<div v-for="(activity, i) in camp.coreActivities" :key="i" class="activity-card">
|
||
<div class="activity-index">{{ String(i + 1).padStart(2, '0') }}</div>
|
||
<template v-if="activity && typeof activity === 'object'">
|
||
<h3 class="activity-name">{{ activity.name || activity.title }}</h3>
|
||
<p v-if="activity.desc" class="activity-text">{{ activity.desc }}</p>
|
||
</template>
|
||
<p v-else class="activity-text">{{ activity }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 与V9的区别 -->
|
||
<section v-if="camp" class="section reveal">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="st('summerCamp.compare', '小蒙马亲子游学营 vs 额吉的故乡')" :subtitle="st('summerCamp.compare', '两种产品，两种精彩', 'subtitle')" />
|
||
<div class="compare-cards">
|
||
<div class="compare-card compare-card--camp">
|
||
<h3>小蒙马亲子游学营</h3>
|
||
<ul>
|
||
<li>7-9组家庭拼团出发，孩子有同龄玩伴</li>
|
||
<li>两位亲子领队全程带队，家长可以当甩手掌柜</li>
|
||
<li>每天都有设计好的研学课程和亲子活动</li>
|
||
<li>全程跟拍摄影师，每天精修照片发群</li>
|
||
<li>餐食全含，不用操心吃什么</li>
|
||
<li>6天5晚，节奏舒缓不赶路</li>
|
||
</ul>
|
||
</div>
|
||
<div class="compare-card compare-card--v9">
|
||
<h3>额吉的故乡·亲子版</h3>
|
||
<ul>
|
||
<li>一单一团，你的家庭独享一辆车、一位领队</li>
|
||
<li>路线更远，含满洲里，覆盖草原+森林+边境+城市</li>
|
||
<li>正餐不含，可以自己探索当地美食</li>
|
||
<li>累计10000+家庭选择，国家版权局版权认证产品</li>
|
||
<li>行程灵活自由，按自己节奏走</li>
|
||
<li>4-7天多版本可选</li>
|
||
</ul>
|
||
<NuxtLink to="/products" class="compare-link">查看V9系列 →</NuxtLink>
|
||
</div>
|
||
</div>
|
||
<p class="compare-detail">{{ camp.differenceFromV9 }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 家长常见问题（可折叠） -->
|
||
<section class="section section--gray">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="st('summerCamp.faq', '家长常见问题')" />
|
||
<div class="camp-faq">
|
||
<FaqItem
|
||
v-for="(item, i) in campFAQ"
|
||
:key="item.question || item.q"
|
||
:question="item.question || item.q"
|
||
:answer="item.answer || item.a"
|
||
:initial-open="i === 0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部 CTA：双入口 -->
|
||
<CommonSectionCTA
|
||
title="想了解家庭一起出行的产品？"
|
||
description="额吉的故乡V9系列，一家一单一车，全家共享草原时光"
|
||
:links="[
|
||
{ to: '/contact', text: '咨询小蒙马亲子游学营' },
|
||
{ to: '/products', text: '查看额吉的故乡V9系列' },
|
||
]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useBreadcrumbSchema, useSummerCampSchema } from '~/composables/useJsonLd'
|
||
|
||
const { data: camp } = await usePublicApi('summer-camp')
|
||
const { data: images } = await usePublicApi('images')
|
||
const { data: heroes } = await usePublicApi('heroes')
|
||
const st = await useSectionTitles()
|
||
|
||
const seo = useSEO('summer-camp')
|
||
useScrollReveal()
|
||
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '小蒙马亲子游学营' },
|
||
])
|
||
useSummerCampSchema(camp.value)
|
||
|
||
// 家长关心的问题（从数据文件读取）
|
||
const campFAQ = computed(() => camp.value?.faq || [])
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.camp-hero {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: @space-xl;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
|
||
.respond-md({
|
||
flex-direction: row;
|
||
text-align: left;
|
||
gap: @space-2xl;
|
||
});
|
||
}
|
||
|
||
.camp-mascot {
|
||
flex-shrink: 0;
|
||
|
||
img {
|
||
width: 160px;
|
||
height: auto;
|
||
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
|
||
}
|
||
}
|
||
|
||
.camp-intro {
|
||
flex: 1;
|
||
}
|
||
|
||
.camp-slogan {
|
||
font-size: @font-size-2xl;
|
||
color: @color-primary;
|
||
font-weight: @font-weight-bold;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
.camp-positioning {
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-loose;
|
||
margin-bottom: @space-lg;
|
||
}
|
||
|
||
.camp-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: @space-sm;
|
||
}
|
||
|
||
.camp-meta-item {
|
||
font-size: @font-size-sm;
|
||
color: @color-primary;
|
||
background: @color-primary-bg;
|
||
padding: @space-xs @space-md;
|
||
border-radius: @border-radius-full;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
// 实拍照片
|
||
.camp-gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-lg;
|
||
margin-bottom: @space-xl;
|
||
|
||
.respond-md({
|
||
grid-template-columns: repeat(2, 1fr);
|
||
});
|
||
}
|
||
|
||
.camp-photo {
|
||
position: relative;
|
||
border-radius: @border-radius-lg;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
transition: transform @transition-slow;
|
||
}
|
||
|
||
&:hover img {
|
||
transform: scale(1.03);
|
||
}
|
||
}
|
||
|
||
.camp-photo-tag {
|
||
position: absolute;
|
||
bottom: @space-sm;
|
||
left: @space-sm;
|
||
font-size: @font-size-xs;
|
||
color: #fff;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
padding: @space-xs @space-sm;
|
||
border-radius: @border-radius-full;
|
||
}
|
||
|
||
.camp-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: @space-xl;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.camp-stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.camp-stat-value {
|
||
display: block;
|
||
font-size: @font-size-3xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.camp-stat-label {
|
||
display: block;
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
margin-top: @space-xs;
|
||
}
|
||
|
||
// 四大原则
|
||
.principles-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: @space-md;
|
||
|
||
.respond-md({
|
||
grid-template-columns: repeat(4, 1fr);
|
||
});
|
||
}
|
||
|
||
.principle-card {
|
||
padding: @space-lg;
|
||
background: @color-bg-white;
|
||
border-radius: @border-radius-lg;
|
||
border: 1px solid @color-border;
|
||
text-align: center;
|
||
transition: border-color @transition-fast, box-shadow @transition-fast;
|
||
|
||
&:hover {
|
||
border-color: @color-primary-lighter;
|
||
box-shadow: @shadow-md;
|
||
}
|
||
}
|
||
|
||
.principle-index {
|
||
font-size: 28px;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary-lighter;
|
||
line-height: 1;
|
||
margin-bottom: @space-sm;
|
||
}
|
||
|
||
.principle-name {
|
||
font-size: @font-size-md;
|
||
color: @color-text-primary;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
.principle-desc {
|
||
margin-top: @space-xs;
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
// 行程概览
|
||
.itinerary-list {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-md;
|
||
}
|
||
|
||
.itinerary-item {
|
||
display: flex;
|
||
gap: @space-md;
|
||
align-items: flex-start;
|
||
padding: @space-md @space-lg;
|
||
background: @color-bg-gray;
|
||
border-radius: @border-radius-md;
|
||
border-left: 3px solid @color-primary;
|
||
transition: background @transition-fast, border-color @transition-fast;
|
||
|
||
&:hover {
|
||
background: @color-primary-bg;
|
||
}
|
||
}
|
||
|
||
.itinerary-day {
|
||
flex-shrink: 0;
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary;
|
||
min-width: 32px;
|
||
}
|
||
|
||
.itinerary-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.itinerary-title {
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-medium;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-xs;
|
||
}
|
||
|
||
.itinerary-text {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0;
|
||
}
|
||
|
||
.itinerary-distance {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
margin: @space-xs 0 0;
|
||
}
|
||
|
||
// 核心活动
|
||
.activities-grid {
|
||
.grid-responsive();
|
||
}
|
||
|
||
.activity-card {
|
||
padding: @space-xl;
|
||
background: @color-bg-white;
|
||
border-radius: @border-radius-lg;
|
||
border: 1px solid @color-border;
|
||
transition: border-color @transition-fast, box-shadow @transition-fast;
|
||
|
||
&:hover {
|
||
border-color: @color-primary-lighter;
|
||
box-shadow: @shadow-md;
|
||
}
|
||
}
|
||
|
||
.activity-index {
|
||
font-size: @font-size-3xl;
|
||
font-weight: @font-weight-bold;
|
||
margin-bottom: @space-sm;
|
||
line-height: 1;
|
||
color: @color-primary-lighter;
|
||
}
|
||
|
||
.activity-name {
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-medium;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-xs 0;
|
||
}
|
||
|
||
.activity-text {
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-loose;
|
||
margin: 0;
|
||
}
|
||
|
||
// 对比卡片
|
||
.compare-cards {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-lg;
|
||
max-width: 800px;
|
||
margin: 0 auto @space-xl;
|
||
|
||
.respond-md({
|
||
grid-template-columns: 1fr 1fr;
|
||
});
|
||
}
|
||
|
||
.compare-card {
|
||
padding: @space-xl;
|
||
border-radius: @border-radius-lg;
|
||
border: 1px solid @color-border;
|
||
|
||
h3 {
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-bold;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-sm;
|
||
}
|
||
|
||
li {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
padding-left: @space-md;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: '·';
|
||
position: absolute;
|
||
left: 0;
|
||
color: @color-primary;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.compare-card--camp {
|
||
background: @color-primary-bg;
|
||
border-color: fadeout(@color-primary, 80%);
|
||
|
||
h3 {
|
||
color: @color-primary;
|
||
}
|
||
}
|
||
|
||
.compare-card--v9 {
|
||
background: @color-bg-white;
|
||
}
|
||
|
||
.compare-link {
|
||
display: inline-block;
|
||
margin-top: @space-md;
|
||
font-size: @font-size-sm;
|
||
color: @color-primary;
|
||
text-decoration: none;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.compare-detail {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-loose;
|
||
padding: @space-lg;
|
||
background: @color-bg-gray;
|
||
border-radius: @border-radius-md;
|
||
}
|
||
|
||
// 家长FAQ
|
||
.camp-faq {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-md;
|
||
}
|
||
</style>
|