hulai-website/components/home/ProductPreview.vue

<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="旅行产品" label="PRODUCTS" subtitle="四季不同风景，总有一条线路适合你的家庭" />
      <div class="product-grid">
        <NuxtLink v-for="line in productLines" :key="line.id" :to="line.to" class="product-line-card">
          <div class="line-img-wrap">
            <img :src="line.image" :alt="line.name + ' ' + line.season + '旅行'" class="line-img" loading="lazy" width="400" height="240" />
            <span class="line-season-tag" :class="`line-season-tag--${line.theme}`">{{ 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" :class="`line-cta--${line.theme}`">
              了解详情
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </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-forest.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: 'camp',
    name: '小蒙马亲子营',
    season: '夏+冬',
    theme: 'camp',
    duration: '夏6天 / 冬7天',
    to: '/summer-camp',
    image: '/images/summer-camp/grassland-group.jpg',
    description: '亲子营模式，每期8组家庭结伴同行，孩子有伙伴大人能放松',
    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(4, 1fr);
  });
}

.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 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);

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

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

.line-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 3;
}

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

.line-season-tag {
  position: absolute;
  top: @space-md;
  left: @space-md;
  padding: @space-xs @space-sm;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  border-radius: @border-radius-sm;
  backdrop-filter: blur(4px);

  &--summer { color: #fff; background: rgba(45, 106, 79, 0.85); }
  &--autumn { color: #fff; background: rgba(217, 119, 6, 0.85); }
  &--winter { color: #fff; background: rgba(59, 130, 246, 0.85); }
  &--camp { color: #fff; background: rgba(139, 92, 246, 0.85); }
}

.line-body {
  display: flex;
  flex-direction: column;
  padding: @space-lg;
  flex: 1;
}

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

.line-duration {
  font-size: @font-size-xs;
  color: @color-text-muted;
}

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

.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: 2px;
      top: 8px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: @color-primary-lighter;
    }
  }
}

.line-cta {
  display: inline-flex;
  align-items: center;
  gap: @space-xs;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  margin-top: auto;
  transition: gap @transition-fast;

  .product-line-card:hover & {
    gap: @space-sm;
  }

  &--summer { color: @color-primary; }
  &--autumn { color: #D97706; }
  &--winter { color: #3B82F6; }
  &--camp { color: #8B5CF6; }
}
</style>