132 行
3.4 KiB
Vue
132 行
3.4 KiB
Vue
<template>
|
|
<section class="section">
|
|
<div class="container">
|
|
<!-- 资质认证 -->
|
|
<CommonSectionTitle title="资质认证" />
|
|
<div class="qual-list">
|
|
<div v-for="c in certifications" :key="c.title" class="qual-item qual-item--cert">
|
|
<div class="qual-icon">🏆</div>
|
|
<div class="qual-body">
|
|
<h3 class="qual-title">{{ c.title }}</h3>
|
|
<p class="qual-detail">{{ c.detail }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 小红书WILL大会获奖照片 -->
|
|
<div class="award-gallery">
|
|
<div class="award-gallery-grid">
|
|
<img src="/images/awards/will-award-person.jpg" alt="呼籁旅行创始人在2026小红书WILL商业大会领取年度成长型品牌奖" class="award-img award-img--main" loading="lazy" />
|
|
<img src="/images/awards/will-award-trophy.jpg" alt="2026小红书WILL商业大会年度成长型品牌奖杯" class="award-img" loading="lazy" />
|
|
<img src="/images/awards/will-award-stage.jpg" alt="2026小红书WILL商业大会年度成长型品牌颁奖典礼" class="award-img" loading="lazy" />
|
|
</div>
|
|
<p class="award-caption">2026小红书WILL商业大会 · 年度成长型品牌 · 文旅行业仅6家获此殊荣</p>
|
|
</div>
|
|
|
|
<!-- 服务保障 -->
|
|
<CommonSectionTitle title="服务保障" style="margin-top: 48px;" />
|
|
<div class="qual-list qual-list--grid">
|
|
<div v-for="g in guarantees" :key="g.title" class="qual-item qual-item--guarantee">
|
|
<div class="qual-icon">✅</div>
|
|
<div class="qual-body">
|
|
<h3 class="qual-title">{{ g.title }}</h3>
|
|
<p class="qual-detail">{{ g.detail }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
certifications: { type: Array, required: true },
|
|
guarantees: { type: Array, required: true }
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.qual-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: @space-md;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.qual-list--grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: @space-md;
|
|
.respond-md({
|
|
grid-template-columns: 1fr;
|
|
});
|
|
}
|
|
.qual-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: @space-sm;
|
|
padding: @space-lg;
|
|
border-radius: @border-radius-md;
|
|
transition: transform 0.2s ease;
|
|
&:hover { transform: translateY(-2px); }
|
|
}
|
|
.qual-item--cert {
|
|
background: @color-primary-bg;
|
|
border-left: 3px solid @color-primary;
|
|
}
|
|
.qual-item--guarantee {
|
|
background: #f8faf5;
|
|
border-left: 3px solid @color-primary;
|
|
}
|
|
.qual-icon {
|
|
font-size: 24px;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
.qual-body { flex: 1; }
|
|
.qual-title {
|
|
font-size: @font-size-md;
|
|
color: @color-text-primary;
|
|
margin-bottom: @space-xs;
|
|
font-weight: @font-weight-bold;
|
|
}
|
|
.qual-detail {
|
|
font-size: @font-size-sm;
|
|
color: @color-text-secondary;
|
|
line-height: @line-height-base;
|
|
}
|
|
|
|
.award-gallery {
|
|
max-width: 800px;
|
|
margin: @space-xl auto 0;
|
|
}
|
|
|
|
.award-gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: @space-sm;
|
|
|
|
@media (max-width: 768px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.award-img {
|
|
width: 100%;
|
|
border-radius: @border-radius-md;
|
|
object-fit: cover;
|
|
aspect-ratio: 3 / 4;
|
|
|
|
@media (max-width: 768px) {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
}
|
|
|
|
.award-caption {
|
|
text-align: center;
|
|
margin-top: @space-md;
|
|
font-size: @font-size-xs;
|
|
color: @color-text-muted;
|
|
}
|
|
</style>
|