hulai-website/components/winter/ProductCard.vue

<template>
  <article class="winter-card" :class="{ 'winter-card--popular': isPopular }">
    <!-- 头部 -->
    <div class="card-header">
      <div v-if="isPopular" class="popular-badge">推荐</div>
      <div class="card-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="card-tag">{{ product.tag }}</span>
      <span class="card-line">{{ product.line }} · {{ product.route }}</span>
    </div>

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

    <!-- 行程概览 -->
    <details class="card-itinerary">
      <summary class="itinerary-toggle">查看每日行程 ▾</summary>
      <ol class="itinerary-list">
        <li v-for="(day, i) in product.itinerary" :key="i">{{ day }}</li>
      </ol>
    </details>

    <!-- 底部 CTA -->
    <NuxtLink to="/contact" class="card-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 === 'winter-south-6d5n')

const shortName = computed(() => {
  return props.product.name.replace(/^嗨冰雪V3·/, '')
})
</script>

<style lang="less" scoped>
.winter-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;

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

  &--popular {
    border: 2px solid #3B82F6;
    box-shadow: @shadow-md;

    .card-header {
      background: #3B82F6;
    }

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

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

.card-header {
  padding: @space-lg @space-lg @space-md;
  background: #EFF6FF;
  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;
}

.card-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: #3B82F6;
  line-height: 1;
}

.duration-unit {
  font-size: @font-size-sm;
  color: #3B82F6;
  font-weight: @font-weight-medium;
}

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

.card-line {
  display: block;
  font-size: @font-size-xs;
  color: #64748B;
  margin-top: @space-xs;
}

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

.card-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

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

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

.card-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;
  }
}

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

// 行程概览
.card-itinerary {
  border-top: 1px solid @color-border;
}

.itinerary-toggle {
  display: block;
  padding: @space-md @space-lg;
  font-size: @font-size-sm;
  color: @color-text-muted;
  cursor: pointer;
  text-align: center;
  transition: background @transition-fast;

  &:hover {
    background: @color-bg-gray;
    color: @color-text-primary;
  }
}

.itinerary-list {
  padding: 0 @space-lg @space-md;
  display: flex;
  flex-direction: column;
  gap: @space-xs;

  li {
    font-size: @font-size-xs;
    color: @color-text-secondary;
    line-height: @line-height-base;
    padding-left: @space-sm;
  }
}

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

  &:hover {
    background: #3B82F6;
    color: #fff;
  }
}
</style>