hulai-website/pages/products/winter.vue

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