694 行
17 KiB
Vue
694 行
17 KiB
Vue
<template>
|
||
<div class="page-qualifications">
|
||
<LayoutPageHero
|
||
:title="seo.h1"
|
||
subtitle="三重旅行社资质 · 1000万责任险 · 深耕呼伦贝尔11年"
|
||
:breadcrumbs="[{ text: '关于我们', to: '/about' }, { text: '资质与荣誉' }]"
|
||
/>
|
||
|
||
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
|
||
<section class="page-tldr" aria-label="资质与荣誉摘要">
|
||
<div class="container">
|
||
<div class="page-tldr-inner">
|
||
<p>呼籁集团旗下三家主体（呼伦贝尔呼籁旅行社、呼籁旅游、嘎查旅行社）均持有旅游经营许可证，购买1000万元旅游责任险，持有「呼籁」注册商标和多项著作权。2015年创立至今已深耕呼伦贝尔11年，本页展示完整的资质证书、荣誉认证、企业发展历程和知识产权信息。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心信任声明 -->
|
||
<section class="section section-trust-bar">
|
||
<div class="container">
|
||
<div class="trust-bar reveal">
|
||
<div v-for="item in qualifications.safetyGuarantees.slice(0, 4)" :key="item.title" class="trust-bar__item">
|
||
<strong class="trust-bar__title">{{ item.title }}</strong>
|
||
<p class="trust-bar__detail">{{ item.detail }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 三重旅行社资质 -->
|
||
<section class="section section-licenses">
|
||
<div class="container">
|
||
<CommonSectionTitle
|
||
title="三重旅行社资质保障"
|
||
subtitle="旗下三家主体均持有旅游经营许可证，选呼籁不是在选黑旅行社"
|
||
/>
|
||
<div class="licenses-grid reveal">
|
||
<div
|
||
v-for="(license, index) in qualifications.licenses"
|
||
:key="index"
|
||
class="license-card"
|
||
:class="{ 'license-card--highlight': index === 2 }"
|
||
>
|
||
<div class="license-card__badge">旅游经营许可证</div>
|
||
<h3 class="license-card__holder">{{ license.holder }}</h3>
|
||
<div class="license-card__info">
|
||
<div class="license-info-row">
|
||
<span class="license-info-label">颁发机构</span>
|
||
<span class="license-info-value">{{ license.issuer }}</span>
|
||
</div>
|
||
<div v-if="license.licenseNo && !license.licenseNo.includes('占位符')" class="license-info-row">
|
||
<span class="license-info-label">许可证号</span>
|
||
<span class="license-info-value license-info-value--no">{{ license.licenseNo }}</span>
|
||
</div>
|
||
<div class="license-info-row">
|
||
<span class="license-info-label">有效期</span>
|
||
<span class="license-info-value">{{ license.validPeriod }}</span>
|
||
</div>
|
||
</div>
|
||
<p v-if="license.note" class="license-card__note">{{ license.note }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 旅游责任险 -->
|
||
<section class="section section-insurance section-alt">
|
||
<div class="container">
|
||
<div class="insurance-block reveal">
|
||
<div class="insurance-block__icon">🛡️</div>
|
||
<div class="insurance-block__content">
|
||
<h2 class="insurance-block__title">{{ qualifications.insurance.title }}</h2>
|
||
<p class="insurance-block__desc">{{ qualifications.insurance.description }}</p>
|
||
<ul class="insurance-block__details">
|
||
<li v-if="qualifications.insurance.insurer && !qualifications.insurance.insurer.includes('占位符')">承保方：{{ qualifications.insurance.insurer }}</li>
|
||
<li>覆盖范围：{{ qualifications.insurance.policyScope }}</li>
|
||
<li>理赔支持：{{ qualifications.insurance.claimContact }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 荣誉与认证 -->
|
||
<section class="section section-awards">
|
||
<div class="container">
|
||
<CommonSectionTitle
|
||
title="荣誉与认证"
|
||
subtitle="行业机构和平台对呼籁服务质量的认可"
|
||
/>
|
||
<div class="awards-grid reveal">
|
||
<div v-for="award in qualifications.awards" :key="award.title" class="award-card">
|
||
<div class="award-card__year">{{ award.year }}</div>
|
||
<h3 class="award-card__title">{{ award.title }}</h3>
|
||
<p class="award-card__detail">{{ award.detail }}</p>
|
||
<span class="award-card__issuer">颁发方：{{ award.issuer }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 集团企业矩阵 -->
|
||
<section class="section section-matrix section-alt">
|
||
<div class="container">
|
||
<CommonSectionTitle
|
||
:title="`集团${qualifications.enterpriseMatrix.totalCount}家企业矩阵`"
|
||
:subtitle="qualifications.enterpriseMatrix.description"
|
||
/>
|
||
<div class="matrix-grid reveal">
|
||
<div
|
||
v-for="company in qualifications.enterpriseMatrix.companies"
|
||
:key="company.name"
|
||
class="matrix-card"
|
||
>
|
||
<div class="matrix-card__header">
|
||
<span class="matrix-card__tag">{{ company.tag }}</span>
|
||
<span class="matrix-card__year">{{ company.established }}</span>
|
||
</div>
|
||
<h3 class="matrix-card__name">{{ company.name }}</h3>
|
||
<p class="matrix-card__role">{{ company.role }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 发展历程 -->
|
||
<section class="section section-heritage">
|
||
<div class="container">
|
||
<CommonSectionTitle
|
||
:title="`${qualifications.heritage.brandYears}年深耕呼伦贝尔`"
|
||
subtitle="从2015年呼籁品牌创立到今天，每一步都走在同一片草原上"
|
||
/>
|
||
<div class="timeline reveal">
|
||
<div
|
||
v-for="milestone in qualifications.heritage.milestones"
|
||
:key="milestone.year"
|
||
class="timeline-item"
|
||
>
|
||
<div class="timeline-item__year">{{ milestone.year }}</div>
|
||
<div class="timeline-item__dot"></div>
|
||
<div class="timeline-item__event">{{ milestone.event }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 知识产权 -->
|
||
<section class="section section-ip section-alt">
|
||
<div class="container">
|
||
<CommonSectionTitle
|
||
title="知识产权保护"
|
||
subtitle="呼籁品牌的原创内容和商标均受法律保护"
|
||
/>
|
||
<div class="ip-block reveal">
|
||
<div class="ip-trademark">
|
||
<div class="ip-trademark__badge">商标注册</div>
|
||
<h3 class="ip-trademark__name">「{{ qualifications.intellectualProperty.trademark.name }}」</h3>
|
||
<p class="ip-trademark__scope">{{ qualifications.intellectualProperty.trademark.scope }}</p>
|
||
<p class="ip-trademark__holder">持有方：{{ qualifications.intellectualProperty.trademark.holder }}</p>
|
||
<p class="ip-trademark__desc">{{ qualifications.intellectualProperty.trademark.description }}</p>
|
||
</div>
|
||
<div class="ip-copyrights">
|
||
<h3 class="ip-copyrights__title">著作权登记</h3>
|
||
<div class="copyright-list">
|
||
<div
|
||
v-for="cr in qualifications.intellectualProperty.copyrights"
|
||
:key="cr.regNo"
|
||
class="copyright-item"
|
||
>
|
||
<span class="copyright-item__name">{{ cr.name }}</span>
|
||
<span class="copyright-item__category">{{ cr.category }}</span>
|
||
<span class="copyright-item__no">{{ cr.regNo }}</span>
|
||
<span class="copyright-item__date">{{ cr.date }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 内链 -->
|
||
<CommonSectionCTA
|
||
title="了解更多，或直接咨询"
|
||
description="查看呼籁旅行产品，或联系定制师了解行程详情"
|
||
:links="[
|
||
{ to: '/products', text: '查看旅行产品' },
|
||
{ to: '/contact', text: '联系定制师' },
|
||
]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import qualifications from '~/data/qualifications.json'
|
||
import brand from '~/data/brand.json'
|
||
import contact from '~/data/contact.json'
|
||
import { useOrganizationSchema, useBreadcrumbSchema, useQualificationsPageSchema } from '~/composables/useJsonLd'
|
||
|
||
const seo = useSEO('qualifications')
|
||
useScrollReveal()
|
||
useOrganizationSchema(brand, contact)
|
||
useQualificationsPageSchema(brand, qualifications)
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '关于我们', to: '/about' },
|
||
{ text: '资质与荣誉' },
|
||
])
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 信任横条
|
||
.section-trust-bar {
|
||
background: @color-primary;
|
||
padding-top: @space-xl;
|
||
padding-bottom: @space-xl;
|
||
}
|
||
|
||
.trust-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: @space-lg;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(4, 1fr);
|
||
});
|
||
|
||
&__item {
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
&__title {
|
||
display: block;
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
margin-bottom: @space-xs;
|
||
}
|
||
|
||
&__detail {
|
||
font-size: @font-size-sm;
|
||
opacity: 0.85;
|
||
margin: 0;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
// 旅行社资质
|
||
.licenses-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-lg;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(3, 1fr);
|
||
});
|
||
}
|
||
|
||
.license-card {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-xl;
|
||
position: relative;
|
||
|
||
&--highlight {
|
||
border-color: @color-primary;
|
||
background: @color-primary-bg;
|
||
|
||
&::after {
|
||
content: '集团最早实体';
|
||
position: absolute;
|
||
top: -1px;
|
||
right: @space-lg;
|
||
background: @color-primary;
|
||
color: #fff;
|
||
font-size: @font-size-xs;
|
||
padding: 3px @space-sm;
|
||
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||
}
|
||
}
|
||
|
||
&__badge {
|
||
display: inline-block;
|
||
padding: 3px @space-sm;
|
||
background: @color-primary;
|
||
color: #fff;
|
||
font-size: @font-size-xs;
|
||
font-weight: @font-weight-medium;
|
||
border-radius: @border-radius-sm;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
&__holder {
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-md;
|
||
line-height: @line-height-tight;
|
||
}
|
||
|
||
&__info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-sm;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
&__note {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
margin: 0;
|
||
padding-top: @space-sm;
|
||
border-top: 1px solid @color-border;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
.license-info-row {
|
||
display: flex;
|
||
gap: @space-sm;
|
||
font-size: @font-size-sm;
|
||
}
|
||
|
||
.license-info-label {
|
||
color: @color-text-muted;
|
||
min-width: 60px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.license-info-value {
|
||
color: @color-text-secondary;
|
||
|
||
&--no {
|
||
font-family: monospace;
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
}
|
||
}
|
||
|
||
// 责任险
|
||
.section-insurance {
|
||
background: @color-bg-gray;
|
||
}
|
||
|
||
.insurance-block {
|
||
display: flex;
|
||
gap: @space-2xl;
|
||
align-items: flex-start;
|
||
background: @color-bg-white;
|
||
border: 2px solid @color-primary;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-2xl;
|
||
|
||
&__icon {
|
||
font-size: 48px;
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
&__content {
|
||
flex: 1;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-sm;
|
||
}
|
||
|
||
&__desc {
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
margin: 0 0 @space-md;
|
||
}
|
||
|
||
&__details {
|
||
margin: 0;
|
||
padding-left: @space-lg;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-xs;
|
||
|
||
li {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 荣誉
|
||
.awards-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-lg;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(3, 1fr);
|
||
});
|
||
}
|
||
|
||
.award-card {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-xl;
|
||
text-align: center;
|
||
|
||
&__year {
|
||
display: inline-block;
|
||
font-size: @font-size-2xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary;
|
||
line-height: 1;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-sm;
|
||
line-height: @line-height-tight;
|
||
}
|
||
|
||
&__detail {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
margin: 0 0 @space-md;
|
||
}
|
||
|
||
&__issuer {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
}
|
||
}
|
||
|
||
// 企业矩阵
|
||
.section-matrix {
|
||
background: @color-bg-gray;
|
||
}
|
||
|
||
.matrix-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-md;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: repeat(3, 1fr);
|
||
});
|
||
}
|
||
|
||
.matrix-card {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-md;
|
||
padding: @space-lg;
|
||
transition: box-shadow @transition-fast;
|
||
|
||
&:hover {
|
||
box-shadow: @shadow-sm;
|
||
}
|
||
|
||
&__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: @space-sm;
|
||
}
|
||
|
||
&__tag {
|
||
font-size: @font-size-xs;
|
||
padding: 2px @space-sm;
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
border-radius: @border-radius-full;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
&__year {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
&__name {
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-sm;
|
||
line-height: @line-height-tight;
|
||
}
|
||
|
||
&__role {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
margin: 0;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
// 发展历程
|
||
.timeline {
|
||
position: relative;
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 80px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: @color-primary-bg;
|
||
|
||
.respond-lg({
|
||
left: 90px;
|
||
});
|
||
}
|
||
}
|
||
|
||
.timeline-item {
|
||
display: grid;
|
||
grid-template-columns: 80px 20px 1fr;
|
||
gap: 0 @space-md;
|
||
align-items: flex-start;
|
||
margin-bottom: @space-xl;
|
||
padding-bottom: @space-xl;
|
||
border-bottom: 1px solid @color-border;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: 90px 20px 1fr;
|
||
});
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
&__year {
|
||
font-size: @font-size-xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary;
|
||
text-align: right;
|
||
padding-top: 2px;
|
||
line-height: 1;
|
||
}
|
||
|
||
&__dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
background: @color-primary;
|
||
border-radius: 50%;
|
||
margin-top: 4px;
|
||
position: relative;
|
||
z-index: 1;
|
||
flex-shrink: 0;
|
||
justify-self: center;
|
||
}
|
||
|
||
&__event {
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
// 知识产权
|
||
.section-ip {
|
||
background: @color-bg-gray;
|
||
}
|
||
|
||
.ip-block {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-xl;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: 1fr 1.5fr;
|
||
align-items: start;
|
||
});
|
||
}
|
||
|
||
.ip-trademark {
|
||
background: @color-bg-white;
|
||
border: 2px solid @color-primary-bg;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-xl;
|
||
text-align: center;
|
||
|
||
&__badge {
|
||
display: inline-block;
|
||
padding: 3px @space-md;
|
||
background: @color-primary;
|
||
color: #fff;
|
||
font-size: @font-size-xs;
|
||
border-radius: @border-radius-full;
|
||
margin-bottom: @space-md;
|
||
}
|
||
|
||
&__name {
|
||
font-size: @font-size-2xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-primary;
|
||
margin: 0 0 @space-xs;
|
||
}
|
||
|
||
&__scope {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
margin: 0 0 @space-sm;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
&__holder {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
margin: 0 0 @space-md;
|
||
}
|
||
|
||
&__desc {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
margin: 0;
|
||
line-height: @line-height-base;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.ip-copyrights {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-xl;
|
||
|
||
&__title {
|
||
font-size: @font-size-md;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-lg;
|
||
}
|
||
}
|
||
|
||
.copyright-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-sm;
|
||
}
|
||
|
||
.copyright-item {
|
||
display: grid;
|
||
grid-template-columns: auto auto 1fr auto;
|
||
gap: @space-sm;
|
||
align-items: center;
|
||
padding: @space-md;
|
||
background: @color-bg-gray;
|
||
border-radius: @border-radius-md;
|
||
font-size: @font-size-sm;
|
||
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-template-rows: auto auto;
|
||
}
|
||
|
||
&__name {
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
}
|
||
|
||
&__category {
|
||
color: @color-text-muted;
|
||
font-size: @font-size-xs;
|
||
padding: 2px @space-sm;
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
border-radius: @border-radius-full;
|
||
}
|
||
|
||
&__no {
|
||
font-family: monospace;
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
.text-clamp(1);
|
||
}
|
||
|
||
&__date {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</style>
|