395 行
9.4 KiB
Vue
395 行
9.4 KiB
Vue
<template>
|
|
<article class="autumn-card" :class="{ 'autumn-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">✓</span>
|
|
{{ itineraryText(h) }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 价格区间 -->
|
|
<div v-if="priceRange" class="card-price">
|
|
<div class="price-main">
|
|
<span class="price-label">成人价</span>
|
|
<span class="price-value">¥{{ priceRange.min }}</span>
|
|
<span v-if="priceRange.max > priceRange.min" class="price-range">
|
|
起 · 旺季 ¥{{ priceRange.max }}
|
|
</span>
|
|
<span v-else class="price-range"> 起</span>
|
|
</div>
|
|
<div v-if="priceRange.childMin" class="price-sub">
|
|
儿童 ¥{{ priceRange.childMin }} 起
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 行程 + 报价展开 -->
|
|
<details v-if="hasItinerary || hasPricing" class="card-itinerary">
|
|
<summary class="itinerary-toggle">
|
|
<span v-if="hasItinerary && hasPricing">查看每日行程 + 分日期报价 ▾</span>
|
|
<span v-else-if="hasItinerary">查看每日行程 ▾</span>
|
|
<span v-else>查看分日期报价 ▾</span>
|
|
</summary>
|
|
<div v-if="hasItinerary" class="itinerary-section">
|
|
<div class="section-head">每日行程</div>
|
|
<ol class="itinerary-list">
|
|
<li v-for="(day, i) in product.itinerary" :key="i">{{ itineraryText(day) }}</li>
|
|
</ol>
|
|
</div>
|
|
<div v-if="hasPricing" class="pricing-section">
|
|
<div class="section-head">分日期报价</div>
|
|
<div class="pricing-table">
|
|
<div class="pricing-row pricing-head">
|
|
<span class="col-date">出行日期</span>
|
|
<span class="col-price">成人价</span>
|
|
<span class="col-price">儿童价</span>
|
|
</div>
|
|
<div v-for="(row, i) in product.pricing" :key="i" class="pricing-row">
|
|
<span class="col-date">{{ row.date }}</span>
|
|
<span class="col-price">¥{{ row.adult }}</span>
|
|
<span class="col-price">¥{{ row.child }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 === 'autumn-south-5d4n')
|
|
|
|
const shortName = computed(() => {
|
|
return props.product.name.replace(/^游牧的森林V3·/, '')
|
|
})
|
|
|
|
const hasItinerary = computed(() => Array.isArray(props.product.itinerary) && props.product.itinerary.length > 0)
|
|
const hasPricing = computed(() => Array.isArray(props.product.pricing) && props.product.pricing.length > 0)
|
|
|
|
const priceRange = computed(() => {
|
|
if (!hasPricing.value) return null
|
|
const adults = props.product.pricing.map(p => Number(p.adult)).filter(n => n > 0)
|
|
const children = props.product.pricing.map(p => Number(p.child)).filter(n => n > 0)
|
|
if (!adults.length) return null
|
|
return {
|
|
min: Math.min(...adults),
|
|
max: Math.max(...adults),
|
|
childMin: children.length ? Math.min(...children) : null,
|
|
}
|
|
})
|
|
|
|
function itineraryText(item) {
|
|
if (typeof item === 'string') return item
|
|
if (item && typeof item === 'object') return item.title || ''
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.autumn-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 #D97706;
|
|
box-shadow: @shadow-md;
|
|
|
|
.card-header {
|
|
background: #D97706;
|
|
}
|
|
|
|
.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: #FEF3C7;
|
|
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: #D97706;
|
|
line-height: 1;
|
|
}
|
|
|
|
.duration-unit {
|
|
font-size: @font-size-sm;
|
|
color: #D97706;
|
|
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: #D97706;
|
|
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: #D97706;
|
|
font-size: @font-size-sm;
|
|
font-weight: @font-weight-bold;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
// 价格区间
|
|
.card-price {
|
|
padding: @space-md @space-lg;
|
|
background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
|
|
border-top: 1px solid rgba(217, 119, 6, 0.15);
|
|
border-bottom: 1px solid rgba(217, 119, 6, 0.15);
|
|
}
|
|
|
|
.price-main {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: @font-size-xs;
|
|
color: #92400E;
|
|
margin-right: @space-xs;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: @font-size-2xl;
|
|
font-weight: @font-weight-bold;
|
|
color: #B45309;
|
|
line-height: 1;
|
|
}
|
|
|
|
.price-range {
|
|
font-size: @font-size-xs;
|
|
color: #92400E;
|
|
}
|
|
|
|
.price-sub {
|
|
margin-top: 4px;
|
|
font-size: @font-size-xs;
|
|
color: #92400E;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
// 行程概览 + 分日期报价
|
|
.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;
|
|
list-style: none;
|
|
|
|
&::-webkit-details-marker { display: none; }
|
|
|
|
&:hover {
|
|
background: @color-bg-gray;
|
|
color: @color-text-primary;
|
|
}
|
|
}
|
|
|
|
.section-head {
|
|
padding: 0 @space-lg @space-xs;
|
|
font-size: @font-size-xs;
|
|
font-weight: @font-weight-medium;
|
|
color: #D97706;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.itinerary-section + .pricing-section {
|
|
margin-top: @space-md;
|
|
padding-top: @space-md;
|
|
border-top: 1px dashed @color-border;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.pricing-table {
|
|
padding: 0 @space-lg @space-md;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: @font-size-xs;
|
|
}
|
|
|
|
.pricing-row {
|
|
display: grid;
|
|
grid-template-columns: 1.6fr 1fr 1fr;
|
|
gap: @space-sm;
|
|
padding: 6px 0;
|
|
border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
|
|
color: @color-text-secondary;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
.col-date { color: @color-text-primary; }
|
|
.col-price { text-align: right; color: #B45309; font-weight: @font-weight-medium; font-variant-numeric: tabular-nums; }
|
|
}
|
|
|
|
.pricing-head {
|
|
font-weight: @font-weight-medium;
|
|
color: @color-text-muted;
|
|
border-bottom: 1px solid @color-border;
|
|
|
|
.col-date, .col-price { color: @color-text-muted; font-weight: @font-weight-medium; }
|
|
}
|
|
|
|
// 底部 CTA
|
|
.card-cta {
|
|
display: block;
|
|
text-align: center;
|
|
padding: @space-md @space-lg;
|
|
font-size: @font-size-sm;
|
|
font-weight: @font-weight-medium;
|
|
color: #D97706;
|
|
background: @color-bg-gray;
|
|
text-decoration: none;
|
|
transition: all @transition-fast;
|
|
|
|
&:hover {
|
|
background: #D97706;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|