hulai-website/pages/products/index.vue

<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 v-if="products" :narrative="products.narrative" class="reveal" />

    <!-- 产品卡片 -->
    <section v-if="products" 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 v-if="products" :guide="products.selectionGuide" :versions="products.versions" class="reveal" />

    <!-- 产品进化：统计数据 -->
    <ProductsEvolutionStats v-if="versions" :stats="versions.stats" class="reveal" />

    <!-- 2026核心升级 -->
    <ProductsVersionUpgrades v-if="versions" :upgrades="versions.upgrades2026" class="reveal" />

    <!-- V9亮点 -->
    <ProductsVersionHighlights v-if="versions" :highlights="versions.highlights" class="reveal" />

    <!-- V8→V9对比 -->
    <ProductsVersionCompare v-if="versions" :compare="versions.compareV8V9" class="reveal" />

    <!-- 历史版本时间线 -->
    <ProductsVersionTimeline v-if="versions" :timeline="versions.timeline" />

    <!-- 产品哲学 -->
    <ProductsVersionPhilosophy v-if="versions" :philosophy="versions.philosophy" :quote="versions.quote" />

    <!-- 价格透明 -->
    <ProductsPricingPhilosophy v-if="products" :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 { useProductsListSchema, useBreadcrumbSchema } from '~/composables/useJsonLd'

const { data: products } = await usePublicApi('products')
const { data: versions } = await usePublicApi('versions')

const seo = useSEO('products')
useScrollReveal()
useProductsListSchema(products.value?.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>