140 行
3.8 KiB
Vue
140 行
3.8 KiB
Vue
<template>
|
||
<div class="page-about">
|
||
<LayoutPageHero
|
||
:title="seo.h1"
|
||
subtitle="一个只做呼伦贝尔的旅行品牌"
|
||
:breadcrumbs="[{ text: '关于我们' }]"
|
||
/>
|
||
|
||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||
<section class="page-tldr" aria-label="关于我们摘要">
|
||
<div class="container">
|
||
<div class="page-tldr-inner">
|
||
<p>呼籁旅行创立于2015年，是内蒙古呼伦贝尔本地旅行品牌，11年专注呼伦贝尔一个目的地。旗下持有三重旅行社经营许可证，购买1000万旅游责任险，已服务超10000个家庭。集团旗下涵盖旅行社、牧场商贸、研学教育等多家主体。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 品牌故事 -->
|
||
<AboutBrandStory :story="about.story" class="reveal" />
|
||
|
||
<!-- 集团实力 -->
|
||
<AboutSubsidiaryGrid :subsidiaries="about.subsidiaries" class="reveal" />
|
||
|
||
<!-- 资质认证 & 服务保障 -->
|
||
<AboutQualificationList :certifications="about.certifications" :guarantees="about.guarantees" class="reveal" />
|
||
|
||
<!-- 小红书 -->
|
||
<AboutXiaohongshuShowcase :xhs="about.xiaohongshu" class="reveal" />
|
||
|
||
<!-- 知识产权 -->
|
||
<AboutCopyrightList :copyrights="about.copyrights" :trademark="about.trademark" class="reveal" />
|
||
|
||
<!-- 品牌IP -->
|
||
<AboutMascotShowcase class="reveal" />
|
||
|
||
<!-- 团队介绍 -->
|
||
<AboutTeamIntro :team="about.team" class="reveal" />
|
||
|
||
<!-- 8个温度时刻 -->
|
||
<section class="section section--gray reveal" aria-label="服务旅程">
|
||
<div class="container">
|
||
<CommonSectionTitle :title="about.serviceJourney.title" :subtitle="about.serviceJourney.subtitle" />
|
||
<ol class="journey-list">
|
||
<li v-for="m in about.serviceJourney.moments" :key="m.step" class="journey-item">
|
||
<span class="journey-step">{{ m.step }}</span>
|
||
<div class="journey-body">
|
||
<strong class="journey-name">{{ m.name }}</strong>
|
||
<p class="journey-detail">{{ m.detail }}</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 企业文化 -->
|
||
<AboutCultureValues :culture="about.culture" class="reveal" />
|
||
|
||
<!-- 内链 -->
|
||
<CommonSectionCTA
|
||
title="想了解我们的产品？"
|
||
description="查看额吉的故乡V9系列和小蒙马夏令营"
|
||
:links="[{ to: '/products', text: '查看呼伦贝尔定制游产品' }]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import about from '~/data/about.json'
|
||
import brand from '~/data/brand.json'
|
||
import contact from '~/data/contact.json'
|
||
import { useOrganizationSchema, useBreadcrumbSchema, usePersonSchema } from '~/composables/useJsonLd'
|
||
|
||
const seo = useSEO('about')
|
||
useScrollReveal()
|
||
useOrganizationSchema(brand, contact)
|
||
usePersonSchema(about.founder)
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '关于我们' },
|
||
])
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.journey-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: @space-xl 0 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-lg;
|
||
|
||
.respond-md({
|
||
grid-template-columns: repeat(2, 1fr);
|
||
});
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(4, 1fr);
|
||
});
|
||
}
|
||
|
||
.journey-item {
|
||
display: flex;
|
||
gap: @space-md;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.journey-step {
|
||
flex-shrink: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
background: @color-primary;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-bold;
|
||
}
|
||
|
||
.journey-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.journey-name {
|
||
display: block;
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin-bottom: @space-xs;
|
||
}
|
||
|
||
.journey-detail {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0;
|
||
}
|
||
</style>
|