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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/products/EvolutionStats.vue

@@ -0,0 +1,78 @@
+<template>
+  <section class="section section--warm">
+    <div class="container">
+      <CommonSectionTitle title="产品进化" subtitle="从V1到V9，每一次更新都是客户反馈驱动" />
+      <div class="evo-stats">
+        <div class="evo-stat">
+          <span class="evo-stat-num">{{ stats.iterations }}</span>
+          <span class="evo-stat-label">次迭代</span>
+        </div>
+        <div class="evo-stat">
+          <span class="evo-stat-num">{{ stats.years }}</span>
+          <span class="evo-stat-label">年打磨</span>
+        </div>
+        <div class="evo-stat">
+          <span class="evo-stat-num">{{ stats.guests }}</span>
+          <span class="evo-stat-label">人次体验</span>
+        </div>
+      </div>
+      <p class="evo-intro">2023年3月，呼籁做了一个"反常识"的决定——只做一条路线。不铺量、不贪多，把所有精力集中在打磨一个产品上。三年9次迭代，每一次版本更新背后，都有真实的客户反馈和一线体验数据。</p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  stats: { type: Object, required: true }
+})
+</script>
+
+<style lang="less" scoped>
+.evo-stats {
+  display: flex;
+  justify-content: center;
+  gap: @space-2xl;
+  margin-bottom: @space-xl;
+}
+
+.evo-stat {
+  text-align: center;
+}
+
+.evo-stat-num {
+  display: inline-block;
+  font-size: @font-size-3xl;
+  font-weight: @font-weight-bold;
+  color: @color-primary;
+  line-height: @line-height-tight;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 10%;
+    right: 10%;
+    height: 3px;
+    background: @color-primary-lighter;
+    border-radius: 2px;
+  }
+}
+
+.evo-stat-label {
+  display: block;
+  margin-top: @space-sm;
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+  letter-spacing: 1px;
+}
+
+.evo-intro {
+  max-width: 700px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: @font-size-base;
+  color: @color-text-secondary;
+  line-height: @line-height-loose;
+}
+</style>

components/products/PricingPhilosophy.vue

@@ -0,0 +1,20 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <CommonSectionTitle title="关于价格" subtitle="透明、清晰、不套路" />
+      <div class="pricing-content">
+        <p>{{ content }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({ content: { type: String, required: true } })
+</script>
+
+<style lang="less" scoped>
+.pricing-content { max-width: 800px; margin: 0 auto; padding: @space-xl; background: @color-bg-warm; border-radius: @border-radius-lg;
+  p { font-size: @font-size-md; line-height: @line-height-loose; color: @color-text-secondary; }
+}
+</style>

components/products/ProductCard.vue

@@ -0,0 +1,217 @@
+<template>
+  <article
+    class="product-card"
+    :class="{ 'product-card--popular': isPopular }"
+    itemscope
+    itemtype="https://schema.org/TouristTrip"
+  >
+    <!-- 头部：天数 + 标签 -->
+    <div class="product-header">
+      <div v-if="isPopular" class="popular-badge">推荐</div>
+      <div class="product-duration">
+        <span class="duration-num">{{ product.days }}</span>
+        <span class="duration-unit">天</span>
+        <span class="duration-num">{{ product.nights }}</span>
+        <span class="duration-unit">晚</span>
+      </div>
+      <span class="product-tag">{{ product.tag }}</span>
+    </div>
+
+    <!-- 主体 -->
+    <div class="product-body">
+      <h3 class="product-name" itemprop="name">
+        <NuxtLink :to="`/products/${product.id}`" class="product-name-link">{{ shortName }}</NuxtLink>
+      </h3>
+      <p class="product-audience">
+        适合：<span itemprop="touristType">{{ product.audience }}</span>
+      </p>
+      <p class="product-desc" itemprop="description">{{ product.description }}</p>
+      <ul class="product-highlights">
+        <li v-for="(h, i) in product.highlights" :key="i">
+          <span class="highlight-check" aria-hidden="true">&#10003;</span>
+          {{ h }}
+        </li>
+      </ul>
+    </div>
+
+    <!-- 底部 CTA -->
+    <NuxtLink to="/contact" class="product-cta">
+      咨询该行程 <span aria-hidden="true">→</span>
+    </NuxtLink>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({ product: { type: Object, required: true } })
+
+const isPopular = computed(() => props.product.id === 'v9-6d5n-family')
+
+// 去掉"额吉的故乡V9·"前缀，在标题区域已标明系列
+const shortName = computed(() => {
+  return props.product.name.replace(/^额吉的故乡V9·/, '')
+})
+</script>
+
+<style lang="less" scoped>
+.product-card {
+  background: @color-bg-white;
+  border: 1px solid @color-border;
+  border-radius: @border-radius-lg;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow @transition-base, transform @transition-base;
+  position: relative;
+
+  &:hover {
+    box-shadow: @shadow-lg;
+    transform: translateY(-4px);
+  }
+
+  &--popular {
+    border: 2px solid @color-primary;
+    box-shadow: @shadow-md;
+
+    .product-header {
+      background: @color-primary;
+    }
+
+    .duration-num,
+    .duration-unit,
+    .product-tag {
+      color: #fff;
+    }
+
+    .product-tag {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+// 头部
+.product-header {
+  padding: @space-lg @space-lg @space-md;
+  background: @color-primary-bg;
+  text-align: center;
+  position: relative;
+}
+
+.popular-badge {
+  position: absolute;
+  top: @space-sm;
+  right: @space-sm;
+  padding: @space-xs @space-sm;
+  font-size: @font-size-xs;
+  font-weight: @font-weight-bold;
+  color: #fff;
+  background: @color-accent;
+  border-radius: @border-radius-sm;
+}
+
+.product-duration {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 2px;
+  margin-bottom: @space-sm;
+}
+
+.duration-num {
+  font-size: @font-size-3xl;
+  font-weight: @font-weight-bold;
+  color: @color-primary;
+  line-height: 1;
+}
+
+.duration-unit {
+  font-size: @font-size-sm;
+  color: @color-primary;
+  font-weight: @font-weight-medium;
+}
+
+.product-tag {
+  display: inline-block;
+  padding: @space-xs @space-md;
+  font-size: @font-size-xs;
+  font-weight: @font-weight-medium;
+  color: @color-primary;
+  background: @color-bg-white;
+  border-radius: @border-radius-full;
+}
+
+// 主体
+.product-body {
+  padding: @space-lg;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.product-name {
+  font-size: @font-size-lg;
+  font-weight: @font-weight-bold;
+  color: @color-text-primary;
+  margin-bottom: @space-xs;
+}
+.product-name-link {
+  color: inherit;
+  text-decoration: none;
+  &:hover { color: @color-primary; }
+}
+
+.product-audience {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+  margin-bottom: @space-md;
+}
+
+.product-desc {
+  font-size: @font-size-sm;
+  color: @color-text-secondary;
+  line-height: @line-height-base;
+  margin-bottom: @space-md;
+  .text-clamp(3);
+}
+
+.product-highlights {
+  display: flex;
+  flex-direction: column;
+  gap: @space-sm;
+  margin-top: auto;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: @space-sm;
+    font-size: @font-size-sm;
+    color: @color-text-secondary;
+    line-height: @line-height-base;
+  }
+}
+
+.highlight-check {
+  flex-shrink: 0;
+  color: @color-primary;
+  font-size: @font-size-sm;
+  font-weight: @font-weight-bold;
+  margin-top: 2px;
+}
+
+// 底部 CTA
+.product-cta {
+  display: block;
+  text-align: center;
+  padding: @space-md @space-lg;
+  font-size: @font-size-sm;
+  font-weight: @font-weight-medium;
+  color: @color-primary;
+  background: @color-bg-gray;
+  text-decoration: none;
+  transition: all @transition-fast;
+
+  &:hover {
+    background: @color-primary;
+    color: #fff;
+  }
+}
+</style>

components/products/ProductOverview.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="section section--warm">
+    <div class="container">
+      <div class="overview-content">
+        <div class="overview-quote-mark" aria-hidden="true">"</div>
+        <p class="overview-text">{{ narrative }}</p>
+        <div class="overview-line"></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({ narrative: { type: String, required: true } })
+</script>
+
+<style lang="less" scoped>
+.overview-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+}
+
+.overview-quote-mark {
+  font-size: 80px;
+  font-weight: @font-weight-bold;
+  color: @color-primary-lighter;
+  line-height: 0.5;
+  margin-bottom: @space-md;
+  font-family: Georgia, serif;
+}
+
+.overview-text {
+  font-size: @font-size-md;
+  line-height: @line-height-loose;
+  color: @color-text-secondary;
+
+  .respond-md({
+    font-size: @font-size-lg;
+  });
+}
+
+.overview-line {
+  width: 60px;
+  height: 3px;
+  background: @color-primary;
+  border-radius: 2px;
+  margin: @space-xl auto 0;
+}
+</style>

components/products/SelectionGuide.vue

@@ -0,0 +1,113 @@
+<template>
+  <section id="guide" class="section section--gray">
+    <div class="container">
+      <CommonSectionTitle title="不知道选哪个？" subtitle="按您的情况推荐" />
+      <div class="guide-groups">
+        <div v-for="group in guideGroups" :key="group.title" class="guide-group">
+          <h3 class="guide-group-title">{{ group.title }}</h3>
+          <div class="guide-items">
+            <div v-for="item in group.items" :key="item.condition" class="guide-item">
+              <div class="guide-item-top">
+                <span class="guide-condition">{{ item.condition }}</span>
+                <span class="guide-arrow">→</span>
+                <span class="guide-rec">{{ getProductName(item.recommendation) }}</span>
+              </div>
+              <p class="guide-reason">{{ item.reason }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const props = defineProps({
+  guide: { type: Object, required: true },
+  versions: { type: Array, required: true },
+})
+
+const guideGroups = computed(() => [
+  { title: '按假期长度', items: props.guide.byVacationLength },
+  { title: '按孩子年龄', items: props.guide.byChildAge },
+  { title: '按旅行偏好', items: props.guide.byPreference },
+])
+
+function getProductName(id) {
+  if (id === 'summer-camp') return '小蒙马夏令营'
+  const v = props.versions.find(v => v.id === id)
+  return v ? v.name : id
+}
+</script>
+
+<style lang="less" scoped>
+.guide-groups {
+  display: flex;
+  flex-direction: column;
+  gap: @space-2xl;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.guide-group-title {
+  font-size: @font-size-lg;
+  color: @color-primary;
+  margin-bottom: @space-md;
+  padding-left: @space-md;
+  border-left: 3px solid @color-primary;
+}
+
+.guide-items {
+  display: flex;
+  flex-direction: column;
+  gap: @space-md;
+}
+
+.guide-item {
+  padding: @space-lg;
+  background: @color-bg-white;
+  border-radius: @border-radius-md;
+  border: 1px solid @color-border;
+  transition: border-color @transition-fast, box-shadow @transition-fast;
+
+  &:hover {
+    border-color: @color-primary-lighter;
+    box-shadow: @shadow-sm;
+  }
+}
+
+.guide-item-top {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: @space-sm;
+  margin-bottom: @space-xs;
+}
+
+.guide-condition {
+  font-weight: @font-weight-medium;
+  color: @color-text-primary;
+  background: @color-bg-gray;
+  padding: @space-xs @space-sm;
+  border-radius: @border-radius-sm;
+  font-size: @font-size-sm;
+}
+
+.guide-arrow {
+  color: @color-primary;
+  font-weight: @font-weight-bold;
+}
+
+.guide-rec {
+  color: @color-primary;
+  font-weight: @font-weight-bold;
+  font-size: @font-size-base;
+}
+
+.guide-reason {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+  margin: 0;
+  line-height: @line-height-base;
+}
+</style>

components/products/SummerCampCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <section id="summer-camp" class="section section--green">
+    <div class="container">
+      <CommonSectionTitle :title="camp.name" :subtitle="`适合${camp.ageRange}青少年`" />
+
+      <!-- 团宠+简介 -->
+      <div class="camp-hero">
+        <div class="camp-mascot">
+          <img
+            :src="images.mascot.xiaomengma"
+            alt="小蒙马 - 小蒙马夏令营团宠，一只可爱的蒙古小马形象"
+            width="200"
+            height="200"
+            loading="lazy"
+          />
+        </div>
+        <div class="camp-intro">
+          <p class="camp-positioning">{{ camp.positioning }}</p>
+        </div>
+      </div>
+
+      <div class="camp-content">
+        <div v-if="camp.coreActivities.length" class="camp-activities">
+          <h3>核心活动</h3>
+          <ul>
+            <li v-for="(a, i) in camp.coreActivities" :key="i">{{ a }}</li>
+          </ul>
+        </div>
+        <p class="camp-diff">{{ camp.differenceFromV9 }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import images from '~/data/images.json'
+defineProps({ camp: { type: Object, required: true } })
+</script>
+
+<style lang="less" scoped>
+.camp-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: @space-lg;
+  max-width: 800px;
+  margin: 0 auto @space-xl;
+
+  .respond-md({
+    flex-direction: row;
+    text-align: left;
+    gap: @space-2xl;
+  });
+}
+
+.camp-mascot {
+  flex-shrink: 0;
+  text-align: center;
+
+  img {
+    width: 160px;
+    height: auto;
+    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
+  }
+}
+
+.camp-intro {
+  flex: 1;
+}
+
+.camp-content { max-width: 800px; margin: 0 auto; }
+.camp-positioning { font-size: @font-size-base; color: @color-text-secondary; line-height: @line-height-loose; }
+.camp-activities { margin-bottom: @space-lg;
+  h3 { font-size: @font-size-md; margin-bottom: @space-md; }
+  ul { display: flex; flex-direction: column; gap: @space-sm; }
+  li { font-size: @font-size-base; color: @color-text-secondary; padding-left: @space-md; position: relative;
+    &::before { content: '·'; position: absolute; left: 0; color: @color-primary; }
+  }
+}
+.camp-diff { font-size: @font-size-base; color: @color-text-muted; padding: @space-md; background: @color-bg-white; border-radius: @border-radius-md; }
+</style>

components/products/VersionCompare.vue

@@ -0,0 +1,93 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <CommonSectionTitle title="V8 → V9 升级对比" subtitle="7项关键升级一目了然" />
+      <div class="compare-wrapper">
+        <div class="compare-table">
+          <div class="compare-head">
+            <span class="compare-head-old">{{ compare.headers[0] }}</span>
+            <span class="compare-head-new">{{ compare.headers[1] }}</span>
+          </div>
+          <div v-for="(row, i) in compare.rows" :key="i" class="compare-row">
+            <span class="compare-old">{{ row[0] }}</span>
+            <span class="compare-new">{{ row[1] }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  compare: { type: Object, required: true }
+})
+</script>
+
+<style lang="less" scoped>
+.compare-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.compare-table {
+  border-radius: @border-radius-md;
+  overflow: hidden;
+  border: 1px solid @color-border;
+}
+
+.compare-head {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.compare-head-old {
+  font-weight: @font-weight-medium;
+  text-align: center;
+  background: @color-bg-gray;
+  color: @color-text-muted;
+}
+
+.compare-head-new {
+  font-weight: @font-weight-medium;
+  text-align: center;
+  background: @color-primary;
+  color: #fff;
+}
+
+.compare-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-top: 1px solid @color-border;
+  line-height: @line-height-base;
+}
+
+.compare-old {
+  color: @color-text-muted;
+  background: @color-bg-white;
+}
+
+.compare-new {
+  color: @color-text-primary;
+  background: @color-primary-bg;
+  font-weight: @font-weight-medium;
+}
+
+// mobile-first: 小屏紧凑，md 以上舒适
+.compare-row, .compare-head {
+  font-size: @font-size-xs;
+
+  .respond-md({
+    font-size: @font-size-sm;
+  });
+}
+
+.compare-old, .compare-new,
+.compare-head-old, .compare-head-new {
+  padding: @space-sm @space-md;
+
+  .respond-md({
+    padding: @space-md @space-lg;
+  });
+}
+</style>

components/products/VersionHighlights.vue

@@ -0,0 +1,58 @@
+<template>
+  <section class="section section--gray">
+    <div class="container">
+      <CommonSectionTitle title="更多V9亮点" subtitle="独家资源 · 自营服务 · 全程无忧" />
+      <div class="highlights-list">
+        <div v-for="item in highlights" :key="item.text" class="highlight-item">
+          <span class="highlight-label">{{ item.label }}</span>
+          <span class="highlight-text">{{ item.text }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  highlights: { type: Array, required: true }
+})
+</script>
+
+<style lang="less" scoped>
+.highlights-list {
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.highlight-item {
+  display: flex;
+  align-items: baseline;
+  gap: @space-md;
+  padding: @space-md 0;
+  border-bottom: 1px solid @color-border;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.highlight-label {
+  flex-shrink: 0;
+  font-size: @font-size-xs;
+  font-weight: @font-weight-bold;
+  color: @color-primary;
+  background: @color-primary-bg;
+  padding: @space-xs @space-sm;
+  border-radius: @border-radius-sm;
+  min-width: 42px;
+  text-align: center;
+}
+
+.highlight-text {
+  font-size: @font-size-base;
+  color: @color-text-secondary;
+  line-height: @line-height-base;
+}
+</style>

components/products/VersionPhilosophy.vue

@@ -0,0 +1,82 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <CommonSectionTitle title="9次迭代背后的产品哲学" subtitle="不是做加法，而是做取舍" />
+      <div class="philosophy-wrapper">
+        <div class="philosophy-list">
+          <div v-for="item in philosophy" :key="item.label" class="philosophy-item">
+            <h4 class="philosophy-label">{{ item.label }}</h4>
+            <p class="philosophy-text">{{ item.text }}</p>
+          </div>
+        </div>
+
+        <div class="quote-block">
+          <p class="quote-text">"{{ quote.text }}"</p>
+          <span class="quote-author">—— {{ quote.author }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  philosophy: { type: Array, required: true },
+  quote: { type: Object, required: true }
+})
+</script>
+
+<style lang="less" scoped>
+.philosophy-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.philosophy-list {
+  margin-bottom: @space-2xl;
+}
+
+.philosophy-item {
+  padding: @space-lg 0;
+  border-bottom: 1px solid @color-border;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.philosophy-label {
+  font-size: @font-size-base;
+  font-weight: @font-weight-bold;
+  color: @color-text-primary;
+  margin: 0 0 @space-xs;
+}
+
+.philosophy-text {
+  font-size: @font-size-sm;
+  color: @color-text-secondary;
+  line-height: @line-height-base;
+  margin: 0;
+}
+
+.quote-block {
+  text-align: center;
+  padding: @space-2xl;
+  background: @color-primary;
+  border-radius: @border-radius-lg;
+  color: #fff;
+}
+
+.quote-text {
+  font-size: @font-size-md;
+  line-height: @line-height-loose;
+  margin: 0 0 @space-lg;
+  color: #fff;
+  font-weight: @font-weight-medium;
+}
+
+.quote-author {
+  font-size: @font-size-sm;
+  color: rgba(255, 255, 255, 0.85);
+}
+</style>

components/products/VersionTimeline.vue

@@ -0,0 +1,175 @@
+<template>
+  <section class="section section--gray">
+    <div class="container">
+      <CommonSectionTitle :title="title" :subtitle="subtitle" />
+      <div class="timeline-wrapper">
+        <div class="timeline">
+          <div v-for="v in timeline" :key="v.version" class="version-block">
+            <div class="version-dot" :class="{ 'version-dot--first': v.version === timeline[0].version }"></div>
+            <div class="version-header">
+              <span class="version-tag">{{ v.version }}</span>
+              <span class="version-date">{{ v.date }}</span>
+            </div>
+            <h4 class="version-title">{{ v.title }}</h4>
+            <ul class="change-list">
+              <li
+                v-for="(c, i) in v.changes"
+                :key="i"
+                :class="'change-' + c.type"
+              >{{ c.text }}</li>
+            </ul>
+            <div v-if="expandedVersion === v.version" class="version-reason">
+              {{ v.reason }}
+            </div>
+            <button
+              class="reason-toggle"
+              @click="expandedVersion = expandedVersion === v.version ? '' : v.version"
+            >
+              {{ expandedVersion === v.version ? '收起' : '为什么这样改？' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  timeline: { type: Array, required: true },
+  title: { type: String, default: '历史版本' },
+  subtitle: { type: String, default: 'V1到V8的完整迭代记录' },
+})
+
+const expandedVersion = ref('')
+</script>
+
+<style lang="less" scoped>
+.timeline-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.timeline {
+  position: relative;
+  padding-left: 24px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 8px;
+    bottom: 8px;
+    width: 1px;
+    background: linear-gradient(180deg, @color-primary, @color-border);
+  }
+}
+
+.version-block {
+  position: relative;
+  padding-bottom: @space-xl;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.version-dot {
+  position: absolute;
+  left: -24px;
+  top: 6px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: @color-border;
+}
+
+.version-dot--first {
+  background: @color-primary;
+}
+
+.version-header {
+  display: flex;
+  align-items: baseline;
+  gap: @space-sm;
+  margin-bottom: @space-xs;
+}
+
+.version-tag {
+  font-size: @font-size-lg;
+  font-weight: @font-weight-bold;
+  color: @color-text-primary;
+}
+
+.version-date {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+}
+
+.version-title {
+  font-size: @font-size-base;
+  font-weight: @font-weight-medium;
+  color: @color-text-secondary;
+  margin: 0 0 @space-md;
+}
+
+.change-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 @space-sm;
+}
+
+.change-list li {
+  font-size: @font-size-sm;
+  line-height: @line-height-loose;
+  color: @color-text-secondary;
+  padding-left: 18px;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    left: 0;
+    font-size: 12px;
+    font-weight: @font-weight-bold;
+  }
+}
+
+.change-add::before {
+  content: '+';
+  color: @color-primary;
+}
+
+.change-remove::before {
+  content: '−';
+  color: @color-text-muted;
+}
+
+.change-update::before {
+  content: '△';
+  color: @color-accent;
+}
+
+.version-reason {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+  line-height: @line-height-loose;
+  padding: @space-md @space-lg;
+  background: @color-bg-white;
+  border-radius: @border-radius-sm;
+  border-left: 3px solid @color-primary;
+  margin-bottom: @space-xs;
+}
+
+.reason-toggle {
+  background: none;
+  border: none;
+  color: @color-primary;
+  font-size: @font-size-xs;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>

components/products/VersionUpgrades.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <CommonSectionTitle title="2026年核心升级" subtitle="基于客户反馈的三大重磅升级" />
+      <div class="upgrades-list">
+        <div v-for="item in upgrades" :key="item.name" class="upgrade-item">
+          <div class="upgrade-header">
+            <span class="upgrade-tag">{{ item.tag }}</span>
+            <h3 class="upgrade-name">{{ item.name }}</h3>
+          </div>
+          <p class="upgrade-desc">{{ item.description }}</p>
+          <div class="upgrade-reason">{{ item.reason }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  upgrades: { type: Array, required: true }
+})
+</script>
+
+<style lang="less" scoped>
+.upgrades-list {
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: @space-xl;
+}
+
+.upgrade-item {
+  padding-bottom: @space-xl;
+  border-bottom: 1px solid @color-border;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.upgrade-header {
+  margin-bottom: @space-md;
+}
+
+.upgrade-tag {
+  display: inline-block;
+  background: @color-primary;
+  color: #fff;
+  font-size: @font-size-xs;
+  font-weight: @font-weight-medium;
+  padding: @space-xs @space-md;
+  border-radius: @border-radius-full;
+  letter-spacing: 2px;
+  margin-bottom: @space-sm;
+}
+
+.upgrade-name {
+  font-size: @font-size-lg;
+  font-weight: @font-weight-bold;
+  color: @color-text-primary;
+  margin: 0;
+}
+
+.upgrade-desc {
+  font-size: @font-size-base;
+  color: @color-text-secondary;
+  line-height: @line-height-loose;
+  margin-bottom: @space-md;
+}
+
+.upgrade-reason {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+  line-height: @line-height-base;
+  padding: @space-md @space-lg;
+  background: @color-bg-gray;
+  border-radius: @border-radius-sm;
+  border-left: 3px solid @color-primary;
+}
+</style>