hulai-website/pages/products/autumn.vue

<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>