115 行
2.9 KiB
Vue
115 行
2.9 KiB
Vue
<template>
|
|
<section id="guide" class="section section--gray">
|
|
<div class="container">
|
|
<CommonSectionTitle :title="st('products.selectionGuide', '不知道选哪个？')" :subtitle="st('products.selectionGuide', '按您的情况推荐', 'subtitle')" />
|
|
<div class="guide-groups">
|
|
<div v-for="group in guideGroups" :key="group.title" class="guide-group">
|
|
<h3 class="guide-group-title">{{ group.title }}</h3>
|
|
<div class="guide-items">
|
|
<div v-for="item in group.items" :key="item.condition" class="guide-item">
|
|
<div class="guide-item-top">
|
|
<span class="guide-condition">{{ item.condition }}</span>
|
|
<span class="guide-arrow">→</span>
|
|
<span class="guide-rec">{{ getProductName(item.recommendation) }}</span>
|
|
</div>
|
|
<p class="guide-reason">{{ item.reason }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
guide: { type: Object, required: true },
|
|
versions: { type: Array, required: true },
|
|
})
|
|
const st = await useSectionTitles()
|
|
|
|
const guideGroups = computed(() => [
|
|
{ title: '按假期长度', items: props.guide.byVacationLength },
|
|
{ title: '按孩子年龄', items: props.guide.byChildAge },
|
|
{ title: '按旅行偏好', items: props.guide.byPreference },
|
|
])
|
|
|
|
function getProductName(id) {
|
|
if (id === 'summer-camp') return '小蒙马亲子游学营'
|
|
const v = props.versions.find(v => v.id === id)
|
|
return v ? v.name : id
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.guide-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: @space-2xl;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.guide-group-title {
|
|
font-size: @font-size-lg;
|
|
color: @color-primary;
|
|
margin-bottom: @space-md;
|
|
padding-left: @space-md;
|
|
border-left: 3px solid @color-primary;
|
|
}
|
|
|
|
.guide-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: @space-md;
|
|
}
|
|
|
|
.guide-item {
|
|
padding: @space-lg;
|
|
background: @color-bg-white;
|
|
border-radius: @border-radius-md;
|
|
border: 1px solid @color-border;
|
|
transition: border-color @transition-fast, box-shadow @transition-fast;
|
|
|
|
&:hover {
|
|
border-color: @color-primary-lighter;
|
|
box-shadow: @shadow-sm;
|
|
}
|
|
}
|
|
|
|
.guide-item-top {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: @space-sm;
|
|
margin-bottom: @space-xs;
|
|
}
|
|
|
|
.guide-condition {
|
|
font-weight: @font-weight-medium;
|
|
color: @color-text-primary;
|
|
background: @color-bg-gray;
|
|
padding: @space-xs @space-sm;
|
|
border-radius: @border-radius-sm;
|
|
font-size: @font-size-sm;
|
|
}
|
|
|
|
.guide-arrow {
|
|
color: @color-primary;
|
|
font-weight: @font-weight-bold;
|
|
}
|
|
|
|
.guide-rec {
|
|
color: @color-primary;
|
|
font-weight: @font-weight-bold;
|
|
font-size: @font-size-base;
|
|
}
|
|
|
|
.guide-reason {
|
|
font-size: @font-size-sm;
|
|
color: @color-text-muted;
|
|
margin: 0;
|
|
line-height: @line-height-base;
|
|
}
|
|
</style>
|