刘涛
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<main class="product-detail" v-if="product">
|
||||
<section class="product-hero">
|
||||
<div class="container">
|
||||
<nav class="breadcrumb" aria-label="面包屑导航">
|
||||
<NuxtLink to="/">首页</NuxtLink> / <NuxtLink to="/products">产品线</NuxtLink> / <span>{{ product.name }}</span>
|
||||
</nav>
|
||||
<div class="hero-content">
|
||||
<span class="product-tag">{{ product.tag }}</span>
|
||||
<h1>{{ seo.h1 || product.name }}</h1>
|
||||
<p class="hero-audience">适合：{{ product.audience }}</p>
|
||||
<p class="hero-duration">{{ product.days }}天{{ product.nights }}晚 · 一家一单一车</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||||
<section class="page-tldr" aria-label="产品摘要">
|
||||
<div class="container">
|
||||
<div class="page-tldr-inner">
|
||||
<p>{{ product.name }}：{{ product.description }}适合{{ product.audience }}，{{ product.days }}天{{ product.nights }}晚，一家一单一车私家定制，旺季需提前预订。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="product-description">
|
||||
<div class="container">
|
||||
<p>{{ product.description }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="product-highlights" v-if="product.highlights?.length">
|
||||
<div class="container">
|
||||
<h2>行程亮点</h2>
|
||||
<ul>
|
||||
<li v-for="(h, i) in product.highlights" :key="i">{{ h }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="product-faq" v-if="relatedFaq.length">
|
||||
<div class="container">
|
||||
<h2>常见问题</h2>
|
||||
<div class="faq-list">
|
||||
<details v-for="q in relatedFaq" :key="q.id" class="faq-item">
|
||||
<summary>{{ q.question }}</summary>
|
||||
<p>{{ q.answer }}</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="product-cta">
|
||||
<div class="container">
|
||||
<h2>开始定制您的行程</h2>
|
||||
<p>扫码添加微信，定制师一对一为您规划</p>
|
||||
<NuxtLink to="/contact" class="cta-button">联系定制师</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import productsData from '~/data/products.json'
|
||||
import winterProductsData from '~/data/winter-products.json'
|
||||
import autumnProductsData from '~/data/autumn-products.json'
|
||||
import faqData from '~/data/faq.json'
|
||||
import useSEO from '~/composables/useSEO'
|
||||
import { useTouristTripSchema, useFAQPageSchema, useBreadcrumbSchema } from '~/composables/useJsonLd'
|
||||
|
||||
const route = useRoute()
|
||||
const productId = route.params.id
|
||||
|
||||
const allVersions = [
|
||||
...(productsData.versions || []),
|
||||
...(winterProductsData.versions || []),
|
||||
...(autumnProductsData.versions || []),
|
||||
]
|
||||
const product = allVersions.find(v => v.id === productId)
|
||||
|
||||
if (!product) {
|
||||
throw createError({ statusCode: 404, statusMessage: '产品不存在' })
|
||||
}
|
||||
|
||||
// SEO - 每个产品独立的 meta
|
||||
const seoOverrides = {
|
||||
title: `${product.name} - 呼伦贝尔${product.days}天${product.nights}晚定制游 - 呼籁旅行`,
|
||||
description: product.description?.substring(0, 160),
|
||||
h1: product.name,
|
||||
}
|
||||
const seo = useSEO('products', seoOverrides)
|
||||
|
||||
// 产品页专属 keywords
|
||||
useHead({
|
||||
meta: [
|
||||
{ name: 'keywords', content: `${product.name},呼伦贝尔${product.days}天${product.nights}晚,呼伦贝尔定制游,呼伦贝尔亲子游,${product.tag}` },
|
||||
],
|
||||
})
|
||||
|
||||
// JSON-LD: 单个产品的 TouristTrip
|
||||
useTouristTripSchema([product])
|
||||
|
||||
// 面包屑
|
||||
useBreadcrumbSchema([
|
||||
{ text: '首页', to: '/' },
|
||||
{ text: '产品线', to: '/products' },
|
||||
{ text: product.name },
|
||||
])
|
||||
|
||||
// 相关 FAQ - 从 FAQ 数据中匹配与天数/产品相关的问题
|
||||
const allQuestions = faqData.categories.flatMap(cat => cat.questions)
|
||||
const relatedFaq = allQuestions.filter(q =>
|
||||
q.question.includes(String(product.days)) ||
|
||||
q.question.includes('几天') ||
|
||||
q.question.includes('亲子') ||
|
||||
q.question.includes('区别') ||
|
||||
q.question.includes('多少钱')
|
||||
).slice(0, 5)
|
||||
|
||||
// 产品页也注入 FAQ schema（SEO精选摘要加分项）
|
||||
if (relatedFaq.length) {
|
||||
useFAQPageSchema([{ questions: relatedFaq }])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.product-hero {
|
||||
background: linear-gradient(135deg, #f0f5f1, #e8ede9);
|
||||
padding: 40px 0 48px;
|
||||
}
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
color: #7a857c;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.breadcrumb a {
|
||||
color: #3a7d44;
|
||||
text-decoration: none;
|
||||
}
|
||||
.product-tag {
|
||||
display: inline-block;
|
||||
background: #3a7d44;
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: #1a1f1c;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.hero-audience, .hero-duration {
|
||||
font-size: 16px;
|
||||
color: #4a5e4d;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.product-description {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.product-description p {
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
color: #3d4a40;
|
||||
}
|
||||
.product-highlights {
|
||||
padding: 40px 0;
|
||||
background: #fafbfa;
|
||||
}
|
||||
.product-highlights h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #1a1f1c;
|
||||
}
|
||||
.product-highlights ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.product-highlights li {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #eef0ef;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #3d4a40;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.product-highlights li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3a7d44;
|
||||
font-weight: 700;
|
||||
}
|
||||
.product-faq {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.product-faq h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #1a1f1c;
|
||||
}
|
||||
.faq-item {
|
||||
border-bottom: 1px solid #eef0ef;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.faq-item summary {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1f1c;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.faq-item summary::marker { display: none; }
|
||||
.faq-item summary::-webkit-details-marker { display: none; }
|
||||
.faq-item p {
|
||||
margin-top: 12px;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: #4a5e4d;
|
||||
}
|
||||
.product-cta {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #f0f5f1, #e8ede9);
|
||||
}
|
||||
.product-cta h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.product-cta p {
|
||||
color: #4a5e4d;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: #3a7d44;
|
||||
color: #fff;
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cta-button:hover {
|
||||
background: #2e6435;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="page-autumn">
|
||||
<LayoutPageHero
|
||||
:title="seo.h1"
|
||||
subtitle="独立成团不拼团 · 一单一车 · 随走随停 · 不错过每处风景"
|
||||
:breadcrumbs="[{ text: '产品线', to: '/products' }, { text: '游牧的森林' }]"
|
||||
/>
|
||||
|
||||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||||
<section class="page-tldr" aria-label="秋季产品摘要">
|
||||
<div class="container">
|
||||
<div class="page-tldr-inner">
|
||||
<p>游牧的森林——呼籁旅行秋季产品线：9月下旬至10月，大兴安岭金色白桦林+草原秋景，4-7天多版本，独立成团不拼团，一家一单一车。适合亲子家庭和摄影爱好者，秋色旺季档期有限，建议8月底前预订。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风景大图 -->
|
||||
<div class="scenic-banner">
|
||||
<img src="/images/seasons/autumn-hero.jpg" alt="秋季大兴安岭金色林海公路航拍" loading="eager" />
|
||||
</div>
|
||||
|
||||
<!-- 品牌理念 -->
|
||||
<ProductsProductOverview :narrative="autumnData.narrative" class="reveal" />
|
||||
|
||||
<!-- 产品卡片 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="游牧的森林V3系列" subtitle="4-7天南北两线，专属私家团" />
|
||||
<div class="products-grid">
|
||||
<AutumnProductCard v-for="p in autumnData.versions" :key="p.id" :product="p" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 选行程指南 -->
|
||||
<CommonSectionCTA
|
||||
title="不确定选南线还是北线？"
|
||||
description="告诉定制师您的假期和偏好，一分钟帮您选对行程"
|
||||
:links="[{ to: '/contact', text: '联系定制师选行程' }]"
|
||||
/>
|
||||
|
||||
<!-- 共同亮点 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="秋季行程亮点" subtitle="每一条线路都会体验到" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in autumnData.highlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 秋季风景 -->
|
||||
<div class="scenic-duo reveal">
|
||||
<img src="/images/seasons/autumn-tianchi.jpg" alt="阿尔山心形天池航拍" loading="lazy" />
|
||||
<img src="/images/seasons/autumn-forest.jpg" alt="金秋白桦林层林尽染" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- 南线特色 -->
|
||||
<section class="section section--warm reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="南线特色 · 呼伦贝尔+阿尔山" subtitle="金秋草原与火山天池的碰撞" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in autumnData.southHighlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 北线风景 -->
|
||||
<div class="scenic-banner reveal">
|
||||
<img src="/images/seasons/autumn-train.jpg" alt="秋季大兴安岭列车穿越金色林海" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- 北线特色 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="北线特色 · 呼伦贝尔+大兴安岭" subtitle="绝美公路与原始村落的秘境" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in autumnData.northHighlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 版本迭代历史 -->
|
||||
<ProductsVersionTimeline :timeline="autumnData.timeline" title="游牧的森林版本迭代" subtitle="V1到V3 + V4预告" />
|
||||
|
||||
<!-- 内链 -->
|
||||
<CommonSectionCTA
|
||||
title="听听秋季旅行的家庭怎么说"
|
||||
description="看看真实客户的秋季旅行评价"
|
||||
:links="[{ to: '/reviews', text: '查看客户评价' }, { to: '/contact', text: '咨询秋季行程' }]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import autumnData from '~/data/autumn-products.json'
|
||||
import { useBreadcrumbSchema, useAutumnProductsSchema } from '~/composables/useJsonLd'
|
||||
|
||||
const seo = useSEO('products-autumn', {
|
||||
title: '游牧的森林 - 呼伦贝尔秋季定制游 · 南北两线4-7天 - 呼籁旅行',
|
||||
description: '呼籁旅行秋季定制游产品「游牧的森林V3」，呼伦贝尔+阿尔山/大兴安岭，4-7天南北两线。大兴安岭金秋、扎罗木得断崖、阿尔山国家森林公园、火山天池、秋野素拍。一单一车专属私家团。',
|
||||
h1: '游牧的森林 · 呼伦贝尔秋季定制游',
|
||||
})
|
||||
useScrollReveal()
|
||||
useAutumnProductsSchema(autumnData)
|
||||
useBreadcrumbSchema([
|
||||
{ text: '首页', to: '/' },
|
||||
{ text: '产品线', to: '/products' },
|
||||
{ text: '游牧的森林' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-xl;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
});
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.highlights-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-lg;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
});
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius-lg;
|
||||
padding: @space-xl;
|
||||
transition: box-shadow @transition-base, transform @transition-base;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-md;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin-bottom: @space-sm;
|
||||
|
||||
&::before {
|
||||
content: '🍂 ';
|
||||
color: #D97706;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
.section--warm {
|
||||
background: @color-bg-warm;
|
||||
}
|
||||
|
||||
// 风景大图
|
||||
.scenic-banner {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
max-height: 480px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scenic-duo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
max-height: 360px;
|
||||
overflow: hidden;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: 1fr 1fr;
|
||||
});
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
max-height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="page-products">
|
||||
<LayoutPageHero
|
||||
:title="seo.h1"
|
||||
subtitle="独立成团不拼团 · 一单一车 · 随走随停 · 不错过每处风景"
|
||||
:breadcrumbs="[{ text: '产品线', to: '/products' }, { text: '额吉的故乡' }]"
|
||||
/>
|
||||
|
||||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||||
<section class="page-tldr" aria-label="产品页摘要">
|
||||
<div class="container">
|
||||
<div class="page-tldr-inner">
|
||||
<p>额吉的故乡V9系列提供5-7天6个版本的呼伦贝尔亲子游，涵盖森林版、草原版、亲子版、探索版、旷野版等不同需求。所有版本均为独立成团、一家一单一车，不与陌生人拼团。不确定选哪个版本，可使用<NuxtLink to="/selector">选版工具</NuxtLink>进行1分钟匹配，或参考<NuxtLink to="/pricing">价格参考页</NuxtLink>了解费用区间。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风景大图 -->
|
||||
<div class="scenic-banner">
|
||||
<img src="/images/seasons/summer-hero.jpg" alt="夏季呼伦贝尔莫日格勒河草原全景" loading="eager" />
|
||||
</div>
|
||||
|
||||
<!-- 产品设计理念 -->
|
||||
<ProductsProductOverview :narrative="products.narrative" class="reveal" />
|
||||
|
||||
<!-- 产品卡片 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="额吉的故乡V9系列" subtitle="5-7天多版本行程" />
|
||||
<div class="products-grid">
|
||||
<ProductsProductCard v-for="p in products.versions" :key="p.id" :product="p" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 夏季风景 -->
|
||||
<div class="scenic-duo reveal">
|
||||
<img src="/images/seasons/summer-river.jpg" alt="夏季草原蒙古包莫日格勒河全景" loading="lazy" />
|
||||
<img src="/images/seasons/summer-car.jpg" alt="呼伦贝尔一单一车草原越野" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- 中间转化入口 -->
|
||||
<CommonSectionCTA
|
||||
title="不确定选哪个版本？"
|
||||
description="5个问题，1分钟，找到最适合你家庭的行程版本"
|
||||
:links="[{ to: '/selector', text: '使用选版工具' }, { to: '/contact', text: '联系定制师' }]"
|
||||
/>
|
||||
|
||||
<!-- 选择指南 -->
|
||||
<ProductsSelectionGuide :guide="products.selectionGuide" :versions="products.versions" class="reveal" />
|
||||
|
||||
<!-- 产品进化：统计数据 -->
|
||||
<ProductsEvolutionStats :stats="versions.stats" class="reveal" />
|
||||
|
||||
<!-- 2026核心升级 -->
|
||||
<ProductsVersionUpgrades :upgrades="versions.upgrades2026" class="reveal" />
|
||||
|
||||
<!-- V9亮点 -->
|
||||
<ProductsVersionHighlights :highlights="versions.highlights" class="reveal" />
|
||||
|
||||
<!-- V8→V9对比 -->
|
||||
<ProductsVersionCompare :compare="versions.compareV8V9" class="reveal" />
|
||||
|
||||
<!-- 历史版本时间线 -->
|
||||
<ProductsVersionTimeline :timeline="versions.timeline" />
|
||||
|
||||
<!-- 产品哲学 -->
|
||||
<ProductsVersionPhilosophy :philosophy="versions.philosophy" :quote="versions.quote" />
|
||||
|
||||
<!-- 价格透明 -->
|
||||
<ProductsPricingPhilosophy :content="products.pricingPhilosophy" />
|
||||
|
||||
<!-- 爸妈也想来草原 -->
|
||||
<section class="section section--gray reveal">
|
||||
<div class="container" style="max-width: 720px; text-align: center;">
|
||||
<h2 class="section-title" style="font-size: 24px; margin-bottom: 8px;">爸妈也想来草原？</h2>
|
||||
<p style="color: #5a6b5e; line-height: 1.8; margin-bottom: 24px;">很多家庭带孩子来过呼伦贝尔之后，又给爸妈报了名。自己上班没时间陪，但想让父母也体验一次靠谱的草原旅行——我们的「牵手草原」长辈定制行程，专为父母和长辈设计，节奏更缓、住宿更舒适、服务更细致。</p>
|
||||
<NuxtLink to="/contact" class="senior-cta">联系定制师了解「牵手草原」</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内链 -->
|
||||
<CommonSectionCTA
|
||||
title="听听其他家庭怎么说"
|
||||
description="看看真实客户的旅行评价"
|
||||
:links="[{ to: '/reviews', text: '查看10000+家庭的真实评价' }]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import products from '~/data/products.json'
|
||||
import versions from '~/data/versions.json'
|
||||
import { useProductsListSchema, useBreadcrumbSchema } from '~/composables/useJsonLd'
|
||||
|
||||
const seo = useSEO('products')
|
||||
useScrollReveal()
|
||||
useProductsListSchema(products.versions)
|
||||
useBreadcrumbSchema([
|
||||
{ text: '首页', to: '/' },
|
||||
{ text: '产品线', to: '/products' },
|
||||
{ text: '额吉的故乡' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-xl;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
});
|
||||
|
||||
// 让卡片等高对齐
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.scenic-banner {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
max-height: 480px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
object-fit: cover;
|
||||
object-position: center 70%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scenic-duo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
max-height: 360px;
|
||||
overflow: hidden;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: 1fr 1fr;
|
||||
});
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
max-height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
.senior-cta {
|
||||
display: inline-block;
|
||||
padding: 12px 28px;
|
||||
background: @color-bg-white;
|
||||
color: @color-primary;
|
||||
border: 1px solid @color-primary;
|
||||
border-radius: @border-radius-md;
|
||||
text-decoration: none;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-medium;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="page-winter">
|
||||
<LayoutPageHero
|
||||
:title="seo.h1"
|
||||
subtitle="独立成团不拼团 · 一单一车 · 随走随停 · 不错过每处风景"
|
||||
:breadcrumbs="[{ text: '产品线', to: '/products' }, { text: '嗨冰雪' }]"
|
||||
/>
|
||||
|
||||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||||
<section class="page-tldr" aria-label="冬季产品摘要">
|
||||
<div class="container">
|
||||
<div class="page-tldr-inner">
|
||||
<p>嗨冰雪——呼籁旅行冬季产品线：12月至次年2月，呼伦贝尔雪原体验，5-7天多版本，独立成团不拼团，一家一单一车。雪地摩托、冰钓、冬季那达慕、驯鹿文化、边境雪原。元旦春节黄金档期需提前1-2个月预订。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 风景大图 -->
|
||||
<div class="scenic-banner">
|
||||
<img src="/images/seasons/winter-hero.jpg" alt="冬季呼伦贝尔大雪原航拍" loading="eager" />
|
||||
</div>
|
||||
|
||||
<!-- 品牌理念 -->
|
||||
<ProductsProductOverview :narrative="winterData.narrative" class="reveal" />
|
||||
|
||||
<!-- 产品卡片 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="嗨冰雪V3系列" subtitle="5-7天南北两线，专属私家团" />
|
||||
<div class="products-grid">
|
||||
<WinterProductCard v-for="p in winterData.versions" :key="p.id" :product="p" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 选行程指南 -->
|
||||
<CommonSectionCTA
|
||||
title="不确定选南线还是北线？"
|
||||
description="告诉定制师您的假期和偏好，一分钟帮您选对行程"
|
||||
:links="[{ to: '/contact', text: '联系定制师选行程' }]"
|
||||
/>
|
||||
|
||||
<!-- 共同亮点 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="冬季行程亮点" subtitle="每一条线路都会体验到" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in winterData.highlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 冬季风景 -->
|
||||
<div class="scenic-duo reveal">
|
||||
<img src="/images/seasons/winter-yurt.jpg" alt="冬季雪原蒙古包日落" loading="lazy" />
|
||||
<img src="/images/seasons/winter-frost.jpg" alt="大兴安岭雾凇森林" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- 南线特色 -->
|
||||
<section class="section section--warm reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="南线特色 · 呼伦贝尔+阿尔山" subtitle="大雪原与童话小城的碰撞" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in winterData.southHighlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 北线风景 -->
|
||||
<div class="scenic-banner reveal">
|
||||
<img src="/images/seasons/winter-tree.jpg" alt="冬季雪原孤树" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- 北线特色 -->
|
||||
<section class="section reveal">
|
||||
<div class="container">
|
||||
<CommonSectionTitle title="北线特色 · 呼伦贝尔+大兴安岭" subtitle="边境风情与驯鹿部落的秘境" />
|
||||
<div class="highlights-grid">
|
||||
<div v-for="(h, i) in winterData.northHighlights" :key="i" class="highlight-card">
|
||||
<h3 class="highlight-title">{{ h.title }}</h3>
|
||||
<p class="highlight-desc">{{ h.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 版本迭代历史 -->
|
||||
<ProductsVersionTimeline :timeline="winterData.timeline" title="嗨冰雪版本迭代" subtitle="V1到V3的完整更新记录" />
|
||||
|
||||
<!-- 内链 -->
|
||||
<CommonSectionCTA
|
||||
title="听听冬季旅行的家庭怎么说"
|
||||
description="看看真实客户的冬季旅行评价"
|
||||
:links="[{ to: '/reviews', text: '查看客户评价' }, { to: '/contact', text: '咨询冬季行程' }]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import winterData from '~/data/winter-products.json'
|
||||
import { useBreadcrumbSchema, useWinterProductsSchema } from '~/composables/useJsonLd'
|
||||
|
||||
const seo = useSEO('products-winter', {
|
||||
title: '嗨冰雪 - 呼伦贝尔冬季定制游 · 南北两线5-7天 - 呼籁旅行',
|
||||
description: '呼籁旅行冬季定制游产品「嗨冰雪V3」，南线呼伦贝尔+阿尔山5-6天，北线呼伦贝尔+大兴安岭7天。冰雪那达慕、雪地狼群、白狼峰日出、呼伦湖蓝冰、驯鹿部落。一单一车专属私家团。',
|
||||
h1: '嗨冰雪 · 呼伦贝尔冬季定制游',
|
||||
})
|
||||
useScrollReveal()
|
||||
useWinterProductsSchema(winterData)
|
||||
useBreadcrumbSchema([
|
||||
{ text: '首页', to: '/' },
|
||||
{ text: '产品线', to: '/products' },
|
||||
{ text: '嗨冰雪' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-xl;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
});
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.highlights-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-lg;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
});
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius-lg;
|
||||
padding: @space-xl;
|
||||
transition: box-shadow @transition-base, transform @transition-base;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-md;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin-bottom: @space-sm;
|
||||
|
||||
&::before {
|
||||
content: '❄ ';
|
||||
color: #3B82F6;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
.section--warm {
|
||||
background: @color-bg-warm;
|
||||
}
|
||||
|
||||
.scenic-banner {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
max-height: 480px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scenic-duo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
max-height: 360px;
|
||||
overflow: hidden;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: 1fr 1fr;
|
||||
});
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
max-height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户