wx/hulai-website
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

sync: 同步最新呼籁官网代码到仓库

浏览代码 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
这个提交包含在：
刘涛
2026-03-22 21:57:35 +08:00
共同撰写人 Claude Sonnet 4.6
当前提交 a25f3a77ce
共修改 319 个文件，包含 46379 行新增和 0 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
pages/destinations/[id].vue
+397
查看文件
@@ -0,0 +1,397 @@
<template>
<main class="destination-detail" v-if="dest">
<section class="dest-hero">
<div class="container">
<nav class="breadcrumb" aria-label="面包屑导航">
<NuxtLink to="/">首页</NuxtLink> / <NuxtLink to="/destinations">景区攻略</NuxtLink> / <span>{{ dest.name }}</span>
</nav>
<div class="hero-content">
<span class="dest-tag">{{ dest.tag }}</span>
<h1>{{ dest.name }}</h1>
<p class="hero-subtitle">{{ dest.subtitle }}</p>
</div>
</div>
</section>
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
<section class="page-tldr" aria-label="目的地摘要">
<div class="container">
<div class="page-tldr-inner">
<p>{{ dest.description }}</p>
</div>
</div>
</section>
<section class="dest-description">
<div class="container">
<p>{{ dest.description }}</p>
</div>
</section>
<section class="dest-highlights" v-if="dest.highlights?.length">
<div class="container">
<h2>景点亮点</h2>
<ul>
<li v-for="(h, i) in dest.highlights" :key="i">{{ h }}</li>
</ul>
</div>
</section>
<section class="dest-season">
<div class="container">
<h2>最佳游览季节</h2>
<div class="season-card">
<div class="season-primary">
<span class="season-label">最佳时节</span>
<span class="season-value">{{ dest.bestSeason.primary }}</span>
</div>
<div class="season-secondary" v-if="dest.bestSeason.secondary">
<span class="season-label">次佳时节</span>
<span class="season-value">{{ dest.bestSeason.secondary }}</span>
</div>
<p class="season-desc">{{ dest.bestSeason.description }}</p>
</div>
</div>
</section>
<section class="dest-tips" v-if="dest.tips?.length">
<div class="container">
<h2>实用旅行贴士</h2>
<ul>
<li v-for="(tip, i) in dest.tips" :key="i">{{ tip }}</li>
</ul>
</div>
</section>
<section class="dest-products" v-if="relatedProducts.length">
<div class="container">
<h2>包含此景点的行程</h2>
<p class="products-intro">以下呼籁定制游产品涵盖{{ dest.name }}，由专属领队带队深度游览。</p>
<div class="product-links">
<NuxtLink
v-for="p in relatedProducts"
:key="p.id"
:to="`/products/${p.id}`"
class="product-link"
>
<span class="product-name">{{ p.name }}</span>
<span class="product-meta">{{ p.days }}天{{ p.nights }}晚 · {{ p.tag }}</span>
</NuxtLink>
</div>
</div>
</section>
<section class="dest-cta">
<div class="container">
<h2>想去{{ dest.name }}？让定制师为你规划</h2>
<p>扫码添加微信，定制师一对一为你安排深度游览方案</p>
<NuxtLink to="/contact" class="cta-button">联系定制师</NuxtLink>
</div>
</section>
</main>
</template>
<script setup>
import destinationsData from '~/data/destinations-detail.json'
import productsData from '~/data/products.json'
import winterProductsData from '~/data/winter-products.json'
import autumnProductsData from '~/data/autumn-products.json'
import useSEO from '~/composables/useSEO'
import { useBreadcrumbSchema } from '~/composables/useJsonLd'
const route = useRoute()
const destId = route.params.id
const dest = destinationsData.destinations.find(d => d.id === destId)
if (!dest) {
throw createError({ statusCode: 404, statusMessage: '目的地不存在' })
}
// SEO
const seoOverrides = {
title: dest.seo?.title,
description: dest.seo?.description,
}
useSEO('destinations', seoOverrides)
useHead({
meta: [
{ name: 'keywords', content: dest.seo?.keywords },
],
})
// JSON-LD: TouristAttraction
useHead({
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'TouristAttraction',
name: dest.name,
description: dest.description,
url: `https://1814.love/destinations/${dest.id}`,
touristType: '家庭游客,亲子游,摄影爱好者',
isAccessibleForFree: false,
photo: dest.heroImage ? { '@type': 'ImageObject', url: `https://1814.love${dest.heroImage}` } : undefined,
containedInPlace: {
'@type': 'AdministrativeArea',
name: '呼伦贝尔',
address: {
'@type': 'PostalAddress',
addressLocality: '呼伦贝尔市',
addressRegion: '内蒙古自治区',
addressCountry: 'CN',
},
},
publicAccess: true,
availableLanguage: 'Chinese',
}),
},
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: dest.seo?.title || dest.name,
description: dest.seo?.description || dest.description,
url: `https://1814.love/destinations/${dest.id}`,
author: { '@id': 'https://1814.love/#organization' },
publisher: { '@id': 'https://1814.love/#organization' },
dateModified: new Date().toISOString().split('T')[0],
about: {
'@type': 'TouristAttraction',
name: dest.name,
},
keywords: dest.seo?.keywords,
}),
},
],
})
// 面包屑
useBreadcrumbSchema([
{ text: '首页', to: '/' },
{ text: '景区攻略', to: '/destinations' },
{ text: dest.name },
])
// 关联产品详情——从三个产品线数据中查找
const allVersions = [
...(productsData.versions || []),
...(winterProductsData.versions || []),
...(autumnProductsData.versions || []),
]
const relatedProducts = (dest.relatedProducts || [])
.map(pid => allVersions.find(v => v.id === pid))
.filter(Boolean)
</script>
<style scoped>
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.dest-hero {
background: linear-gradient(135deg, #f0f5f1, #e8ede9);
padding: 40px 0 48px;
}
.breadcrumb {
font-size: 14px;
color: #7a857c;
margin-bottom: 24px;
}
.breadcrumb a {
color: #3a7d44;
text-decoration: none;
}
.dest-tag {
display: inline-block;
background: #3a7d44;
color: #fff;
padding: 4px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
}
h1 {
font-size: 32px;
font-weight: 800;
color: #1a1f1c;
line-height: 1.3;
margin-bottom: 10px;
}
.hero-subtitle {
font-size: 17px;
color: #4a5e4d;
}
.dest-description {
padding: 40px 0;
}
.dest-description p {
font-size: 17px;
line-height: 1.9;
color: #3d4a40;
}
.dest-highlights {
padding: 40px 0;
background: #fafbfa;
}
.dest-highlights h2,
.dest-season h2,
.dest-tips h2,
.dest-products h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
color: #1a1f1c;
}
.dest-highlights ul {
list-style: none;
padding: 0;
}
.dest-highlights li {
padding: 14px 0;
border-bottom: 1px solid #eef0ef;
font-size: 16px;
line-height: 1.6;
color: #3d4a40;
padding-left: 24px;
position: relative;
}
.dest-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: #3a7d44;
font-weight: 700;
}
.dest-season {
padding: 40px 0;
}
.season-card {
background: #f0f5f1;
border-radius: 10px;
padding: 24px;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.season-primary,
.season-secondary {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 120px;
}
.season-label {
font-size: 12px;
color: #7a857c;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.season-value {
font-size: 18px;
font-weight: 700;
color: #3a7d44;
}
.season-desc {
flex: 1 1 100%;
font-size: 15px;
line-height: 1.7;
color: #4a5e4d;
margin: 0;
}
.dest-tips {
padding: 40px 0;
background: #fafbfa;
}
.dest-tips ul {
list-style: none;
padding: 0;
}
.dest-tips li {
padding: 14px 0;
border-bottom: 1px solid #eef0ef;
font-size: 16px;
line-height: 1.6;
color: #3d4a40;
padding-left: 28px;
position: relative;
}
.dest-tips li::before {
content: '💡';
position: absolute;
left: 0;
font-size: 14px;
}
.dest-products {
padding: 40px 0;
}
.products-intro {
font-size: 15px;
color: #4a5e4d;
margin-bottom: 20px;
}
.product-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.product-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border: 1px solid #d8e4da;
border-radius: 8px;
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.product-link:hover {
border-color: #3a7d44;
background: #f0f5f1;
}
.product-name {
font-size: 16px;
font-weight: 600;
color: #1a1f1c;
}
.product-meta {
font-size: 14px;
color: #7a857c;
}
.dest-cta {
padding: 48px 0;
text-align: center;
background: linear-gradient(135deg, #f0f5f1, #e8ede9);
}
.dest-cta h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: #1a1f1c;
}
.dest-cta p {
color: #4a5e4d;
margin-bottom: 20px;
}
.cta-button {
display: inline-block;
background: #3a7d44;
color: #fff;
padding: 12px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.cta-button:hover {
background: #2e6435;
}
</style>
pages/destinations/index.vue
+454
查看文件
@@ -0,0 +1,454 @@
<template>
<div class="page-destinations">
<LayoutPageHero
title="呼伦贝尔核心景区攻略"
subtitle="深耕呼伦贝尔11年，带你发现最真实的草原秘境"
:breadcrumbs="[{ text: '景区攻略' }]"
/>
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
<section class="page-tldr" aria-label="景区攻略摘要">
<div class="container">
<div class="page-tldr-inner">
<p>呼伦贝尔核心景区覆盖草原、湿地、森林、边境、火山地质等多种景观类型。本页梳理了呼籁旅行三大产品线（额吉的故乡·夏季、游牧的森林·秋季、嗨冰雪·冬季）覆盖的所有核心景区，包括莫日格勒河、额尔古纳湿地、白桦林、恩和室韦、黑山头、满洲里、阿尔山国家森林公园、大兴安岭莫尔道嘎、敖鲁古雅驯鹿部落、根河等，提供每处景区的实用攻略、最佳时间和旅行贴士。</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<!-- 季节筛选 -->
<div class="dest-filter">
<button
v-for="s in seasonFilters"
:key="s.key"
class="filter-btn"
:class="{ 'filter-btn--active': activeSeason === s.key }"
@click="activeSeason = s.key"
>
{{ s.label }}
<span class="filter-count">{{ getSeasonCount(s.key) }}</span>
</button>
</div>
<!-- 搜索 -->
<div class="dest-search">
<svg class="dest-search__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input
v-model="searchQuery"
type="text"
placeholder="搜索景区名称或关键词…"
class="dest-search__input"
/>
<button v-if="searchQuery" class="dest-search__clear" @click="searchQuery = ''">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<!-- 景区列表 -->
<div v-if="filteredDestinations.length === 0" class="dest-empty">
<p>没有找到匹配的景区，试试其他关键词</p>
</div>
<div class="dest-grid">
<NuxtLink
v-for="dest in filteredDestinations"
:key="dest.id"
:to="`/destinations/${dest.id}`"
class="dest-card reveal"
>
<div class="dest-card__header">
<span class="dest-card__tag">{{ dest.tag }}</span>
<span class="dest-card__season">{{ dest.bestSeason.primary }}</span>
</div>
<h2 class="dest-card__name">{{ dest.name }}</h2>
<p class="dest-card__subtitle">{{ dest.subtitle }}</p>
<p class="dest-card__desc">{{ dest.description.substring(0, 100) }}…</p>
<div class="dest-card__highlights">
<span v-for="(h, i) in dest.highlights.slice(0, 2)" :key="i" class="dest-card__highlight">{{ h.split('——')[0] }}</span>
</div>
<div class="dest-card__seasons">
<span v-if="dest.seasons?.includes('summer')" class="season-dot season-dot--summer" title="额吉的故乡·夏季">夏</span>
<span v-if="dest.seasons?.includes('autumn')" class="season-dot season-dot--autumn" title="游牧的森林·秋季">秋</span>
<span v-if="dest.seasons?.includes('winter')" class="season-dot season-dot--winter" title="嗨冰雪·冬季">冬</span>
</div>
<span class="dest-card__link">查看攻略 →</span>
</NuxtLink>
</div>
<!-- CTA -->
<div class="dest-cta">
<h2>不确定去哪些景区？让定制师帮你组合</h2>
<p>呼籁旅行定制师深耕呼伦贝尔11年，根据你的时间、季节、孩子年龄，帮你搭配最合适的景区组合和行程节奏。</p>
<div class="dest-cta__links">
<CommonInternalLink to="/contact" text="免费咨询定制师" />
<CommonInternalLink to="/products" text="查看定制游产品" />
</div>
</div>
</div>
</section>
</div>
</template>
<script setup>
import destinationsData from '~/data/destinations-detail.json'
import useSEO from '~/composables/useSEO'
import { useBreadcrumbSchema } from '~/composables/useJsonLd'
import useScrollReveal from '~/composables/useScrollReveal'
const destinations = destinationsData.destinations
const searchQuery = ref('')
const activeSeason = ref('all')
const seasonFilters = [
{ key: 'all', label: '全部景区' },
{ key: 'summer', label: '夏季·额吉的故乡' },
{ key: 'autumn', label: '秋季·游牧的森林' },
{ key: 'winter', label: '冬季·嗨冰雪' },
]
function getSeasonCount(key) {
if (key === 'all') return destinations.length
return destinations.filter(d => d.seasons?.includes(key)).length
}
const filteredDestinations = computed(() => {
return destinations.filter(d => {
const matchSeason = activeSeason.value === 'all' || d.seasons?.includes(activeSeason.value)
const q = searchQuery.value.trim().toLowerCase()
const matchSearch = !q
|| d.name.toLowerCase().includes(q)
|| d.subtitle?.toLowerCase().includes(q)
|| d.tag.toLowerCase().includes(q)
|| (d.highlights || []).some(h => h.toLowerCase().includes(q))
return matchSeason && matchSearch
})
})
useSEO('destinations', {
title: '呼伦贝尔核心景区攻略 - 莫日格勒河 额尔古纳 阿尔山等景点详解 | 呼籁旅行',
description: '呼籁旅行深耕呼伦贝尔11年，为你梳理三大产品线覆盖的核心景区攻略：莫日格勒河、额尔古纳湿地、白桦林、恩和室韦、黑山头、满洲里、阿尔山、大兴安岭、敖鲁古雅驯鹿部落、根河，含实用贴士和最佳时间。',
})
useHead({
meta: [
{ name: 'keywords', content: '呼伦贝尔景点,呼伦贝尔旅游攻略,莫日格勒河,额尔古纳湿地,白桦林,黑山头,满洲里,阿尔山,大兴安岭,敖鲁古雅,根河,呼伦贝尔景区' },
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'ItemList',
name: '呼伦贝尔核心旅游景区',
description: '呼籁旅行三大产品线覆盖的呼伦贝尔核心景区，含草原、湿地、森林、边境、火山地质等多种景观',
url: 'https://1814.love/destinations',
numberOfItems: destinations.length,
itemListElement: destinations.map((d, i) => ({
'@type': 'ListItem',
position: i + 1,
name: d.name,
description: d.description.substring(0, 120),
url: `https://1814.love/destinations/${d.id}`,
item: {
'@type': 'TouristAttraction',
name: d.name,
description: d.subtitle,
},
})),
}),
},
],
})
useBreadcrumbSchema([
{ text: '首页', to: '/' },
{ text: '景区攻略' },
])
useScrollReveal()
</script>
<style lang="less" scoped>
// 筛选
.dest-filter {
display: flex;
flex-wrap: wrap;
gap: @space-sm;
margin-bottom: @space-lg;
}
.filter-btn {
display: inline-flex;
align-items: center;
gap: @space-xs;
padding: @space-sm @space-md;
background: @color-bg-white;
border: 1px solid @color-border;
border-radius: @border-radius-full;
font-size: @font-size-sm;
color: @color-text-secondary;
cursor: pointer;
transition: all @transition-base;
&:hover {
border-color: @color-primary;
color: @color-primary;
}
&--active {
background: @color-primary;
border-color: @color-primary;
color: #fff;
.filter-count {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
}
}
.filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: @color-primary-bg;
color: @color-primary;
border-radius: @border-radius-full;
font-size: 11px;
font-weight: @font-weight-medium;
}
// 搜索
.dest-search {
position: relative;
display: flex;
align-items: center;
max-width: 480px;
margin-bottom: @space-2xl;
background: @color-bg-white;
border: 1px solid @color-border;
border-radius: @border-radius-full;
padding: 0 @space-md;
transition: border-color @transition-fast;
&:focus-within {
border-color: @color-primary;
}
&__icon {
flex-shrink: 0;
color: @color-text-muted;
margin-right: @space-sm;
}
&__input {
flex: 1;
border: none;
outline: none;
font-size: @font-size-sm;
color: @color-text-primary;
background: transparent;
padding: 10px 0;
&::placeholder {
color: @color-text-muted;
}
}
&__clear {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: @color-text-muted;
padding: @space-xs;
display: flex;
align-items: center;
transition: color @transition-fast;
&:hover {
color: @color-primary;
}
}
}
// 空状态
.dest-empty {
text-align: center;
padding: @space-3xl;
color: @color-text-muted;
font-size: @font-size-md;
}
// 景区网格
.dest-grid {
display: grid;
grid-template-columns: 1fr;
gap: @space-lg;
.respond-md({
grid-template-columns: 1fr 1fr;
});
.respond-lg({
grid-template-columns: 1fr 1fr 1fr;
});
}
// 景区卡片
.dest-card {
display: flex;
flex-direction: column;
gap: @space-sm;
padding: @space-lg;
background: @color-bg-white;
border: 1px solid @color-border;
border-radius: @border-radius-lg;
text-decoration: none;
color: inherit;
transition: box-shadow @transition-base, transform @transition-base;
&:hover {
box-shadow: @shadow-lg;
transform: translateY(-2px);
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
}
&__tag {
display: inline-block;
background: @color-primary;
color: #fff;
padding: 3px @space-sm;
border-radius: @border-radius-sm;
font-size: @font-size-xs;
font-weight: @font-weight-medium;
}
&__season {
font-size: @font-size-xs;
color: @color-text-muted;
}
&__name {
font-size: @font-size-lg;
font-weight: @font-weight-bold;
color: @color-text-primary;
line-height: @line-height-tight;
margin: 0;
}
&__subtitle {
font-size: @font-size-xs;
color: @color-text-muted;
margin: 0;
line-height: @line-height-tight;
}
&__desc {
font-size: @font-size-sm;
line-height: @line-height-base;
color: @color-text-secondary;
margin: 0;
.text-clamp(3);
}
&__highlights {
display: flex;
flex-wrap: wrap;
gap: @space-xs;
}
&__highlight {
display: inline-block;
padding: 2px @space-sm;
background: @color-primary-bg;
color: @color-primary;
border-radius: @border-radius-sm;
font-size: @font-size-xs;
.text-clamp(1);
}
&__seasons {
display: flex;
gap: @space-xs;
margin-top: auto;
padding-top: @space-xs;
}
&__link {
font-size: @font-size-sm;
color: @color-primary;
font-weight: @font-weight-medium;
transition: color @transition-fast;
}
&:hover &__link {
color: @color-primary-light;
}
}
// 季节标签
.season-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: @border-radius-full;
font-size: 11px;
font-weight: @font-weight-medium;
&--summer {
background: #E8F5E9;
color: #2E7D32;
}
&--autumn {
background: #FFF3E0;
color: #E65100;
}
&--winter {
background: #E3F2FD;
color: #1565C0;
}
}
// CTA
.dest-cta {
text-align: center;
margin-top: @space-3xl;
padding: @space-2xl;
background: @color-primary-bg;
border-radius: @border-radius-lg;
h2 {
margin-bottom: @space-sm;
}
p {
color: @color-text-secondary;
margin-bottom: @space-xl;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
}
.dest-cta__links {
display: flex;
justify-content: center;
gap: @space-xl;
flex-wrap: wrap;
}
</style>