hulai-website/components/products/ProductCard.vue

<template>
  <article
    class="product-card"
    :class="{ 'product-card--popular': isPopular }"
    itemscope
    itemtype="https://schema.org/TouristTrip"
  >
    <!-- 头部：天数 + 标签 -->
    <div class="product-header">
      <div v-if="isPopular" class="popular-badge">推荐</div>
      <div class="product-duration">
        <span class="duration-num">{{ product.days }}</span>
        <span class="duration-unit">天</span>
        <span class="duration-num">{{ product.nights }}</span>
        <span class="duration-unit">晚</span>
      </div>
      <span class="product-tag">{{ product.tag }}</span>
    </div>

    <!-- 主体 -->
    <div class="product-body">
      <h3 class="product-name" itemprop="name">
        <NuxtLink :to="`/products/${product.id}`" class="product-name-link">{{ shortName }}</NuxtLink>
      </h3>
      <p class="product-audience">
        适合：<span itemprop="touristType">{{ product.audience }}</span>
      </p>
      <p class="product-desc" itemprop="description">{{ product.description }}</p>
      <ul class="product-highlights">
        <li v-for="(h, i) in product.highlights" :key="i">
          <span class="highlight-check" aria-hidden="true">&#10003;</span>
          {{ h }}
        </li>
      </ul>
    </div>

    <!-- 底部 CTA -->
    <NuxtLink to="/contact" class="product-cta">
      咨询该行程 <span aria-hidden="true">→</span>
    </NuxtLink>
  </article>
</template>

<script setup>
const props = defineProps({ product: { type: Object, required: true } })

const isPopular = computed(() => props.product.id === 'v9-6d5n-family')

// 去掉"额吉的故乡V9·"前缀，在标题区域已标明系列
const shortName = computed(() => {
  return props.product.name.replace(/^额吉的故乡V9·/, '')
})
</script>

<style lang="less" scoped>
.product-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow @transition-base, transform @transition-base;
  position: relative;

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

  &--popular {
    border: 2px solid @color-primary;
    box-shadow: @shadow-md;

    .product-header {
      background: @color-primary;
    }

    .duration-num,
    .duration-unit,
    .product-tag {
      color: #fff;
    }

    .product-tag {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

// 头部
.product-header {
  padding: @space-lg @space-lg @space-md;
  background: @color-primary-bg;
  text-align: center;
  position: relative;
}

.popular-badge {
  position: absolute;
  top: @space-sm;
  right: @space-sm;
  padding: @space-xs @space-sm;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  color: #fff;
  background: @color-accent;
  border-radius: @border-radius-sm;
}

.product-duration {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: @space-sm;
}

.duration-num {
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  color: @color-primary;
  line-height: 1;
}

.duration-unit {
  font-size: @font-size-sm;
  color: @color-primary;
  font-weight: @font-weight-medium;
}

.product-tag {
  display: inline-block;
  padding: @space-xs @space-md;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;
  color: @color-primary;
  background: @color-bg-white;
  border-radius: @border-radius-full;
}

// 主体
.product-body {
  padding: @space-lg;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}
.product-name-link {
  color: inherit;
  text-decoration: none;
  &:hover { color: @color-primary; }
}

.product-audience {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-bottom: @space-md;
}

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

.product-highlights {
  display: flex;
  flex-direction: column;
  gap: @space-sm;
  margin-top: auto;

  li {
    display: flex;
    align-items: flex-start;
    gap: @space-sm;
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }
}

.highlight-check {
  flex-shrink: 0;
  color: @color-primary;
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  margin-top: 2px;
}

// 底部 CTA
.product-cta {
  display: block;
  text-align: center;
  padding: @space-md @space-lg;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  color: @color-primary;
  background: @color-bg-gray;
  text-decoration: none;
  transition: all @transition-fast;

  &:hover {
    background: @color-primary;
    color: #fff;
  }
}
</style>