hulai-website/pages/guide-custom.vue

<template>
  <div class="page-guide-custom">
    <LayoutPageHero
      :title="article?.title || '呼伦贝尔定制游怎么选'"
      :subtitle="heroes?.['guide-custom'] || '定制游 vs 跟团游 vs 自由行，一篇讲透'"
      :breadcrumbs="[{ text: '出行指南', to: '/guides' }, { text: '定制游怎么选' }]"
      background-image="/images/seasons/summer-river.jpg"
    />

    <section v-if="article?.tldr" class="page-tldr" aria-label="定制游摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>{{ article.tldr }}</p>
        </div>
      </div>
    </section>

    <article class="section">
      <div class="container article-body">
        <template v-for="(section, sIdx) in article?.sections || []" :key="sIdx">
          <!-- 文本段落型 -->
          <template v-if="section.type === 'text'">
            <h2 v-if="section.heading">{{ section.heading }}</h2>
            <p v-for="(p, i) in section.paragraphs" :key="i">{{ p }}</p>
          </template>

          <!-- 对比表格型 -->
          <template v-else-if="section.type === 'table'">
            <h2 v-if="section.heading">{{ section.heading }}</h2>
            <div class="compare-table-wrap">
              <table class="compare-table">
                <thead>
                  <tr>
                    <th></th>
                    <th v-for="col in section.columns" :key="col">{{ col }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(row, rIdx) in section.rows" :key="rIdx">
                    <td class="row-label">{{ row.label }}</td>
                    <td
                      v-for="(val, vIdx) in row.values"
                      :key="vIdx"
                      :class="{ highlight: vIdx === 0 }"
                    >
                      {{ val }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>

          <!-- 列表型 -->
          <template v-else-if="section.type === 'list'">
            <h2 v-if="section.heading">{{ section.heading }}</h2>
            <p v-if="section.intro">{{ section.intro }}</p>
            <ul v-if="section.items && section.items.length">
              <li v-for="(item, i) in section.items" :key="i">{{ item }}</li>
            </ul>
            <p v-if="section.outro">{{ section.outro }}</p>
          </template>
        </template>

        <div v-if="article?.cta" class="article-cta">
          <h3 v-if="article.cta.heading">{{ article.cta.heading }}</h3>
          <div class="cta-links">
            <NuxtLink
              v-for="(link, i) in article.cta.links || []"
              :key="i"
              :to="link.to"
              class="cta-btn"
              :class="link.primary ? 'cta-btn--primary' : 'cta-btn--outline'"
            >
              {{ link.text }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script setup>
import { useBreadcrumbSchema } from '~/composables/useJsonLd'

const { data: article } = await usePublicApi('guide-custom')
const { data: heroes } = await usePublicApi('heroes')

useHead(() => ({
  title: article.value?.seo?.title || '呼伦贝尔定制游怎么选 - 定制游vs跟团游vs自由行 - 呼籁旅行',
  meta: [
    { name: 'description', content: article.value?.seo?.description || '呼伦贝尔定制游是一家一单一车的私家出行方式。本文对比定制游、跟团游、自由行的区别，解释定制游的价格构成和适合人群，帮你判断是否适合选择呼伦贝尔定制游。' },
    { name: 'keywords', content: article.value?.seo?.keywords || '呼伦贝尔定制游,定制游和跟团游的区别,呼伦贝尔旅游怎么选,呼伦贝尔一家一车,呼伦贝尔私家团,呼伦贝尔亲子游' },
  ],
}))

useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '出行指南', to: '/guides' },
  { text: '定制游怎么选' },
])
</script>

<style lang="less" scoped>
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: @space-2xl;

  h2 {
    font-size: @font-size-xl;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: @space-2xl 0 @space-md;

    &:first-child {
      margin-top: 0;
    }
  }

  p {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-loose;
    margin-bottom: @space-md;
  }

  ul {
    padding-left: @space-lg;
    margin-bottom: @space-md;

    li {
      font-size: @font-size-base;
      color: @color-text-secondary;
      line-height: @line-height-loose;
      margin-bottom: @space-xs;
    }
  }
}

.compare-table-wrap {
  overflow-x: auto;
  margin: @space-lg 0 @space-xl;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: @font-size-sm;

  th, td {
    padding: @space-sm @space-md;
    text-align: left;
    border-bottom: 1px solid @color-border;
  }

  th {
    background: @color-bg-gray;
    font-weight: @font-weight-bold;
    color: @color-text-primary;

    &:nth-child(2) {
      color: @color-primary;
    }
  }

  .row-label {
    font-weight: @font-weight-medium;
    color: @color-text-primary;
    white-space: nowrap;
  }

  .highlight {
    color: @color-primary;
    font-weight: @font-weight-medium;
  }

  td {
    color: @color-text-secondary;
  }
}

.article-cta {
  margin-top: @space-2xl;
  padding: @space-xl;
  background: @color-primary-bg;
  border-radius: @border-radius-lg;
  text-align: center;

  h3 {
    font-size: @font-size-lg;
    color: @color-text-primary;
    margin-bottom: @space-lg;
  }
}

.cta-links {
  display: flex;
  gap: @space-md;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: @space-sm @space-lg;
  border-radius: @border-radius-md;
  text-decoration: none;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  transition: all @transition-fast;

  &--primary {
    background: @color-primary;
    color: #fff;
    &:hover { background: @color-primary-light; }
  }

  &--outline {
    background: @color-bg-white;
    color: @color-primary;
    border: 1px solid @color-primary;
    &:hover { background: @color-primary; color: #fff; }
  }
}
</style>