hulai-website/components/home/ProductPreview.vue

<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="旅行产品" subtitle="四季不同风景，总有一条线路适合你的家庭" />
      <div class="product-grid">
        <NuxtLink
          v-for="line in productLines"
          :key="line.id"
          :to="line.to"
          class="product-line-card"
          :class="`product-line-card--${line.theme}`"
        >
          <!-- 封面图 -->
          <div class="line-cover">
            <img :src="line.image" :alt="line.name" loading="lazy" />
            <div class="line-cover-overlay" />
            <span class="line-season-badge">{{ line.season }}</span>
          </div>

          <!-- 内容区 -->
          <div class="line-body">
            <div class="line-meta">
              <span class="line-duration">{{ line.duration }}</span>
            </div>
            <h3 class="line-name">{{ line.name }}</h3>
            <p class="line-desc">{{ line.description }}</p>
            <ul class="line-highlights">
              <li v-for="(h, i) in line.highlights" :key="i">{{ h }}</li>
            </ul>
            <span class="line-cta">了解详情 →</span>
          </div>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup>
const productLines = [
  {
    id: 'summer',
    name: '额吉的故乡',
    season: '夏季',
    theme: 'summer',
    duration: '4-7天 · V9系列',
    to: '/products',
    image: '/images/seasons/summer-hero.jpg',
    description: '呼伦贝尔草原家庭定制游，专车专属独立成团，6个版本适配不同假期',
    highlights: ['莫日格勒河草原穿越', '专业骑马体验', '呼籁自有营地住宿'],
  },
  {
    id: 'autumn',
    name: '游牧的森林',
    season: '秋季',
    theme: 'autumn',
    duration: '4-7天 · V3系列',
    to: '/products/autumn',
    image: '/images/seasons/autumn-hero.jpg',
    description: '金秋草原+阿尔山/大兴安岭，南北两线专属私家团',
    highlights: ['大兴安岭金秋林海', '阿尔山火山天池', '扎罗木得断崖秘境'],
  },
  {
    id: 'winter',
    name: '嗨冰雪',
    season: '冬季',
    theme: 'winter',
    duration: '5-7天 · V3系列',
    to: '/products/winter',
    image: '/images/seasons/winter-hero.jpg',
    description: '呼伦贝尔冬季定制游，南北两线，冰雪那达慕+驯鹿部落',
    highlights: ['冰雪那达慕体验', '雪地狼群投喂', '大雪原日出日落'],
  },
  {
    id: 'summer-camp',
    name: '小蒙马亲子游学营',
    season: '夏季',
    theme: 'camp',
    duration: '6天5晚',
    to: '/summer-camp',
    image: '/images/seasons/summer-river.jpg',
    description: '亲子营模式，每期8组家庭结伴同行，孩子有伙伴大人能放松',
    highlights: ['专业研学领队带队', '随团摄影师全程跟拍', '草原写生+非遗研学'],
  },
  {
    id: 'winter-camp',
    name: '小蒙马冬令营',
    season: '冬季',
    theme: 'winter-camp',
    duration: '7天6晚',
    to: '/winter-camp',
    image: '/images/seasons/winter-frost.jpg',
    description: '冰雪研学营，雪地徒步+冰上运动+驯鹿部落，零下30°的成长体验',
    highlights: ['冰雪那达慕体验', '驯鹿部落探访', '冬季星空观测'],
  },
]
</script>

<style lang="less" scoped>
.product-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);
    gap: @space-xl;
  });
}

.product-line-card {
  display: flex;
  flex-direction: column;
  background: @color-bg-white;
  border-radius: @border-radius-lg;
  overflow: hidden;
  text-decoration: none;
  box-shadow: @shadow-card;
  transition: box-shadow @transition-base, transform @transition-base;

  &:hover {
    box-shadow: @shadow-card-hover;
    transform: translateY(-6px);

    .line-cover img {
      transform: scale(1.08);
    }

    .line-cta {
      color: @color-primary-light;
    }
  }
}

// 封面图
.line-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

.line-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
}

.line-season-badge {
  position: absolute;
  top: @space-md;
  left: @space-md;
  padding: @space-xs @space-md;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  border-radius: @border-radius-full;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

// 季节主题色
.product-line-card--summer .line-season-badge {
  background: rgba(45, 106, 79, 0.85);
  color: #fff;
}

.product-line-card--autumn .line-season-badge {
  background: rgba(217, 119, 6, 0.85);
  color: #fff;
}

.product-line-card--winter .line-season-badge {
  background: rgba(59, 130, 246, 0.85);
  color: #fff;
}

.product-line-card--camp .line-season-badge {
  background: rgba(139, 92, 246, 0.85);
  color: #fff;
}

.product-line-card--winter-camp .line-season-badge {
  background: rgba(99, 102, 241, 0.85);
  color: #fff;
}

// 内容区
.line-body {
  padding: @space-lg @space-xl @space-xl;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.line-meta {
  margin-bottom: @space-sm;
}

.line-duration {
  font-size: @font-size-xs;
  color: @color-text-muted;
  letter-spacing: 0.5px;
}

.line-name {
  font-size: @font-size-xl;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-sm;
  line-height: @line-height-tight;
}

.line-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin-bottom: @space-md;
}

.line-highlights {
  display: flex;
  flex-direction: column;
  gap: @space-xs;
  margin-bottom: @space-lg;
  flex: 1;

  li {
    font-size: @font-size-sm;
    color: @color-text-secondary;
    padding-left: @space-md;
    position: relative;

    &::before {
      content: '✓';
      position: absolute;
      left: 0;
      font-weight: @font-weight-bold;
      color: @color-primary;
      font-size: @font-size-xs;
    }
  }
}

.line-cta {
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  color: @color-primary;
  margin-top: auto;
  transition: color @transition-fast;
}
</style>